Blog: Posts from July, 2012

Labels
AJAX(112) App Studio(7) Apple(1) Application Builder(245) Application Factory(207) ASP.NET(95) ASP.NET 3.5(45) ASP.NET Code Generator(72) ASP.NET Membership(28) Azure(18) Barcode(2) Barcodes(3) BLOB(18) Business Rules(1) Business Rules/Logic(140) BYOD(13) Caching(2) Calendar(5) Charts(29) Cloud(14) Cloud On Time(2) Cloud On Time for Windows 7(2) Code Generator(54) Collaboration(11) command line(1) Conflict Detection(1) Content Management System(12) COT Tools for Excel(26) CRUD(1) Custom Actions(1) Data Aquarium Framework(122) Data Sheet(9) Data Sources(22) Database Lookups(50) Deployment(22) Designer(177) Device(1) DotNetNuke(12) EASE(20) Email(6) Features(101) Firebird(1) Form Builder(14) Globalization and Localization(6) How To(1) Hypermedia(2) Inline Editing(1) Installation(5) JavaScript(20) Kiosk(1) Low Code(3) Mac(1) Many-To-Many(4) Maps(6) Master/Detail(36) Microservices(4) Mobile(63) Mode Builder(3) Model Builder(3) MySQL(10) Native Apps(5) News(18) OAuth(9) OAuth Scopes(1) OAuth2(13) Offline(20) Offline Apps(4) Offline Sync(5) Oracle(11) PKCE(2) Postgre SQL(1) PostgreSQL(2) PWA(2) QR codes(2) Rapid Application Development(5) Reading Pane(2) Release Notes(183) Reports(48) REST(29) RESTful(29) RESTful Workshop(15) RFID tags(1) SaaS(7) Security(81) SharePoint(12) SPA(6) SQL Anywhere(3) SQL Server(26) SSO(1) Stored Procedure(4) Teamwork(15) Tips and Tricks(87) Tools for Excel(2) Touch UI(93) Transactions(5) Tutorials(183) Universal Windows Platform(3) User Interface(338) Video Tutorial(37) Web 2.0(100) Web App Generator(101) Web Application Generator(607) Web Form Builder(40) Web.Config(9) Workflow(28)
Archive
Blog
Posts from July, 2012
Wednesday, July 18, 2012PrintSubscribe
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.

The example of the built-in calendar provided by the client library.

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

image

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.

Virtualization node sets allow easy assignment of custom input editors to the specific data controller fields at runtime.

Wednesday, July 18, 2012PrintSubscribe
Enhancing Applications with Custom Input Controls

The client library of a generated web application offers a tightly integrated suite of presentation views and input controls with automatic data binding. The library is not designed to replace the popular presentation frameworks such as jQuery or Ajax Control Toolkit. The purpose of the client library is to provide a standard extensible presentation layer of a multi-tier web application.

Consider the following screen of the Northwind sample. The standard input elements lookup, dropdown, and text are rendered in the Products form view. It is possible to replace the standard text input element of the Reorder Level field with a modern input control.

The standard input elements such lookup, dropdown, and text are rendered in the Products form view.

The application client library incorporates the entire jQuery and jQuery UI. This allows using a slider plugin for presentation purposes.

The screenshot shows the slider input control in action.

The input control for 'Reorder Level' field is replaced with a fancy slider from jQuery UI.

Input controls are implemented in JavaScript language.

Custom scripts are combined in a single file _System.js, which is included in each generated application. The code generator will automatically build this file from the scripts located under [Documents]\Code OnTime\Client\Scripts folder. The generator scans the folder every time it starts and tries to detect any changes to scripts located there. If the changes are detected, then the entire set of scripts is combined and stored in the single [Documents]\Code OnTime\Library\Data Aquarium\Scripts\_System.js file. The combined script is copied to the appropriate output folder of the project when the app is generated.

Here is how the scripts may be organized on the hard drive of your computer.

Sample contents of '[Documents]\Code OnTime\Client' folder.

Close the code generator and create the file [Documents]\Code OnTime\Client\Scripts\Sample Editors\ReorderLevelSlider.js using Visual Studio or your favorite text editor. Enter the following content and save the file.

