Watch the Walkthrough

We are going to develop a web application with CA Plex and CM First's WebClient templates. The application will allow us to access a network of real-time traffic cameras around the State of Maryland, view their live video feeds, their location on a map, and access the Maryland Traffic live Twitter feed.

Getting Started

Make sure you have followed the directions in WebClient Workshop Installation to copy the Workspace to your C: drive.

Eclipse

The installation includes a pre-configured version of the Eclipse development environment, open Eclipse by clicking on the Eclipse shortcut in C:\WebClient Workshop.  Eclipse should automatically open the Traffic Application workspace, which is a collection of Project folders.  You should see something like this when Eclipse is opened.

Important Note: The included version of WebClient is using the Plex 6.1 obrun.jar.  If you are using a later version of Plex for this workshop, please paste the updated obrun.jar into the WebClient project in the workspace.

Derby Database

We provide a compact, pre-configured database server named Derby with the Workshop, this allows the application to access data without the need to install and configure database software such as SQL Server on each PC.  The database server must be started before the application is run, otherwise you will get run-time errors. 

The Derby Database server can be started by right-clicking on the 'TrafficWebJava' project, and selecting 'Apache Derby → Start Derby Network Server'.

You should see the following messages appear in the console tab in the bottom half of the screen.

Sat Oct 26 13:06:14 CDT 2013 : Security manager installed using the Basic server security policy.
Sat Oct 26 13:06:15 CDT 2013 : Apache Derby Network Server - 10.8.2.2 - (1181258) started and ready to accept connections on port 1527

Note: The Derby Server is ended when you exit Eclipse, so you will need to start the server again using the method above each time you open the workspace in Eclipse.

If you are developing your own WebClient applications, you would probably want to use a standalone database, such as SQL Server, Oracle, or DB2 – so normally you would not need to perform this step.

Exercise 1 – Test the Application

The first exercise is to test that the installation is working, and that you can run the web application in a browser.

1. Start the Web Server

Make sure your Derby Database server has been started as described in the Getting Started section. 

Locate and click on the 'Server' tab in the bottom third of your workspace.  Right-click on the 'Tomcat v7.0 localhost:8080' server and select 'Start'.  The status of the server should change to '[Started, Synchronized]'

Note: It's possible that you may have another server on your PC that uses the same 8080 port.  If you get a message that the port is already in use, let a member of the CM First support staff know, and they will help you reconfigure it.

2. Access the web application in a browser

Open your Chrome browser, and enter the following URL:

http://localhost:8080/trafficweb/wc

You should see the application menu in the browser.

Exercise 2 – Add Buttons

In this exercise, we will add two buttons to the Camera page to allow us to navigate to the Video and Map pages.

1. Open the CameraGrid panel

Open up the CA Plex model C:\WebClient Workshop\Models\Traffic.mdl.

All the objects related to the workshop have been scoped under the 'Workshop' entity.  Open 'Workshop.WebFunctions.CameraGrid' in the Panel Editor.

2. Add the two Buttons

In the Panel Palette, right-click on the 'Controls' region and click 'Create PushButton'.  Repeat this step to create the second button.

Arrange the buttons on the panel designer so they are below the grid.  WebClient displays the literal size and position of all panel objects by default.

a) Prepare the Map button

Select the first Push Button, and set the following property:

Add a logical event 'View Map' to the button's 'Pressed' physical event.

b) Prepare the Video button

Select the second Push Button, and set the following property:

Add a logical event 'View Video' to the button's 'Pressed' physical event.

3. Call the appropriate functions

We will add the action diagram code to process the events for the selected grid row.

Open the function 'Workshop.MobileFunctions.ViewCameras' in the action diagram editor, and locate collection point 'Pre Point Events'.  Add the following code:

Event  Event: View Map
     For Each Selected  GridP
          Get  GridP
               Call  Workshop.WebFunctions.GoogleMaps   [Map Input variable to GridP variable]
Event  Event: View Video
     For Each Selected  GridP
          Get  GridP
               Call  Workshop.WebFunctions.Video           [Map Input variable to GridP variable]

