Wizard Documentation

Tutorial

This tutorial will guide you on how to use the Application Template Wizard to create and generate a Shopping Cart application. We assume that you have already reviewed the material in the other sections of this help file and are familiar with the general layout and workings of the Application Template Wizard.

The generated application will offer users login protection and an electronic catalog that is a list of products. Users will be able to select a product from the list, see a description, and add it to their shopping cart. The resulting shopping cart application will have the following web pages:

• Welcome
• Login
• New user
• Products catalog
• Product details
• Add to cart
• Cart contents
• Cashier/checkout

When users first open the generated shopping cart application, they are prompted to either log in using their user ID and password, or register as new users. Registered users are presented with a login screen where they can enter their login details, while new users are presented with a form where they can enter their personal information and then submit the form in order to register.

Once the user has logged in, the application opens a web page that includes the company logo at the top, and a menu at the left, offering three choices: Catalog, which opens the electronic list of cataloged items; Cart, which presents a list of the shopping cart's contents, including the name, amount, and price of each item; and Purchase, which allows users to purchase the items in their cart.

Aside from displaying a list of the catalog contents, the Catalog offers users the opportunity to search for a product by name, by category or by both criteria, see details of a selected item, or add any product to their shopping cart.

As a creator of this application, you are free to choose from several variations. For example, if the application is destined for your company's internal use and you do not wish to allow new users to register, you can make sure the Registration feature is not selected on the Application Features form. This variation may occur if you are using this application for a health clinic where doctors will be able to view a patient's name and add prescriptions for medication to their 'cart'. In this case, you would not want to allow new users to register and see the list of patients or medications.

Another variation of this application could be removing the shopping cart feature for an application that does not involve purchases. For example, to let users browse through an electronic collection of items. In this case, make sure the Shopping Cart feature on the Application Features page is not selected. The resulting application will be generated without the Cart link and without the pages that show users the cart contents or request their purchase details and billing information.

Follow these step-by-step instructions to proceed through the wizard and generate a shopping cart application. The Application Template Wizard is installed with a Cloudscape database named SHOPPING for your convenience in using this tutorial.

1. Open the Application Template Wizard in the Eclipse Web perspective.
   1. Click the Application Templates Wizard icon from the toolbar. The wizard opens at the Template Selection page.
   2. Click the Tutorial category in the library window at the left.
   3. Click on the Shopping Cart template to select it. You can see the description of the selected template at the bottom of the page.

2. Click Next. The Application Information form is displayed. This may take a few seconds.
   1. Type in a Project name, for example, Shopping Cart.
   2. Leave the default Location option selected for your generated files. The Application Templates Wizard places all generated code in the Eclipse workspace default location.
   3. Enter a short Description and type your name in the Author field.

3. Click Next. The Application Properties form is displayed. As you can see, the roadmap at the left indicates that we have advanced to the Properties task.
   1. Select the desired Type of code generated. For now, Struts is the only available application type. Future versions of the Application Template Wizard will support other options.
   2. Select the Style. You may choose between the following styles: roses or ocean.
   3. Click the down arrow to select ShoppingCart as the Company logo.

4. Click Next. The Application Features form is displayed. Note, when you click on the text label of any checkbox option, you'll see the text description for that option at the bottom of the form. By default, all the available features are selected when the form first opens.
   1. Make sure the Registration checkbox option is selected. This will enable new users to register in case they don't already have an ID and password.
   2. Make sure the Shopping Cart checkbox option is selected. This will allow users to collect their order and then 'check out' to purchase their selection.

5. Click Next. The Data Source Connection form is displayed.
   The fields in this form may already contain information if you previously entered details in your Eclipse Preferences dialog (described in Setting Preferences). If the Next button is not enabled, you must change the settings as described in the following steps; otherwise, you may change the settings if you desire.
   1. Click the Change button to open the Database Properties dialog.
   2. Fill in the Database name and verify that the Database vendor type is correct.
   3. Click Finish to close the Database Settings dialog.
   4. Enter a User ID and Password if you do not wish to use the ones currently displayed or if you did not previously enter a user ID and password.
   5. Click the Connect to Database button to connect to the specified database. This may take a few seconds.

6. Click Next. The Data Source Mapping form is displayed.
   There are four data sources all together for the Shopping Cart template: Cart, Catalog, Orders, and Users. The bottom of the form contains a description of the data source being mapped on this form. Note, at the time of writing this document, the mapping supports only one table per data source. In order to map each of the four data sources for the shopping cart template, you must click the Next button after mapping one data source table to get to a new table for another data source. Therefore we will now proceed to fill out a form for each data source (table) that is adjustable for the current application template. Future versions will support mapping to different tables within a single data source.
   Available columns are ones that match the type of the field listed. Only columns defined as unique identifiers (primary key) are available for unique identifier fields. These appear mapped in the tutorial. You should see the fields: nickname, product_name, units_on_order, and price. These are the fields that have been defined in the Shopping Cart template for the Cart data source.
   Note: You can only map predefined fields if they have unmapped fields.
   To map predefined fields:
   
   1. Click in the first field name and then click the Edit button. The Edit dialog opens where you can set the names of the table and column that correspond to the selected field.
   2. Click in the Table entry to map the table name.
   3. Click in the Column entry to click the down arrow and then choose a column.
   4. Click OK to close the Edit dialog.
   5. Next, we will add in a custom field. To do this, click the Add button. An 'Add Data Source Field' dialog opens. The default field name is comment. The 'Table' field is set to: CART and the 'Column' field is set to: COMMENT.
      Change the field name to user comment. Click OK.
   6. Click Next. The Data Source:Catalog form is displayed. Click Add . Type in the field name 'Supplier'. Choose 'supplier' in the corresponding Column entry. Click OK.
   7. Click Add to add a second custom field. This time, enter the new field name as 'Description'. Choose 'description' in the corresponding Column. Click OK.
   8. Click Next and repeat the mapping procedure to map fields for the other data sources: 'Orders' and 'Users'.

7. Click Next. The Application Labels form is displayed. When you click on any label, a description, if supplied by the template creator, is displayed at the bottom of the form.
   1. Click in the Login label and click the Edit button. In the Edit dialog, type "Sign in" to change the label. Click OK.
   2. Click in the User Name label and click the Edit button. In the Edit dialog type 'Customer Name' to change the label. Click OK. Your changes appear listed in the form.

8. Click Next. The Web Page Titles form is displayed.
   1. For the Welcome page, click the Edit button. In the Edit dialog type "Welcome to IBM." Click OK to close the dialog.
   2. Similarly, change the title of the New User page to "New Customer" and change the title of the Cashier page to "Checkout."

9. Click Next. The Web Page Content form is displayed.
   There is a form for every Web page, where each form has a list of its views, and each view displays a single subset of one of the data sources.
   In the combo-pulldown, you should see a list of all the views for which you can define custom fields. If the view selected has no custom fields previously defined, the Displayed Custom Fields list will be empty.
   For example, for the New User page, there is only one view called New User. Because we did not add any custom fields to this data source, the Displayed Customs Fields list will be empty.
   1. Click Next. The Products Catalog page/view is displayed. In this form, the Add button is enabled because we previously defined 'supplier' and 'description' as custom fields for this page.
   2. Click the Add button and then enter the Caption "Supplier."
   3. In the Field entry use the combo-pulldown list to select 'supplier'. Click OK.
   4. Follow the same procedure to set up the caption for the custom field 'description'.
   5. Click Add Data Source Custom Field to create a completely new custom field for the expiry date of a product. The Data Source Custom Fields dialog opens with a list ready for custom fields.
   6. Click Add and type in the field name 'Expiry date'.
   7. Map this custom field to the Table named PCatalog and select expiry_date from the corresponding Column entry.
      
   8. Click Finish. The custom fields will appear automatically in the Displayed Customs Fields list.

10. Click Next for each subsequent web page form. We will not be adding further custom fields in this tutorial.
11. Click Finish. You should see the generation progress bar. The Wizard closes when code generation has completed successfully. This may take a few minutes, depending on the speed of your computer.
12. We will now run the generated application.
    1. From the Eclipse J2EE Navigator, right-click on the Shopping Cart application and choose Run on server from the control popup menu.
    2. In the dialog that is opened, choose a WebSphere v5.0 Test Environment server.
    3. Click Finish. You should see the resulting application. This may take a few seconds.