Get Rich quick with XUI and SugarCRM
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.
|
|
|
|
|
|
|
|
|
|
Take a look at how the page navigation is handled |
|
|
|
|
|
|
|
|
|
|
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.
|
|
|
|
|
|
|
|
|
|
Click here to see how the CacheManager manages the cache files |
|
|
|
|
|
|
|
|
|
|
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 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.
|
|
|
|
|
|
|
|
|
|
Click here to see how the CacheManager manages the cache files |
|
|
|
|
|
|
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.
|
|
|
|
|
|
|
|
|
|
See how Carousel routes are used to manipulate local data |
|
|
|
|
|
|
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.
|
|
|
|
|
|
|
|
|
|
See how Carousel routes are used send data to and from the server |
|
|
|
|
|
|
|
|
|
|
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
|
|
|
|
|
|
|
|
|
|
Click here to see how Carousel tables are bound to the model |
|
|
|
|
|
|
|
|
|
|
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.
http://www.sf.net/projects/xui
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 java.xoetrope.com 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.
Click here if you wish to sign up for the beta and pilot programs
;)
;)
;)
;)
;)
;)
;)
;)
;)
;)
;)
;)
;)