Multiple Instance Tabs

We have recently been working on a project to convert a Windows GUI application to a browser. The application allows the user to open multiple instances of the same window to detail a customer record.

Viewing multiple windows on a desktop application is common design approach, but this does not translate well to a browser or mobile application because a browser does not have the same window switching facilities of the Windows desktop and mobile interfaces do not support multiple mode-less windows.

A new feature in Rapide called Multiple Instance Tabs provides the solution. They allow multiple instances of the same window or dialog box to be opened at the same time in separate tabs. An example from the Rapide Controls Demo is shown below. Each tab is an instance of the same detail procedure step but instead of appearing as separate windows, they are displayed within a tab control.

Converting a multiple detail window design to a multiple instance tab is quick and easy and requires very few changes to the model.

Rapide Extension Library for JasperReports

We have recently been working on a project that is migrating an application from MVS to the web. The existing application has a number of reports that are developed as COBOL EABs and they wanted to migrate them to use the opensource JasperReports library.

To assist in running a JasperReport from Rapide and avoid the need to code the report execution in Java, we have developed a new Rapide Extension Library. This allows you to create a JasperReport object, pass in parameters and run the report to produce the output in a variety of formats, for example PDF, HTML or XML. The DataSource provided for the report can either be a JDBC datasource or Rapide can pass records directly to the report from Gen views.

Below is an example of a PDF report produced using JasperReports. The report design was produced using the Jaspersoft Studio which is an Eclipse tool that is a powerful and easy to use report designer. The only other thing needed to produce the report was a few lines of Gen action diagram code that invokes the report via the Rapide Extension Library.

We are also thinking about a name for this technology and are considering calling it Report Object Binding for JasperReports, or ROB Jasper for short ;-)

Runtime Translation Facility

A key aspect of the design of Rapide was to enable the development of multi-lingual applications without needing to design a separate window design for each language. This becomes especially important when you want your application to support many languages and the translation will probably be performed by different people and who will not be skilled in CA Gen development.

The solution we adopted was to give each string (literals, prompts, exit state messages, etc.) a string ID and then externalise the actual string values into a separate string property file which could be translated into multiple languages and then the correct translated string file used at runtime based on the user's locale.

Because the strings are stored outside of the model, the translations can be performed by someone who has the necessary translation skills without also needing to use the Gen toolset.

A string translation tool is available with Rapide that can be used by a non-developer, but one issue with this is that the strings are not presented in the context of the application which can make translation difficult if you cannot see the strings on the actual window.

To make it easier to translate the application, Rapide now provides a Runtime Translation Facility.

When enabled, the Rapide runtime provides a right-click facility when you are actually executing the application in a browser or desktop environment on most types of controls in order to dynamically enter translation strings for the item clicked on.  

This can vastly simplify the process of translation for the majority of UI designs, providing an intuitive method of translating.

In the example below, whilst the user is running in a French locale, the text is only available in English.

With the Runtime Translation Facility enabled, they can right-click on a text string and provide the translation.

The window immediately reflects the changed string. These runtime translations are stored in a file containing the changed strings which can then be merged back into the translated strings in the development machine to become part of the next release of the application. 

Variable Height Grid Cells

Whilst developing a sample chat application to demonstrate push notification on mobile devices, I thought it would be a nice touch to have the messages displayed in variable height cells with the option to change the background colour to indicate who wrote the message.

Rapide now implements this feature for grid style listboxes. The grid cell height automatically adjusts to the content whilst the background colour is set using a an attribute value in the group view.

Push Notification for Mobile Devices

The next release of Rapide will support Push Notification for mobile devices. Push Notification allows your device to receive messages via the Apple Push Notification service (APNs) for iOS and Google Cloud Messaging (GCM) for Android.

If the App is not active the device can display a notification message in the standard notification area and for iOS also set a badge number and play a sound to notify the user that some action is required in the app.

Message received for the sample RapChat app on an iPAD. Clicking on the message opens the app.

Message received for the sample RapChat app on an Android tablet

Swipe down the message area. Clicking on the message opens the app.

Badge Numbers on iOS

On iOS devices, it is common to use a badge number to draw the user's attention to items that need actioning, for example unread emails. A Rapide app can now set and clear a badge number via the Rapide mobile API.

Pull to Refresh Control

  For mobile platforms, a common user interaction to refresh a list of data is to pull down from the top of the listbox. 

