Introduction
XUI and Carousel can be used to speed up and enhance the capabilities
of a typical browser based application. Taking the popular open source
business application, SugarCRM, we will illustrate some of the
advantages of using a rich-client framework. Not content with end-user
benefits and rich-client enhancements like offline usage we also show
how to simply migrate from existing HTML forms to XUI pages.
|
SugarCRM, is perhaps the most popular and best
known open source CRM system. It is a widely used and localized PHP
application which can be easily installed with some very useful
demonstration data running on its MySQL database. However even if
SugarCRM isn't for you, the techniques described in this application
can just as well be applied to a variety of web applications be they
business applications or other applications that require a rich user
interaction and solid backend integration.
Going beyond the one page wonders of some frameworks, it is important
to us that we develop not just a sample application that shows how to
build applications with XUI and Carousel but one that is useful in its
own right. As a result, users can see at firsthand the capabilities of
the technologies. So, while reading this article don't worry to much
about the SugarCRM specifics, it is the techniques employed that are of
real interest, in any case the source code is available for you to
browse at your leisure.
|
|
|
There are links to more detailed documentation throughout the article,
but this part of it concentrates on the high level overview
of the application and will cover the following topics.
|
|
A quick overview of
SugarCRM, the technologies it uses and the audience it attracts. |
|
|
SugarCRM is used by
thousands of people every day so it can't be too limited. It's not...
for a browser based application. |
|
|
How does XUI improve things?
How about offline usage, improved speed, richer components. |
|
|
This section begins to get a
little more technical but should be of some value to non-technical
readers. |
|
|
The application as it exists
is useful but does not include all of the potential functionality. |
|
|
A brief review of the topics
covered. |
|
|
Lauch the application which
runs off a live version of the SugarCRM database. |
|
Introduction to SugarCRM
The most basic function of a CRM system is to manage
client information. Once client information is in place other services
such as
tracking leads, managing meetings and calls and reporting on progress
can be added on to create a feature rich application.
|
SugarCRM ()
comes in several different flavours from free open source to a full
enterprise edition and has recently passed the 1 million downloads
milestone for all Sugar products.
SugarCRM allows account
and contact information to be entered and manipulated through a
browser. It makes use of a MySQL database to store it's information
and it uses PHP to process the HTML for the browser. This marriage of
open source technologies makes it the ideal choice for cross platform
deployment.
SugarCRM has tapped into the long neglected small to medium enterprise
market by providing a product which is free to use at it's
basic level. This openness coupled with the fact that the source is
fully customizable
has led to the formation of a strong community of developers and
consultants who have enhanced and even
built businesses from their SugarCRM expertise. The suite has also been
localized into numerous languages which can be downloaded from the
website.
|
|
|
 |
|
 |
|
|
Figure 1 - SugarCRM
running within the Firefox 1.5 browser |
|
|
|
 |
|
 |
|
 |
