Thursday 19 December 2013

Javascript Controls

Rapide now allows the use of Javascript controls in the user interface design.

In the example (from the updated Rapide sample model) a simple javascript control is created to show a traffic light which the developer can interact with using action diagram functions and the user can press to change the state.

Grid Layout

A new feature in Rapide is the ability to display the contents of a listbox as a grid instead of a simple row-based listbox.  With a grid layout, the Rapide runtime automatically displays the listbox rows in cells, with multiple cells per line, according to the overall width of the listbox. As with other types of listboxes, column data may be enhanced as images and sophisticated layout within the cell is accommodated with the same approach as row templates.

In the example below from an iPAD note how the layout adjusts automatically when the device is rotated.




Tuesday 3 December 2013

Nullable Dates and Date Pickers

A null date in Gen (represented by datenum(0) or 01-01-0001) is valid and is often used to indicate that the date field is not set.

However most date picker controls do not support a null date - they always have a value, and so if you use a date picker OCX control, you may have to add an additional checkbox beside the date control to specify whether the date is set or not.

This workaround is easy enough to implement, but can be time-consuming if you need to implement it for many date fields across many windows and requires changes to the action diagram code to enable/disable the date control based on the setting of the checkbox.

With a conversion to Rapide, you may want to implement date pickers by default and still support null date values. To make conversion easier, Rapide now supports the concept of a nullable date picker.

This is simply done by checking the Nullable checkbox when defining the field:


The date picker is then implemented with an automatic additional checkbox to indicate if the date field is null or not.


Nullable date with no value set

Nullable date with value set





Thursday 28 November 2013

Row Templates

Row Templates are a new feature in Rapide that provides a mechanism for sophisticated layout of listboxes on browser and mobile platforms. They are especially useful for use on mobile platforms where HTML markup is not supported.

With the row template style, each row consists of a single column with the Gen listbox attributes placed as cells within the row. Click events are supported on each cell and for browser platforms the cells can also contain HTML markup.

The example below shows a row template layout. Each of the cells is specified in a separate attribute of the group view and the layout defined using the Rapide Designer.



Friday 22 November 2013

Fixed Listbox Columns

When you have a listbox that contains many columns and the user has to scroll sideways to see all of the data, it is often useful to be able to fix the position of one of more 'identifier' columns on the left of the listbox so that these do not scroll, and hence the user is able to relate the data in the right most columns to the row identifier.

Rapide now allows you to fix the position of one or more columns so that these do not scroll horizontally. This is illustrated in the two images below.


After scrolling to the right, notice that the Type and Resource columns are fixed in position:


Listboxes with Markup

Another new feature for Rapide listboxes is the ability to use HTML markup to format the data in a cell.

The listbox below is a standard Gen listbox which has been enhanced with Rapide. The data in the Model column contains HTML code that displays the picture and text with formatting markup which is then rendered. The data in the Retailer column is a simple HTML link which will open the link in a separate tab of the browser when clicked.


Tree View Listboxes

The latest beta release of Rapide comes with some significant enhancements to listboxes.

Listboxes can now be easily transformed into a tree-view control with the addition of attribute views in the group view to indicate the tree level, expand status and bitmap name.

Another enhancement is the ability to specify a checkbox on the first column. This is associated to another attribute view that indicates the checked status.

An example of a tree view with a checkbox indicator  is shown below.


Monday 28 October 2013

Font Sizes and Display Resolution

When designing a GUI application in Gen, the controls are positioned using a pixel based co-ordinate system that specifies the position and size of the controls. In addition, fonts are specified using point sizes. A point is 1/72 inches, so for example 12 pt text is 1/6 inch high. In the 'normal or 100%' resolution on Windows desktop, the screen resolution is 96DPI (dots per inch), so 12 pt text is 16px (pixels) high.

