CTC Smart Client Generator - Features
For further details on all features see the CTC Smart Client Generator document.
CTC Smart Client View Controller Top of page

The CTC Smart Client View Controller is a control specifically designed to encapsulate everything related to the display of the generated forms/views, including all communication with the back-end EAE/AB Suite host system.

The control is implemented as an HTML 5/JavaScript control, allowing it to be added to any HTML 5 application from which access to an EAE/AB Suite application is required.

Included with the generator is a default HTML 5 application that utilises the CTC Smart Client View Controller. The View Controller is a flexible, customizable control that can be added to any HTML 5 application. This allows customers to develop their own HTML 5 solutions and include access to the EAE/AB Suite system as required. The default HTML 5 application provides the starting point for customization.

The CTC Smart Client View Controller allows the generated user interface to be deployed on any modern Smart Device supporting HTML 5 such as PCs/MACs, Tablets/iPads and Phones/iPhones.


CTC Smart Client View Controller (PC View)

CTC Smart Client View Controller (Tablet/Phone View)
Major features of the CTC Smart Client View Controller include:
  • Complete host system session management.
  • Efficient Forms/Views Download Manager.
  • Support of Dynamic Properties allowing the EAE/AB Suite host application to set properties on controls at runtime.
  • Customization through flexible API and event handling.
  • Display of alternative views allowing Form Designers to paint forms using tools like Microsoft Expression Blend or Visual Studio 2008/2010.

See also the Runtime Architecture.

Multiple Open Ispecs Top of page

The CTC Smart Client View Controller allows the User Interface to open and interact with multiple ispecs concurrently. Depending on whether the host application is designed and implemented as a 'state full' or 'stateless' system, the CTC Smart Client View Controller provides different ways of achieving this:

  • 'state full' system
    A 'state full' system is a system that maintains the state of transactions on the host side. State information is typically stored in Global Work. Navigation between ispecs is often controlled by the host application and typically only one transaction at a time within a session is allowed. This means, if the user requires two ispecs open at the same time, two independent sessions are required. See Multiple Sessions below.

  • 'stateless' systems
    A 'stateless' system is a system that maintains the state of transactions using hidden fields, which are defined as part of the transaction. This means the state information follows the transaction. This allows the navigation between ispecs to be determined on the client side and provides the opportunity for the client to keep more than one transaction/ispec open at the same time within the same session. See Multiple Concurrent Open Ispecs in the Same Session below.

Multiple Concurrent Open Ispecs in the Same Session Top of page

The CTC Smart Client View Controller is designed to manage multiple open ispecs at the same time within the same session. This can be utilized by EAE and AB Suite applications that are 'stateless' and therefore allowing the state of open ispecs to be managed on the client side within the User Interface application.

This allows the end user to open and close ispecs ad-hoc and navigate between open ispecs. Ispecs can be displayed in tabs or windows. Any number of ispecs can be open at the same time. This also allows opening multiple copies of the same ispec.

Opening and closing ispecs and keeping track of the state of each of the open ispecs is completely managed on the client side, making it very efficient. When the end user navigates between already open ispecs, no messages are sent to the host system. Only when the end user submits an ispec is a message sent to the host system.

Ispecs displayed in Tabs Top of page

Below is an example showing four ispecs open at the same time each being displayed in a seperate tab.

When the user opens a new ispec, it is displayed in the current active tab. From the menu, the user can add new tabs in which to display ispecs. When selecting a tab, the ispec within the tab is made the current active ispec allowing the user to transact with the ispec.

This example is delivered as part of the Smart Client Generator to be used as a starting point for customization to suit specific local requirements.


Multiple Ispecs in Tabs
Ispecs displayed in Windows Top of page

Below is an example showing four ispecs open at the same time each being displayed in a separate window. The windows can be minimized and maximized as well as arranged tiled, horizontally or vertically.

When the user opens a new ispec, it is displayed in the current active window. From the menu, the user can add new windows in which to display ispecs. A list of open windows is shown in 'Window' sub-menu. When a window is selected, the ispec within that window is made the current active ispec allowing the user to transact with the ispec.

This example is delivered as part of the Smart Client Generator to be used as a starting point for customization to suit specific local requirements.


Multiple Ispecs in Separate Child-Windows
Multiple Sessions Top of page

