Creating an Application with the Application WizardThe 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.
1. In ActiveGrid Studio, close all open files (File > Close All).
2. Fig. 1 Create a New Application
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:
• Data Source Name: Type in:
• 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: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.
• Max Pooled Connections: Type in: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.
10. 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. Enter the following into the Settings window.
• Title: Type in:
• Footer: Type in:
• Navigation Style: Click the Left radio button.
• Search Pages: Select the first five attributes item from the pull-down list.Fig. 6 Enter a Few Page Settings
13. Fig. 7 Pick a SkinKeep 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.The Application Wizard has now created all of the necessary files for your application.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
• AccountXXX.xform. The Page files for the application. Each ActiveGrid Page represents a displayable “web page” in your application. Pages display in the Page Frame for the application. Each Page is defined in its own file. Page files are XForm files and they end in the .xform suffix.
• PageFrame.xform. The Page Frame Page file. Frames each Page in the application. Contains the Page settings that you defined in the Application Wizard. Changes made to this file affect the display of every Page in the application.
• AccountMaint.bpel. The Page Flow file. Defines the application flow, services and actions. The Page Flow file is a BPEL file, ending in the .bpel suffix. There is only one Page Flow file for each application.
• AccountMaint.xsd. The Data Model file. Describes the data source. ActiveGrid Applications use a Data Model based on the XML schema standard. The Data Model files application end with the .xsd suffix.
• AccountMaint.wsdl. The Service Definition file. Defines input messages for all the Pages in the application. If the application has external services, such as web services, the input and output messages for the service are defined in a Service Definition file. The Service Definition file is a Web Services Definition Language (WSDL) document. Service Definition files end in the .wsdl suffix.
• AccountMaint.wsdlag. This file provides a service reference for the Service Definition. You need one .wsdlag file for each .wsdl file in the application.
• AccountMaint.skn. The skins file. Defines the overall look and feel of the application.
• Calendar.js, Calender-en.js, theme.css... Files used by the skins functionality. Specifically these files allow for AJAX (“Asynchronous JavaScript + XML.”) calendar controls to be used with date fields.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.Fig. 11 Running Application
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).
18. Fig. 13 Footer Text in PageFrame
19. Fig. 15 Edit the Footer text
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:
24. Click OK. The new text element appears in the Page Editor.
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 EditsTo 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).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.
5. Click OK.
6. Fig. 20 Insert Account LinkThe 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.
• 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 BarFig. 21 Skin Application DialogYou 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.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.
3.
4. Click the Deselect All button.
6. 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:
5. Click the Database Query radio button.Fig. 23 Insert a Page Variable
7. Click OK.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.
1. In the Page Editor, right-click on the Text Input field referencing the state and select Delete from the pop-up menu.
2. Right-click on the Page in the same place where you just deleted the input field.Fig. 24 Insert a Drop Down List
4. The Pick a Reference dialog appears.Fig. 25 Select State ElementThe Add Choices dialog appears.
6. Fig. 26 Add Choices
7.
8.
9. Fig. 27 Pick the Top Reference
10.
11. Fig. 28 Finish the Choice Set
13. Fig. 29 Accept the Choice Set
1. In the AccountEdit Page, select the Drop Down List that you just created.
2.
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 |