If the user changes the screen resolution to say 120 DPI (125%), then the same 12pt text is now 20px high. However the remainder of the window design is still specified in pixels, and this can cause problems with the positioning of the text within the controls.

In the example below, notice the change in the window between 96 and 120DPI.



Window with system resolution set to 96 DPI

Window with system resolution set to 120 DPI

To support the change in DPI, the designer would need to ensure that text fields and literals are wide enough to accommodate all of the text and avoid wrapping. Web Browsers also allow the user to change the zoom factor for an application.

For Rapide Browser and Mobile applications, Rapide uses pixel based font heights rather than point based, with the conversion from points to pixels based on 96DPI. This means that a UI design that looks correct in 96DPI will scale correctly irrespective of the DPI setting or browser zoom level. 

Rapide Desktop applications still use a point based font size to ensure that fonts are scaled if the user requires a higher DPI setting.

Tuesday 15 October 2013

Understanding and editing UTF-8 files

One of the design goals of Rapide was to enable internationalisation of the applications so that the user interface could be displayed in multiple languages, with the user's locale automatically detected and the appropriate locale specific translated text strings displayed instead of the default ones.

We chose UTF-8 as the encoding standard for the files that Rapide generates and uses, for example the GUI XML definition files and the string properties files. 

Here are some links to various articles if you want to know more about UTF-8:

http://www.utf8everywhere.org/

When editing the files to create locale specific translations, you must use an editor that understands and preserves the UTF-8 encoding. For basic editing we use Notepad++ which can edit files in UTF-8 and also contains conversion utilities. On opening an existing file, always check that the encoding has been set to UTF-8. Many editors will attempt to auto-detect the encoding, but if the file only contains basic ascii characters below X'80', there is no difference between an ascii and UTF-8 file and so the editor will probably not set the encoding format to UTF-8.

One way around this is to insert a BOM (byte order mark) at the start of the file to indicate the encoding, but this is not recommended for UTF-8 and we have decided not to include a BOM in the files generated by Rapide.

Friday 27 September 2013

QR Codes

The Rapide Controls demo has been updated to include an example of producing a QR code and rendering it on the window.

QR (Quick Response) codes have become widely used, especially in consumer facing applications, and a common use is to encode a URL that the user can quickly access by scanning the code.

The Rapide demo shows how a QR code can be dynamically created and displayed.

Visit http://80.177.61.42:81/demo and choose Dynamic Pages, or just scan the code below with your phone!



Friday 30 August 2013

Dynamic Feedback

When a transaction is initiated by the user that takes more than a few seconds to complete, it is good practice to provide status updates to the user to indicate that progress is being made and the transaction is still being processed.

For Windows applications, the developer can easily update a progress bar or status field and use the Gen REFRESH command to update the user interface to provide this feedback. This approach is often difficult to achieve on browser applications because the 'client' logic is executing on the application server.


The Rapide runtime has been architected to allow dynamic feedback during the execution of a transaction with a 'server push' approach where the Rapide runtime is able to send updates to the user interface without requiring user intervention on the browser. The Gen REFRESH command is supported and any updates to export views will be sent to the user interface to allow status updates to the user.

There is an example of this is in the demo application.


Thursday 22 August 2013

Rapide Canvas Example

Another canvas control example has been implemented in the Rapide Controls demo. This shows a damage diagram for a car and has some controls to allow the user to specify areas that are damaged.

This is a good example of how use of a canvas is the best way of visualising data.


Wednesday 21 August 2013

Rapide Browser Control

Rapide now supports the placement of a browser control in the window design. An example use of this is to support the display of PDF reports. Take a look at the PDF example in the Rapide Controls Demo.

Rapide Extension Libraries

A new feature in Rapide is the ability to directly access native Java libraries using Gen action diagram code. This makes it much easier to take advantage of a wide variety of Java libraries compared with using external action block code.

The first extension library developed is for the Apache PDFBox library which allows creation of PDF documents.