The next release of Rapide will support a "Pull to Refresh" action for listboxes and row templates. When the user pulls down from the top of the listbox, a specified event is triggered in the procedure step and a message plus spinning icon informs them that the data is being refreshed.

Paged Navigation

The next release of Rapide will support an enhanced style of navigation called Paged Navigation.

This style is very common on mobile devices, with the example below shows the navigation between four pages. Notice how the top banner of the page indicates the current page title and also has a button to return. 

The runtime automatically keeps track of the previous page without the need for any additional code to process the return flow to the previous page when the user presses the back button. 

The behaviour is customised to the standard behaviour of each platform by using native controllers for each platform.

On iOS Paged Navigation is implemented using a View Controller and a Navigation Bar to display the page title and back button. In addition you can include toolbar buttons onto the Navigation Bar (top) or Navigation toolbar (bottom) by simply defining a toolbar in the Gen window design.

Similarly on Android a native ActionBar control is used where the system back button returns to the previous page and the navigation bar back button to the top page.

Rapide Paginator Control

The next release of Rapide sees the introduction of a new widget - the Paginator control.

The Paginator can be used to control navigation between pages for a grid/row template listbox and also for an entire window or primary dialog box.

For a listbox, you simply specify that the Paginator control is to be used and the Rapide runtime will automatically populate the control with the number of pages and the current page indicator.

For a primary window/dialog box, you can specify the placement of the control and bind it to two numeric views - one that specifies the number of pages and the second the current page.

When the user swipes between pages, an event is called in the procedure step and the designer can decide how to process the page change event, for example by changing the data displayed.

In the example below, the user can swipe between different products, with the Paginator control at the bottom giving them a visual indicator of how many products are available.

Rapide Block Mode Option

We are developing a new feature for the next release of Rapide called the Block Mode option. This will allow you to generate a web and/or mobile application directly from the Gen block mode screen designs.

This new feature is aimed at Gen applications that are currently using block mode (3270) screens but wish to implement a more modern user interface for a browser or mobile device.

In the past this transformation has required a rework of the UI to use a Gen GUI window design. Because there are several key features of block mode screens that are not supported in the Gen GUI (for example enterable listboxes with more than one column), the conversion to a GUI/Web interface also requires changes to the models and also the behaviour of the application.

Whilst these are not insurmountable issues, they do involve additional development, testing and user training which can add up to a substantial cost, especially for large applications.

With the Rapide Block Mode option, the user interface is generated directly from the screen design, with the option for additional enhancements via the Rapide Designer.

Rapide has been enhanced to support various aspects of a Gen block mode application that have not been required for a GUI design, for example:

• enterable listboxes via the Overlay Control feature
• ability to add additional rows into a listbox via the Auto New Row feature
• support for MAKE and SET NEXTTRAN statements executing on the server when the application uses a client/server architecture
• support for mapping function keys to push buttons and override accelerator keys

Enterable Listboxes

In the previous post, the new Rapide feature of overlay controls was introduced, which allows editable cells in listboxes. These will allow the user to modify the contents of existing rows in a listbox, but what about adding new rows?

A normal Gen listbox does not allow enterable lists unless the listbox only contains one column. To overcome this limitation, a new feature in Rapide called "Auto New Row" has been introduced. When enabled, an additional blank row is automatically added into the listbox. If the user enters data into one or more cells, the row is added to the export group view and a new 'auto row' is added.

In the example below, there are four rows in the group view, with a blank row available for the user to enter data into.

Overlay Controls

A new feature for the next release of Rapide is Overlay Controls.

These allows you to 'overlay' the contents of a listbox cell with an editable control. This could be a simple text field, a push button, drop-down, date picker, slider, spinner, etc.

In the example below, various columns contain editable controls, for example a spinner, checkbox, date picker and drop-down.

The above example used the same overlay control for each cell in the column. In the example below, the overlay control in the cell is dynamically defined using a hidden column, allowing different cells in the same column to use a different control. This is especially useful for property sheets.

Load Testing Rapide Applications with JMeter

We recently needed to perform some load testing for a Rapide application to simulate hundreds of users accessing a Rapide application on the same web server. To do this we used the Apache JMeter tool, which is a commonly used open source utility for load testing web applications.

With JMeter you can record a test script and then play it back, simulating the workload of many users.

There are some special considerations when recording a Rapide application, and these have been documented in a new user guide "Rapide Load Testing Guide" that is included in the latest Rapide 1.1 download.

