Code On Time: Web Application Generator

Monday, June 25, 2012Print Subscribe

User controls are the primary mechanism for extending the user interface of generated application pages. Instances of user controls (called controls) are placed in page containers alongside data views or other controls.

User controls have their own tab in the Project Explorer.

Creating a User Control

A user control is created by clicking on New User Control icon on the toolbar.

The Project Designer window will open the New User Control form. Enter a Name for the user control, and press OK to save. It will be added to the list of user controls.

Adding User Controls to a Page

User controls can be copied onto pages or containers to add an instance of that control to the page.

Select a user control, right-click or press Shift+F10, and choose Copy option in the context menu. This will copy the user control reference to the clipboard.

Use the context menu to Paste the user control onto a page.

The control will be added in a new container at the bottom of the page.

When a user control is pasted on a container, the control will be added to the bottom of the target container.

Renaming a User Control

The context menu option “Rename” or keyboard shortcut F2 can be used to change the name when applied to a user control node.

Editing User Controls

User controls can be edited using the context menu option Edit in Visual Studio. This option is only available if the Generate property is set to “First Time Only”.

Deleting User Controls

User controls can be deleted using the context menu “Delete” option or the Delete keyboard shortcut. Corresponding controls (instances of this user control) will be deleted from the page containers.

Labels: Designer, Web Application Generator

Monday, June 25, 2012Print Subscribe

Staying in Sync

The Synchronize with Designer action selects the node in the Project Explorer corresponding to the selected item in the Designer window, allowing easy location of items and a quick way to orient yourself in the project configuration hierarchy.

For example, double-click on Customers / Orders / container1 / view1 node.

The properties page for the view will open in the Designer window.

In the Project Explorer, switch to the User Controls tab, and highlight Welcome user control.

Click on the Synchronize button on the Project Explorer, the Sync action on the Designer action bar, or press “Ctrl+.” keyboard shortcut (“Control” key pressed simultaneously with “period” key).

The Project Explorer will switch to the Controllers tab, and highlight the view1 node that was open in the Designer window.

The Sync action is also available on the context menu in the lists of project configuration elements.

Clicking on the Sync action will select the relevant node in the Project Explorer.

Focus can be switched between Designer window and Project Explorer tree by pressing “F4” keyboard shortcut.

Labels: Designer, Web Application Generator

Tuesday, June 19, 2012Print Subscribe

Multiple Edit Forms

Different edit forms can be used depending on the field values of a record. For example, the Customers table has a Postal Code column.

Customers in the United States refer to the Postal Code as a “ZIP Code”. Let’s create another edit form for customers from USA that uses the “ZIP Code” label for Postal Code, and is rendered in two columns.

Start the Project Designer. In the Project Explorer, switch to the Controllers tab. Right-click on Customers / Views node, and select New View option.

Give this view the following settings:

Property	Value
Id	editFormUSA
Type	Form
Command	command1
Label	Edit Customer from USA
Header Text	Edit the fields of this customer from USA.

Press OK to save the view. In the Project Explorer, right-click on Customers / Views / editFormUSA view node, and select New Category.

Assign the following settings:

Property	Value
Header Text	Customer Information
Description	This is information about the customer.

Press OK to save the category. In the Project Explorer, right-click on Customers / Views / editFormUSA / c100 – Customer Information category node, and select New Data Field.

Assign the data field these properties:

Property	Value
Field Name	CustomerID
Columns	5

Save the data field. Create several more data fields with the following settings:

Field Name	Columns
CompanyName	20
ContactName	20
ContactTitle	5
Phone	12

Right-click on Customers / Views / EditFormUSA view node, and select New Category.

Give the category these settings:

Property	Value
Header Text	Shipping Information
Description	This is the shipping information for the customer.
New Column	Yes

Press OK to save. Add the following data fields to this category:

Field Name	Columns	Header Text
Address	20
City	12
Region	5
PostalCode	12	ZIP Code
Country	12

Now that the new edit form has been configured, let’s change the action state machine to direct USA customers to the correct form.

In the Project Explorer, right-click on Customers / Actions / ag1 (Grid) action group node, and select New Action.

Give this action the following settings:

Property	Value
Command Name	Select
Command Argument	editFormUSA
When Client Script	[Country] == 'USA'

Press OK to save the action. In the Project Explorer, move the action into second place, after ag1 – Select.

Double-click on Customers / Actions / ag1 (Grid) / a1 – Select action node.

Change the When Client Script property:

Property	Value
When Client Script	[Country] != 'USA'

Press OK to save the action. On the toolbar, press Browse to generate the web application.

Navigate to the Customers page. Select a customer that is not from the United States. The standard edit form will be displayed.

Select a different customer with Country of “USA”. The new two-column edit form will be displayed. “Postal Code” is replaced by “ZIP Code”.

Labels: User Interface, Web Application Generator