Code On Time: AJAX

Blog

AJAX

Sunday, June 2, 2013Print Subscribe

The picture below shows the standard page layout of a Web Site Factory application. The page features a membership bar at the top, followed by a page header and logo, a bar with application menu system, a page title, and page path. The is also a side bar on the left side of the page.

What if you want to maximize the real estate of the page and eliminate some of the standard page elements?

Using Custom CSS Classes

Start the Project Designer. In the Project Explorer, double-click on the Employees page node. Assign the following value:

Property	Value
Custom Style	Tall Wide HomePage

On the toolbar, press Browse. Class Tall hides the menu bar at the top of the page, class Wide hides the side bar and class HomePage replaces the yellow background with the standard home page background. These classes can be used in any combination.

Maximize Real Estate of The Page

If the Tall and Wide custom classes are not small enough for the requirements, the page may be reduced even further with a user control.

In the Project Explorer, right-click on Employees / container1 node, and press New Control.

Next to the User Control lookup, click on New User Control icon.

Assign the user control a name:

Property	Value
Name	Maximizer

Press OK to create the user control. Press OK again to instantiate the user control on the Employees page.

On the toolbar, press Browse to generate the user control file. When complete, right-click on Employees / container1 / control1 – Maximizer and press Edit in Visual Studio.

The user control file will open in Visual Studio. Replace the existing code with the following:

C#:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Maximizer.ascx.cs" Inherits="Controls_Maximizer" %>
<script type="text/C#" runat="server">
    protected void Page_Init(object sender, EventArgs e)
    {
        Page.Header.Controls.Add(new LiteralControl(
            "<style type=\"text/css\">" +
            "body {padding:0px!important;}" +
            // hide the membership bar
            "div.MembershipBar, div.MembershipBarPlaceholder {display:none!important;}" +
            // hide the page header and logo
            "div#PageHeader{display:none!important;}" +
            // hide the page title
            "#PageHeaderLeftSide,#PageHeaderContent," +
            "#PageHeaderRightSide{background-image:none!important}" +
            "#PageHeaderContent div.Title {display:none!important;}" +
            // hide the page path
           "#PageHeaderContent .SiteMapPath {display:none!important;}" +
            "</style>"));
    }
</script>

Visual Basic:

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="Maximizer.ascx.vb" Inherits="Controls_Maximizer" %>
<script type="text/VB" runat="server">
    Protected Shadows Sub OnInit(ByVal sender As Object, ByVal e As EventArgs) Handles MyBase.Load
        Page.Header.Controls.Add(New LiteralControl(
            "<style type=""text/css"">" +
            "body {padding:0px!important;}" +
            "div.MembershipBar, div.MembershipBarPlaceholder {display:none!important;}" +
            "div#PageHeader{display:none!important;}" +
            "#PageHeaderLeftSide,#PageHeaderContent," +
            "#PageHeaderRightSide{background-image:none!important}" +
            "#PageHeaderContent div.Title {display:none!important;}" +
           "#PageHeaderContent .SiteMapPath {display:none!important;}" +
            "</style>"))
    End Sub
</script>

Switch back to the browser, and refresh the Employees page. Note that all page elements except the views and any page body styles have been hidden.

Labels: AJAX, Application Factory, Data Aquarium Framework, Web 2.0

Tuesday, August 7, 2012Print Subscribe

Debugging Custom Input Elements

Implementation of input element enhancements may be very simple or demand a relatively complex code. The client input elements are written in JavaScript and may require debugging.

The first instinct of any developer is to write some code, run the app, and try the code in action. Developing and debugging a custom input element with the entire web application project may become unproductive – you need to sign in, navigate to the correct page, select a view to force the custom input element to be activated. Each step takes valuable time.

We recommend creating a test HTML page and debugging the app without touching the actual application.

Let’s consider creating a test HTML page for the Reorder Level Slider input element shown in this screen shot of a live application.

If you have followed the instruction from the tutorial then you have the following folder structure under [Documents]\Code On Time\Client folder.

Create the HTML file ReorderLevelDebugger.htm with the following content in Visual Studio or your favorite text editor.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Edtior Debugger</title>
    <link type="text/css" rel="Stylesheet" href="../../../Library/_Client/Stylesheets/_System/_System.css" />
    <script type="text/javascript" src="../../../Library/Data Aquarium/Scripts/_System.js"></script>
    <!-- 
         Important: 
         link the file(s) that you are debugging after the reference to _System.js 
     -->
    <script type="text/javascript" src="ReorderLevelSlider.js"></script>
    <script type="text/javascript">
        // this code is the emulation of steps executed by the client library
        var reorderLevelEditorFactory = null;
        $(function () {
            // create a slider factory object
            reorderLevelEditorFactory = new MyCompany$ReorderLevelSlider()
            // initialize the debugging buttons
            $('#Attach').click(function () {
                reorderLevelEditorFactory.attach($('#Input1').get(), 'Form');
            });
            $('#Detach').click(function () {
                reorderLevelEditorFactory.detach($('#Input1').get(), 'Form');
            });
        });
    </script>