// The "factory" object for Reorder Level input field
MyCompany$ReorderLevelSlider = function () { }
MyCompany$ReorderLevelSlider.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) {
        if (viewType != 'Form')
            return false;
        // figure the initial Reorder Level
        var reorderLevel = $(element).val();
        reorderLevel = reorderLevel == '' ? 0 : parseInt(reorderLevel);
        // mark the element and its parent with CSS classes and hide the element
        $(element)
            .hide().addClass('reorder-level-elem')
            .parent().addClass('reorder-level-parent');
        // create a 'div' element with a slider
        var slider = $('<div>').insertAfter(element)
            .width(150)
            .css({ marginTop: '4px', marginBottom: '4px' })
            .slider({
                value: reorderLevel,
                min: 0,
                max: reorderLevel < 100 ? 100 : reorderLevel,
                step: 5,
                slide: function (event, ui) {
                    // find the parent element of the ReorderLevel input
                    var parent = $(ui.handle).parents('.reorder-level-parent');
                    // change the value of the ReorderLevel input
                    $('.reorder-level-elem', parent).val(ui.value);
                    // update the label with the value of the slider
                    $('.reorder-level-label', parent).text(ui.value)
                        .css('font-weight', 'bold');
                }
            });
        // create a 'span' to be used as a slider label
        $('<div>').insertAfter(slider)
            .text($(element).val())
            .addClass('reorder-level-label')
            .css('marginBottom', '4px');
        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) {
        if (viewType != 'Form')
            return false;
        // detach the slider from the input element
        $(element).siblings('div:ui-slider').slider('destroy'); // mandatory
        $(element).siblings('span,div').remove();     // optional cleanup
        $(element).show();                            // optional call
        return true;
    }
}

The script defines a “factory” object MyCompany$ReorderLevelSlider that will be invoked by the client library to allow attaching and detaching custom input enhancements at runtime for the designated data controller fields. Methods attach and detach must return true if no other enhancements are allowed to be associated with the input field. The client library will create a single instance of a “factory” object and use is it as needed when the presentation interface of a web app is changed in response to user actions. If input elements are rendered then the factory object will be asked to attach to the inputs associated with it. If the input elements are not needed anymore then the client library will ask the “factory” object to remove any enhancements it may have created previously.

Start the web application generator. The new script will become a part of the _System.js file. It can now be used in any project that you are working on.

Activate Project Designer and select Controllers / Products / Fields / ReorderLevel field node on the Controllers tab of Project Explorer.

Field 'Reorder Level' selected in Project Explorer of Code On Time web application generator.

Change the field as follows.

Property New Value
Editor MyCompany$ReorderLevelSlider

Save the changes, click Browse button on the designer toolbar.

Make sure to refresh the application as soon as any of its pages in displayed in the browser to ensure that the most recent version of the _System.js file is downloaded.

Navigate to the Products page, select a product and start editing in a form view. The new input control will be displayed.

Tuesday, July 17, 2012PrintSubscribe
Feature: Automatic Status Bars

Form views have the ability to display a status bar, providing a quick status update for web app users without having to analyze the field values.

For example, the order record below has been shipped after the Required Date. The status bar notifies the user that the order has been delayed.

The status bar indicates that the order has been delayed.

The next order record has been shipped on time. The status bar allows the user to quickly analyze the status of the order without having to calculate dates in their head.

The status bar indicates that the order has been recently shipped.

The user can quickly tell that the following product has been discontinued.

The status bar indicates that the product has been discontinued.

Status bars are automatically constructed by specifying a status map that relies on the value of a Status field. A sample Orders status map is displayed below:

Orders.editForm1.Status: Shipped
Order Placed > Preparing your shipment > Shipped > [You should receive your item soon] >
 
Orders.editForm1.Status: Waiting To Ship
Order Placed > [We are preparing the order for shipment] > Shipped >
 
Orders.editForm1.Status: Shipped Late
Order Placed > [Oops, your order has been delayed] > We are trying to obtain your items >

If a Status field is not present in your controller, a calculated Status field can be created instead.

Continue to Read-Only Data Fields