Creating an Application to be Integrated to Modular 3Dcom

RADE Web Application Composer

Web Application Builder

Creating an Application to be Integrated to Modular 3Dcom

Creating a Picture Browser Application Using the Web Application Builder

Use Case

Abstract

This article describes the use of the input parameters in the Web Application Editor. In this use case, the user creates a 2 page-application that interacts with the Modular 3d com application and is designed to select pictures in the Modular 3d com interface and to call a Picture Browser application. This application lists the selected files on the first page, and displays a selected picture from the list on the second page.

What You Will Learn With This Use Case
Setting up Your Workspace in IRAD
Creating a Web Project
Working with a CAA V5 workspace
Creating the Picture Browser Web Application
Building the Generated Code

Defining the Layout of Your Application

Creating the First Page Layout

Creating the Second Page Layout

Defining the Behavior of Your Application

Defining the Behaviors of the First Page

Defining the Behaviors of the Second Page

Creating the Runtime View
Launching the Application on a Test Server
References

What You Will Learn With This Use Case

This use case is intended to show you how to:

Create an application that can interact with Modular 3d com and to manage input parameters.
Set up a CAA V5 build time environment required when using the Web Application Builder product.

It will also teach you how to design the layout of your application, and how to graphically build the associated logic using input parameters. 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.

[Top]

If you have already gone through the Creating Your First Web Application use case, we recommend you to work with the same Web project and the same server and refer directly to Creating the Picture Browser Web Application.
To perform this use case, you must have created a DB2 database named JSYS16. To find out more, refer to the topic titled Creating a Database and Data Source for Settings Persistency in the 3d com Installation Guide.
To perform this use case, you must have performed the 3d com use case (CAAPPRJNavigatorBaseDoc.edu\CAAPPRJNavigatorUsesCases.doc\src\CAAPPRJNBEduGraphWalker.htm). Note that the code to generate is available in: CAAPPRJNavigatorBase.edu\CAAPPRJNBEduGraphWalker.mj.

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).

[Top]

Creating a Web Project

From the Start->Programs menu, access the IBM Rational->IBM Rational Application Developer v7.0->Rational Application Developer application.
In the Workspace Launcher window, click Browse... to select the directory that will contain the data. Click OK. The application opens.
From the File menu, select New, then Dynamic Web Project.
In the New Dynamic Web Project window, enter the name of your project in the Name field, PictureBrowserApp in this use case, and click the Show Advanced>> button.
In the Servlet version combo box, select 2.4.
In the Target server combo box, select Websphere Application Server v6.0 and click Finish.
Click Yes when asked if you want to switch to the web perspective.

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 the dedicated custom menus. For more information about the way to manage your CAA V5 workspace in IRAD, see the Java Interactive Dashboard article. 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.

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 selecting the Window menu, and select Show View->Navigator.
Right-click your project name and select Convert to WAC project in the Navigator view. This opens a wizard where you will need to provide some information as explained below.

In the Convert to WAC Project window, select Mkmk (if need be), the Tool level and click Next>. The levels available in the list depend on your install. The tools are initialized. Click Close in the Initializing tools... window. A new window opens.
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.
Browse to the directory containing the runtime view and click OK.
Click Next> once your prerequisites are defined. The Installing Prereqs dialog box is displayed. Click Close when the installation is done.
Click Close in the Eclipse Setup window.
In the Framework name field, enter the framework name: SampleFw and click Next>.
In the Module name field, enter the module name: SampleMd and click Finish.

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

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

[Top]

Creating the Picture Browser Web Application

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

In the Navigator view, right-click PictureBrowserApp and select New->Other.... The New dialog box is displayed.
Select CAA e-application then Web Application Builder File as shown below. Click Next>.

In the Create XML Ctrl window, provide information such as the name of the generated e-wizard controller file, and the location that will be used when generating resources.

