Role: UI Lead and Architect
As the UI lead, I built (including framework design and implementation through
many releases) the UI (two frameworks) from ground zero.
An UI framework for The Starview Smart Enterprise Platform
, a next-generation application platform
specifically designed for the development, deployment and management of real-time event-driven
applications and stream analytics.
I involved construction of two UI frameworks: an Ajax framework and a Flex framework.
2007 - 2010.
Preface and requirements:
I was hired to build an UI for a platform with following requirements:
- As usual, High performeance, scalability, flexibility and maintanability.
- Specailly, Model-driven
- To be available to client at multiple levels: API, library and wizard to target user groups of programmers,
specialist with limited programming knowledge and business people like sales. (this item caused us move on the Flex)
The two frameworks have following environment:
A. Ajax UI Framework
UI framework should cover the browser tier and part of web tier so that backend APIs were invoked from UI framework's
B. Flex UI Framework
The only data source available at the backend server was a web service interface.
The UI needs to be built in a typical J2EE environment with embedded Jetty as web server.
Design and major approaches:
I will describe the Ajax framework first and then move on to the second one, the Flex framework.
A. Ajax UI framework
componentize both the browser tier and web tier into components (we called gadgets in browser tier and components
only input by subscribing and only output by publishing. This pub/sub system crossed the web and made web transparent
to all components/gadgets. That is, a publisher/subscriber never knew which side (browser or web) the other party was.
. Transparncies. The UI Framework achieved transparencies with a variety of "Managers":
- RemoteServiceManager was responsable to make remote communication details transparent to the rest of
- EventManager hide the details of event process.
. Integration of editee and editor.
This is an issue that bother most of UI framework/tool constructor. You may notice that FlashBuilder4 introduced a
"Generate Detail Form..." as part of its data binding UI. In the "Generate Detail Form" dialog, you can specify the
data source to load the details. That is and no more. This is only serving the display purpose. What framework/tool
users normally need is a complete function set for manipulation: new (create), get (display), edit (modify), delete
and validation. Our Ajax UI framework provided an integration of editor and editee. For example, once you place a
table (an "editee") into a container, you gain everything for manipulation: the will be a customizable popup menu and
an editor with validator accessable to the to table. The editor will appear in the place (either in a popup dialog or
in a specified detail pane) users want after users bring it up from the popup menu.
. Model driven
One of the major challenge was the UI needed to support model driven where data may be sent with schema (the type definition
that is not previously known). This means to UI framework is that its users may not have the "design time". So the UI framework
needed to able to able to understand the incomming new data type and come out with an "automatic" UI model including layout,
field type mapping and so on.
Moreover, the incomming data may not only carry data modeling information but also carry workflow information (we called it
"application logic"). So the UI framework extract most of its application logic out of codes into data (files). initially,
this login was read into memory and it can be overwritten on the fly when incomming data carry any addtion.
B. Flex UI framework
As we went through releases with Ajax UI framework and as the product moved on from regular RIAs to platform, we
found that we faced two major issues:
a. We neded to face more and more browser compatiblity issues as we cover more browsers/platform;
b. In order to support the platform, we need to provide a visual environment for our framework user to
construct their RIAs;
After iteration and iteration of debating, we ended up with choosing FlexBuilder3 as the platform of our new framework.
We transfered some major approaches from the provious framework and added following new ones:
. A library at top of FlexBuild3/FlashBuilder4.
As I mentioned above, even though FlexBuilder provides a visual environment for UI modeling, It does not provide many
high level feature from our client such as "Integration of editee and editor" I mentioned above and many other features.
So we built a library at top of FlexBuild3/FlashBuilder4 by
- building our own Eclipse Plug-In using API from Exclpise and Adobe (Code Model and Design Model). For example, we
added a new dialog to allow our framework users to specify the information on the editor such as the operation (in case
of web service) to create, modify, and delete.
- create our own categories in the FlexBuilder's library pane and property pane so that users can easily work on our
components and properties.
. Two phase rendering.
We built our own custom components in our library as following:
We performed multiple inheritant (hacked with include) to have our components has two super classes: one from Flex hierarcy
and the other one from our hierarchy. In this way, when Flex loaded our components it rendered our component as the flex super
class and right after flex done with its rendering ("Phase 1"), our framework started the "Phase 2" rendering base on our super
class. For example, our SVTable has two super classes: DataGrid from Flex and SVCollection from our hierarchy. When server sent
a model-driven data event with a new data type (that is not defined anywhere in the client SWF), the Flex first rendered
the SVTable as a DataGrid (normally as a empty table since nothing is specified for a Dynamic table). After Flex had done with its
rendering, our framework started the Phase 2 rendering by removing all the column created in Phase 1 by Flex and added columns
regarding the new data type incomming and then filled up the data.
. Multiple phase configuration.
In order to provide more flexibility, I introduced a "three phase configuration" so that the RIA built on Flex UI Framework
can be configurated:
- Phase 1, by configuration information carried by the movie (SWF) when the SWF was loaded
- Phase 2, by configuration information reside at the source site where SWF is downloaded after the Phase 1.
Phase 2 is triggered after Phase 1 is done. The configuration state from Phase 1 will be overwritten by those from Phase 2.
- Phase 3, by configuration information with incomming data dynamically. The configuration state from Phase 1 and 2 will be
overwritten by those from Phase 3. Phase 3 occured when incomming data contained configuration information.
You may ask, "Why do you need so many phases of configuration?". Let's look at examples to see how Phase 2 worked.
We had many similar clients in a certain business sector and the RIAs for them are very similar but each has their own
special subset. Instead of building a RIA for each by cloning codes from a template code base, we built only a generic
RIA for that sector. Whenever a new request from a different client at that sector presented, we built a "patch" containing
the configuration specific to that client together with additional class as need (this class could be expension of
our library that could be shared by others) and delivered the generic RIA (with Phase 1) and the patch (with Phase 2) over.
Here is an example for Phase 3. In some situation, our client wanted to change the RIA behave dynamically based on critical
level of data. In a screen with a station tree on the left where monitored stations appeared as the leaves in the tree. When a leaf in the
tree is clicked. A table on the right of the screen will be loaded with the details about the station represented by the
leaf node in the tree when critical level of data is normal. When the critical level of the data about the node is anormal,
our client want to load a UI component to the location of the table but the UI component is not unknow in advance. The instructions
about what UI component will be used or event if a component should be displayed will come with the critical data.
An easy way to achieve is to send the application logic at Phase 3 where the incomming logic overwrite the exist ones.
. (to be continued)
I drove the project successfully through several releases. The UI team also grew up to 3 engineers.
JSP, Servlet, XML, Struts, JSON, CSS.
Company web site:
The Starview Smart Enterprise Platform