The CTC Smart Client View Controller is designed to run multiple sessions within the same User Interface application. This can be utilized by EAE and AB Suite applications that are 'state full' and therefore requiring a separate session for each ispec to be displayed concurrently. For each session that is required, a CTC Smart Client View Controller is added to the User Interface application.

Custom Controls Top of page

Custom Controls will enhance the user interface further. For example:
  • by substituting controls painted in the Development environment by additional Smart Client controls such as DatePicker, Data Grid and Charting controls
  • by implementing custom Smart Client controls
  • by implementing Third Party Smart Client controls. Third Party controls for Grid Views, Dropdown Lists, Sliders, Date and Time are available on the market.

Custom Controls replace controls painted on the form as in the example below where the DatePicker control replaces a date field painted as a TextBox.

Below are a examples of how custom controls can enhance the User Interface. See complete list of custom controls delivered as part of the CTC Smart Client Generator.

Date Picker Top of page


TextBox configured to be replaced with DatePicker for Date Fields
  

Standard TextBox Date Field

DatePicker Control replacing the TextBox Date Field
List Box Top of page

The List Box is a Smart Client control used instead of the standard HTML List Box. This List Box offers many different presentation options such as alternating row styling, horizontal/vertical scrolling and customized data formatting. Below are a few examples.


Standard List Box Control

List Box with Alternate Row Style

Standard List Box Control

List Box with Custom Formatting, Images and Alternate Row Style

Standard List Box Control

List Box with Item Number, Images and Alternate Row Style
Data Grid Top of page

The Data Grid is a Smart Client control often used instead of the standard List Box. The Data Grid offers many different presentation options such as defining multi columns with column headers, column sorting, horizontal/vertical scrolling and alternating row styling. Below are a few examples.


Standard List Box Control

  

Data Grid replacing the Standard List Box
with Multi Columns, Column Headers and Sorting

Standard List Box Control

  

Data Grid replacing List Box with Multi Columns, Column Headers,
Sorting and Images
Custom Check Box and Radio Button Top of page

Icons on Check Boxes and Radio Buttons can be customized simply by setting an option on the CTC Configurator. When setting the option, icons can be styled to suit local styles. Custom icons will scale up or down according to the font size making it easier to select the icon especially on mobile touch devices. Grid lines can be added. Below are a few examples.


Standard Default Check Box
Grid lines


  

Custom Check Box
Icons on Left
Grid Lines

  

Custom Check Box
Icons on Right


  

Custom Check Box
No Icons
Grid Lines

  

Custom Check Box
Icons
Buttons
Grid Lines

Standard Default Check Box
Grid lines

  

Custom Check Box
Icons on Left
Grid Lines

Custom Check Box
Icons on Right
Grid Lines
  

Custom Check Box
No Icons
Grid Lines

Standard Default
Radio Button
Grid lines

  

Custom Radio Button
Icons on Left
Grid Lines

  

Custom Radio Button
Icos on Right


  

Custom Radio Button
No Icons
Grid Lines

  

Custom Radio Button
Icons
Buttons
Grid Lines

Standard Default Radio Button
Grid lines

  

Custom Radio Button
Icons on Left
Grid Lines

Custom Radio Button
Icons on Right
Grid Lines
  

Custom Radio Button
No Icons
Grid Lines
Charting Top of page

The example below shows how a Third Party Charting control can replace the Standard List Box and dynamically provide a chart from the data that otherwise would be displayed in the List Box.


Standard List Box Control with Multi Columns
  

Charting Control replacing the Standard List Box Control
Calculator Top of page


TextBox configured to be replaced with Calculator for Numeric Fields
  

Calculator Control replacing the standard TextBox
When substituting a textbox with the calculator control, a calculator icon is added next to the textbox. Clicking the icon drops down the calculator.

Map Popup Top of page


The Map Popup Control attached to a group of address fields
  

Map Control showing the address on the map
The Map Popup Control utilizes the Google Maps API for HTML 5. To use the Map Popup Control, simply configure a group of address fields and attach the CTC Map Popup Custom control. When clicking the map icon, a window opens showing the address location on the map. All navigation capabilities on the map are available as normal.

CopyFrom List Top of page


Standard CopyFrom presentation

