Creating an Application with the Application Wizard

Creating an Application with the Application Wizard
The Application Wizard allows you to quickly create an ActiveGrid Application based on tables in a database or operations in a web or local service. This chapter shows you how to automatically generate a database-driven application using the Application Wizard.
Create the Application
To create a new application with the Application Wizard, follow these steps:
1.
2.
From the File Menu select the New... option. The New dialog appears. Leave the New Project button selected and, under Type select From a Data Source (Figure 1).
Fig. 1 Create a New Application
3.
Click OK. The Choose a Data Source screen appears (Figure 2).
4.
On this screen, you can select an existing data source from a pull-down list or you can create a new one. Click the New... button.
Fig. 2 Choose a Data Source
5.
The Add Data Source screen appears. This screen allows you to select the type of database and enter appropriate connection parameters. In this tutorial, we use a simple SQLite database named db that is included with the ActiveGrid Studio.
6.
In the Add Data Source screen, make the following entries:
SampleDB
Database Type: Select SQLite from the pull-down list.
When you select a database type, any fields that are not appropriate for that database are disabled.
Database Name: Type in the path for the file, db in the ActiveGrid\petstore directory. This directory is typically installed in your home directory:
C:\Documents and Settings\my_acct\My Documents\ActiveGrid\demos\petstore\db
This a sample database that is used for the Python Pet Store sample application. The path might be slightly different depending on your operating system and the installation directory.
30
Figure   3 shows the Add Data Source screen with these selections.
Fig. 3 Add Data Source
7.
Click the Test Connection button to make sure you entered the appropriate connection parameters. If the test is not successful, check your connection parameters and test the connection again.
8.
When the connection test succeeds, click OK on the Connection Succeeded screen, then click OK on the Add Data Source screen. The Pick a Data Source screen remains.
9.
Fig. 4 Select the SampleDB Data Source
10.
Click Next. The Choose Tables screen appears. This screen allows you to select the tables for which you want to generate pages. Click the Deselect All button and then check only the Account check box (Figure 5).
Fig. 5 Choose Tables
11.
Click Next. The Page Settings screen appears. This screen prompts you to enter some general information about how you would like your application pages to be built.
12.
Title: Type in:
Account Maintenance
Footer: Type in:
Copyright 2006.
Navigation Style: Click the Left radio button.
Search Pages: Select the first five attributes item from the pull-down list.
Figure   6 shows the completed screen.
Fig. 6 Enter a Few Page Settings
13.
Click Next. The Skin Settings screen appears (Figure 7). This screen allows you to define some basic style information to be used by your application.
Fig. 7 Pick a Skin
Keep the defaults on the Skin Settings screen and click Next. The Name and Location screen appears (Figure 8). This screen specifies the folder under which the ActiveGrid Studio saves your application and its associated files. The ActiveGrid Studio automatically creates a new folder under the directory you select.
14.
Enter AccountMaint for the Project Name and then click Finish (Figure 8).
Fig. 8 Enter a Project Name and Location
The Application Wizard has now created all of the necessary files for your application.
View the Generated Files
You can see all of the files created in the the top the left panel of the ActiveGrid Studio, called the Project Panel. The Project Panel groups the application files in folders according to the role of the file within the application.
Fig. 9 Project Panel
The files you’ll be working with most often are the Page files, the Page Flow file and the Data Model file. To open any of these files in its editor, double-click on the file in the Project Panel.
15.
To run the new application, first double-click on the AccountMaint.bpel file to open the Page Flow Editor. The Page Flow Editor shows the finished application process (Figure 10).
Fig. 10 Finished Process
16.
Right-click in the Page Flow Editor and select the Run Process in External Browser option from the resulting pop-up menu.
Your application runs in a new browser window (Figure 11).
Fig. 11 Running Application
Customizing the PageFrame
The Page Frame acts as a style sheet for all other Pages. This section shows how to use the Page Editor to edit the headers and footers of the Page Frame. These changes appear on all of the Pages in the application:
17.
In the Project Panel, double-click on the PageFrame.xform file to launch the Page Editor. The Page Frame appears in the Page Editor (Figure 12).
Fig. 12 The Page Frame in the Page Editor
18.
Left-click to select the Text: element under the Page Footer named FooterGroup (Figure 13).
Fig. 13 Footer Text in PageFrame
19.
When you select an element on the Page, its properties appear in the Property Editor (Figure 14).
Fig. 14 Footer Text in Property Inspector
20.
Account Maintenance Pages .
Fig. 15 Edit the Footer text
The footer text changes to the new value in the Page Editor.
21.
Next, insert a new text element in the Page. In the Page Editor, right-click on the Text element, Account Maintenance.
22.
Fig. 16 Insert Text Element
23.
The Insert Text Component dialog appears. In the text-entry field, type the following text:
Last Updated: January 2006.
24.
Click OK. The new text element appears in the Page Editor.
Moving Elements in Pages
Move the “Last Updated” text into a different group:
1.
Left-click on the Text: Last Updated: January 2006 element and drag it down to the PageFooter group. Place it at the bottom of the group, under the Copyright text (Figure 17).
Fig. 17 PageFrame with Edits
Changing Submit Elements
To demonstrate how to change a Submit element, we change a link button to a link in the AccountSearch Page.
1.
In the Project Panel, double-click on the AccountSearch.xform file to launch the Page Editor (Figure 18).
Fig. 18 Select PageFrame
The AccountSearch Page appears in the Page Editor.
2.
Left-click to select the Button to AccountGotoInsert element. The properties for the button appear in the Property Editor.
3.
Double-click the Layout property.
4.
The Pick a Layout dialog appears. Select Link from the Layout pull-down list (Figure 19).
Fig. 19 Change Button To Link
5.
Click OK.
6.
Click the Preview... button at the bottom of the Page Editor to see a preview of the Page. The Insert Account button is now a link (Figure 20).
Fig. 20 Insert Account Link
Changing the Skins (Look and Feel)
The ActiveGrid Studio allows you to choose skins to set the overall look and feel of your application.
1.
In the Project Panel, double-click on the AccountMaint.bpel file. The Page Flow file appears in the Page Flow Editor.
2.
Right-click in the Page Flow Editor and then select the Skin Application option from the pop-up menu.
3.
Colors: Orange
Font Family: Copperplate Gothic Bold, Century Gothic, serif
Font Size: Large
Table Style: Paginating Grid
Navigation Style: Vertical Link List
Fields Container Style: Rounded Corner Group
Title Bar Style: Page Title Bar
Fig. 21 Skin Application Dialog
Change an Input Field to a Pull-down Select
You can set up an input field to be a pull-down list, so that users can pick from a set of available options. The classic example, is for a “State” input field, in which users can select the State in which they reside.
In this example, we’ll change the “State” input field in the AccountEdit Page to a pull-down select.
Import the State Table to the Data Model
In order for the AccountEdit Page to display a pull-down list of states for the user to choose from, we need to add a table to the Data Model to hold the state information.
Note: Actually, we can create this table either in the Data Model or in the Schema section of the Service Definition file.
The PetStore SQLite database already has a “state” table that we can use, so we just need to import that table into the Data Model:
1.
In the Project Panel, double-click on the file AccountMaint.xsd. The Data Model file opens in the Data Model Editor. The Data Model currently has a single table, Account, because we selected only this table when we generated the application.
2.
From the Tools menu, choose the Import Database... option. The Select Data Source screen appears.
3.
Leave the Import Tables radio button selected and click Next. The Import New Types screen appears.
4.
Click the Deselect All button.
5.
6.
Click Finish. The state table appears in the Data Model.
Add a Message Part to the Page
Next, we need to edit the Page Message so that it can hold the list of states.
1.
In the Project Panel, double-click on the AccountEdit.xform file. The Account Edit Page appears in the Page Editor.
2.
At the top of the screen, right-click on the the Page Variable section and select the Insert Page Variable... menu option (Figure 22).
Fig. 22 Edit the Page Variable
3.
The Insesrt Page Variable screen appears.
4.
In the Name field, type:
StatesList
5.
Click the Database Query radio button.
6.
From the Type pull down menu, select the AccountMaint.xsd:State option (Figure 23).
Fig. 23 Insert a Page Variable
7.
Note: Our data source has a complex type state that provides elements for state name and state code (CA, TX), and so on. By specifying AccountMaint.xsd:State as the Type, we are saying that the data we pass into the Page through this Page Variable is a complex type with these two elements, state name and state code.
If we did not have the state complex type already defined in the data source, we could define it in the schema for our application by creating it in the .wsdl file for the application, in the schema section.
8.
Create the Drop-Down List
Now we’re ready to create the drop-down list:
1.
2.
Right-click on the Page in the same place where you just deleted the input field.
3.
From the Insert Input Field menu, select the Drop Down List option (Figure 24).
Fig. 24 Insert a Drop Down List
4.
The Pick a Reference dialog appears.
5.
Fig. 25 Select State Element
The Add Choices dialog appears.
6.
Fig. 26 Add Choices
7.
Click Next. The Create a Set of Choices screen appears.
8.
Click the XPath... button next to the Type field. The Pick Top Reference screen appears.
9.
Select the StatesList Message Part and click OK.
Fig. 27 Pick the Top Reference
10.
For the Labels Column, select name.
11.
For the Values Column, select code.
12.
Fig. 28 Finish the Choice Set
13.
On the Select Choices screen, click OK.
Fig. 29 Accept the Choice Set
Label the Drop Down
To label the drop down menu, follow these steps:
1.
In the AccountEdit Page, select the Drop Down List that you just created.
2.
In the Property Editor, click the Label field. Type in State for the label property.
 
Run the Application
To run the application, open the Page Flow (AccountMaint.bpel) right-click and select the Run Process menu item. The application runs. Navigate to the Account Edit Page to see the drop down list you created.
Fig. 30 Application Running
 

ActiveGrid
ActiveGrid Studio Tutorial
Version 2.0