Exercise 01 – Generate and build a CA Plex Java Swing application

slimwhimperSoftware and s/w Development

Nov 3, 2013 (4 years and 8 months ago)


WebClient Test Drive 2009, Fundamentals

Page 1
Exercise 01 – Generate and build a CA Plex Java Swing
For this exercise we will run the ‘Main Menu’ application as a standalone Java
application using the Java Swing library for the user interface controls. Although this
step isn’t required to run a WebClient application, it is useful to have the Java Swing
version of the application as a prototype or comparison version when developing
WebClient applications. We will be using the model: C:\Program Files\Websydian
WebClient\wxpcourse60\WXPCOURSE60TD-CS.mdl for this session.

1. Generate the application.
For now, the training application consists of the DB entity and its associated maintenance

We will start by generating the entire application, to achieve this we will use the CA Plex
Call Graph generation.

Drag the function ‘DB’ onto the Generate and Build window.

From the menu select ‘ViewFilter on Object TypeCall Graph and generate. This
will generate the function and its called functions, including the server functions.

2. Build the application.

Click on the PlexBuild option on the Eclipse toolbar.

The console will confirm that the build was successful. You should get a build successful
message like the one below. (object counts may be different) You will also get a message
regarding Web templates being built for WebClient. Those can be ignored for now.

Buildfile: C:\Program Files\Websydian

] Moving 498 files to C:\Program Files\Websydian
] Moving 78 files to C:\Program Files\Websydian
WebClient Test Drive 2009, Fundamentals

Page 2
Total time: 1 second
3. Set up the application to run
Eclipse needs to be configured to launch the application. This has already been set up, but
we are going to inspect the configuration to ensure everything is set up correctly.

From the Eclipse toolbar, locate the ‘Run…’ button
and click on the down arrow to show the options. Select
‘Open Run Dialog…’

The Run Dialog will launch. Expand ‘Java Application’ and
click on the ‘Main Menu’ item below it.

This will bring up the details of
the configuration named ‘Main
Menu’ on the right hand portion
of the window. The name ‘Main
Menu’ can be seen at the top of
this section. Below it, you will see
a series of tabs. In the Main tab,
you should see that the Project is
set to ‘wxpcourse60’ and
‘ObRun.ObPanel.ObLaunch’ as
the Main Class. This will allow
the application to be launched
from the ‘ObLaunch’ method in
the CA Plex runtime library. If
you have had to make any
changes, click ‘Apply’ to save the
changes so far.

We now need to check the actual starting point in our application. Click on the
‘Arguments’ tab and look at the Program Arguments. It should read:

WXPCOURSE60.MainMenu "Path= "

Note that there is space after the ‘Path=’, this is required. MainMenu is the
DB.MainMenu function.

Click Apply to save any changes, then click ‘Close’.

The configuration is almost complete. The application needs to know which database to
use, where the server functions are, plus other environmental settings. These settings are
always required by a CA Plex application, and are provided by the ob600client.properties
WebClient Test Drive 2009, Fundamentals

Page 3

The ob600client.properties file in your workspace has already been configured, but we
are going to ensure that it has the correct settings.

Expand the ‘src’ folder under the wxpcourse60 project. You will see the
ob600client.properties file there.

Double-click on it, and it will open in the right-hand portion of the workspace. Here the
settings that determine which database to use, where the server functions are and other
environmental settings can be changed. You will note for example that we are using SQL
server for this demo. You will see a line that begins with:


The remainder of that line specifies the server / instance, and database name to use.

NOTE: When you create your own projects, and you create an ob600client.properties
file, you will see that there is a copy of the ob600client.properties in the
[ProjectName]\bin folder after you build the workspace. This was copied by the build
process. The reason for this is that the copy in the \bin folder is referenced at run time. If
you try to change the copy in the \bin folder, you will get the following message (click
‘No’ to cancel):

You should only edit the .properties file in the \src folder, and those changes will be
copied to the \bin folder when the project is built.
WebClient Test Drive 2009, Fundamentals

