Archive for Templates

Implementing an Ajax TreeView

The WebClient TreeView advanced control was designed to work with existing Plex Active/TreeView pattern functions with minimum changes to the action diagram. Read the following for the instructions (note this article was authored by Andrew Leggett, Senior Consultant for ADC Austin. He can be reached at aleggett@adcaustin.com).

For example, you may want to implement a function that looks like this as a page in a browser.

To prepare an existing Active/TreeView or ShowTree function for WebClient.

  1. Attach the WebClientControls group model as a library to your group model. Note this is a separately licensed model.

 

2.  You can now inherit from the WebClient/_Abstract.~TreeView function.


3. If you have existing action diagram code to display a TreeView control, the only addition you will need to make is to add a ‘Go Sub TreeView Refresh’ statement at any point where you need to update the control in the browser.  This subroutine behaves similarly to a ‘Put’ statement.  For a new TreeView function, follow the article ‘Implementing a Tree Control’ in the Plex Help.

4. When exiting the function, make sure you exit with ‘Go Sub Terminate’, as this subroutine inherits the code necessary to cleanly dispose of the tree control in memory

5. If you are displaying images for your tree nodes, you will need to make these available to the web application with the following steps: (Note: the SelectedImage property is not currently supported)

6. In Eclipse, your Web project will contain a ‘WebContent’ folder which contains the run-time resources for your web application.  Create a folder directly under ‘WebContent’ and name it ‘images’ (it is case-sensitive).

  • Copy any bitmaps that your application uses to the ‘images’ folder.

  • The web application is case-sensitive, so you need to ensure that the bitmap names match those in your model.  The Plex TreeView uses Name objects scoped to the Scripts function to get the bitmap names; e.g. MyTreeView.Scripts/FNC option NME/Image 1.  The bitmap name is stored in the literal value of the name object.  Compare these names to the bitmaps in your images folder, and rename the files if appropriate.

To see a worked example of the TreeView pattern, download the WXPCourse61 example model.

WebClient Advanced Controls Explained

The latest release of WebClient contains a new optional pattern library with advanced Ajax web GUI control patterns. The two principle patterns released with WebClient 2010 (1.6) are ~TreeView and ~FlexGrid. ~TreeView enables your web application user to visualize hierarchies via a tree of nodes. Each node can have both text and image, and the nodes can be interactively expanded and contracted. ~TreeView can be used in a variety of business application scenarios: common examples include application menus, product bill of materials, organization charts, and Microsoft Outlook style interfaces. ~FlexGrid is advanced grid control pattern that gives the developer more control over the display and entry of tabular data than the standard CA Plex WinWidgets style grid. Using FlexGrid, you can programmatically set the color and font for individual cells without using states, add columns and rows dynamically, add images to cells, and more. This style of presentation is especially useful in creating spreadsheet-like applications, or in developing scheduling applications where there are not a fixed number of columns to model in the CA Plex panel designer.

TreeView Details

TreeView pattern inherits from and is based on the ACTIVETreeView pattern. For detailed information on constructing hierarchies, consult the CA Plex pattern documentation.

Implementation is straightforward, simply inherit from the ~TreeView pattern

Here are some examples of web trees:

FlexGrid Details

The ~FlexGrid pattern inherits from and is based on the ACTIVEFlexGrid pattern. For basic information on FlexGrid, consult the CA Plex documentation. However, with the WebClient implementation you have much more functionality available to you that you have in the ActiveX version of the control.

Implementation is straightforward, simply inherit from the ~FlexGrid pattern

There is also a more complex pattern called ~ExtendedFlexGrid. Here is a list of operations available:

Here is an example FlexGrid on the web:

Futures

More advanced controls will be added in upcoming WebClient releases. For example, FileOpen, ProgressBar, ListView, RichTextEdit and Slider patterns are all under consideration for development. Customers of the WebClient Advanced Controls pattern library will automatically get these new patterns as they become available. If you have an advanced control you would like to see supported, please drop us a note to info@adcaustin.com.

Advanced Web Controls, TreeView/Flexgrid


The upcoming 2010 release of the WebClient i+ platform will contain optional support for advanced Dojo controls such as the TreeView and FlexGrid components. The TreeView component is self-explanatory. The FlexGrid component is an advanced grid with the ability of adding columns dynamically, advanced font/display formatting, adding images to cells, and more (see the CA Plex Active pattern library documentation for a full description of capabilities). Adding Web generation support for your existing CA Plex applications with TreeViews and FlexGrids will be simple in most cases – just add inheritance and off you go – no code or panel changes required.

Here is a screen print of the new components:


Here is an example of the steps you will go through to implement in the Business Fundamentals sample model.

First, add WebClient inheritance



Second, generate and build as normal.

Final result in a browser. Yes, it is that easy.


If you are interested in becoming an alpha or beta tester for this capability, drop us a line at info@adcaustintech.com. The Alpha program starts May 1.

Let it snow – fun with templates

Lets have a bit of fun with our CA Plex / WebClient application – lets change the panel background to a snow storm. This will be done with a bit of javascript, and adding a triple “myfunction is a SnowShell”. We will use the javascript example posted at this URL http://javascript.about.com/library/blsnow2.htm.

SnowPlex

First download this zip containing HTML/Javascript and snowflake images. You will use these files in the exercise.

Steps

1. Create a SnowShell web template shell function

Most Plex developers are familiar with this concept. Enter two triples like the screen print below.

SnowPlexStep1

2. Inherit from the new function

 Here is a very simple example.

SnowPlexStep2

3. Create a web template file

Switch over to Eclipse/Rational and insert a new template into your project. 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 template, copy the SnowShell-page.wcli file into this folder. This template is very simple.

Two bits of html/javascript are required, highlighted in red:


/(!CSSInit)
@import "/wxpcourse60web/CSS/standard.css";
/(!CSSInit)

/(!HeadArea)
<script src="/(!WsRes)/js/snow.js" type="text/javascript">
</script>
/(!HeadArea)
/(!MainArea)

<table border="0" width="100%" height="48px">
<tr>
<td valign="top">
<img src="/(!WsRes)/images/snowflake.gif"></img>
</td>
<td align="right"
<a href="#">My WebClient i+ Application</a> | <a href="#">Logout</a> | <a href="#">Preferences</a> |<a href="#">Help</a>
</td>
</tr>
</table>
<div>
<div style="position: relative;">
/(!AttachPoint:name=MainArea)
</div>
</div>
<script type="text/javascript">
startSnow();
</script>
/(!MainArea)

4. Copy the supplied Image, CSS, and js files

Copy the supplied images, CSS, and JS into your WebContent folder, into subdirectories by these names.

5. Gen and build, and view results

Happy Holidays!

Embedding a url/web page in a WebClient panel

Sometimes it is useful to show an external web page or component embedded in the body of a WebClient panel. An example could be showing another web site, an image, a map, a widget like a calculator, or some other item of interest. Because WebClient panels are generated as standard web pages, this is very easy to accomplish through standard CA Plex techniques combined with a bit of html and java. This example can be implemented as a reusable CA Plex pattern.

This example has been created courtesy of Lily Taharudin, principal WebClient support engineer. Lily can be reached by email at ltaharudin@adcaustin.com.

Load a web page using a page template

In this example, we are loading a set web page url onto a WebClient panel on initialization on the panel.

This technique is most useful for static url’s, like your company web site or a web component.

  1. Create a static in the main function for example iframe.
  2. Set the static control name, for example: iframe:MainArea:template=Iframe:seq=100.
  3. Create a control template Iframe.ctrl with the following code and with an url (the CA web site Is the example in this case.)

    <iframe src =”http://www.ca.com” width=”100%” height=”750px”>

      <p>Your browser does not support iframes.</p>

    </iframe>

Run Static URL from Plex Menu or Toolbar

In this example, we are dynamically loading a web page url onto a WebClient panel.

This technique is most useful for loading dynamic or changing information, like a map.

  1. Create a new source code, for example call DisplayURL. The source code has one parameter of URL field. In the source code, type the following code.

    import com.adcaustin.webplex.*;

    WebWindowData x =(WebWindowData) (Object) fnc.getPanel().getPanelData();

    x.processAction(“GoToURL”,&(1:));

  2. Create a new URL field which inherits from FIELDS/URL. This field should have the url value, for example: http://www.ca.com
  3. Create an event in the menu to call this source code.
  4. Create a new triple for the iframe just like webmessages.
    Iframe is a FNC ~WebClient/WebUI
    Iframe impl name iframe
  5. Create a new page template named Iframe-page.wcli. The page template should contain the following code
    /(!JSInit)
        /(!Panel:!EnableAction:GoToURL)
    /(!JSInit)
    /(!JS)
        /(!Panel:!Action:GoToURL)
        var iframe = document.createElement(“IFRAME”);
        iframe.setAttribute(“src“,/(!ActionArg));
        iframe.style.width = “100%”;
        iframe.style.height = “750px”;
        document.body.appendChild(iframe);
        /(!Panel:!Action)
    /(!JS)
  6. The menu function should have the following triples.

    Menu is a FNC ~WEBCLIENT/WebShell

    Menu is a FNC ~WEBCLIENT/WebMessages

    Menu is a FNC iframe