Platform Independence

A key advantage of CA Gen is the platform independent nature of the models coupled with code generation for platform specific native code that offers high performance and access to native operating system features and functions.

The abstraction provided by the CA Gen model allows the developer to concentrate on the business requirements without having to be excessively concerned with the details of the underlying technical implementation.

Platform independence means that an application be deployed to multiple target environments from the same model, but also that the model is not tied to a specific combination of operating system, language, compiler, database or framework versions. This means that the underlying third party software stack can be updated without requiring changes to the Gen models.

With Rapide and Gen, the developer is shielded from the often considerable effort required to keep the underlying software stack up to date and consistent. As examples of this, the changes made in the Apple iOS APIs between version 6 and 7 or the complexity of keeping Java frameworks up to date have typically  resulted in a considerable amount of effort for projects that code directly using the native frameworks. With Rapide the upgrade to iOS7 was implemented by simply installing a new version of the Rapide runtimes with no change to the models or generated code.

Rapide extends CA Gen’s capabilities for platform independence by providing support for multiple platforms (Browser, Mobile and Desktop). A Rapide application comprises platform independent generated Java code and a Java based cross-platform runtime that ensures consistent behaviour and single-sourcing for all supported platforms.

Rapide Global Listener

A recent enhancement for Rapide was a new Listener feature that introduced the ability to listen for events within the same session, i.e. one p-step listening for events from a separate p-step in the same browser window or mobile device.

Rapide has now been updated to incorporate the Rapide Global Listener (RGL), which allows Rapide clients to receive notifications  issued from any other p-step, either in the same application server, in a different application server (for example when using load balancing) or even from a completely different environment (for example a batch job or server procedure step).

The RGL is implemented as a standalone executable and uses TCP/IP sockets for communication between the RGL and the Rapide runtime.

In the first release, events are posted to the RGL from a Rapide client application. In subsequent releases APIs will be provided to enable notification events to be posted from non-Rapide clients, for example Gen batch jobs or server procedure steps.

A typical use of a listener is to replace the need for a client to poll a server to check for updates. Consider the example of the Rapide sample booking application which lists conference room bookings. If you want the list to automatically refresh to show the latest bookings without the user needing to press a Refresh button, a typical approach to this in a Windows GUI would be to use a timer control to post an event to the client p-step which then triggers a server call to refresh the list.  If the timer is set to perform an update every 5 seconds, then this results in  over 5000 calls to the server in a working day - per client! If the application has 1000 users, then you have 5 million server transactions just to keep the list updated.

If the same requirement is replaced by the Rapide listener, then the client only needs to refresh the list when it receives a notify event from the listener, which is triggered when a booking is made or changed. In our example, you might have 20 bookings per day, so the 1000 users refreshing the list 20 times is a reduction in server transactions from over 5 million to 20,000.

The Rapide controls demo and booking demo have been updated to illustrate the use of the Global listener.

Accelerator and Mnemonic Keys

A common practice in designing Windows GUI applications is to use mnemonic and accelerator keys for push buttons, menu items, check boxes and radio buttons. Examples might might include Alt+F for the File menu or Ctrl+P for a push button.

When you run the application in a browser, the browser application itself (i.e. Internet Explorer, Chrome, Firefox) will have its own set of short-cut keys. If the user enters a short-cut key combination that the browser accepts, then this function will be performed in both the browser and the Rapide application. For example, if your application uses Ctrl+T, then if the user enters this key combination, the specified function will be performed by the Rapide application AND a new tab will be opened since Ctrl+T is the keyboard short-cut in most browsers to open a new tab.

It is therefore recommended that you do not use mnemonic and accelerator keys in your application that conflict with the browser since the behaviour is unpredictable and will be confusing to the user.

The Rapide Generator plug-in Consistency Check will now warn you if you are using a conflicting mnemonic or accelerator key combination. The list of keys that the check uses are defined in a file that can be edited to provide your own specific list. 

Sorting Listbox Data

Since day 1 Rapide has provided a capability to allow users to sort the data in a desktop and browser listbox by clicking on the column heading. The actual sort logic is coded in an event in the Gen action diagram since this offers maximum flexibility for the developer, for example to provide complex sort logic involving multiple columns or even hidden columns.

The Rapide Designer now provides a utility tool to automatically generate the action diagram events for all relevant listboxes at once. This will allow you to easily support consistent sort functionality for all listboxes.