Close the Panel and Action Diagram, and save your local model.

4. Generate the functions

Drag the following functions to the Generate and Build window:

• Workshop.WebFunctions.CamerasGrid
  
• Workshop.WebFunctions.GoogleMaps
  
• Workshop.WebFunctions.Video
  

You only need to Generate these functions, they will be built within Eclipse.

5. Build the functions

In Eclipse, the TrafficWebJava project has already been configured to access your CA Plex Gen folder.  You need to refresh this project to let it know that its contents have changed.

Select the 'TrafficWebJava' project, and press 'F5' (refresh).  Eclipse will automatically build any changed files, and the WebClient generator will generate the updated panel templates.  The console tab should show something similar to this:

>>> Starting WebClient Build for TrafficWebJava

        > Using WebClient i+ v1.8.2-pre7133
        > Licensed to WebClient User
        > Valid until Wed Dec 31 00:00:00 CST 2014

        Generating Web templates.
        .

        >>> WebClient Build complete.
                3 panels processed. 0 panels not processed.

6. Start the Web Server

Now that your changes have been built, you are almost ready to view the changes. Click on the 'Servers' tab near the bottom of the screen.  The server may have the status [Started, Republish] which indicates that changes have been made that have not been published to the Web Server yet.  Right-click on the Server and select 'Start'. This will publish and start the server.  When the status changes to [Started, Synchronized] the application is ready to be accessed in the browser.

In your Chrome browser, access the site at http://localhost:8080/trafficweb/wc

7. Test your changes

On the main menu, select the 'Cameras' menu option. 

You will see the list of Cameras available and a combo-box to filter the region you want to see.

Below the grid are the button you have just added.