Embedding in Action

An Adobe Flash scientific calculator on a DetailPopup.

The function


The panel


The Template code (this is a flash site)


<iframe src =”http://my.hrw.com/math06_07/nsmedia/tools/Sci_Calculator/Sci_Calculator.html” width=”100%” height=”450px”>

<p>Your browser does not support iframes.</p>

</iframe>

The results


Control Templates: How to Display a Plex Grid as a Pie Chart

Special Note: Andrew Leggett, Senior Application Consultant, is the guest author of this post. Andrew Leggett can be reached at aleggett@adcaustin.com.

WebClient makes it easy to generate your Plex panel designs as HTML and Javascript so they can be used within a web browser; but with the use of custom templates, you can also present your data in a variety of ways that go beyond the standard Plex controls.

This guide will take a standard Plex grid and show you how to apply a custom control template to display the data as a pie chart. This example can be applied to any grid with numeric data columns; it requires no changes to the action diagram, and only takes a few minutes to get results.

Before


à

After

I’ll start by describing the steps that you will need to follow; then I will go into more detail to explain how this works.

1. Select a grid to work with.

For this example I’ve taken a simple EditSuit.Grid function, and I want to present the data in the ‘Market Price’ column as values in a pie chart. This is how it displays in a browser with the standard WebClient templates:

2. Create the template file.

Create a new file in your custom template folder in your Eclipse workspace and name it ‘DojoSimplePieChartGrid.ctrl’. Open the file, then copy and paste the following text. Save the file.

/(!JSInit:once)

    dojo.require(“dojox.charting.Chart2D”);

    dojo.require(“dojox.charting.themes.PlotKit.blue”);

    dojo.require(“dojox.charting.themes.PlotKit.cyan”);

    dojo.require(“dojox.charting.themes.PlotKit.green”);

    dojo.require(“dojox.charting.themes.PlotKit.orange”);

    dojo.require(“dojox.charting.themes.PlotKit.purple”);

    dojo.require(“dojox.charting.themes.PlotKit.red”);

/(!JSInit)

 

/(!JSInit)    

    var pieSeriesData = new Array() ;

    var pieChart;

    

    function setPieChartValues()

    {    

        var pieValueColumn = /(!Param:ValueColumn) ; // The column in the Plex grid that contains the value. Set by the ‘ValueColumn=n’ control name parameter.

        /(Embed:js:cdata)

            var cell = /(!This:!jsonRows) ;

            for (var row=0; row<cell.length; row++)

            {

                pieSeriesData[row] = Number(cell[row][pieValueColumn]);

            }

        /(Embed)    

    }

    

    function changePieColor(color)

    {

     pieChart.setTheme(dojox.charting.themes.PlotKit[color]);

     pieChart.render();

    }

/(!JSInit)

 

/(!JSOnLoad)

    var pieRegionWidth = /(!Size:x); // The width of the Plex Grid control

    var pieRegionHeight = /(!Size:y); // The height of the Plex Grid control

    var pieRadius;

 

    // Make the radius a little smaller than the shortest side

    if (pieRegionWidth < pieRegionHeight)

    {

        pieRadius = (pieRegionWidth/2) – 10 ;

    }

    else

    {

        pieRadius = (pieRegionHeight/2) – 10 ;

    }    

    pieChart = new dojox.charting.Chart2D(“/(!NameID)”);

    pieChart.addPlot(“default”, {type: “Pie”, fontColor: “white”, labelOffset: pieRadius/2, radius: pieRadius });

    setPieChartValues() ;

    pieChart.addSeries(“/(!NameID)_series”, pieSeriesData);

    changePieColor(“/(!Param:DefaultColor)”);    

/(!JSOnLoad)

 

<div id=”/(!NameID)” style=”/(!DefaultCSS:nc:withPos=/(!Param:default))”></div>

<script type=”text/javascript”>

/(!ContextMenu)

</script>

3. Override the control template.

Open up your Plex panel, select the grid control, then paste the following text into the ‘Control Name’ property:

ProductPieChart:MainArea:template=DojoSimplePieChartGrid:ValueColumn=3:DefaultColor=blue:default

Note the ValueColumn=3 parameter; this refers to the grid column that will be used for the pie chart values, but be aware that this template expects the column numbers to start at zero, and Plex starts with one, so this value is actually the Plex column number – 1. In my example column 3 refers to the ‘Market Price’ column. Another parameter you can modify is the DefaultColor=blue parameter. You can use values blue, cyan, green, orange, purple or red, but they are case-sensitive so they should be entered as lower-case.

