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.         The techniques employed can just as easily be applied to a variety of web applications. Simply migrate from existing HTML forms to XUI pages. Source code is available to browser 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. Introduction to SugarCRM [0] A quick overview of SugarCRM, the technologies it uses and the audience it attracts. What are the limitations we're addressing? [0] 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 the XUI Rich Client platform make improvements? [0] How does XUI improve things? How about offline usage, improved speed, richer components. How does XUI benefit the developer? [0] This section begins to get a little more technical but should be of some value to non-technical readers. How the application can be extended [0] The application as it exists is useful but does not include all of the potential functionality. Summary [0] A brief review of the topics covered. Take it for a test drive [0] Lauch the application which runs off a live version of the SugarCRM database. http://www.sugarcrm.com [1]) 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.

This marriage of open source technologies makes it the ideal choice for cross platform deployment There is a growing community of developers and consultants who leverage SugarCRM.

	Figure 1 - SugarCRM running within the Firefox 1.5 browser
	[1]

page manager [1] 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 [1]

	Figure 2 - Once constructed pages are cached for further use
	[1]

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 [1]

Figure 3 - Accounts can be searched and cached for offline use     [1]

Figure 4 - Accounts can be modified and created while offline     [1]

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
	[1]

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     [1]

Figure 7 - The new language appears in the language list     [1]

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
	[1]

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
	[1]

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
	[1]

sourceforge [2] 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.

	XUI is mature, stable, scalable, extensible and still has a runtime footprint of less than 250K.

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     [2]

Figure 12 - The scraper generates the XUI format page     [2]

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
	[2]

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 [2]

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 [2].

See how Carousel routes are used to manipulate local data [2]

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 [2] and AuthenticationService [2] ServiceProxy [2] 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 [2] will ensure that the user is prompted to logon once again.

See how Carousel routes are used send data to and from the server [2]

	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 [2] and most have some binding mechanism to the XModel [2]

Click here to see how Carousel tables are bound to the model [2]

	Figure 15 - The about dialog

http://www.sf.net/projects/xui [3]

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 info@xoetrope.com [4]

[5]

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 [6] 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.

[7]

printer friendly version >> [7]

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 [7]