Code On Time: User Interface

Blog

User Interface

Sunday, August 10, 2008Print Subscribe

Presenting Multiple Views of the Same Data

Ability to see multiple views of the same data is an invaluable tool for the end users of your applications. It provides increased productive due the reduced time spent while searching for data.

Let's generate a Data Aquarium Framework application from the Northwind database and research the multiple view presentation capabilities of the framework. If you run the application and select Customers option from the drop down at top of the page then the following view of customers is displayed.

At the right side of the blue tool bar above the grid you can see the orange view selector that shows Customers in it. You can expand the list of views to provide alternative presentation of data without any coding.

Suppose you want to display phone and fax information on screen and don't really care if the customer ID is available. Open the ~/Controllers/Customers.xml data controller descriptor file in Visual Studio 2008 and add the following markup in the views section:

    <view id="grid2" type="Grid" commandId="command1" label="Phone/Fax">
      <headerText>List of customers with phone and fax. </headerText>
      <dataFields>
        <dataField fieldName="CompanyName" columns="40" />
        <dataField fieldName="Phone" columns="24" />
        <dataField fieldName="Fax" columns="24" />
        <dataField fieldName="Country" columns="15" />
        <dataField fieldName="ContactName" columns="30" />
        <dataField fieldName="ContactTitle" columns="30" />
      </dataFields>
    </view>

This is how the data will be presented if you refresh the page and select the name of the new view in the view selector. Notice that each view maintains its own sorting, adaptive filtering, and current page when you switch from one view to another.

You may also provide an alternative query to produce data displayed in the view. Imagine that you want to have a quick way to list all customers from United States of America. You will need to define the following command in commands section of the data controller:

    <command id="command2" type="Text">
      <text>
        <![CDATA[
select
    "Customers"."CustomerID" "CustomerID"
    ,"Customers"."CompanyName" "CompanyName"
    ,"Customers"."ContactName" "ContactName"
    ,"Customers"."ContactTitle" "ContactTitle"
    ,"Customers"."Address" "Address"
    ,"Customers"."City" "City"
    ,"Customers"."Region" "Region"
    ,"Customers"."PostalCode" "PostalCode"
    ,"Customers"."Country" "Country"
    ,"Customers"."Phone" "Phone"
    ,"Customers"."Fax" "Fax"
from "dbo"."Customers" "Customers"
where
  "Customers"."Country"='USA'
]]>
      </text>
    </command>

Also add the following view in the views section:

    <view id="grid3" type="Grid" commandId="command2" label="USA Customers">
      <headerText>List of customers from United States of America. </headerText>
      <dataFields>
        <dataField fieldName="CompanyName" columns="40" />
        <dataField fieldName="ContactName" columns="30" />
        <dataField fieldName="ContactTitle" columns="30" />
        <dataField fieldName="Address" />
        <dataField fieldName="City" columns="15" />
        <dataField fieldName="Region" columns="15" />
        <dataField fieldName="PostalCode" columns="10" />
        <dataField fieldName="Phone" columns="24" />
      </dataFields>
    </view>

View grid3 is referring to command2 in the commandId attribute of the view element.

The following presentation will be available to application users from now on. Independent sorting, paging, and current page are automatically maintained for this view as well.

Notice that all views are instantly available in any data lookups that are referring to Customers data controller. Verify that by navigating to the orders screen. Select any order and edit the record. Click on the Customer Company Name link and try selecting the views that we have defined.

Data Aquarium Framework provides unparalleled ease and flexibility in defining custom presentation views of your data.

Labels: AJAX, ASP.NET 3.5, Data Aquarium Framework, User Interface, Web 2.0

Wednesday, August 6, 2008Print Subscribe

Using "roles" and "writeRoles" Attributes with Fields and Actions

Data Aquarium Framework allows controlling user access to the fields and actions defined by data controller based on user roles. The standard ASP.NET security infrastructure is being utilized to determine the role of the current user. You must enable any form of authentication supported by ASP.NET to be able to use this features.
Element “field” in the “/dataController/fields” section has attributes “roles” and “writeRoles”. The first attribute specifies a space- or comma-separated list of roles allowed to read the field. If “roles” element is not present or defined as a blank string then any user is allowed to see the field presented in the views. If “roles” attribute is not blank then a call
HttpContext.Current.User.IsInRole(role)
is executed by the framework to see if the field should be visible in the presentation views defined in the data controller XML file.
Attribute “writeRoles” specifies the roles that user must have in order to be able to change the field content.
Element “action” of any “/dataController/actions/actionGroup” section allows specifying user roles that are allowed to execute that action. If the attribute is not present or blank then the action is available to everyone. If a space- or comma-separated list is present then the framework will ask ASP.NET to see if the user does have one of this roles before this action is allowed to be displayed and executed in the views defined in the data controller file.
Notice that the same action may be defined in multiple actions group. For example, the standard generated definition of the data controller will have “Delete” action defined twice in the action group with scope “Grid” and twice in the action group with scope “Form”. You have to make sure that the same list of roles allowed to execute the “Delete” action is duplicated in all four instances.
Let’s try the real example. This example assumes that you do have SQL Server 2005 Express Edition installed on your development machine.
Generate a Data Aquarium project for the Northwind database. Open the web site with Visual Studio 2008 or Visual Web Developer Express 2008 and add a form named Login.aspx to the root of the new web site. Switch this form to design mode and drop Login control on the form. Save the form. Here is the snippet of your from text with the Login control in it.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:Login ID=Login1 runat=server></asp:Login>
    </div>
    </form>