There are a few points to bear in mind when using sorted listboxes.

Firstly you need to decide if you will initially re-sort the data when the list is first displayed, or use the sort sequence from the logic that populated the group view, usually as returned from the server.

Secondly, when the data changes (for example you allow the user to edit rows or re-populate the listbox), you need to re-sort the listbox data. Since the Rapide generated sort event generates the sort string, this often simply requires you to include a SORT statement within any event that repopulates the group view.

Thirdly, if your listbox does not contain all of the possible data and a paging function is available, then you need to consider whether a sort function is appropriate.

Exit State CGVALUE

When you reference an exitstate in an action diagram or dialog flow, for example to test the value, you use a statement that references the exitstate name, for example:

IF exitstate IS EQUAL TO database_updated

The generated code does not test the exitstate name, instead it tests a special property of the exitstate called CGVALUE. The advantage of testing the CGVALUE is that this does not change if the exitstate name is changed or when the exitstate is migrated between models.

When you create an exitstate on the toolset, an initial value is assigned, but when the model is uploaded to the encyclopaedia, a new model-wide CGVALUE is assigned to the exitstate that will differ from the value initially assigned in the toolset. This means that any code generated on the toolset prior to re-downloading the model or subset will still use the old value but any newly generated code will reference the new value.

Therefore when you create a new exitstate, you should ensure that any code generated on the toolset that references the new exitstate is re-generated once you have re-downloaded the model/subset to ensure that the CGVALUE is consistent.

Rapide uses the CGVALUE in the window XML files and for externalising the exitstate messages in the strings file and hence you will also need to regenerate the Rapide window manager files and the strings file as well as the generated code.

Rapide Listeners

Listeners are a new feature in Rapide that can be used to synchronise common data between multiple windows, allowing dynamic applications where the displayed data is always up to date.

Sophisticated user interfaces that display the same data in multiple windows often need to have a mechanism to refresh the common data when it changes. In the past this has been difficult to achieve with CA Gen and therefore the developer either ignores the requirement or has to use complex logic to implement the refresh capability.

With Rapide, the developer can register a Listener on a specific object or multiple objects using wild cards or multiple Listeners. The Listener can then trigger an event when the object changes, thus enabling synchronisation of common data between multiple views of the same object.

For example, an order processing application contains multiple windows that display purchase order details.

• Each window that displays purchase order details registers its interest with the listener using an action diagram function
• When the purchase order details change, the developer uses an action diagram function to notify the listener that the object has changed
• The listener automatically posts update events to the interested windows which can then retrieve the details they require and update their display

Custom Decorations

Rapide has always had the ability to place a mandatory decoration on a field that does not have a value. We have now added a new feature to allow the developer to add custom decorations to a control using action diagram methods.

Decorations can be used to flag the user's attention to a control, for example a recently changed value or a warning about some data.

Decorations can be placed to the left or right of the control and at the top, centre or bottom. Four different images are supported. Some examples are shown below.

There are action diagram methods to apply a decoration to a control (field, button, etc.) and to show or hide the decoration. Decorations are supported for desktop and browser applications.

Global allocation of local views

Gen GUI C applications are able to take advantage of an environment variable IEFLOCALVIEWALLOCSCOPE which can be set to GLOBAL causing local view values to be shared across PSteps.  

Thus you can flow to another PStep, use non-initialised views in the PStep or in lower-level ABs, flow back (closing the called PStep), then flow to the same PStep again, or use the same AB, and those non-initialised views are maintained with the same data values.

In CA Gen code this functionality is only available for C clients and not for Java clients.

Rapide has been enhanced to provide similar functionality. However whilst the Gen GUI clients implement this as an environment variable that affects all action blocks and procedure steps, for Rapide to make more efficient use of memory, you explicitly specify which PSteps and ABs should have their local views managed globally for the session.  

More JavaScript Controls

The Rapide Controls demo has been updated to include some more examples of JavaScript controls embedded in a Gen window. Rapide makes it very easy to implement a JavaScript control into a Gen window, and they are then available on all platforms - desktop, browser and mobile, unlike OCX controls which have limited portability.

1) Example of a rich text editor control. Data is passed to/from the control in a view containing html markup.

2) Use of Google Maps with a simple input of latitude and longitude:

3) Use of the JSCharts control.

You can try out these controls live on the Rapide Demo here:

http://80.177.61.42:82/demo