4. Generate, build and publish.

Generate your function, and build it in Eclipse. The template generator will output a diagnostic message but don’t worry about this; it is just telling you that it hasn’t attached the grid fields to the panel template.

Publish the application to the Web Server. When you access your function in the browser, you should see something like this:

Note that the pie chart has the same position and size as the original grid. Also, the buttons function as before, so the ‘Refresh’ button will reload the ‘grid’ and effectively recalculate the chart if your data has changed.

Technical details of how this example was created

This example draws a pie chart using the dojo libraries; however the process of creating new control templates can be applied to other web controls. Additional information can be found at http://www.adcaustintech.com/documents/Downloads/WebClient1-4SP1LatestPatches/TemplateCmds.pdf.

1. Locate some suitable Javascript code

The first step is to start with some Javascript that does what you require. The dojo toolkit provides a large collection of Javascript and Ajax controls that can be used to enhance your web application. The Dojo Campus feature explorer is a great place to start, as it shows you a working example of each feature, along with sample HTML and Javascript to make it work. This can be located at http://dojocampus.org/explorer/. The Javascript used in the template for this example was adapted from the sample at: http://dojocampus.org/explorer/#Dojox_Charting_2D_Simple%20Pie%20Chart.

2. Create the Control Template

To override the way that your controls will display in the browser, you will need to create a control template with the suffix ‘.ctrl’. For this example, I created a template named ‘DojoSimplePieChartGrid.ctrl’. You will need to define any dojo libraries that will be used with the dojo.require() method, and these should be define in the /(!JSInit) attach point. As a general rule; the Javascript functions (setPieChartValues()and changePieColor(color)) can be attached to the /(!JSInit) attach point, and the Javascript that will be executed when the page loads can be attached to the /(!JSOnLoad) attach point. Finally, you will need to define a visible HTML element that will be associated with the chart. In this example I used a <div> element.

3. Modify the template to allow Plex runtime values.

WebClient can incorporate values from the Plex panel design and runtime environment into the rendered page. If you look at the template, you can see how these are defined.

  1. Panel Properties

The control takes the position and size from the Plex panel design, and the pie chart needs to fit within that area on the page. To determine the radius of the pie chart, it needs to be less than the shortest side of the control area, so I need to include the control height and width in the Javascript. This was done with the /(!Size:x) and /(!Size:y) replacement markers. At runtime these will be replaced by the width and height property values from the panel design.

  1. Control Name parameters

The color and data column are required by this pie chart template. As there are no suitable panel properties for these values, a defined parameter is required. These parameters are included in the template by adding the /(!Param:ValueColumn) and /(!Param:DefaultColor) replacement markers, and the values are defined in the control name as ValueColumn=3:DefaultColor=blue.

  1. Grid values

The Javascript in this example reads the data in the grid and adds it to the series data required by the pie chart.  The grid data is available at runtime in the json format, and can be retrieved with the replacement marker
/(!This:!jsonRows)

This data is presented in the format:

[["1","Widget","It's a Widget","100.0","84.0"],

["2","Large Widget","It's a Widget, only bigger","150.0","120.0"],

["3","Small Widget","The smallest Widget you can buy","99.0","89.0"],

["4","Another Widget","It's another Widget","101.0","70.0"],

["5","new","new product","230.0","200.0"]]

 

This is essentially a two-dimensional array of rows and columns. This array can be processed by Javascript.

4. Override the control template.

Finally, to be able to use the template, the WebClient template builder takes direction from the control name property in the panel design. We added the directive:

ProductPieChart:MainArea:template=DojoSimplePieChartGrid:ValueColumn=3:DefaultColor=blue:default

The parameters are separated by colons; the values can be interpreted as:

ProductPieChart – The first parameter is always the control name, this will identify the control in the template, and is referred to in the template as /(!NameID).

MainArea – The second parameter always refers to the attach point in the root or page template where the control will be rendered. ‘MainArea’ is the default location.

template=DojoSimplePieChartGrid – This parameter directs the template builder to use the defined template when generating this control.

ValueColumn=3 – This value is referenced in the template as /(!Param:ValueColumn), so at runtime this will generate text ‘3’.

DefaultColor=blue – This value is referenced in the template as /(!Param:DefaultColor), so at runtime this will generate text ‘blue’.

default – If the ‘default’ parameter is included, the WebClient will generate the size and position based on the values in the panel properties for this control.

Customizing CA Plex / WebClient with stylesheets and templates

Putting CA Plex applications on the web with Websydian WebClient i+ 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 post shows you the steps so you can do this yourself. The steps are applied against the example model supplied with WebClient.