What are the limitations are we
addressing?
SugarCRM is a great product and is being enhanced at a
tremendous rate, in fact we use it inhouse as our own CRM system. So
why
did we feel the need to develop a rich client version of the software?
Well, SugarCRM works exactly as you would expect
a browser based application to work - you open a browser and point it
at a URL. So no problem??? Not really, if like most users
of this type of application, you are used to...
- Waiting for page refreshes. Every page needs to come
from the server every time. That includes HTML to create the screen,
stylesheets to style the application, data to populate the screen
components and javascript to handle events. Waiting a few more seconds
might not seem like a lot but for anyone using an application regularly
this can certainly mount up.
- Connection and server problems. If a server gets too
many requests it can have a serious impact on its performance.
This can also happen when backup and other services kick in.
- Not being able to work without a connection. If the
webserver stops working then so does all other work. Information cannot
be retrieved or entered until such time as the webserver is brought
back into service.
- Limited components. The components which are
avaliable within HTML/Javascript applications are very limited. Custom
components
and menus can be created or even bought but they generally lack any
kind of consistency in they way they look or work.
As well as the user experience limitations there are the problems which
developers of the software need to address.
These include...
- The usual back button and double submit problems.
Developers go to great lengths to work around problems that exist
because of the default browser behaviour.
- Session management. For an application which requires
a logon, session state needs to be maintained on the server
and every action needs to be checked to make sure that the user is
logged in and has the necessary privileges.
- HTML/javascript need to be tested on a wide variety
of browers. Every developer of HTML/Javascript applications is all
too aware of the need to constantly test functionality on all of the
target browsers. As a feature is developed
without testing, the greater are the chances of having to undo
everything.
While AJAX technologies have gone some way to improving the development
environment for developers of HTML/Javascript applications it's still a
struggle to create clean separations between
the Model, the View and the Controller. This results in 'spagetti' code
which is a mix of presentation code and data manipulation
code.
How does the XUI Rich Client
platform make improvements?
|
XUI Rich Client technology is not intended to
replace the basic information based company website which might attract
the occasional visitor but where it really comes into its own is where
websites attempt to fit complex
applications into the browser. While HTML/Javascript applications will
always benefit from the standards provided by HTML, the DOM hierarchy
and the ubiquity of the browser, the marriage with applications has
never been a particularly
harmonious one.
In developing the Sugar Rich Client application we did not set out to
replace the functionality provided by the browser
based version but rather to address some of the limitations imposed by
the browser and also to add customization which
would have been prohibitive if attempted with the existing PHP
codebase. For example we wanted to manage mailshots to users from
several different databases. Using the easy to customise frontend which
XUI provides this was achieved much more easily than modifying the
existing PHP code.
|
|
|
|
Problem 1 -
Constant page refreshes
The first problem that XUI helps with is the delay in waiting for a
server response and the constant need for page
refreshes. When a XUI page is loaded it is cached for subsequent uses
and only the data needs to be retrieved. This
results in a much faster response rate and a much more interactive
experience for the user.
In figure 2 below, the menus, the banner page, the navigation page and
the main content page are created only once and are cached by the page
manager for subsequent use. When an
account is being displayed the bindings for the page are updated
automatically changing the values coloured grey and the list of
contacts below the main form.
|
|
|
|
|
|
|
Figure 2 - Once
constructed pages are cached for further use |
|
|
|
|
|
|
|
|
Problem 2 - Offline usage
The next problem which is addressed is offline usage. With the Rich
Client version it is possible to cache accounts which can then be
viewed
while offline. This is a very useful piece of fuctionality for a CRM
system. Account and contact information can be cached to a laptop
for a business trip to say a specific country or city.
|
Once an account is retrieved from the server, it
is cached automatically and a timestamp is placed on the information.
Subsequent accessing
of the account will result in the information being used from the cache
instead of being retrieved from the server again. If the information
has passed it's cache time an attempt is made once again to retrieve it
from the server. This caching mechanism speeds up the browsing speed
dramatically.
Figure 3 below shows a search for accounts in a specific city. All of
the required accounts can be selected and cached to the local machine
in a single server request.
|
|
|
|
|
|
|
Figure 3 - Accounts
can be searched and cached for offline use |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Figure 4 - Accounts
can be modified and created while offline |
|
|
|
|
|
|
|
|
|
While working in offline mode new account and contact information can
be created and
existing information modified. This information can then be
synchronized with the server when a connection is available
once again as shown in figure 4.
Problem 3 - The basic behaviour
Perhaps the most obvious problem which is overcome with a Rich Client
application is the one which is taken most for granted. The Rich Client
application
is... well it's an 'application'. That is to say it runs as a separate
process within it's own window and is not embedded in a browser which
includes it's own functionality via it's menus, toolbars and settings.
This independence rewards the user
with a far more responsive and interactive application than can be
achieved through the use of HTML/Javascript.
The screenshot below shows how menus and rich interactive components
can be included easily within the XUI application.
|
|
|
|
|
Figure 5 -
Interactive menus and components |
|
|
|
|
|
|
|
|
Problem 4 - Localization
With XUI, localization can be handled easily and naturally by making
use of the localization techniques which are built into Java.
The XUI platform makes it easy to create a new language resource file
so that the language packs available for SugarCRM can be
imported.
|
|
|
|
|
Figure 6 - SugarCRM
language packs can be imported |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Figure 7 - The new
language appears in the language list |
|
|
|
|
|
|
|
|
|
Once created the language will appear at the next login as shown in
figure 7. Language resources can be preinstalled or they can be
imported or created by individual users. Carousel includes a
translation tool which makes localization into new languages very
simple.
Because the page declarations are already localized new languges will
automatically appear when the pages are created.
|
|
|
|
|
Figure 8 - The
application is localized |
|
|
|
|
|
|
|
|
Problem 5 - Styling
XUI applications are built with the use of external style sheet files
and as a result are easy to style and rebrand. The XUI editor
includes a colorwheel which makes it easy to create style sheets
consisting of complimentary sets of colours.
|
|
|
|
|
Figure 9 - Different
stylesheets can be applied to the application |
|
|
|
|
|
|
|
|
All of these benefits leave us with an architecture which goes beyond
the capabilities and reach of the browser. This allows us to build
applications which exist on their own or which complement an existing
browser based application such as SugarCRM.
|
|
|
|
|
Figure 10 - Your
choice of traditional or Rich |
|
|
|
|
|
|
|
|
How does XUI benefit the
developer?
|
The XUI platform has been in development for more
than three years now and has been available on
since March 2003. There have been several releases of
the software up to the current 2.0.6 release which was used to develop
this application. The community of users contributing to
the development of the platform has risen during that time resulting in
a platform which is mature, stable, scalable, extensible and
which still has a runtime footprint of less than 250K. The NetBeans
plugin has also made developing XUI applications even easier through
its drag and drop interface.
|
|
|
|
Step 1 - Migrating from HTML
forms to XUI page declarations
We developed a HTML screen scraper to transform a HTML form into a XUI
format page. This utility is currently being enhanced and will be
included in a future release of Carousel. In order to use the scraper
it was necessary first to log into SugarCRM via the browser and to save
the page which was being migrated as a new file as shown in figure 11.
|
|
|
|
|
Figure 11 - The
required page is saved as a file |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Figure 12 - The
scraper generates the XUI format page |
|
|
|
|
|
|
|
|
|
The page is generated with different options for bindings, events and
components. This process quickly set up the pages with component
declarations, data bindings and button events. Each of the pages
generated in this way ran to over 100 lines of XML code so the quick
start benefits which the scraper provided are obvious.
Step 2 - Localizing the pages
Once generated, the page needs to have the resource keys for the
components setup. This can be done with the Kalideoscope editor
which plugs into NetBeans.
|
|
|
|
|
Figure 13 - Editing
the page within the Kalideoscope editor |
|
|
|
|
|
|
|
|
|
Step 3 - Saving
account information to the model
The data binding declarations which were created as part of the screen
scraping process in step 1 ensure that account information
is automatically displayed in the page and saved back to the model.
There is some data manipulation code required but overall the codebase
for the developer is dramatically reduced. This type of binding
mechanism is also very predictable making it very easy to get basic
data
display and saving up and running quickly.
|
|
|
Step 4 - Saving
account information to file
Saving data to file is made easy through use of the Routes &
Services which come as part of Carousel. By setting up a simple route
and calling it with context parameters the model can be persisted to
file seamlessly. This routing mechanism is used whenever the
user works offline and also when account information is retrieved from
the server. The local routing also takes care of extracting and
restoring portions of the XModel.
|
|
|
Step 5 - Saving
account information the database
To save account information to the MySQL database another Route was
setup. The new route makes use of the SessionManager
and AuthenticationService ServiceProxy
classes in order to take care of automated
session management and authentication. By using these layers in the
route the user will automatically be prompted for their user
name and password the first time a connection to the server is
attempted as shown in figure 1. Once authenticated the session and user
information will be stored for subsequent requests. If the session with
the server expires the SessionManager
will ensure that the user is prompted to logon once again.
|
|
|
|
|
|
|
Figure 14 - Prompt to
logon to the server |
|
|
|
|
|
|
|
|
|
Step 6 - Using
components which provide a rich user experience
The components which come as part of the XUI and Carousel libraries
provide much more functionality than typical HTML/Javascript
can provide. These components when used together add up to a more
responsive and faster application. XUI comes with some basic
components such as edits, lists, tabpanels, scrollpanes etc and
Carousel includes more complex components such as charts, hyperlinks
tables and marquees.
All of the components can be styled through the use of XUI stylesheets
and most have some binding mechanism to the XModel
|
|
|
|
|
|
|
Figure 15 - The about
dialog |
|
|
|
|
|
|
|
|
How
the application can be extended
The application is simply a prototype which shows how data can be
orchestrated between client and server and used
offline to good effect. There are many more capabilities which can be
added including...
- PDA Version - XUI can run on numerous versions of
java from 1.1.8 to 1.5 and has been run successfully
on PDA machines. Of course, the screens would have to be modified
slightly in order to cater for this but
the fact that they are described in XML would mean that the Java code
would remain pretty much unchanged.
-
Merging functionality and data from existing systems - Carousel and the
routing mechanisms it provides make
it easier to fetch data from legacy systems which can then be merged
into a single application.
-
The codebase is fully extensible - When the sourcecode is available for
developers, consultants can leverage
the existing codebase to create custom functionality for clients,
further extending the developer community.
-
Leveraging other applications - Having a Rich Client application means
that other applications installed locally
can be accessed in order to provide extended functionailty such as
Outlook or Word
-
Open Office adds mail merge - Open Office can be used to create mail
merge documents and reports. The API for Open Office is quite easy to
use and can be accessed easily from a Java Rich Client such as this.
-
Different routing options such as Java Messaging or email can be
created with Carousel's Routing and Services.
-
An in-memory Java database can be used to replicated the entire
database on the client for offline usage.
Summary
We have looked at how XUI and Carousel, when combined, can help turn
traditional browser based applications into more interactive
and smarter Rich Client applications. As stated at the beginning of
this article, Rich Client is never going to replace the traditional
browser based websites which provide simple text information but when
users begin to access a site several times a
week in order to do their jobs the limitations of the browser become
more and more apparent.
The SugarCRM application used in this case study is already fully
featured and is developed with the help of a very supportive and broad
ranging user base but the functionality can be enhanced and extended
through the use of the XUI platform.
The XUI platform is also growing in popularity and is seeing its
download rate rising since its initial launch almost 3 years ago.
Carousel is due for incremental release in the coming weeks and will
help to bridge the gap from client to server. For more information
on XUI or Carousel you can contact Xoetrope at
Take
it for a test drive
Now that you've read all about the application you might want to give
it a try. You will need to have the java runtime environment
on your computer so if you don't already have it you can be install it
from the following link...
The application will start with Java WebStart and
you will be prompted to accept the certificate which is signed by
Xoetrope. This will allow the application to access your hard
disk. If you do not wish to allow this access then the application
cannot be run.
When you launch the application for the first time you will have to
specify the directory which you want to use to cache your
account information and you will then need to logon on to the server in
order to retrive user ids from the database. The server
which is being connected to is
If you go to this site you will be presented with the browser based
SugarCRM application so you can work with the browser version
alongside the XUI version to see how changes are being made. The
following usernames and passwords can be used in either version
of the application...
|
| jim |
password |
|
| sally |
password |
|
| max |
password |
|
| chris |
password |
|
| sarah |
password |
|
| will |
password |
|
Click the button below to launch the application.
Xoetrope are launching a beta and testing program which will see the
development of a commercial version of this application.
;)
;)
;)
;)
;)
;)
;)
;)
;)
;)
;)
;)
;)