Page 4

4. Running the Swing Java application
Everything should be in place now to run the application.
Click the down arrow next to the play button , and
select ‘Main Menu’.

Your application should run and bring up a screen similar to the one below. You should
be able to click on the menu items, and access most of the functions there.

Click on the menu item called Configuration, and select ‘Items’. You will see a new
window open with a grid. You can add new items using the ‘New item’ button, and they
will display in the grid.

This is an example of
a client / server
application that could
be running in a live
environment. Coming
up we will see how
WebClient takes that
same functionality to a
browser based
application with very
little effort.
WebClient Test Drive 2009, Fundamentals

Page 5

Exercise 02 - Add WebClient inheritance and generate
and build a Web 2.0 Ajax App

In this exercise we will add the WebClient inheritance to the application, and see the
functionality that we saw in exercise 1 moved into the browser. We will then be able to
add value to the application in the next exercise by bettering the look and feel.

1. Add WebClient Inheritance

Your model has an abstract standards layer called _OrgStandards. The main menu
function, as well as the functions that it calls, inherits from this entity and its functions.
Because of this, we will be adding the WebClient inheritance to this standards layer.

In your model, locate the _OrgStandards entity and expand it. The WebClient library has
already been added to the model, so we can go ahead and start adding the inheritance

Add this triple to the Menu since it is our starting point:

_OrgStandards.Menu is a FNC ~WebShell
_OrgStandards.Menu is a FNC WebMessages

For consistency, we will set the Edit dialogs to behave as pop-up dialogs. To do so add
these triples:

_OrgStandards.EditDialog.EditSuite.Delete is a FNC ~DetailPopup
_OrgStandards.EditDialog.EditSuite.Insert is a FNC ~DetailPopup
_OrgStandards.EditDialog.EditSuite.Update is a FNC ~DetailPopup
_OrgStandards.ReferredTo.Selector is a FNC ~DetailPopup

These triples are also necessary:

_OrgStandards.FrameProperty is a FNC ~FrameProperty
_OrgStandards.FrameChild is a FNC ~WebUI
_OrgStandards.EditDetail.Edit is a FNC ~WebShell
_OrgStandards.EditDialog.EditSuite.Grid is a FNC ~WebShell

2. Generate the application
To make sure everything we need to be built is built, we can use the call graph to
generate everything.
WebClient Test Drive 2009, Fundamentals

Page 6

Drag the function DB onto the Generate and Build window. From the menu select
‘ViewFilter on Object TypeCall Graph’ and generate only, as we did in exercise 1.

3. Build the application
Switch to your Eclipse workspace, and launch ‘PlexBuild’ from the toolbar as we did in
exercise 1. As before, you will get the confirmation of files being moved, and the build
being successful. However, this time the message we ignored before gives some
information we want to look at. That message will look similar to this:

>>> Starting Websydian Web Client Build for wxpcourse60

> Using Web Client v1.4r14

Generating Web templates.

>>> Websydian Web Client Build complete.
39 panels
processed (with 2 diagnostics
.) 0 panels not processed.

The panels processed here let us know that WebClient has built the necessary pieces that
we need to display this application properly in a browser.

4. Launch Web Server
Your Eclipse workspace has a server configured and ready. Click on the Servers tab, and
you will see the listing of the server there.

Right-click on the Jetty server listing, and select ‘Start’. You will get a series of messages
in the console as the server begins to launch; it will take a minute to get fully launched.
When the ‘State’ column in this server listing reads ‘Started’, and the ‘Status’ reads
‘Synchronized’, we are ready to test our web application.

WebClient Test Drive 2009, Fundamentals

Page 7

5. View Web Application
Now that everything is ready, we can look at
the application in the browser. Open an
internet explorer window and you will see
we have a shortcut for this web application
ready. Just click on the WebClient button
and it will take you to your web application.

When the application displays in the browser, you will notice that it looks very much like
the Main Menu application we saw in the first exercise.