First download this zip containing HTML and CSS. CSSTemplates.zip You will use these files in the exercise.

Steps

  1. Create a standard webshell function

Most Plex developers are familiar with this concept. Enter two triples like the screen print below.

2. Inherit from the new function

3. Create a web template file

Switch over to Eclipse/Rational and insert a new template into your project. 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 template, copy the StandardShell-page.wcli file into this folder. This template is very simple – it references a style sheet, and incorporates a logo and a banner.

4. Copy the supplied CSS files and Image files

Copy the supplied CSS files into a new folder in your web 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 blog, but there is a wealth of information out there on what can be done. Also copy the image files into the images folder.

5. Gen and build, and view results

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 in the StandardShell template, and the color in the standardgeneral.css. Use the hex color code, for example ffff33 is canary yellow. Here are some color codes.

Ajax Integration with Google Maps

Geomapping Technology and the Internet

One of the advantages of web application development is that you can easily integrate or mashup your organizational data with the large array of detailed information made freely available on the internet. A good example of this is geographical mapping data. The uses of having geo mapping data within your business application are virtually endless. For example:

  • Provide your customers with interactive directions to your facilities.
  • Incorporate directional mapping into routing applications, e.g. customer deliveries, repair/installation, or home health care visits.
  • Show analytic data points overlaid on a map view, for example to clearly show management where your best customers are located.

In the past in order to run your own private map server and software, IT management had to budget a rather sizeable investment in servers, maps, application software, and integration programming. However, to make appropriate use of today’s freely available map data from google, yahoo, mapquest, and many others it is a completely different ball game – you just need a little JavaScript and a developer’s API key (usually free for most uses, but check out the license agreement).

Google Maps

Google Maps (accessed googlemaps.com) is one of the classic examples of a useful and impressive Ajax application. The smooth scrolling and interactivity of the map (point to point directions, pushpin pop-ups with shadows, traffic, street view, etc.) is reminiscent of a sophisticated desktop application. However, Google actually accomplishes all this working within a standard browser without special plug-ins or add-on software.

 

Google Maps is one of the best examples of how RIA (Rich Internet Application) techniques are revolutionizing business application development. Yes, I’m sure that the code involved to render the complex maps in a browser is non-trivial – but you can leave that to Google’s team to write and maintain in JavaScript. However, the code necessary to integrate maps into your CA Plex WebClient i+ application IS trivial, and even better we have written the technical parts of it for you.

Create your own Geo-map pattern

The easiest way to start with geo-mapping is simply to try the example in the rest of the blog. Most developers find they can create their own WebClient i+ pattern and get an example running in less than 30 minutes.

Step 1

Create your own pattern or function that contains the address data on standard CA Plex panel with standard CA Plex fields. Feel free to download our WebClient sample model for an example of this.

To follow our example, create a pattern called ~MapUrlPopop which inherits from WEBCLIEN/~DetailPopup, and pass in the appropriate address fields as input parameters. Give the pattern function an implementation name of MapUrlPopup, which corresponds to the html template file name in the next step.

The panel field edit controls should contain the following control names to match up with our mapurlpopup-root:

  • AddressLine1
  • AddressLine2
  • City
  • State
  • Zip

Step 2

Copy the attached mapurlpopup-root to your templates directory in Eclipse. Note the following section of code.

Template attachment 
function() {
            /(!AttachPoint:name=JSOnLoad)

 

            var fAddLine1 = /(AddressLine1);
            var fAddLine2 = /(AddressLine2);
            var fCity = /(City);
            var fState = /(State);
            var fZip = /(Zip);
            var fStreetAdd = fAddLine1 + " " + fAddLine2 + " " +  fCity + " " + fState + " " + fZip

 

            if (GBrowserIsCompatible()) {
            var map = new GMap2(document.getElementById("map"));
                  var geocoder = new GClientGeocoder();

 

                  geocoder.getLatLng(fStreetAdd, function(point){
                        var p = point;
                        map.setCenter(p, 13);
                  })

 

Also make note of the Google API site key at the start of the file. If you are planning to implement this example, please replace the API key with one you obtain directly from Google Maps website: http://code.google.com/apis/maps/signup.html.

Step 3

Inherit from or call your new pattern directly, generating and building as normal for WebClient, and view the results. It is really that simple!

 

Want to learn more? This simple templating example shows some of the power of WebClient Ajax templates, but the possibilities are endless. Visit http://wiki.webclientiplus.com for complete documentation on WebClient i+ templating.

 
 
© 2013 CM First Group - All rights reserved