Code On Time: Tutorials

Monday, March 5, 2012Print Subscribe

When creating a new order, the first item that will be entered will probably be the customer. Due to the denormalized nature of Northwind database, the customer information is stored in the table Customers, and the Orders table references a customer via a foreign key field CustomerID. Upon creating a new order, it would be convenient if the user were prompted to either select an existing customer or create a new one. When the customer is selected, the shipping information should be copied from the customer to the order.

Switch back to the Designer, open grid1 view under Order Form page, expand CustomerID data field, and double click on the CustomerID field.

Enter the following settings for CustomerID:

Property	Text
Data Value Field	CustomerID
Data Text Field	CompanyName
Copy	ShipName=ContactName ShipAddress=Address ShipCity=City ShipRegion=Region ShipPostalCode=PostalCode ShipCountry=Country
Search on Start	True
Activate If Blank	True
Lookup window description	Select a customer.

Press OK to save the field.

When the customer has been selected, we’d want the application to prompt the user to select the employee handling the order. To make this part easier, let’s add photos of each employee in the lookup.

Open EmployeeID data field, and double click on EmployeeID field.

Change the following settings for EmployeeID:

Property	Text
Activate If Blank	True
Lookup window description	Select an employee.

Press OK to save the record.

Switch to the Controllers tab at the bottom of the Explorer, open Employees controller, open Views, and right click on grid1. Press New Data Field.

Select a Field Name of “Photo”, and save the data field.

In the upper left corner, press Generate, and wait for the application to load. Navigate to the Order Form page, and press New Orders on the action bar. You will be prompted to select a customer.

When you search for and select a customer, you will then be prompted to select an employee. You can see the photo for each employee as well.

Select the employee, and you will see that the shipping fields have been populated from the selected customer.

Labels: Tutorials, Web Application Generator

Friday, March 2, 2012Print Subscribe

Understanding the Project

The Northwind database is a typical mail order management system.

The core of the database is composed of two tables: Orders and Order Details. Each sale is recorded in the Orders table. Items purchased are recorded in the Order Details table.

Orders table has references to Customers, Employees, and Shippers. Orders table also contains information about Order Date, Required Date, Shipped Date, Freight Amount, and the shipping details.

Order Details table refers to Products and indirectly references Categories and Suppliers. Order Details will contain a few fields taken from all of these foreign key relationships.

This is the baseline version of the orders screen, created automatically by the web application generator.

We will create a custom version of this form, to make the order entry process as friendly as possible.

Labels: Tutorials, Web Application Generator

Friday, March 2, 2012Print Subscribe

Adding the Order Form Page

Let’s create a new page in the application. Switch back to the web application generator, click on the “OrderForm” project name, and press Design.

The design environment allows you to change logical aspects of the project, and consists of two primary elements. The Project Designer, on the left side of the screen, displays a list of objects or properties of the selected object. On the right side of the screen, the Project Explorer allows you to browse and manipulate pages, controllers, and user controls. At the top of the screen, there are several buttons. The Generate button regenerates the web application and displays it in a built-in browser window, called Preview. The Browse button will regenerate the application and open it in your default browser. The Exit button goes back to the web application generator.

Let’s add a new page called Order Form. In the Designer’s action bar, press New | New Page. Give this page the following settings:

Property	Value
Name	OrderForm
Index	1005
Title	Order Form
Path	Order Form
Description	This is the order management form.
Style	Miscellaneous
About This Page	This is the order management form.
Roles	(blank)

Press OK to save the page.

We’ll need to add a container to this page to store the data views. In the Explorer, right-click on the Order Form page, and press New Container. None of the default properties need to be changed, so just press OK to save the container.

Let’s add an Orders data view. Right-click on the newly created container in the Explorer, and press New Data View. Enter the following settings for the data view.

Property	Values
Controller	Orders
View	grid1
Show Details in List Mode	False

Press OK to save the data view.

Let’s add another data view to show Order Details. Right-click on the container again and press New Data View. Enter the following settings:

Property	Values
Controller	Order Details
View	grid1
Show View Description	False
Show View Selector	False
Show Pagers	False
Page Size	300
Show Modal Forms	True
Filter Source	dv100
Filter Field	OrderID
Auto-Hide	Self

Press OK to save the data view. Press Generate in the top left corner, and wait for the Preview window to open. Log in, and you will see Order Form page on the menu bar and the site map.

Click on the Order Form link, and you will see a list of orders.

Select an order, and the order details will appear underneath.

Labels: Tutorials, Web Application Generator