EMS Design Document

This document describes the program design of the EMS Framework GUI tool. The classes that make
up the GUI tool are listed, and their purpose and implementation is described (See Classes List). Their
interaction is shown in a diagram, along with the typical communication that would take place (See
Program Architecture). Also, the interaction between the user and the tool is shown for all the possible
actions (See Using the EMS Framework). This shows how the user would use the tool.
Most of the document is very specific to the implementation. It's main purpose is to document the
coding of the EMS Framework.

Classes List
The GUI tool is made up of three main sections, the Main Layout class, the Component Builder classes
and the Utility classes. (See MainLayout class, See Component Builder Classes, See Utility Classes).
Briefly, the Main Layout class implements the main window and functionality of the EMS Framework;
the Component Builder Classes are used to build the components needed to make up the GUI; and the
Utility classes are used to give the additional functionality required for the application like event
handling, specific implementation, etc.

Sample view of the EMS Framework

MainLayout Class
This class implements the main window of the EMS Framework, which acts very much like the main
window of every application. Right now, this mostly means managing the different component builder
classes that were required and presenting information to the user. The component builder classes are
created as sub-windows of the Main layout window, and so are contained within it. The Main Layout
class is responsible for:
• Implementing the main window.
• Initializing the user interface.
• Initializing the component builder classes and managing them.
• Presenting the information to the user.
The Main Layout GUI class plays the central role in this application. So, when the application starts, it
gets loaded with all the required classes like Component builder classes and Utility classes. And the
main layout is making use of those *preloaded classes by instantiating them wherever necessary.
For example, when the application is loading, it needs to show the Menu bar, Tree panel and other
required windows. But these classes are part of the Component builder classes. So these classes need to
be loaded before the main layout class.
*Preloaded classes - In JavaScript preloaded classes refers to include those classes before the main
Layout class.

Component Builder Classes

The Component Builder class creates different components needed for the application using Ext JS.
Components include both simple and complex. Example for Simple components are Button, Label,
TextField, Integer Field, Combo Box, etc., and complex components are Component Builder, Tree
Builder, Menu Builder, Grid Builder, etc., It takes JSON object as the input and creates the
corresponding components based on the type provided in the JSON object.
The major advantages of Component Builder classes are
• It separates the list of the component building implementations from the Main Layout class.
• Allows more component building methods to be added to the application without making
changes to the Main layout class.

Classes
• Component-Builder
• Form-Builder
• Grid-Builder
• Menu-Builder
• Tree-Builder
• Chart-Builder

All the above classes does a common functionality. That is to build components and they differ only in
which component they are building. Following is a brief about each class.

Component-Builder
Component Builder class is used to create components like TextField, IntegerField, ComboBox,
RadioButton, Button, etc. It takes input from the JSON file and creates components based on it. The
components which are created using this class uses customized Ext-JS to render the components.
Following is the list of attributes and methods used by the Component-Builder class.

Attributes
• type : String
◦ The type of the field. It can be TextField, IntegerField, ComboBox, RadioButton, etc. based
on the type the corresponding function will be called to create the component.
• name : String
◦ ID of component to be registered in Ext-JS/DOM
• displayName : String
◦ Title of the field / Field label of the field
• readOnly : Boolean
◦ Whether the field is read-only
• disabled : Boolean
◦ Whether the field needs to be disabled

Methods
All the methods in the Component-Builder class takes JSON Object as the input from other container
classes and creates necessary components as per the type specified.
• createButton
• createTextField
• createIntegerField
• createComboBox
• createRadioButton
• createButton
 • createDateField

Form-Builder
Form-Builder class is used to create forms with the array of fields specified in the JSON object. It uses
the customized Ext.form.FormPanel of the Ext-JS to create the form. The form can contain any of the
fields specified in the Component-Builder class. The Form-Builder class interprets the JSON data and
calls the corresponding methods to create the fields in the form. Following is the list of attributes and
methods used by the Form-Builder class.