Additional libraries will be supported based on demand.

For more details, visit the Rapide web site.

Rapide Canvas Control

Canvas is a new type of control available in Rapide. A Canvas is a widget placed on the window that can then be 'drawn on' using action diagram functions and hence provides a more dynamic way of visualising data.

In the example below, a battery meter is drawn using a blank battery bitmap and a superimposed user drawn rectangle and text, with the width and colour depending on the charge level.


The action diagram code used to draw the battery is shown below.


Tuesday 20 August 2013

Rapide Library Changes

The first implementation of the Rapide functions library used Gen functions which are implemented in the model using a custom function definition. In developing the functions, we found these to be rather restrictive since they are limited to a minimum of 1 parameter and a maximum of 5 parameters. In addition, change to the functions are distribution of new functions required maintenance of a separate functions model and adoptions / migrates to receive the changes.

We have therefore developed a new interface to the Rapide functions library that is implemented using methods and properties and coded in the model using dot notation statements.

The example below shows a simple action diagram that interfaces to the device camera.


Friday 2 August 2013

Rapide Sashes

A new feature has been added to Rapide - a resizeable sash.

A sash is a horizontal or vertical control that is placed on a window and which can be moved in a vertical or horizontal direction by the user. The purpose of the sash is that other controls can be tracked against the position of the sash, for example to allow the user to adjust how much space is provided for a listbox.

In the example below, a vertical sash divides two list boxes whose sizes are tracked to the position of the sash.


Moving the sash control to the right adjusts the sizes of the listboxes since it is specified in the Rapide Designer that they track the position of the sash control.


      

Individual Model Backups

Whilst you should have a regular backup of the entire CSE (and GuardIEn) database for disaster recovery purposes, this backup would only allow you to restore the entire encyclopaedia.

What happens if you have a problem with one model caused by a corruption or 'user error'?

A common technique for backing up individual models from the CSE is to run a frequent download "with upload option" of the model to create an update.trn for the model to be used in case of an issue with the model. if you need to revert to the backup version of the model, you can rename or delete the current model and upload from the update.trn file created by the download.

A major problem with this approach is that it creates a new model in the CSE that does not retain ancestry with other models in the same project. You then need to adopt the model, which might be very time-consuming if it needs to be adopted to multiple models, and can also be error-prone since if any of the objects that previously had ancestry have since been renamed in one of the models, the adoption will not re-establish ancestry.

The technique that we use is to run an extract with apply option instead. This creates a child model which can then be loaded back into the CSE with ancestry retained. Child models are not very usable, so there is an additional step involved to copy the child model to create a full model and then delete the child model. However ancestry is retained.

At IET we have a weekend automated script (executed as a user defined task using the Task Assistant) that extracts all of our current models to a backup file as additional level of backup over and above the database backups and archive logs. Thankfully we have not yet had to use them, but it is comforting to know that they are available.

Thursday 25 July 2013

Dynamically resized Dialog Boxes

A new feature in Rapide allows you to track the size of a dialog box based on another varying size control.

In the example below, the listbox height is set according to the number of rows with a min of 5 and max of 15 rows.

The dialog box height is then tracked to the height of the listbox and is thus dynamically altered based on how many rows are in the listbox.




Take a look at this in the live demo (navigate to the Listboxes page): http://80.177.61.42:81/demo

Tuesday 23 July 2013

Expanding & Contracting Group Boxes

A new feature added to Rapide is the ability for desktop and browser applications to have expanding/contracting group boxes. These allow infrequently used fields to be hidden away and free up space on the browser window, which is especially useful when designing for smaller browser sizes like mobile and tablet devices.

The example below comes from the Rapide Controls demo which has been updated to use this new feature.

Note how the group box has an image on the top left and expand/contract control on the top right. The layout management has also been updated to allow control positions to be relative to other controls. In this example the second and third group boxes are positioned vertically relative to the group box above so that when the group box expands or contracts, the group boxes below it are re-positioned.