</head>
<body>
    <div>
        Testing the "Reorder Level" slider:
    </div>
    <div>
        <button id="Attach">
            Attach</button>
        <button id="Detach">
            Detach</button></div>
    <div style="border: solid 1px silver; padding: 8px; margin-top: 8px;">
        <input type="text" id="Input1" value="35" />
    </div>
</body>
</html>

The file declares a script block with the global instance of MyCompany$ReorderLevelSlider object. The startup script also assigns click handlers for Attach and Detach buttons declared in the page body. The script header links the system script and stylesheet included by the code generator in every application.

Save the file and open it in the web browser. This is how the page is rendered in Internet Explorer 9 if you click on the file name in Windows Explorer.

You will need to allow execution of JavaScript in the local webpage. This will not be necessary if you preview the page by selecting View in Browser (Ctrl+Shift+W) in the Visual Studio development environment.

Click Attach button to see the slider attached to the input field.

Move the slider to try it out.

Click Detach button to see the slider removed.

Buttons Attach and Detach invoke the corresponding methods of the “factory” object to associate custom input enhancement with the input field and to have them removed. This is exactly the same pattern of execution by the client library in the live web application.

Labels: AJAX, JavaScript, User Interface, Web Application Generator

Wednesday, July 18, 2012Print Subscribe

Activating Custom Input Controls at Runtime

Client library automatically assigns a calendar behavior to all date-time input elements. This is the example of the calendar displayed next to input elements of Order Date, Required Date, and Shipped Date fields in the Orders form of the Northwind sample.

With a very little effort you can introduce an alternative calendar for all input elements rendered for the fields representing dates.

Start by enabling shared business rules in the application settings and re-generate the project.

Create the file [Documents]\Code OnTime\Client\Sample Editors\DatePicker.js and enter this script.

// The "factory" object for DateTime input elements
MyCompany$DatePicker = function () {
}

MyCompany$DatePicker.prototype = {
    // This method is invoked for an input element of a data controller field
    // associated with the editor. Return 'true' if no other editors are allowed.
    attach: function (element, viewType) {
        // hide the "calendar" button next to the input element
        $(element).next().hide();
        // attach a jQuery datepicker to the input element
        $(element).datepicker();
        return true;
    },
    // This method is invoked by the client library before the input element
    // of the field is destroyed. Return 'true' if no other editors are allowed.
    detach: function (element, viewType) {
        // detach the datepicker from the input element
        $(element).datepicker('destroy'); 
        return true;
    }
}

Start the code generator and the script will be integrated in the client library.

Activate Project Designer and click Browse to cause the application to be generated. Hit the browser Refresh button to ensure that the latest version of the client library is downloaded.

Switch to Project Designer and click Develop button on the toolbar. Visual Studio or Visual Web Developer will start. Open ~/App_Code/Rules/SharedBusinessRules.cs(vb) file and enter the following code.

C#:

using System;
using System.Data;
using System.Collections.Generic;
using System.Linq;
using MyCompany.Data;

namespace MyCompany.Rules
{
    public partial class SharedBusinessRules : MyCompany.Data.BusinessRules
    {
        
        public override bool SupportsVirtualization(string controllerName)
        {
            return true;
        }

        protected override void VirtualizeController(string controllerName)
        {
            NodeSet().Select("field[@type='DateTime']").Attr("editor", "MyCompany$DatePicker");
        }
    }
}

Visual Basic:

Imports MyCompany.Data
Imports System
Imports System.Collections.Generic
Imports System.Data
Imports System.Linq

Namespace MyCompany.Rules
    
    Partial Public Class SharedBusinessRules
        Inherits MyCompany.Data.BusinessRules

        Public Overrides Function SupportsVirtualization(controllerName As String) As Boolean
            Return True
        End Function

        Protected Overrides Sub VirtualizeController(controllerName As String)
            NodeSet().Select("field[@type='DateTime']").Attr("editor", "MyCompany$DatePicker")
        End Sub
    End Class
End Namespace

The methods of the shared business rules class will adjust the definition of data controllers with the help of virtualization node sets. The method VirtualizeController selects all date-time fields and assigns the custom editor at runtime.

Save the file and browse the application from the generator or directly in development environment. Date-time input elements in the entire app are now featuring a new calendar based on jQuery UI date picker.

Make sure to refresh the app when the first page is displayed in the web browser to ensure that the latest version of the custom scripts has been loaded.

Labels: AJAX, JavaScript, User Interface, Web Application Generator