RADE Web Application Composer

What You Will Learn With this Use Case

This use case is intended to show you how to set up a CAA V5 build time environment required when using the Web Application Builder product. It will teach you how to design the layout of your application and how to graphically build the associated logic. Finally, it will help you through the testing phase of the generated web application on the Websphere Application Server (WAS) Test Environment embedded in IRAD.

In this use case, you are going to create a login window in which you are going to enter your ID and password. Then the password is going to be checked and a message login is going to be displayed on the second page.

Setting up Your Workspace in IRAD

Before Starting

After installing IRAD, launch launchpad.exe and select Install Websphere test environment V6.x.

Note that this installation only needs to be performed once. If Websphere® test environment V6.x is already installed, skip this step.

Before launching WAC, you need to set the JAVA_HOME variable. Otherwise, the following message will be displayed when running the Get prerequisites or the Create/Update RuntimeView commands.

You can set this variable:

• In the system variables.
• In the CAA V5 Development Environment Setup V5R17 window. In this window, select WebApplicationcomposer, double-click JAVA_HOME and enter the desired value (.jdk or jre).

Creating a Web Project

1. From the Start->Programs menu, access the IBM Rational->IBM Rational Application Developer v7.0->Rational Application Developer application.
2. In the Workspace Launcher window, click Browse... to select the directory that will  contain the data. Click OK. The  application opens.
3. From the File menu, select New, then Dynamic Web Project.
4. In the New Dynamic Web Project window, enter the name of your project in the Name field and click the Advanced> button (CAAWebApplication in this use case.)
5. In the Servlet version combo box, select 2.4.
6. In the Target server combo box, select Websphere Application Server v6.0 and click Finish.

Working With a CAA V5 Workspace

Using Web Application Builder requires to work in a CAA V5 workspace. A CAA V5 file tree is mandatory because many files are created in specific directories from this file tree. Therefore you will need at least a workspace, containing a framework and a module. It is recommended to create a Java package in your module that will be used as a location where the generated classes will be stored.

There are 2 ways to set up such a workspace in IRAD:

• If you work with Java Interactive Dashboard (JID): You can create the required CAA framework/module architecture through dedicated custom menus. For more information about the way to manage your CAA V5 workspace in IRAD, see the Java Interactive Dashboard article.

• If the Java Interactive Dashboard (JID) product is not installed: IRAD provides you with a custom menu allowing you to create your CAA V5 workspace architecture. To access it:

  Display the Navigator view in IRAD by selecting the Window menu, and select Show View->Navigator. Right-click your project name and point to Convert to WAC project. This opens a wizard where you will need to provide some information as explained below.

1. In the Convert to WAC Project window, select Mkmk (if need be), the Tool level and Next>. The levels available in the list will depend on your install. The tools are initialized. Click Close in the Initializing tools... window.
2. Click Add... in the Convert to WAC Project window to define the prerequisites of the CAA V5 workspace you are creating. A Select Directory dialog box is displayed.
3. Browse to the directory containing the runtime view and click OK.
4. Click Next> once your prerequisites are defined. The Installing Prereqs dialog box is displayed. Click Close when the installation is done.
5. Click Close in the Eclipse Setup window.
6. In the Framework name field, enter the framework name: SampleFw and click Next>.
7. In the Module name field, enter the module name: SampleMd and click Finish.

The Navigator view now displays the generated folder and the files matching the required CAA V5  workspace architecture (see picture opposite.)

The final step consists in creating a new Java package for the generated classes that will contain the generated business logic driving the behavior of your web application.

1. Expand the CAAWebApplication folder in the Navigator view.
2. Right-click the SampleFw/SampleMd.mj/src folder and select New->Other->Java->Package to display the window below. Click Next>.
3. In the Name field, enter com.dassault_systemes_sample1.
4. Click Finish when done.

Creating the Sample Web Application

In this step you will create an e-wizard controller file (.XMLCtrl file) and its dedicated resources (the generated files will be further described).

1. From the File menu, select New->Other to display the window opposite.
2. Select CAA e-application-> Web Application Builder File as shown below. Click Next>.

In the next window, you need to provide information such as the name of the generated e-wizard controller file, and the location that will be used when generating resources.