In the Create XML Ctrl window, expand the PictureBrowserApp \SampleFw folder and click the CNext folder.
In the XMLCtrl new File field, enter PictureBrowserApp.XMLCtrl.
In the Module field of the Generated code information field, click the Browse button and select the SampleMd.mj module in the dialog box. Click OK.
In the Package field, click the Browse button, and select the com.dassault_systemes Java package that you previously created.
Click the Next> button to access the next window.
In the Integration with ENOVIA 3dcom Modular frame, click the available check box so that the application that you are creating can interact with Modular 3d com.
In the Icon name (normal) field, click the Browse button. The Open dialog box is displayed.

Select an icon, the CAAIcon.gif in this use case, and click


   Open

The CAAIcon.gif is the icon that will be displayed in the contextual menu of your Picture Browser. This icon is located in the intel_a\resources\graphic\icons\normal directory.

In the Object type field, click Add. A dialog box is displayed.

Enter jpg in the


   Enter type:

field and click

OK

jpg corresponds to the type of file to which the application that you are building will apply. The type indicated here can be any type. You can also add more than one type by clicking Add in the Object type frame.

Click Finish.

The Web Application Builder editor should now be displayed. If not, check the Open file for editing when done checkbox in the creation window. To open it, double-click the PictureBrowserApp.XMLCtrl file in the Navigator view. The Web Application Builder editor contains three tabs referred to in the documentation as the Layout Editor, Mappings Editor and the Behavior Editor.

Building the Generated Code

In the Navigator View, red crosses are displayed in front of the generated java controller indicating compilation errors. 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 2 ways to solve these errors:

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.

Without the JID product installed:

Right-click the PictureBrowserApp web project name in the Navigator view, and select Properties.
In the Properties for PictureBrowserApp 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

All compilation errors are now solved.

[Top]

Defining the Layout of Your Application

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

The first page will allow you to select the image.
The second page will display the selected images.

The layout of both pages will be defined through the Layout Editor. It is an embedded version of Dialog Builder, another WAC RADE product. For more details about the layout design, refer to the following technical article : Working with Dialog Builder.

Creating the First Page Layout

You are going to create the page that will enable you to select the images you want to display. The page must contain 2 widgets:

1 top label showing the title of the combo box.
1 bottom combo box allowing you to display the list of the selected files in 3d com and to select the images you want to display.

In the Layout editor, double-click the banner. The Properties for PictureBrowserApp dialog box is displayed.
In the Title field, enter Picture Browser and click OK.
In the Jdialog Builder toolbar, click the widget then the widget to add widgets to the first page, and position the widget as shown above.

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, refer to Working with Dialog Builder.

Once the layout is defined, you can edit the properties of the widgets. To do so, proceed as follows:

Right-click Label1 (or double-click it) and select Properties.
In the Title field, enter Select a file. Click OKwhen done.
Click the red line border to move up the combo box and double-click it to open the Properties for ComboBox1 dialog box.
In the Variable name, enter _combo and click OK. This widget is published.

[Top]

Creating the Second Page Layout

You are going to create the page that will display the images selected in the first page.

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 PictureBrowserAppPage2.

Click the widget. The Label1 widget is displayed. Expand the widget so that it fits the page. To do so, double-click it to open the Properties window, and check fill in the horizontal alignment and the vertical alignment fields.
In the variable name field, enter _image and click OK to validate. This widget is published.

Defining the Behavior of Your Application

Defining the Behaviors of the First Page

Defining the Behavior to Initialize the First Page

In the Outline view, double-click the first page (PictureBrowserAppPage1) to open the Properties dialog box. If this view is not available, select Window->Show View->Outline.
In the Onshow field, enter showPage1 and click OK to validate.
In the Outline view, click onShow.showPage1(). The Behavior editor is displayed.
You are going to design the behavior of the Picture browser initialization. From the Add widget menu, select _combo and click the drawing area. _combo is displayed in the Behavior Editor. The combo box needs to be filled with the .jpg file names selected in the 3d com interface.