To test your buttons, select a camera from the grid, then first press the 'Map' button. It should take you to the View Map function (which doesn't display much at the moment).  Please note that this function, as well as the Video function, use the ~DetailPopup WebClient pattern.  This allows you to have dialog panels that open over other, already open, screens.

Press the "X" button on the top right corner of the panel to return to the Camera grid.  Select another Camera, then press the Video button.  This should take you to the View Video function (again, it does not display much at the moment).

There are a few improvements that can be made to the application.  First, we are going to apply some templates to display the Map and Video.  We are then going to add a Twitter feed, then add features to the Camera grid to allow dynamic column ordering and display.

Exercise 3 – Add Map and Video

With WebClient, we can display a control on a panel any way we wish by specifying a control template. This gives us the ability to provide more controls than CA Plex normally provides. Templates can be specified as part of the control's control name with the 'template=' directive.  The target is a .ctrl file within the workspace. In addition to the standard templates that are provided with WebClient, it's possible to write your own templates, or adapt an existing HTML/JavaScript control or widget to work with WebClient.

We will use a couple of custom templates that are in your TrafficCustom/src folder:

WebGoogleMap.ctrl, and WebFlashVideo.ctrl

1. Apply the Map template

Open up the panel 'Workshop.WebFunctions.GoogleMaps.Panel' in the Panel Editor.

Select the control 'GoogleMap.GoogleMap.Edit'.  Note, we are working with the Edit control itself, not the field.

The existing control name should be:

        gmap:MainArea

Change this to:

        gmap:MainArea:template=WebGoogleMaps:default

The control name directs WebClient how to generate the template, and the directives are separated by the ':' character.  The first part 'gmap' is a unique identifier for the control, the second part 'MainArea' is the attach point, which controls where the control will be rendered within the page.  The third part is telling WebClient which template to use – in this case, WebGoogleMap.ctrl.  And the final part "default" is telling WebClient that we want to keep the position of the control the same as what is in the panel editor.  For other controls, there may be more parameters specific to the control.

The WebGoogleMap.ctrl template expects the value of the GoogleMapAddress Plex field to have location we would like to mark, and will display a map centered at that location.

2. Apply the Video Template

Open up the panel 'Workshop.WebFunctions.Video.Panel' in the Panel Editor.

Select the control 'WebFlashVideo.VideoURL.Edit', again we are working on the Edit control, not the field itself.

The existing control name should be:

        TrafficVideo:MainArea

Change this to:

        TrafficVideo:MainArea:template=WebFlashVideo:default

The WebFlashVideo.ctrl, expects the value of the Plex field to be a URL.  It then uses that to display the video from that location within the page.

Close and save your panels.

3. Generate your functions

Drag the functions 'Workshop.WebFunctions.GoogleMaps' and 'Workshop.WebFunctions.Video' to the Gen & Build window and generate them both.

4. Build your functions

Select the 'TrafficWebJava' and press F5 to refresh.  The WebClient template builder should generate two templates.

5. Test your changes

Open the 'Servers' tab, and restart the server.  When the status changes to [Started, Synchronized], open your application at http://localhost:8080/trafficweb/wc.

Perform the same steps as the previous exercise to get to the 'View Camera Map' and 'View Camera Video', the pages should look a lot different now.

The View Camera Map function lets you zoom in, and view as a Roadmap image.

The View Camera Video function will open a live stream of the traffic camera.

Exercise 4 – Add a Twitter Feed

In this exercise, we will use a control to view a Twitter feed from a specified source, in this case; the Maryland Road Traffic service (@mdrtraffic), which provides real-time information such as accidents, road conditions, and general delays.

The custom template 'WebTwitterFeed.ctrl' can be found in the TrafficCustom project in the workspace, and uses the JavaScript file 'trafficweb/WebContent/js/custom/twitterWidget.js'.

The Twitter API requires a preset access token from which it can derive the required feed, and which application is accessing the feed.  The access token for Maryland Traffic is already defined in your Plex model as a value of the TwitterAccessToken field.  Passing this value to the template is very simple; first we define a control on the panel to associate with the template, then we set the value for it to use.

1. Add the Twitter Access Token field to the panel

Open 'Workshop.WebFunctions.Twitter.Panel' in the Panel Editor.  Select the 'Edit' control for this field – TwitterFeed.TwitterFeed.Edit, and in the Property Palette set the 'Control Name' property to:

        twitterfeed:MainArea:template=WebTwitterFeed:default

2. Set the value from the Action Diagram

Open the action diagram for function 'Workshop.MobileFunctions.TrafficTwitter', and locate collection point 'Post Point End initialize'.  Add the following code:

        Set  TwitterFeed = 
        Put  TwitterFeed

3. Generate in Plex, Build in Eclipse

In Plex, generate the function 'Workshop.WebFunctions.Twitter' in the Generate and Build window.  In Eclipse, refresh the TrafficWebJava project and WebClient will automatically generate the panel templates.

4. Test your changes

Restart the server, and refresh your page http://localhost:8080/trafficweb/wc and select the 'Twitter' menu option.  The page should look like this:

Exercise 5 – Edit Grid Presentation

The Grid template that comes with WebClient has a few added features that you easily use just by adding to the Control Name for the grid. 

In this exercise, we will add to the default template to demonstrate how we can control the appearance.

1. Customize the grid control

Open the panel 'Workshop.WebFunctions.CameraGrid.Panel' in the Panel Editor.  Select the grid and add the directive 'MainArea:ColumnToggling=Yes:default' to the control name.  The full control name should now be:

        Grid1P:MainArea:ColumnToggling=Yes:default

The 'ColumnToggling' property allows you to dynamically reorder the grid columns and show/hide grid columns.  The settings are saved to your cookies.  So, if you have a user who likes to view a grid in a specific way, they could change their grid to their liking.  Each time they visit the panel after that, the grid will load in the same way that they left it.

2. Generate in Plex, build in Eclipse

In Plex, generate the function 'Workshop.WebFunctions.CameraGrid' in the Generate and Build window.  In Eclipse, refresh the TrafficWebJava project and WebClient will automatically generate the panel templates.

3. Test the application

Restart the server and access the application in a browser.  Load the Camera Grid function.  You may now right click the Column Headings of the grid to bring up the toggle menu for the columns.  You may also drag and drop the column headings the reorder the columns.

​