</body>
</html>
Select “Website ASP.NET Configuration” menu option in Visual Studio and enable security for our sample application. Indicate that your users are visiting your site from Internet. Specify that you want to enable roles. Create two roles named Admin and User. Create two user accounts, one for each role, and make sure to memorize their user names and password. Create an access rule that denies anonymous user access to the root of your web site. The configuration tool will automatically insert the needed settings in to the web.config file of the sample application will create App_Data project folder with ASP.NET Membership database in it.
Start default.aspx page. You will be asked to sign in. Make sure that you can sign in with one of the user accounts that you have created. When sign in successfully the default page will display the views defined in the ~/Controllers/Employees.xml data controller configuration file. Close the browser and open that data controller file in Visual Studio.
Make the following changed in the definition of LastName, FirstName, and Title fields.
    <field name="LastName" type="String" allowNulls="false" label="Last Name"  writeRoles="Admin"/>
    <field name="FirstName" type="String" allowNulls="false" label="First Name" writeRoles="Admin"/>
    <field name="Title" type="String" label="Title"  roles="Admin"/>
Run the application a few times while singing in with different user accounts that you have created. Notice that when you sign with account that has User role then Title field is not visible in any of the presentation views. User with Admin can see the Title field at all times.
Fields LastName and FirstName are accessible to the user with role User but this field is always read-only whenever you switch to any of the edit or insert views.
Now change the action groups to have roles attribute for command Select, Edit, and Delete as shown below.
    <actionGroup scope="Grid">
      <action commandName="Select" commandArgument="editForm1" roles="Admin,User" />
      <action commandName="Edit"  roles="Admin"/>
      <action commandName="Delete" confirmation="Delete?" roles="Admin"/>
      <action whenLastCommandName="Edit" commandName="Update" headerText="Save" />
      <action whenLastCommandName="Edit" commandName="Cancel" />
    </actionGroup>
    <actionGroup scope="Form">
      <action commandName="Edit" />
      <action commandName="Delete" confirmation="Delete?"  roles="Admin"/>
      <action commandName="Cancel" headerText="Close" />
      <action whenLastCommandName="Edit" commandName="Update" headerText="OK" />
      <action whenLastCommandName="Edit" commandName="Delete" confirmation="Delete?" roles="Admin"/>
      <action whenLastCommandName="Edit" commandName="Cancel" />
      <action whenLastCommandName="New" commandName="Insert" headerText="OK" />
      <action whenLastCommandName="New" commandName="Cancel" />
    </actionGroup>
User with administrative accounts will see no difference in the presentation views. User with role User will only Select option in the context menu of the data row in the grid view of employees. Delete action will not be allowed to that user in the form views as well.
As you can see there are plenty of declarative options to control security in the AJAX-enabled user interface without actually writing a single line of code. Any web form that is using your data controller will automatically inherit all security settings, which makes application maintenance a snap.

Labels: AJAX, ASP.NET 3.5, Data Aquarium Framework, Security, User Interface

Saturday, July 26, 2008Print Subscribe

GUI of Web Form Builder Applications

Here we will show many of the available features of an application generated with Web Form Builder code generator project.

Sorting

On the left side of the screen, you can see all the database objects discovered in your database. Clicking on an item will bring you to a list of records contained in the table. At the bottom of the list, you can page through the records by clicking on a page number. Sorting is done by clicking on the column header you wish to sort by. First click sorts in ascending order, and second click sorts in descending order. Sorting and paging are executed via client callbacks, eliminating the need for post backs, and speeding up your application.

Filtering

To create a filter, press Filter, which is located directly above the record list. A drop down and text field will appear. Select which field you wish to filter from the drop down, type in the filter criteria, and press Apply. The records will filter by your selection. Any partial or full filter will work. To remove your filter, press Cancel.

You can also use a comma to apply multiple filters, and comparison operators to further specify your filter. After applying a filter, you can still sort and page. If you choose to visit another page and return, the filter will remain, saving a lot of time. If you cancel your filter, but want to reapply it, the most recent filter will be remembered when you press Filter again.

Detail View

If you click on the first field of a record, you will be sent to the detail view of the record. All the information about the record is displayed here, as well as all the related child records. On the detail record lists, filtering and sorting is still available to you. You can edit the record by pressing Edit, delete by pressing Delete, and create a new record by pressing New.

Editing Records

When you press Edit, the form switches into editing mode. Here, you can change many of the fields. Lookup values are represented as drop down controls. Read-only lookup fields are automatically inferred from your database and correspond to the editable lookup fields of your record. When you finish editing, press Update to save all changes, or press Cancel to go back without saving. You can also click on any of the objects on the left to go straight to their respective record lists without changing.

If you try to delete certain records which causes database constraint violation, the command will be canceled and an error message will appear. This can occur because the record can have associated child records, as in the example below.

Creating New Records

To create a new record, first go to the database object in which you would like to have the new record in. Press the link where it says "Click here to create a new record." The new record screen will appear, and now you can add values to all the editable fields, and set values to lookup fields with drop down controls. Press Insert to create your new record, or Cancel to go back to the previous screen without saving. Notice that when fields with database constraints are incorrectly entered, an error message will appear.

Generating Reports

The second option above the records list allows you to generate reports of the current database object. Pressing PDF creates an Adobe PDF report. Pressing Excel creates an excel report. Image creates a .tiff file of the report. On all of these, a multi-page list will be created, showing all the fields for all the records. The date created and page number will be shown at the bottom. Report title and column headers are displayed for all of the pages. All fields are available for report generating, including those in master-detail pages. Any filters applied to the record list will also be applied to the generated report.

PDF report:

Excel report:

Image report:

This is just a short preview of some of the great user interface features that Web Form Builder applications generated with Code OnTime Generator have to offer. Find more useful resources on our support page.

Labels: ASP.NET 3.5, ASP.NET Code Generator, Reports, User Interface, Web Form Builder