Since this application is created for a 3dcom integration, the type of the input parameter [3] that you are going to create is set to PortalUID[] (a PortalUID is an object allowing you to identify any object in the portal interface). Since multi-selection is available for this command, InputParameter is a table of PortalUID.

From the Create Component menu, select Input Parameter and click the drawing area.

From the Create Component menu, select User Action and click the drawing area. A dialog box is displayed.
Enter getFileList in the Method Name field, and click Add Input.
Enter InputParameter in the Name field and select PortalUID[] in the type list. Click OK.
In the Return Type list, select String[] and click OK.
Enter the code below in the page that opens:
Click the PictureBrowserApp.XMLCtrl tab page and from the Tools menu, click Create Link to create a link between the InputParameter widget and the User Action.
Expand the _combo widget properties list by clicking its double down arrows icon.
Click Create Link from the Tools menu, and create a link between the User Action and the ItemList property of the _combo widget.

Defining a Behavior For Selection in the Combo Box

In the Outline view, double-click _combo. The Properties for _combo window is displayed.
In the onComboActivated field, enter selectFile and click OK.
In the Outline view, click onComboActivated.selectFile(). The Behavior editor is displayed.
From the Add Widget menu, select the _combo widget and click the drawing area.
From the Create Component menu, select Session Data and click the drawing area. The Create a new SessionData dialog box is displayed.
In the Name field, enter _selection and select String in the Type scrolling list. Click OK when done.
Expand the _combo widget properties list by clicking its double down arrows icon.
Click the Create Link sub-menu in the Tools menu, and create a link between the Selection widget and the _selection widget.
From the Create Component menu, select Helper and click the drawing area. The Add Helper dialog box is displayed.
Expand the Miscellaneous node, and check gotoPage. Click OK when done. This way, in your Picture Browser, pages will change automatically after selecting a jpg file.

In the Properties view, select the Page Name line and enter PictureBrowserAppPage2.

The helper is created.

Creating the Behaviors of the Second Page

In the Outline view, double-click the PictureBrowserAppPage2. The Properties for PictureBrowserAppPage2 dialog box is displayed.
In the onShow field, enter showPage2 and click OK.
In the Outline view, click onShow.showPage2(). The Behavior editor is displayed.
From the Add SessionData menu, select the _selection session data and click the drawing area.
From the Add widget menu, select _image and click the drawing area.
Expand the _image widget properties list by clicking its double down arrows icon.
Click Create Link in the Tools menu, and create a link between the _selection session data and the Image property of the _image widget so that the title and the image of the _image label can be initialized with the _selection value.
Click Create Link in the Tools menu, and create a link between the _selection session data and the Title property of the _selection widget.
Save your work.

Creating the Runtime View

If you work with Java Interactive Dashboard (JID), create the runtime view of your project in IRAD. To do so, from the CAA Project menu, select Create/Update Runtime View.

If you do not work with Java Interactive Dashboard (JID): Open a Command window and enter:

$INSTALL-RADE intel_a\code\command\tck_init.bat

       tck_profile V5R16_B16

       e:

       cd e:\IRAD6\PictureBrowserApp

       mkmk -a

       mkrtv

For JNI Licensing reasons at runtime, IRAD needs to be launched in a particular environment to execute 3dcom applications in a Websphere Test Server.

If you work with Java Interactive Dashboard (JID): From the Window menu, select Open Command Window.
If you do not work with Java Interactive Dashboard (JID), go back to the Command window opened in Creating a Runtime View.
Close IRAD.
Enter RunIRAD6 in the Command window and hit the Enter key. IRAD opens in the correct environment and you can launch the test server.

Launching the Application on a Test Server

If you have already gone through the Creating Your First Web Application use case, we recommend you to work with the same server. If not, create a new server and set it up (see below.)

Prior to launching the application on a test server, you must have installed 3d com and DB2.

This paragraph provides you with the required configuration steps before running your web application in a web browser.

