Chapter 10 – Case Study: Building an E-Commerce User Interface with XUL

“Designing a software system is 80% design, 20% coding, and 0% sweat equity. No sweat equity because if you had spent the whole 80% properly designing your system, there should be almost no effort involved except punching keys.” – Jeremy Guggenbühler, 1999

Now that you that you are grounded in the fundamental operations of using the technologies leveraged in XUL, you are ready to go on the next step. That is to combine these technologies to create a single user interface. In this chapter, we will discuss the practical application of four important concepts. The first is the layout of individual XUL user interface components. The second is the manipulation of interface elements through the use of event handling via JavaScript and the Document Object Model Application Programming Interface (DOM). The third is the creation and connection of multiple dynamic data sources with XUL templates through the use of Resource Description Framework (RDF) datasources. The final concept is the reusability aspect of the XUL language through the use of overlays.

To simply present these concepts in an abstract fashion would be not conducive to your long-term use. As such, we will present these concepts in the context of a real world application. Although it is a real world application, we have to ground it in the fact that it will not accept orders on a real time system. It is created as a tutorial on how to develop such a system with the XUL language. Our application will be an e-commerce site called BeaconTrade.Com. BeaconTrade.Com is a web-based user interface created by us for a fictional business, BeaconTrade Outfitters.

BeaconTrade Outfitters is a local fishing and sporting gear store. The owner John wants to create a web-based interface to ply his wares, but he doesn’t want to create some cumbersome system that he himself cannot maintain. He has done some research, talked to his buddies, even his 13-year-old technophile nephew, and has come up with some great ideas.

He wants the latest and greatest technologies to be incorporated into his site design. He knows that it will have to be easy for him to learn, because not the technophile that his 13-year-old nephew is, he will have to maintain this system. He sells fishing and sporting gear, not information technology services. So he will design a system that he and others, should his business grow, can learn and maintain with minimal effort.

John has seen other sites that are able to personalize their user interface for each customer. He would like to add this feature but he’s not sure how it will accomplished.

BeaconTrade Outfitters, although a small “Mom and Pop” shop, has customers in several countries. Primarily he only exports to five other countries from the United States of America. He will need to accommodate that aspect into his design.

BeaconTrade Outfitters already gets daily information from suppliers. John has two outside suppliers for this information. His supplier for the products he sells publishes a real time report of available stock items. He also has a supplier for currency exchange rates that is published on a daily basis. John knows that these items will be published in RDF format. So he needs to have the ability to take RDF data and incorporate that easily into his interface design.

BeaconTrade already has an in-store database for his customers’ orders. This database has the capability to be easily published through middleware application software to RDF format. He already uses Cold Fusion to publish web-based reports for invoice control and order histories. So he wants to incorporate views that he has already created.

He wants to build a component-based architecture so he can just add in the aforementioned datasources as pluggable databases.

Not a fan of continually clicking through multiple pages to get to the information he needs, John only wants a single user interface. Not sure how he is going to do this, John stumbles across a new user interface language called the eXtensible User interface Language. He buys a great book called “Essential XUL Programming” and heads back to the store. J He knows that all his customers are using the Netscape Navigator product so using XUL will not be a problem. He is excited about the aspect of this great new language and sets out to formalize all his requirements.