RADE Web Application Composer |
Web Application Builder |
Creating an Application to be Integrated to Modular 3DcomCreating a Picture Browser Application Using the Web Application Builder |
Use Case |
AbstractThis 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.
|
This use case is intended to show you how to:
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] |
|
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:
[Top] |
Start->Programs
menu,
access the IBM Rational->IBM Rational Application
Developer v7.0->Rational Application Developer
application.Workspace Launcher
window, click Browse...
to select
the directory that will contain the data. Click
OK
. The application opens.File
menu, select
New
, then
Dynamic Web Project
.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.Servlet version
combo
box, select 2.4
.Target server
combo box,
select Websphere Application Server v6.0
and click Finish
.Yes
when asked if you
want to switch to the web perspective.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:
|
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.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.
OK
. Next>
once your
prerequisites are defined. The Installing Prereqs dialog box is displayed.
Click Close
when the installation
is done.Close
in the
Eclipse Setup
window.Framework name
field,
enter the framework name: SampleFw
and click
Next>
. 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.
Navigator
view.
New->Other->Java->Package
and click
Next>
to display the window below.Name field
, enter
com.dassault_systemes.picturebrowser
.Finish
when done.[Top] |
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).
Navigator
view,
right-click PictureBrowserApp and select
New->Other...
. The New dialog box is displayed.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.
XMLCtrl new File
field,
enter PictureBrowserApp
.XMLCtrl
. Browse
button and select the
SampleMd.mj
module in the dialog box. Click
OK
.Browse
button, and select the com.dassault_systemes
Java package that
you previously created.Next>
button to
access the next window.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.Icon name (normal)
field, click the Browse
button. The
Open
dialog box is displayed.
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. |
Object type
field, click
Add
. A dialog box is displayed.
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. |
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
.
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:
CAA Project
menu, select
Update libpath based on makefile
. This
will automatically update your class path.
|
|
|
All compilation errors are now solved.
[Top] |
The next step consists in defining the user interface of the web application. By default, it contains 2 main pages.
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.
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:
Layout
editor,
double-click the banner. The Properties for
PictureBrowserApp
dialog box is displayed.Title
field, enter
Picture Browser
and click
OK
.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:
Properties
.Title
field, enter
Select a file
. Click
OK
when done.Properties for ComboBox1
dialog box._combo
and click OK
. This widget is
published.[Top] |
You are going to create the page that will display the images selected in the first page.
|
Properties
window, and check fill
in the horizontal alignment
and the
vertical alignment
fields.variable name
field,
enter _image
and click
OK
to validate. This widget is published.
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
.
|
Onshow
field, enter
showPage1
and click
OK
to validate.Outline
view, click
onShow.showPage1(). The Behavior editor is displayed.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.
Create Component
menu,
select Input Parameter
and click
the drawing area.Create Component
menu,
select User Action
and click the
drawing area. A dialog box is displayed.Method Name
field, and click Add Input
. Name
field and select PortalUID[]
in the
type list. Click OK
.Return Type
list, select
String[]
and click
OK
.
Tools
menu, click
Create Link
to create a link between the
InputParameter
widget and the User
Action._combo
widget
properties list by clicking its double down arrows icon.Create
Link
from the
Tools
menu, and create a link between the
User Action and the ItemList
property of the _combo
widget.Outline
view,
double-click _combo. The Properties
for
_combo
window is displayed. onComboActivated
field,
enter selectFile
and click
OK
.Outline
view, click
onComboActivated.selectFile(). The Behavior
editor is displayed.Add
Widget
menu, select the _combo widget and
click the drawing area.Create
Component
menu, select
Session Data
and click the drawing area.
The Create a new SessionData
dialog
box is displayed.Name
field, enter
_selection
and select
String
in the
Type
scrolling list. Click
OK
when done._combo
widget
properties list by clicking its double down arrows icon. Create Link
sub-menu
in the Tools
menu, and create a
link between the Selection
widget
and the _selection
widget.Create Component
menu,
select Helper
and click the drawing
area. The Add Helper
dialog box is
displayed.Miscellaneous
node,
and check gotoPage
. Click
OK
when done. This way, in your Picture
Browser, pages will change automatically after selecting a jpg file.Properties
view, select
the Page Name
line and enter
PictureBrowserAppPage2.The helper is created.
Properties for PictureBrowserAppPage2
dialog box is displayed.
OK
.Outline
view, click
onShow.showPage2(). The Behavior
editor is displayed.Add
SessionData
menu, select the
_selection
session data and click
the drawing area.Add
widget
menu, select
_image
and click the drawing area._image
widget
properties list by clicking its double down arrows icon. 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.Create Link
in the
Tools
menu, and create a link between the
_selection
session data and the
Title
property of the
_selection
widget.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 |
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 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.
Window
menu, access
Show View->Servers
. The
Servers
tab is displayed.
New->Server
. The New Server
window is displayed.Websphere v6.0
Server
and click
Finish
.Servers
tab, right-click
WebSphere v6.0
Server@localhost
, and select
Start
.
Run Administration Console
.
User ID
field. The
Administration Console opens.Servers
node and click Application servers
.
Applications
servers
frame, click
server1
.
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 . |
Environment
node. Select WebSphere Variables
.
|
|
|
Resources
node and click JDBC Providers
.
|
|
|
|
|
|
JDBC Providers
window,
click Data Sources
and click New
.
|
|
|
|
|
|
Test Connection
.intel_a\resources\graphic
directory of your workspace so that you can view these images in the picture
browser application (PictureBrowserApp.)PictureBrowserApp
web project name in the Navigator
view, and select Run->Run on Server
.
Finish
. Wait for the server process
completion.http://localhost:9080/PictureBrowserApp/html/enovia3dcom
and hit the Enter
key. Your
application opens.If you encounter licenses problems:
|
You are now going to make sure that the favorites are correctly set.
Favorites->Favorite Configuration
and click Remove data sources
then
Update data sources
. Navigator
node and
select the CAA Locale File
tab.Enabled
and make sure
that the Web Service
field is blank
and that Start
is set to auto.Check
to make sure that
everything is OK. Click OK
when
done.CAA Locale File
and
select Add to Navigator
. Navigate
to the intel_a\resources\graphic
directory located in your
workspace.
PictureBrowserApp
from the contextual
menu.The application is initialized with the list of selected .jpg files displayed in the combo box.
Previous
to select
another graphic.[Top] |
This use case has demonstrated the way to develop an application and to integrate it into 3Dcom. It illustrates how to:
[Top] |
[1] | CATJDialog Overview |
[2] | Java Interactive Dashboard |
[3] | Working with the Web Application Builder |
[4] | Working with Dialog Builder |
[5] | WAC Troubleshooting |
[Top] |
Version: 1.01 [December 2005] | Update |
Version: 1.00 [July 2005] | Creation |
Copyright © 1994-2006, Dassault Systèmes. All rights reserved.