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.

Dashboard

Top of page

Included with the Smart Client Generator is a Dashboard feature. This allows users to run multiple ispecs side by side in the same browser window. This feature can be utilized by 'stateless' as well as 'state full' systems.

Dashboard is aimed at managers who require business intelligence type information that is provided by the system via selected ispecs specifically created for the purpose of analysing data and displaying information in a graphical as well as tabular format. Ispecs are shown side by side allowing for comparing data from multiple ispecs. Users who often interact with the same few ispecs may also benefit from using the dashboard.

Dashboard is best viewed on a large screen. Up to 4 different dashboards each with up to 6 dashboard items (ispecs) are allowed.

Users configure the dashboard themselves to suit their needs. Each user defines which ispecs they like to include in the dashboard including various options. The dashboard configuration for each user is stored on the web server under their username. This means the configuration will follow the user in case they move to another workstation or switch to using another browser. Below is a screen shot of dashboards with different configurations:


Options available are:

• Startup Ispec. The startup ispec is selected from a list of ispecs available. Startup ispec will automatically be opened for each dashboard item when the user starts the dashboard.
• Auto Refresh. This is useful for ispecs that display information that changes frequently. The user can specify a refresh interval between 1 and 60 minutes.
• Scale to Fit. With this option, the ispec will be scaled to fit the space, which will eliminate scrollbars.

Each dashboard ispec view has a toolbar to which the users can add tools to suit their needs.
Standard tools available to include on the toolbar are:

• Dropdown Menu
• Calendar
• Calculator
• Clipboard
• Console
• Messages/Errors Window
• Show Field Name
• Form Background Color
• Field AutoComplete

Custom tools can be added to the toolbar.

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

Lookup

Top of page

Lookup function provides the ability to open an ispec in a separate popup to lookup an item and automatically transfer values of key fields back to original ispec. The lookup popup dialog runs in a separate session in order not to interfere with the state of the current open ispec. The lookup function will automatically log the user into this session.

The example below shows the sequence of events when using the lookup function:

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

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.

Examples of property edits:

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

Simply removing the Background Color property from the Push Button achieves the browser default 3D effect.

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.

Font Substitution

Top of page

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:


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

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.

Toolbar

Top of page

The toolbar appearing in the header is customizable allowing users to add or remove tools to suit the site requirements.


The following standard tools are available with the installation:

• Home
  Takes the user back to the ispec specified as the application main menu ispec.
• Calendar
  This will popup a calendar. When a date field is highlighted the calendar will popup below the field, otherwise the calender will popup as a standalone calendar.
• Calculator
  This will popup a calculator. When a numeric field is highlighted the calculator will popup below the field, otherwise the calculator will popup as a standalone calculator.
• Print
  This will print the current open ispec formatted for printing.
• Copy To Clipboard
  This will copy list data to the clipboard. See Copy to Clipboard in Excel Format
• Command Console
  This will open the command console.
• Message Window
  This will show the current available messages and errors in a popup.
• New Browser Window
  This provides and easy way to open a new session with the application in a separate browser window. This will automatically log the user in to the new session when the MainUIPage is configured for capturing the user login credentials.
• Show Field Name
  This turns on/off showing field names as the user moves the cursor over the fields.
• User Settings
  Opens a popup allowing the user to specify background colors for the header and the ispec screens and enable Field AutoComplete. AutoComplete store values entered for fields on the page and suggest a list of matches to choose from. Values are stored for selected fields configured by the system administrator. This can be customised to add additional site specific user settings.
• Favorite Links
  A convenient way to provide list of links to other resources often used by the users when working with the application.
• Search
  Search function for finding ispecs that match the specified search parameter. By default this search the list of ispecs for a match.
• Hide/Show Header
  Hides and shows the headers.

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.

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.

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.

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.

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.

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.