Attributes
• type : String
◦ The type of the component. Here it is 'FORM'.
• name : String
◦ ID of component to be registered in Ext-JS/DOM
• title : String
◦ Title of the form
• bodyStyle : String
◦ CSS styles applicable to the form can be added here
• width : Number
◦ Width of the form to be laid out on the screen
• fields : array
◦ An array of fields which can be added to the form
• buttons : array
◦ An array of button that can be added to the form

Methods
The most commonly used method in the Form-Builder class is createForm which interprets the JSON
object and calls the corresponding to be called for creating the field and add it to the Form.
• createForm

Grid-Builder
Grid builder class is used to create grids with the array of columns specified in the JSON Object
(columns). It uses the customized Ext.grid.GridPanel of Ext-JS to create the grid. The grids can be
customized with the column title, column width, total width of the grid, etc., Following are the list of
attributes and methods used by the Grid-Builder class.

Attributes
• type : String
◦ This specifies the type as 'grid'. Only if the value is 'grid, then the Grid Builder class will be
called from the Main layout.
• name : String
◦ ID of component to be registered in Ext-JS
• columns : array
◦ Its an array of column values using which the Grid-Builder will create the number of
columns with the specified title, width, dataIndex, whether the column is read-only, whether
the column is enabled, etc.
▪ type : String
 • column type such as Text Field, Number field, Combo box, etc.
▪ name : String
• ID of the column to be registered in Ext-JS
▪ width : Number
• Column width
▪ displayName : String
• Title of the column
▪ dataIndex : String
• Data associated with the Back-end
▪ readOnly : Boolean
• Whether the column is a read-only value
▪ disabled : Boolean
• Whether the column needs to be disabled
• bodyStyle : String
◦ CSS Style needs to be implemented for the grid
• height : Number
◦ Height of the grid
• width : Number
◦ Width of the the grid
• storeType : String
◦ Type of the store (data ) to be used in the grid. It can be ArrayStore or JsonStore
• store : array
◦ Its an array of store values which is used to configure the store used
▪ name : String
• ID or Name of the store
▪ url : String
• URL of the store (points to a file in the server)
▪ fields : array
• Its an array of dataIndex values used in column array
• accessType : String
◦ This attribute is used to determine whether the access of the data needs to come from the
server or a stored data in the client. It accepts two values 'server' and 'client'
• expandColumn : String
◦ The column which can fill the extra space in the grid.

Methods
• createGrid
• createColumns
• setGridData
• loadGrid
• setGridObj
• getGridObj
Menu-Builder
Menu-Builder class is used to create the menus and tool bars for the application.
Attributes
• title : String
 ◦ Display label or Title of the menu
• name : String
◦ ID of component to be registered in Ext-JS/DOM
• handler : Boolean
◦ Method need to be called when the menu is being clicked
• disabled : Boolean
◦ Whether the menu needs to be disabled

Methods
• parse
• buildMenu

Tree-Builder
Tree-Builder class is used to create the tree panel in the application.
Attributes
• nodes : array
◦ An array of nodes which is recursive. If the leaf attribute of the nodes is false then it should
contain another set of nodes
• id : String
◦ ID of component to be registered in Ext-JS/DOM
• title : String
◦ Title of the node
• tooltip : String
◦ Tooltip of the node
• leaf : Boolean
◦ Whether the node is a leaf
• url : String
◦ The url of the file which needs to be called and rendered in the configuration panel on click
of the node
• icon : String
◦ Icon of the node

Methods
• createTree
• buildNodes
• addRoot
• addChildren

Chart-Builder
Chart-Builder is used to create charts for the application. Chart-Builder class can create charts like
LineChart, ColumnChart, PieChart, LineSeriesChart, etc. using the customized chart creation of Ext-
JS's chart creation methods.

Attributes
• type : String
◦ Type of the chart needs to be rendered. The accepted chart types are “linechart”,
“columnchart”, “piechart” and “lineserieschart”
 • height : Number