CopyFrom List Control presenting all rows of a CopyFrom in a Data Grid
The CopyFrom List Control provides an easy way of displaying all rows of an inquiry only CopyFrom in a Grid. The CopyFrom List Control creates a list of all rows in the CopyFrom by automatically returning to the host system as many times as required to retrieve all rows. The list is presented utilizing the Data Grid control, formatting the data in columns with column headers. This gives the end user the ability to conveniently navigate the data by scrolling and sorting by columns.

Gauges Top of page

Gauge controls can be an effective way of displaying information. The example below shows how Third Party Gauge controls can be added to forms. By binding to data already part of a form, the data can easily be shown on a Gauge control.


Radial Gauge illustrating Stock Balance
    

Linear Gauge illustrating Stock Balance

CTC ComboBox Control Top of page

The CTC Smart Client Generator includes a ComboBox control providing support for standard combo box behaviour including additional capabilities such as Auto Complete.


CTC ComboBox Simple
List always visible, Typing allowed, AutoComplete enabled

CTC ComboBox DropDown
List drops down, Typing allowed, AutoComplete enabled

CTC ComboBox DropDownList
List drops down, Typing not allowed, Selection only, AutoComplete disabled

In addition, the ComboBox control also allows for custom styling and formatting of how the information is presented in the dropdown list:

Standard CTC ComboBox

CTC ComboBox with Item Number and Icon

CTC ComboBox with Item Number, Icon and Formatting

Configurable Controls Top of page

You can specify how a control is generated. Any property you can specify on an HTML Control can be specified on all CTC Controls, Standard Controls and Custom Controls.

The CTC Configurator provides a Properties Editor as seen below, which allows the user to edit the complete set of properties for a control. Properties can be added or removed to generate the look and feel as required.


Control Properties Editor
Examples of property edits:

The following shows the standard look and feel of the Push Button control.


Standard Push Button Look and Feel, No Editing
Simply removing the Background Color property from the Push Button achieves the browser default 3D effect.


Standard Push Button, Background Color Property Removed
Buttons, as well as all other controls on the generated forms, can be styled using CSS. The following shows a Background Image added to the buttons using CSS.


Standard Push Button, Background Image Added

Font Substitution Top of page


Options for Configuring Font Substitution
Fonts painted on the forms can be substituted with any font supported by HTML. When substituting fonts it may be necessary to specify a scaling factor to be applied to achieve a suitable font size.

CopyFrom as Grid Top of page

CopyFrom areas can be generated as a grid in two different ways:
  • Column formatted grid
    This format is suitable for copyfrom areas with fields painted on a single line.
  • Row formatted grid
    This format is suitable for all copyfrom areas with fields painted on a single line as well as fields painted over multiple lines.

Labels painted directly above the CopyFrom region can automatically be recognized as column headers. This is controlled by the option 'CopyFromAutoColumnHeaders'. The look and feel of the generated grid can be customized to suit local requirements.

Below is an example of a CopyFrom area generated as a Column formatted grid:


Standard CopyFrom Area with fields painted on a single line

CopyFrom Region generated as a Column formatted grid including Automatic Column Header Detection

Below is an example of a CopyFrom area generated as a Row formatted grid:


Standard CopyFrom Area with fields painted over multiple lines

CopyFrom Area generated as a Row formatted grid including Automatic Column Header Detection


Tab Groups Top of page

Tab Groups allows grouping of ispecs and displaying the group as tabs for easy navigation. Multiple tab groups can be defined.


Tab Group with 3 ispecs (Customer, Name Inquiry, Inquiry) in the group
Copy to Clipboard in Excel Format Top of page

Included with the generated Smart Client Application is an option allowing the end user to copy list data, and data from a CopyFrom region to the clipboard in Excel format. When the end user selects a List Box, Data Grid or clicks within a CopyFrom region, the option "Copy To Clipboard, Excel format" appears in the main menu allowing the end user to easily copy/paste data into an Excel spreadsheet for further analysis.


CopyFrom data copied to clipboard and pasted into Excel Spreadsheet
Copying CopyFrom data can be configured to return to the host as many times as necessary to retrieve all rows of the CopyFrom region.

Scaling Top of page

When deploying user interfaces on Smart Devices such as tablets and phones with touch screen, special consideration needs to be given to whether the size of the controls on the forms are appropriate for easy selection by finger touch.