1. In the Create XMLCtrl window, expand the CAAWebApplication folder and click the SampleFw folder.
2. In the XMLCtrl new File field, enter CAAWebApplication.XMLCtrl.
3. In the Module field of the Generated code information frame, click Browse and select the SampleMd.mj module in the dialog box. Click OK.
4. In the Package field, click Browse, and select the com.dassault_systemes Java package that you previously created. Click OK.
5. Click Finish in order to generate the resources required.

		The file tree opposite gives you an overview of the generated files inside the CAA V5 workspace environment previously created: CAAWebApplication.XMLCtrl: contains the description of all graphically defined behaviors. CAAWebApplication.XMLMap: contains information required when providing data mapping definitions in behaviors. The mapping functionality of Web Application Builder isn't described in this use case, please refer to further more complex scenarios and their dedicated uses cases for more details (not yet available). CAAWebApplicationPage1.XMLDlg and CAAWebApplicationPage2.XMLDlg: these files contain the layout definition of every page of the web application. These are common files used in the CATJdialog framework architecture. CAAWebApplication.XMLNls, CAAWebApplicationPage1.XMLNls and CAAWebApplicationPage2.XMLNls: contains values for the textual elements of the web application, such as status messages and the GUI component labels. These are common files that can be used for internationalization in a CAA V5 environment. CAAWebApplication.java: this is the single controller for all your XMLDlg files that will contain the business logic of your application. Code will be automatically generated in this file according to graphical interactions made in the Behavior Editor.

You should now see the Web Application Builder editor if Open file for editing when done was checked in the creation window. If not, you can open it by double-clicking the CAAWebApplication.XMLCtrl file in the Navigator view. The Web Application Builder editor contains three tab pages referred to in the documentation as the Layout Editor, Mapping Editor and the Behavior Editor.

Defining the Layout of Your Application

The next step consists in defining the user interface of the sample web application. By default, it contains 2 main pages.

• The first page will have the typical layout of a login page, where the end-user will be able to enter his login/password information.
• The second page will display a welcome message, and a login expression dynamically generated and based on the user inputs.

The end-user will be able to go from one page to the other through a custom wizard-like toolbar located on top of every page. The Next>/Previous/Cancel buttons from the toolbar are available in every web application built with Web Application Builder. It drives the workflow of your web application related to navigation interactions.

The layout of both pages will be defined through the Layout Editor. It is an embedded version of Dialog Builder, another WAC RADE product. This scenario will give you the basic knowledge required to define the layout. For more details about the layout design, see Working with Dialog Builder.

Creating the Login Page Layout

The login page must contain 4 widgets and have a layout made up of a table with 2 columns and 2 rows:

• 1 top left label and 1 top right text field for retrieving the username value
• 1 bottom left label and 1 bottom right text field for retrieving the password value

1. In the Jdialog Builder toolbar, click the icon twice and the icon twice as well to add widgets to the first page.

JDialog Builder works with a type of layout called a Grid Layout. This layout manager is widely used among UI builders tools, and will offer much flexibility when designing your pages layout. If you experience issues when dealing with the layout, see Working with Dialog Builder.

2. Once the 4 widgets are added to the page, arrange them so that they have the same layout as shown below. (To center them, click on the 4 red lines located  around the grid.)

Once the layout is defined, you can edit the properties of the widgets called Label1 and Label2 that will display text when running the sample web application on a server. To do so, proceed as follows:

3. Right-click Label1 (or double-click it) and select Properties.
4. In the Title field, enter Username: and click OK when done.
5. Right-click Label2 (or double-click it) and select Properties.
6. In the Title field, enter Password:, check the Password property to indicate that the value should be hidden, and click OK when done. The login page should now look like the one below.

Publishing Widgets

Publishing widgets is mandatory in order to use them when graphically building the behaviors of both the login and the display pages. Publishing a widget in the process allows you to reference it in behaviors. Once a widget is published, it appears in the Outline view. Publish widgets when you know that you will use them when defining the logic of your web application.

In the login page you need to publish the text fields to use them when defining their behaviors for this page (as explained later).

1. Right-click the text field located next to the Password label, and select Properties....
2. Check Password and enter txtPassword in the variable name property field. Click OK when done.
3. Right-click the text field located next to the Username label, and select Properties....
4. Enter txtUsername in the variable name property field.
5. Click OK when done.

Creating the Display Page Layout

The display page should contain 4 widgets and have a layout arranged like a table with 2 columns and 2 rows:

• 2 top labels for displaying the welcome message
• 2 bottom labels for displaying the dynamically generated login expression

1. Access the second page of the application. To do so, you can:

   Click Next> directly in the Layout Editor. Use the Outline view and select CAAWebApplicationPage2 in it.

2. Click the icon four times and position the widget as shown below.
3. Edit the title of the top left label (Label1 in the graphic above). To do so, right-click it, select Properties, and enter Welcome: in the Title field. Click OK to validate.
4. Edit the title of the bottom left label (Label3 in the graphic above). To do so, right-click it, select Properties, and enter Generated login expression: in the Title field. Click OK to validate.
5. Publish the top right label (Label2 in the graphic above). To do so, right-click it, select Properties, and enter labUsername in the variable name field. Click OK to validate.
6. Publish the bottom right label (Label4 in the graphic above). To do so, right-click it, select Properties, and labLoginExpression in the variable name field. Click OK to validate.

Defining the Behavior of Your Application

By using the Behavior Editor, you will be able to graphically build the logic of your web application. The operations defined can be performed at runtime with events that occur on pages of your web application. These events can come from the page lifecycle or from the widgets themselves. The widget events are the ones defined by the CATJDialog framework architecture.

The operation that will be performed on the login page consists in retrieving the user inputs data and in storing them into session. At runtime, this task will be executed when the end-user clicks Next> on the login page.

The operation that will be performed on the display page consists in reading those values, printing the username on screen and dynamically generating the login expression by concatenating the username and the password values separated with a ":" character. At runtime, this task will be executed right before rendering the page.

To design behaviors for both login and display pages, create them by defining on which event they will occur through the Properties window of both pages (behaviors can also be created through the Properties window of any widget on a page but this will not be illustrated in this use case).

Once a behavior has been created, there are 2 ways to access it for editing:

• Activate a page in the Layout Editor and then switch to the Behavior Editor by selecting the behavior tab
• Use the Outline view and point to an existing behavior.

Creating the Login Page Behavior

1. Click CAAWebApplicationPage1 in the Outline View (or click Previous), and right-click an empty area in the login page in the Layout Editor to display the Properties window.
2. Enter saveInputs in the onNext field (see graphic below) and click OK to validate.
3. Click the Behavior tab or click onNext.saveInputs() in the Outline view.
4. Click the txtUsername text in the Add Widget menu and click the drawing area.   
5. Click the Session Data menu item and click the drawing area. The Create a new Session Data dialog box is displayed.

   Enter sdUsername in the Name field.

   Select String in the Type scrolling list and click OK.

6. Click txtPassword in the Add Widget menu and click the drawing area.
7. Click the Session Data menu and click the drawing area. The Create a new Session... dialog box is displayed.

   Enter sdPassword in the Name field.

   Select String in the Type scrolling list and click OK. The Behavior Editor should look like the one below:

12. Expand the txtUsername widget properties dialog box by clicking its double down arrow icon.
13. Click the Create Link sub-menu in the Tools menu, and create a link between the Text property of the txtUsername widget and the sdUsername session data. To select both input and output for a link, you can either click the property name or the plug next to it (use the left plug when the property is the output of a link, and the right plug when it is the input.)
14. Click the Create Link sub-menu, and create a link between the Text property of the txtPassword widget and the sdPassword session data. The Behavior Editor should now contain the following components and links:

Creating the Display Page Behavior

Creating a user action allows you to write code for specific needs. The code will be invoked during the execution of the behavior. When the first user action is defined for a web application, a new Java class is created. The file is located in the same package as the Java controller class. In the sample web application of this use case, the Java file for user action definitions is CAAWebApplicationUserCode.java.

To create the user action, proceed as follows:

1. Select the User Action sub-menu from the Create Component menu and click the drawing area in the Behavior Editor.
2. In the dialog box, enter buildLoginExpression in the Method Name field.
3. Click Add Input and add 2 input arguments to the method.

4. Edit the buildLoginExpression generated method matching the user action object that you created by inserting the following code in the method: return username + ":" + password;
5. Save your modifications.

Now you are going to create the page behavior.