◦ Height of the chart window
• name : String
◦ Name/ID of the component needs to be registered in DOM
• displayName: String
◦ Title of the chart window
• storeType : String
◦ Type of store to be used in the chart. Valid values are “ArrayStore” and “JsonStore”
• storeFields : array
◦ An array of string which specifies the fields for the store
• xField : String
◦ x-axis data of the chart
• yField : String
◦ y-axis data of the chart
• xAxisTitle : String
◦ x-axis title of the chart
• yAxisTitle : String
◦ y-axis title of the chart
• extraStyle : array
◦ An array of additional attributes which can be set change the look and feel of the chart
• labelRotation : Number
◦ A label rotation angle (valid values : 0 - 360)
• color: hexadecimal
◦ It accepts a a hexadecimal number for the color value
• majorGridLines : array
◦ Contains an array of grid lines related attributes like color, size, etc.
• titleRotation : Number
◦ A title rotation angle (valid values : 0 - 360)
• majorTicks: array
◦ Contains an array of ticks related attributes like color, length, etc.
• minorTicks: array
◦ Contains an array of ticks related attributes like color, length, etc.
• legend: array
◦ Contains an array of legend related attributes like display, color, size, etc.

Methods
• createChart
• createChartArray
• createCharts
• addPieData
• addLineData
• addColumnData
Utility Classes
The Utility classes are used to give the additional functionality for the application such as event
handling, client specific implementation, back end communication etc.
The Utility classes are responsible for:
• Creating client specific methods which could not generalized
• Defining the default behavior for GUI
• Abstracting the windowing API into a general event paradigm.
The implementations of the Utility classes are responsible for:
• Defining and initializing the back end interface for the utility.
• Handling the related events.
• Hooking into the back end API that the utility is providing access to.
• Keeping track of the data that the GUI operates on for passing it on to the API.
Each Utility class keeps track of a given pointer to the back end data. This is because the back end data
is central and every utility operates on it. If the user changes the data, the Utility class must then notify
the back end, which keeps track of the data.
Methods:
• getConfigData(ipAddress, nameArray, JSONData)
This is the initialization method for the utility classes. It gets all the necessary values/data
from the back end and sets up all the user controls, ties them in to live variables or `action'
events, and sets their starting values.
• SetConfigData(ipAddress, hashMap)
This method is used the set the back end data . It is called whenever the data is changed
using the GUI.
• createThread()
This method creates threads like events which will be called every specified interval to
update the GUI data. This method refreshes the rendering views in the window. This is done
when the back data has been changed, and so the view of it needs to be updated.
• Event handling
Functions for handling the GUI events that arise. This would either be one central function
handling all the events, or maybe a few abstracted functions dealing with a single event
each.

Advantages of EMS Framework

The EMS Framework allows developers and end-users to quickly create GUI windows simply by
customizing the JSON files without having to program them. It lets the user set up an interface using a
simple GUI script, and then renders this into a GUI.
The JSON file defines what field and controls the end-user/customer wants to place, how they're laid
out, and hooks these into an API. The Component builder classes and the Utility classes then
implements these features. At this point the resulting class is compiled and linked to the program, and
the JSON file no longer has any function.
The EMS framework therefore isolates the common programming in GUI implementations, and lets
end-users/customers do it quicker and easier. This eases and speeds up the GUI creation process.
To allow for flexibility, the developers still has the option of adding more complex scripts to the
existing classes to make very complicated ones.
Program Architecture

The diagram below shows the interaction between the different classes. The arrows represent
communication from one class to another. They are labeled according to the action taken, or the data
passed. These would correspond to one or more functions in the program.
Using the EMS Framework
Whereas the previous sections described the architecture of the EMS Framework, this section describes
how the Framework's implementation is used. It shows the interaction between the GUI and its users,
including both developers who add on utility windows and the final users of the program. So this is
kind of a user manual.

Running from a compatible browser

The program can be opened by simply typing the url of the application in any of the supported
browsers. Currently supported browsers are:
• Internet Explorer
• Mozilla Firefox
• Google Chrome
For example, the below url is used in the development environment.
http://localhost:8080/EMS_Framework
After logging in, the users can be able to see the below page:

The user can stop or start the monitoring activity of the application using a menu in the menu bar after
logging in.