Take a look at the live demo (navigate to the Text Controls page): http://80.177.61.42:81/demo


Monday 22 July 2013

Images from BLOBs

Gen 8.5 introduces the ability to define BLOB (binary large object) attribute views and to store and retrieve them from the database. Rapide has been enhanced to allow images stored in blob views to be displayed on the window design, either as single images or as columns in a listbox.

A future enhancement to our mobile API will allow a picture taken on the device camera to be stored in a BLOB view as well.

How would your application benefit from the ability to dynamically display graphical and image data with the images stored in the database or dynamically loaded from image resource files? Let us know!

Monday 15 July 2013

Moving to the Browser - what about those OCX controls?

Since announcing Rapide a few weeks ago, we have already had some very interesting discussions with Gen sites who are keen to migrate their Gen Windows GUI client applications to browser and mobile applications.

Rapide has been designed to provide a high level of support for existing Gen client applications, and this includes support for OCX controls for desktop based clients, but it is generally accepted that using ActiveX controls in a browser is not a good idea because they are only properly supported in Internet Explorer.

So, what are the options?

To start with, Rapide already provides native widget support for some of the controls that you may have used an OCX for. Examples include using bitmaps in tables, date and time 'picker' controls, tabs, timers, progress bars and other stylised number controls like sliders, spinners, etc.

We plan to enhance listboxes to support tree views and more sophisticated layouts, and additional controls can be added based on customer requirements.

In addition, we are researching options for adding custom JavaScript based controls into a Rapide UI design.

If you are planning to convert a Windows GUI based application to the web or mobile and have used OCX controls, then we would like to hear from you. Having a good understanding of what controls have been used in Gen GUI applications and typical customer requirements will hep us plan and prioritise our roadmap for extending the range of controls that we offer.

Friday 5 July 2013

Demo Apps Updated

The Rapide demo apps have been updated to show the use of resizeable sashes. The Booking App now uses a vertical sash for the Booking Detail to allow the user to change how much space is allocated to the detail panel.

The Controls Demo now uses a horizontal sash in the Multi Frame demo.

Thursday 27 June 2013

Tabbed Frames and Resizeable Sashes

Initially on the roadmap for early next year, we have brought forward the implementation of tabbed and resizeable frames to the first release so that these can be used in the port of GuardIEn WebCR to Rapide.

Tabbed Frames are an easy method of implementing tabs. The parent window contains a frame which is designated as 'Fixed Tab' Each tab is then designed either as a separate procedure step or as a secondary dialog in the same p-step.

A primary window or dialog can also have a single horizontal or vertical resizeable frame called a Sash. The user can resize the sash to adjust the relative size of the parent dialog and the dialog embedded inside the sash.

Migrating GuardIEn WebCR to Rapide

We have started to re-write the web front-end to GuardIEn (WebCR) using Rapide. Not only will this enable us to deliver a much better user interface for WebCR and also provide a mobile interface, it will also provide valuable input to the development and testing of Rapide.

If you would be interesting in beta testing WebCR on a browser or mobile interface (iOS or Android) or have any suggestions for enhancements to the functionality, please get in touch.

Thursday 6 June 2013

First Presentation for Rapide

Just back from the Finnish Gen user group meeting in a very warm Helsinki (well actually the CA offices in Espoo) where Rapide was presented for the first time. Despite a (not too serious I hope) comment that an IET product should have an 'IE' in the name, the product seemed to be very well received.

Talking about iOS and Android in the land of Nokia raised the obvious question about support for Windows Phone 8, and we shall have to see what the demand is, though Windows Phone apps can still be supported via the browser, but not yet as a native app.

Monday 3 June 2013

Rapide Announcement

Today we have announced a new product called Rapide. This is a very exciting new development for CA Gen and we will be using this blog to provide regular updates and seek feedback from the Gen community.