1. Click the CAAWebApplicationPage2 in the Outline view.
2. Right-click an empty region of the display page in the Layout Editor and select Properties.
3. In the onShow field, enter displayOutputs. Click OK.
4. Click the onShow.displayOutputs() entry in the Outline view to activate the Behavior tab or click the Behavior tab.
5. Click both labUsername and labLoginExpression widgets from the Add Widget menu and click the drawing area.
6. Click both sdUsername and sdPassword session data from the Add Session Data menu and click the drawing area.
7. Click the User Action sub-menu from the Create Component menu and click an empty region in the Behavior Editor.
8. In the dialog box, enter buildLoginExpression in the Method Name field.
9. Click Add Input and add 2 input arguments to the method.

   Edit the first argument property as follows: enter username in the Name field value and select String for the Type field value. Click OK.

   Edit the second argument property as follows: enter password in the Name field value and select String for the Type field value. Click OK.

   Finally choose String as value for the Return Type field. Click OK. Click OK when done.

10. Create the following links (see result below.)

    Input: sdUsername / Output: Title property of the labUsername widget Input: sdUsername / Output: username property of the buildLoginExpression user action Input: sdPassword / Output: password property of the buildLoginExpression user action Input: return property of the buildLoginExpression user action/ Output: Title property of the labLoginExpression widget

Building the Generated Code

Activate the Web Application Builder editor and save your CAAWebApplication.XMLCtrl file if not already done.
Although the IdentityCard.h file of the SampleFw and the Imakefile.mk file of the SampleMd.mj module have been updated automatically, you cannot directly build your project without errors. The class path needs to contain the required Jar files.

There are two ways to solve these errors:

1. If Java Interactive Dashboard (JID) is installed: From the CAA Project menu, select  Update libpath based on makefile. This will automatically update your class path. To know how to create a workspace and a module, see Generating a V5 Directory Structure. To know how to set up prerequisites, see Setting up Prerequisites.
2. Without the JID product installed:

   Right-click the CAAWebApplicationSample web project name in the Navigator view, and select Properties. In the Properties for CAAWebApplicationSample dialog box, select Java Build Path and select the Libraries tab. Click Add External JARs... and browse to the installation folder (the one of your prerequisites where the runtime view can be found). Add the 4 following jar files located in the \intel_a\docs\javaserver folder and click Open and OK. CATJDialog.jar CATJsystem.jar CATJSyODT.jar CATJWACRuntime.jar PPRNBbase.jar

3. Create the runtime view of your project in IRAD. To do so, from the CAA Project menu, select Create/Update Runtime View. 

Running the Sample Web Application on a Websphere Application Server (WAS) 5.0 Test Environment

To test the generated code, you can use the WAS Test Environment embedded with IRAD. This chapter provides you with the required configuration steps before running your web application in a web browser.

1. Open the Server perspective. To do so, from the Window menu, select Show View->Servers.
2. In the Server Configuration view, right-click and select New->Server. The New Server dialog box is displayed.
3. Select WebSphere v6.0 Server and click Finish.
4. In the Servers tab, right-click WebSphere v6.0 Server@localhost, and select Start.
5. Right-click the CAAWebApplicationSample web project name in the Navigator view, and select Run->Run on Server.
6. Make sure the server previously created is selected and click Finish. Wait for the server process completion: The "open for e-business" trace should be displayed in the Console view output.
7.  In the embedded Web Browser available in the Server perspective, enter the following URL: http://localhost:9080/CAAWebApplicationSample/html/Eapp/CAAWebApplication
8. Enter the Username and the Password and click Next>.

The following page is displayed. Click Finish.

Running the Sample Web Application on the Enovia Web Application Frame

To run your web application in the Web Application Frame, the only thing that you need to do is to run CAA Project / Create/Update Runtime View if not already done.

Now you can run your sample web Application in Web Application Frame. To do so, proceed as follows:

1. Launch a Websphere Test Server (if not already done).
2. Open Internet Explorer.
3. Display Web Application Frame by entering the following URL: http://localhost:9080/WorkspaceName/portal
4. On the left part of the page, you get the WebApp Starter that shows the list of all applications built with the Web Application Builder product.
5. Double-click CAAWebApplication in the list. A page named CAAWebApplication is displayed in the bottom part of the application frame, containing the sample web application.
6. Enter the Username and the Password, click Next> to display the second page of the application.
7. When you click Finish, the CAAWebApplication application disappears.

[Top]

References

History

Copyright © 1994-2006, Dassault Systèmes. All rights reserved.