From the Window menu, access Show View->Servers. The Servers tab is displayed.
Right-click the server field, and select New->Server. The New Server window is displayed.
Select Websphere v6.0 Server and click Finish.
In the Servers tab, right-click WebSphere v6.0 Server@localhost, and select Start.
Right-click and select Run Administration Console.
Enter your identifier in the User ID field. The Administration Console opens.
Expand the Servers node and click Application servers.
In the Applications servers frame, click server1.

Expand the Security node, click Global security. Select

JAAS Configuration Authentication>J2C 
   Authentication Data

Click

New

. Enter the db2 administrator Alias (db2admin in this use case) in the Alias field and the administrator password. Here, copy/paste this string into the


         User ID

and the


         Password

fields.
Enter the description admin user for DB2 in the


         Description

field.

Click

OK

, and Save.

Expand the Environment node. Select WebSphere Variables.

In the WebSphere Variables page, click DB2UNIVERSAL_JDBC_DRIVER_PATH.

In the Role from value field, enter the name of the directory containing the db2jcc.jar file.

Click OK, Save. Click the Save button.

Expand the Resources node and click JDBC Providers.

In the WebSphere Variables page, select Node.

Under Preferences, click New.

In Step 1, select DB2 as database type.

In Step 2, select DB2 Universal JDBC Driver Provider as provider type.

In Step 3, select Connection pool data source as implementation type. Click Next.

Click OK and Save. Click the Save button. the provider is created.

Select the provider you created. In the


   JDBC Providers

window, click Data Sources and click New.

In the Name field, enter JSystem Data Source.

In the JNDI name field, enter jdbc/JSystem.

Uncheck Use this Data Source in container managed persistence (CMP).

In the Component-managed authentication alias list, select the alias you have created.

In the DB2 Universal data source properties frame, enter JSYS17 in the Database name field. Enter 4 in the Driver type field. Enter localhost in the Server name field. Enter 50000 in the Port number field.

Click OK and Save. Click the Save button.

Test the connection. To do so, click Test Connection.
Add some jpg files in the intel_a\resources\graphic directory of your workspace so that you can view these images in the picture browser application (PictureBrowserApp.)
Right-click the PictureBrowserApp web project name in the Navigator view, and select Run->Run on Server.
Make sure the server previously created is selected and click Finish. Wait for the server process completion.
Open Internet Explorer, and enter http://localhost:9080/PictureBrowserApp/html/enovia3dcom and hit the Enter key. Your application opens.

If you encounter licenses problems:

Click Administration and Preferences.
Expand the Administration node, select General->License and select your license.

You are now going to make sure that the favorites are correctly set.

Select Favorites->Favorite Configuration and click Remove data sources then Update data sources.

Click the Navigator node and select the CAA Locale File tab.
Check Enabled and make sure that the Web Service field is blank and that Start is set to auto.
Click Check to make sure that everything is OK. Click OK when done.
Close Internet Explorer and open a new one using the same URL (http://localhost:9080/PictureBrowserApp/html/enovia3dcom).
Right-click CAA Locale File and select Add to Navigator. Navigate to the intel_a\resources\graphic directory located in your workspace.
Right-click the .jpg files that you want to display. Since .jpg files are selected, the Picture Browser is available in the contextual menu as one of the actions available for .jpg files. Select PictureBrowserApp from the contextual menu.

The application is initialized with the list of selected .jpg files displayed in the combo box.

Select a picture to display it in the viewer.

Click Previous to select another graphic.

[Top]

In Short

This use case has demonstrated the way to develop an application and to integrate it into 3Dcom. It illustrates how to:

Define the layout of an application
Define behaviors of the application
Create a predefine Helper
Use InputParameters to work on the files selected in the 3dcom interface
Create a UserAction to define user source code
Manipulate a PortalUID object in user source code.

[Top]

References

[1]	CATJDialog Overview
[2]	Java Interactive Dashboard
[3]	Working with the Web Application Builder
[4]	Working with Dialog Builder
[5]	WAC Troubleshooting
[Top]

History

Version: 1.01 [December 2005]	Update
Version: 1.00 [July 2005]	Creation