Code On Time: User Interface

Monday, June 4, 2012Print Subscribe

If you would like to use a standard or third-party ASP.NET components on your pages, then a custom user control should be created and inserted in the page. Let’s add a few custom user controls and a data view to a test page.

Creating the Page

Start the Project Designer. On the action bar, click New | New Page option.

Give this page the following properties:

Property	Value
Name	Test
Index	1005
Title	Test
Path	Test
Description	This is a test page.
Style	Categories
About This Page	This page will host several user controls.
Roles	N/A

Press OK to save the page.

Adding Containers

In the Project Explorer, right click on Test page node, and select New Container.

Enter the following properties:

Property	Value
Flow	New Row
Width	33%

Press OK to save the container. Create three more containers, configured as follows:

Property	Value
Flow	New Column
Width	200px

Property	Value
Flow	New Column

Property	Value
Flow	New Row

Creating and Adding the User Controls

In the Project Explorer, right-click on Test / c100 container node, and select New Control.

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

Give this user control the following properties:

Property	Value
Name	TopLeft

Press OK to create the user control and have it selected in the User Control property.

Press OK again to save the control.

Right-click on Test / c101 container node, and choose New Control. Click on the New Record icon again, and create a new user control:

Property	Value
Name	TopCenter

Press OK to save the user control, and again to save the control. Create another control on Test / c102 container node. The new user control will have the following parameter:

Property	Value
Name	TopRight

Save the user control and control, and create another control on Test / c103 container node. The user control will use the following:

Property	Value
Name	CustomerList

Save the user control, and then the control. The logical page structure in the Project Explorer should look like the picture below.

Exit the designer, and generate the web application.

When your default web browser opens the app, navigate to the Test page. There will be four user controls on the page, in two rows.

Customizing the User Controls

Switch back to the web application generator, click on the project name, and select Develop to open the project in Visual Studio. In the Solution Explorer, double-click 0n ~\Controls\TopLeft.ascx file.

Press Ctrl+K, Ctrl+D to format the document. Add the highlighed CSS rule to the style attribute of the div element:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="TopLeft.ascx.cs" 
    Inherits="Controls_TopLeft" %>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <div style="margin: 2px; border: solid 1px silver; padding: 8px; 
            background-color:LightBlue; height: 150px;">
            uc:TopLeft</div>
    </ContentTemplate>
</asp:UpdatePanel>

Save the file. In the Solution Explorer, double-click on ~\Controls\TopCenter.ascx file.

Format the document using Ctrl+K, Ctrl+D, and enter the following CSS properties in the style attribute of the div element:

background-color: LightGreen; height: 150px;

Save the file. In the Solution Explorer, double-click on ~\Controls\TopRight.ascx file.

Format the document, and enter the following CSS properties in the style attribute of the div element:

background-color: Pink; height: 120px;

Save the file. Switch back to the web browser and refresh the page. The three top user controls will have the assigned background colors and height.

Adding a Data View

Switch back to Visual Studio. In the Solution Explorer, double-click on ~\Controls\CustomerList.ascx document,

Press Ctrl+K, Ctrl+D to format. Making sure to preserve the original <%@Control%> header, replace the UpdatePanel element in the file with the following:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <div id="Customers" runat="server">
        </div>
        <aquarium:DataViewExtender ID="dve1" runat="server" 
        Controller="Customers" TargetControlID="Customers"
            PageSize="5" ShowInSummary="true" ShowPager="false"/>
    </ContentTemplate>
</asp:UpdatePanel>

Save the file, and refresh the webpage. The customers list will load underneath the three colorful user controls.

Changing the Page Layout

Switch back to the Project Designer. In the Project Explorer, expand the Test page. Move the c103 container to the first position.

On the toolbar, press Browse. Navigate to the Test page, and you will see that the customers list will be at the top of the page, with the colorful user controls underneath.

Labels: User Interface, Web Application Generator

Monday, June 4, 2012Print Subscribe

Password Text Mode

Some applications require protected input of sensitive field values. Examples include a user password, social security number, or national id.