Options for automatically scaling the controls are provided by the CTC Smart Client Generator. Scaling factor can be specified for fonts, and for controls in horizontal and vertical direction. When specified, the size and position of controls is scaled up or down.

Scaling can be applied for all ispecs in a bundle or for selected ispecs.


Normal Generated View with no Scaling Applied

View with Scaling Applied

Alternate Views Top of page

When deploying user interfaces on Smart Devices with a small screen size such as mobile phones, special consideration needs to be given to whether the layout of the controls on the forms is appropriate for easy viewing and navigation.

The preference is a layout that does not require scrolling, however, when that cannot be avoided, scrolling in a vertical direction is preferred.

The ideal is a fluid layout that automatically adjusts to the size and orientation of the device. However, controls painted with the forms painter in EAE and AB Suite are fixed in position, which means deploying user interfaces on mobile Smart Devices often requires forms with a layout that is different to the one painted in EAE or AB Suite for traditional PCs or MACs.

The CTC Smart Client Generator offers the Alternate Views feature, which allows users to paint an alternate view of the forms using external tools such as the Microsoft Expression Blend or Visual Studio.

One of the benefits of CTC Smart Client Generator is the separation of presentation from data, which is achieved through the databinding capabilities. This allows the collaboration of forms designers and programmers on a project, where the designers use specialized tools like Microsoft Expression Blend for painting forms while the programmers can concentrate on the business logic.

The CTC Smart Client Generator creates a separate form and data class for each ispec. This separation allows painting alternative forms while still utilizing the data layer.

Creating an Alternate View is as simple as setting the AlternateViewCreate option and then opening the forms in external painters such as Expression Blend or Visual Studio. At runtime, when the user navigates to a form that has an alternate view specified, the CTC Smart Client View Controller will display the alternate view. Alternate Views can be specified for all ispecs in a bundle or for selected ispecs.


Normal Generated View

Alternate View after Layout Changes

Alternate View on iPhone after Layout Changes

External Data Files Top of page

List controls such as List Box, ComboBox, Data Grid and Charting can be configured to display external Xml formatted data files. List controls are a convenient way of displaying options for the end user to choose from and often it can be efficient to store and maintain these options in Xml formatted files outside of the EAE or AB Suite database.

List controls include additional properties that allow specification of the file path, an expression for extracting nodes, and columns to display in the list. The files can automatically be transferred from the server and cached locally on the client work station until a new version of the application is deployed. Nodes and columns from the Xml file can be displayed automatically in the list according to specifications on the control, or manipulated in the code behind the form.


Example of List Boxes displaying data from external Xml files

Automatic Setup of Application Infrastructure Files Top of page

The generator automatically installs all required infrastructure files into the bundle views directory. No manual steps are required for this. When running the generator for the first time on a new bundle, the infrastructure files are automatically copied to the output directory of the bundle. An option is provided for the generator to reinstall the infrastructure files when the files have been updated or new files have been added.

Automatic Compile and Build of the Generated Application Top of page

As part of the generate process, the generator can automatically compile the generated application and build the necessary dll's. This is achieved using MSBuild, the build platform from Microsoft used by Visual Studio. Together with the option for configuring the Runtime parameters, this means the application is ready to deploy when the generation of the user interface application is complete.

Configuration of Runtime Parameters Top of page

Parameters for the runtime configuration of the generated application can be specified using the CTC Configurator. When any of the runtime configuration parameters are changed, the generator will update the <appSettings> section of the Web.config file. This provides a convenient way to maintain all configuration details in one place.


Runtime Parameters Configuration

Keep Session Alive Top of page

It can be very disruptive to the end-user when the session with the web server times out while filling in a form and before the data is submitted. The generated Smart Client Application automatically prevents the session with the web server from timing out. A heart beat is sent as a background request from the Smart Client application 30 seconds before the session is about to time out, which automatically keeps the session alive.

System Trace Top of page

System trace is normally enabled centrally by the administrator by setting parameters in the web.config file. This turns tracing on for all users and is therefore only appropriate in a test/development environment.

In addition to the centrally controlled system trace, tracing can also be turned on for individual client sessions at runtime. When enabled, system trace can be turned on/off at any time from a client during a session. When turned on, log information is written to a separate log file on the web server specifically for this client session. The log file can be retrieved from the web server and displayed on the client for analysis.

For further details on all features and capabilities see the following documents: