Code On Time: AJAX

Blog

AJAX

Sunday, November 8, 2009Print Subscribe

Component DataViewExtender allows control over selection mode of rows displayed in data controller grid views via SelectionMode property. The default property value is Single.

Here is the snippet of DataViewExtender definition from Customers.aspx page generated with Web Site Factory premium project from Northwind database. The SelectionMode property is set to Multiple.

<div factory:activator="Tab|Customers">
    <div id="view1" runat="server">
    </div>
    <aquarium:DataViewExtender ID="view1Extender" runat="server" 
        TargetControlID="view1" Controller="Customers" View="grid1" 
        ShowInSummary="true" SelectionMode="Multiple" />
</div>

Here is how the page is displayed in a web browser.

We will also change the data controller ~/Controllers/Customers.xml to expose a new action a6 with command argument MyCommand on the action bar.

<actionGroup id="ag5" scope="ActionBar" headerText="Actions">
    <action id="a1" commandName="ExportCsv" headerText="Download" 
       description="Download items in CSV format." />
    <action id="a2" />
    <action id="a3" commandName="ExportRowset" headerText="Export to Spreadsheet" 
       description="Analyze items with spreadsheet&lt;br/&gt; application." />
    <action id="a4" commandName="ExportRss" headerText="View RSS Feed" 
       description="Syndicate items with an RSS reader." />
    <action id="a5"/>
    <action id="a6" commandName="Custom" commandArgument="MyCommand" 
        headerText="MyCommand" description="My custom command."/>
</actionGroup>

You can see the action displayed as a menu option on action bar of the grid view grid1.

Let’s add a business rule class Class1 and link it to the ~/Customers/Customers.xml data controller via /dataController/@handler attribute as described at /blog/2009/04/filtering-and-business-rules.html and /blog/2009/04/externalfilter-and-modal-views.html.

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

public class Class1: BusinessRules
{
    [ControllerAction("Customers", "grid1", "Custom", "MyCommand", ActionPhase.Execute)]
    public void MyCommand()
    {
        foreach (string customerId in Arguments.SelectedValues)
        {
            // do something here
        }
    }
}

Property SelectedValues is an array of string values. You might need to convert each value to the appropriate data type when writing custom business rules.

Set the breakpoint inside of foreach loop, open the page in a web browser, select a few records, and execute the action. The Visual Studio debugger will show the selected values as pictured below.

Labels: AJAX, Application Factory, ASP.NET 3.5, Data Aquarium Framework

Sunday, November 1, 2009Print Subscribe

Web Site Factory Preview 3

The new premium project Web Site Factory has been released and available to active premium project subscribers. Web Site Factory is based on Data Aquarium Framework and features sophisticated page layouts and professional user interface themes modeled after Microsoft SharePoint. The entire source code is included.

The final release supports four different standard page layouts that are consistently applied to all automatically generated pages. You can use Code OnTime Designer to modify this pages and to create the new ones.

You will find the live demo projects at:

Simple Page Layout
http://dev.codeontime.com/demo/websitefactory1
http://dev.codeontime.com/demo/websitefactory2 (integrated membership)
Tabbed Page Layout:
http://dev.codeontime.com/demo/websitefactory3 (integrated membership)
Inline Page Layout
http://dev.codeontime.com/demo/websitefactory4 (integrated membership)
Stacked Page Layout
http://dev.codeontime.com/demo/websitefactory5 (integrated membership)

Simple Page Layout

Simple layout provides a single data view on each page. A field summary of the selected record is displayed on the side bar on left-hand side of the page.

Tabbed Layout

Tabbed master-detail layout will place each data view on a dedicated tab so that only one data view is visible at any time. The details of the selected master record are automatically displayed on the side bar.

Inline Page Layout

Inline master-detail layout is similar to the tabbed layout with one exception. The tabs are not displayed. A set of tasks named after each data view is displayed at the top of the side bar instead. The details of the selected master record are automatically displayed on the side bar.

Stacked Layout

Stacked master-detail layout lists all data views. This allows simultaneous access to all master and child records. The details of the selected master record are automatically displayed on the side bar. Stacked pages are usually longer than the height of the window. The side bar summary automatically keeps itself in the view when browser window content is scrolled.

Conclusion

Learn more about Web Site Factory project features at /blog/2009/10/web-site-factory-preview-2.html. The article provides screenshots of Web Site Factory applications displayed in major modern web browsers.

Labels: AJAX, Application Factory, ASP.NET, ASP.NET 3.5, Data Aquarium Framework

Monday, October 26, 2009Print Subscribe

Web Site Factory Preview 2

The preview #2 of the Web Site Factory premium project is now online.

You can access the sample application without integrated membership at http://dev.codeontime.com/demo/websitefactory1.

You can access the sample application with integrated membership at http://dev.codeontime.com/demo/websitefactory2.

Both version of application were generated by simply pointed the Code OnTime Generator to the Northwind database. The code generation process takes less than a minute. The result is a spectacular ASP.NET/AJAX application with complete source code and no external dependencies.

Features

You will immediately notice a dramatic new styling of generated application. We have modeled the user interface after increasingly popular Microsoft SharePoint. The generated code is not a Microsoft SharePoint application but it sure looks like one!

The user interface is entirely based on CSS and can be changed to whatever you like.

AJAX-enable and highly responsive user interface is consistent across all major browser, which you can see in the screenshots below.

The user interface features new multi-level menus with unlimited number of levels. The menus automatically detect page boundaries and reposition themselves appropriately. Full keyboard support is provided.

All pages are fluid and are automatically taking over the entire available browser window or scroll in the page is too long.

Optional integrated membership manager gives you a robust user and role management tool.

An AJAX-enabled context summary is displayed on the side bar when a record is selected. Automatic “See Also” box is included on the side bar to simplify navigation.

The side bar context senses when any part of it obstructed due to page scrolling and bring itself into view.

On the picture below you can see a supplier record in edit mode.

Now we have scrolled the page to the bottom and the side bar content has reacted appropriately.

Conclusion

The preview #2 is based on a simple page layout. One database table is presented per page.

The next preview will demonstrate standard variations of the user interface with master-detail relationships.

Labels: AJAX, Application Factory, Data Aquarium Framework