Let’s configure a Social Security Number field on the Employees table. Start SQL Server Management Studio. In the Object Explorer, right-click on Databases / Northwind / Tables / dbo.Employees node. Select Design option.

Add the following column:

Column Name	Data Type	Allow Nulls
SocialSecurityNumber	nvarchar(50)	True

Save your changes and refresh the Employees data controller.

Generate the project. Navigate to the Employees page and edit a record. Change the Social Security Number field value and save. The field value is visible and unprotected.

Start the Project Designer. In the Project Explorer, double-click on Employees / container1 / view1 / editForm1 / c1 – Employees / SocialSecurityNumber data field node.

Change the properties of the data field:

Property	New Value
Columns	10
Text Mode	Password

Press OK to save. On the toolbar, press Browse.

When the web app opens in the browser, navigate to Employees and select a record. The field value will be presented to the user as a series of asterisks (*).

Edit the record. The field value will be displayed as dots, and cannot be copied or otherwise extracted.

This solution is effective in preserving the confidentiality of the information.

A common practice is to reveal a part of the protected information. It may be necessary to reveal the last four digits of the Social Security Number.

Switch back to the Project Designer. In the Project Explorer, switch to the Controllers tab. Right-click on Employees / Fields node and select New Field.

Configure the field using the following values:

Property	Value
Name	SocialSecurity4Digit
Type	String
Length	50
Allow null values.	True
The value of this field is computed at run-time by SQL expression	True
SQL Formula	'*--' + SUBSTRING(Employees.SocialSecurityNumber, (LEN(Employees.SocialSecurityNumber)-3), LEN(Employees.SocialSecurityNumber))
Label	Social Security Number
Values of this field cannot be edited	True

Press OK to save the new field.

The SocialSecurity4Digit field should be visible when the form is in read mode while the SocialSecurityNumber field should not be displayed. In edit mode, the visibility of the fields will be reversed.

In the Project Explorer, right-click on Employees / Views / editForm1 / c1 – Employees category node, and select New Data Field option.

Use the following configuration:

Property	Value
Field Name	SocialSecurity4Digit
Visible When	this.get_isEditing() == false

Press OK to save the data field.

In the Project Explorer, double-click on Employees / Views / editForm1 / c1 – Employees / SocialSecurityNumber data field node.

Add the following Visible When expression:

Property	Value
Visible When	this.get_isEditing() == true

Press OK to save the data field.

On the toolbar, press Browse. Navigate to the Employees page and select a record.

The field SocialSecurity4Digit is displayed when the form is in read mode.

The field SocialSecurityNumber is displayed when the form enters edit mode.

Labels: Business Rules/Logic, Security, User Interface, Web Application Generator

Sunday, June 3, 2012Print Subscribe

Static Text with SQL Business Rules

The “Static” text mode property example copies the Unit Price from the selected product into the order detail, such as in the form below.

Use SQL Business Rules if you need to perform calculations when copying the data.

Let’s apply a 15% premium on the Unit Price for every order detail.

First, we need to clear the Copy instructions. Start the Project Designer. In the Project Explorer, switch to the Controllers tab. Double-click on OrderDetails / Fields / ProductID field node.

Clear the following property:

Property	New Value
Copy	N/A

Press OK to save the field. In the Project Explorer, double-click on OrderDetails / Fields / UnitPrice field node.

Change the following properties:

Property	New Value
The value of this field is calculated by a business rule expression.	True
Context Fields	ProductID

Press OK to save the field.

Next, let’s create the business rule to calculate the Unit Price. Right-click on OrderDetails / Business Rules node, and click on New Business Rule.

Use the following properties:

Property	Value
Command Name	Calculate
Type	SQL
Phase	Execute
Script	select @UnitPrice = UnitPrice * 1.15 from Products where ProductID = @ProductID

Press OK to save the business rule. On the tool bar, press Browse to generate the application.

Navigate to the Order Details page, and create a new record. Select a product, and you will notice that the Unit Price has been marked up by 15%.

Labels: Business Rules/Logic, User Interface, Web Application Generator