With the addition of
WebClient we have taken
an application to the web
in much less time than it
would normally take to
migrate. WebClient has
saved us a great deal of
time and hassle.

Navigate a bit, and you will see that screens that the application treated as new windows
are treated as separate pages here. However, dialogs are treated as pop-ups, giving it a
similar look and feel to the original application while incorporating the familiar aspects
of browser-based applications.

WebClient Test Drive 2009, Fundamentals

Page 8

Exercise 03 - Make CSS changes to WXPCourse
Putting CA Plex applications on the web with WebClient is straightforward, in most
cases it is literally as simple as adding one triple “myfunction is a ~webshell”. However,
without CSS/stylesheets and html formatting, the web page looks as basic as the original
CA Plex function – which is often not visually appealing. For example, here is what a
simple EditDialog function will look like out of the box:

Fortunately WebClient makes it easy to incorporate CSS and HTML techniques to create
a more distinctive look. The look and feel can be incorporated throughout the application
by using standard Plex inheritance. The rest of this exercise shows you the steps so you
can do this yourself.

The files that we are going to need for this exercise are in the folder:
1. Create a standard webshell function
Most Plex developers are familiar with this concept. We are going to add two new
functions that inherit from our standards layer, and then replace the inheritance from our
application’s functions with the inheritance of the enhanced functions. The item grid we
seen is a good example. It inherits from _OrgStandards.EditDialog.EditSuite.Grid, which
in turn inherits from the ~WebShell. Here we will add a layer in between the two. That
way we can make changes to the stylesheets used for particular functions without having
those changes affect all functions of the same type.

To create the new functions, enter the following triples:
WebStndMenuShell is a FNC _OrgStandards.Menu
WebStndEditDialogShell is a ENT _OrgStandards.EditDialog

In order to get the stylesheets to be utilized properly, we have to make sure that the
implementation names tell WebClient which sheets to use for which functions. To do
that, add these triples:
WebClient Test Drive 2009, Fundamentals

Page 9
WebStndEditDialogShell.EditSuite.Grid impl name NME StandardEditGrid
WebStndMenuShell impl name NME StandardMenuShell

Next we need to have our application inherit from this enhanced layer. To do so, we will
replace the inheritance of two objects. First replace this triple:
DB.MainMenu is a FNC _OrgStandards.Menu

With this one:
DB.MainMenu is a FNC WebStndMenuShell

Then replace this triple:
DB.ItemMaster is a FNC _OrgStandards.EditDialog

With this one:
DB.ItemMaster is a FNC WebStndEditDialogShell

2. Create web template files
Switch over to Eclipse and insert two
new templates into your project from
the supplied files. For simplicity we will
add directly to the WebClient template
folder, but typically you will add this to
a new project folder with your
WebClient customizations. To add the
new templates, copy the
StandardMenuShell-page.wcli and
StandardEditGrid-page.wcli files into
the WebsydianWebClient\SysTemplates
folder. This template is very simple – it
references a style sheet, and
incorporates a logo and a banner.

3. Copy the supplied CSS files and Image files
Copy the supplied CSS folder into the WebContent folder in your
wxpcourse60web project. CSS supplies the look and feel of the
web pages. Virtually all elements of the page are under style sheet
control – including grids, buttons, fields, etc. You can dramatically
change the look and feel of the page through some simple HTML –
if you know what to do. CSS is beyond the scope of this session’s
test drive, but there is a wealth of information out there on what can
be done. You will also need to copy the image files into the images
WebClient Test Drive 2009, Fundamentals

Page 10
4. Gen and build, and view results
Before building, stop the server by right-clicking on the server listing in Eclipse and
selecting Stop. This will make things run a bit faster when we build. Generate in Plex as
we have done before, and then build in Eclipse. Once it is done building start the server
again, and open the browser as before. Open the Item grid to see the difference.

Quite a dramatic result for very little work! For extra credit, change the logo in the
template, and the background color. You can change the logo for the initial page in the
StandardMenuShell template, and the logo for the grid page in the StandardEditGrid

You can change the color in the
standardgeneral.css. Use the hex color code, for
example ffff33 is canary yellow. Visit this link
for some more color codes:

Note: you will need to rebuild so that the templates pick up the changes after you save
these files. The easiest way to do that is to ‘Clean’ the projects, causing a re-build of all
the templates. Select Clean from the Project menu, and have it clean all projects. Restart
the server, and you will be able to see your changes.

WebClient Test Drive 2009, Fundamentals

Page 11
Exercise 04 – Add value to the application (Add date
picker, grid stretch and hint text control overrides)

Even with the style sheets, the base functionality of the application behaves in the same
way that the original Plex function did. While this is useful, we can actually improve the
on original the application’s functionality with very little effort.

Let’s look at the Order function as an example. When you click on the Store menu, and
select Order, you will notice that the stylesheet that we have for Item is not used here.
This is because this function does not inherit from the additional layer that set up in
exercise 3.

Click on the ‘Add new data’ button, and you will see the Insert pop-up display.

This pop-up will work, and you can add data here. However, WebClient gives us the
ability to leverage a great deal of modern controls and techniques that allow us to
improve the user interface. In this exercise we will make some minor changes that can
greatly improve an application.

1. Add the Date Picker
The first thing that we are going to do is to add a template for a particular control; the
Order Date. Open the panel: DB.Order Header.EditSuite.Insert.Panel. Expand Order Date
in the panel palette, and bring up the Edit properties. Locate the Control Name property
and highlight it.
WebClient Test Drive 2009, Fundamentals

Page 12

What we are going to add will be in this Control Name property. Paste the following into
the value: OrderDate:MainArea:template=DojoDateEdit:default and hit the check button
next to the value. When you do, the value will appear next to ‘Control name’.

For adding the Date Picker, that is it; it really is that simple. We will see the change the
next time that we generate and build. However, let’s add a few more things before we do.
2. Hint Text
Sometimes the labels on a data entry screen don’t convey quite enough information about
what data is expected. Adding hint text helps new users to know what should be entered
into that particular field and adding that functionality is quite simple with WebClient.

You already have the panel open, so just highlight the edit control of the Billing name
field, and in the same manner that you added text to the Control Name of the Order Date,
add the following line to the Control Name of the Billing name Edit field:
EstName:MainArea:hint=The name of the Establishment billed:default

Save the panel and close it.
3. Grid Stretch
In displaying the Item grid that we have looked at a couple of times you may have
noticed that the grid is actually bigger than what the columns need. Rather than adjusting
the size of the grid manually, we can actually specify one column to expand to fill the
empty space, allowing room to accommodate the possibility of a long field.

Open the panel: DB.ItemMaster.EditSuite.Grid.Panel and bring up the properties for the
grid. This time we will not be highlighting the individual field listed below it, but rather
on the grid itself. As before, we will enter a value into the Control Name:
Grid1P:MainArea:stretch=Grid1PItem Description:default

Save the panel and close it
WebClient Test Drive 2009, Fundamentals

Page 13
4. Gen and build, and view results
As before, stop the server, generate in Plex, and build in Eclipse, then restart the server.
Open the Order grid first, and look at the Add New pop-up.

You can see that the Order
Date now has a calendar
symbol. Clicking on it
allows us to choose a date
by clicking on it. These
minor changes can go a
long way in making the
application easier to use
and more browser friendly.

Also, you will note, in the
Establishment name field,
the hint we placed there lets the user know that the Establishment name we are looking
for there is the one being billed. When you click on that field, the hint text disappears,
and allows the user to enter the data they need to.

If you move over to the Item grid, you will see the change there as well.



WebClient Test Drive 2009, Fundamentals

Page 14
As you can see, there are a lot of little things that you can do very easily to make the
application better. However, we have only scratched the surface of the myriad ways that
you can extend and improve your application for use in a browser using WebClient.
Please feel free to ask us about our training courses, we would be happy to show you
more possibilities.