Styling and skinning your apps with TravelTripper

Styling/Skinning RezTrip

At TravelTripper, we make hotel reservation software. Our main product is a “booking engine” called RezTrip, a web based application that allows visitors of a hotel’s website to directly book a stay with that hotel.

As GWT applications go, we think RezTrip, when it comes to the question of styling, presents an interesting departure from traditional development. As a “white label” application, we needed to create our app in such a way that allows our hotel clients the ability to customize not only the “frame” around the application, but also the internal style of the application itself, such as fonts, colors, etc.

In other words, each hotel needs the ability to create their own custom header, footer, or sidebar and have it wrap the booking “application” portion of the page. Furthermore, each hotel needs to be able to change all the colors, fonts, and even some icons within the application.

The desired end result is a single booking engine application, running on multiple web sites, but always mimicking the look and feel of each individual hotel site.

We have two additional constraints:

  1. Cost – While our first priority is building a system with ultimate flexibility, the time spent to create each customization represents a direct bite into our profit margins. The business guys were explicit about keeping these costs to a minimum.
  2. Dynamic Changes – Clients are naturally picky about the appearance of their website, and their tailored booking engine is no exception. Experience told us that we would be fielding constant requests to tweak different aspects of the customized properties. This has to be easy to do and have minimal impact on the overall site performance.

Satisfying our Constraints

Keeping Costs Low

Our in-house GWT team is top-notch, but expensive. The previous version of our application was built on basic JSP/HTML/CSS technology, and the customization work had been done by a more affordable entry-level web designer. Similarly, for this version of the application, we wanted to limit the involvement of our GWT developers as much as possible, where possibly leaving stylistic tweaks to our web designer.

We want the customizer to be able to do *all* the work, without requiring any Java or GWT knowledge.

Making Changes Easy and Harmless

We realized that GWT’s application compilation philosophy changed a lot of our longstanding web development assumptions. We didn’t want to create custom UiBinder files for each hotel’s frame, or have to make spot changes to CSS that would require a full recompile and redeployment of the application.

We want to be able to make CSS changes without recompiling or redeploying the app.

Our Solution

The only way to satisfy the above two constraints is to have all the customization work happen in simple HTML/CSS files that live outside the GWT project and WAR directory. This allows the customizer to work in pure HTML/CSS, directly with the files on the server, without ever having to modify the internals of the GWT application. Changes can take effect immediately, without a need to redeploy the app.

The Application Frame

We decided to have a separate index.html file for each property’s customization. This allows custom header/footer/sidebar HTML, CSS and JavaScript to be included in the hotel’s main page.

Another challenge for us was the need for the application portion of the booking engine to be able to be dynamically resized relative to the user’s browser. To accomplish this, we decided to use a DockLayoutPanel, which handles the separation between the main application and the custom frame. We load an empty SimplePanel into each of the North, South, West, East sections of the DockLayoutPanel, and our application in the Center.

Next, we add special code that runs directly from onModuleLoad() that scours the host HTML document for four DIVs with 4 unique ids: tt-Header, tt-Footer, tt-EastSidebar, and tt-WestSidebar. If the app finds a DIV with those ids, it loads it into the corresponding SimplePanel and auto-sizes to the contents. If no corresponding DIV is found, the app hides the SimplePanel entirely and sets the width or height to 0.

What this means is, that the customizer doesn’t get to lay out the HTML page exactly like it will be displayed when live. Instead s/he must smash the relevant content into the four qualified DIVs. This is a minor annoyance, but at the end of the day, the code itself is still the same basic HTML/CSS/JavaScript, and so it is perfectly manageable by the web designer. The GWT application is already compiled to super-fast JavaScript, so there’s no need for the customizer to know any GWT. Instead, the customizer can just edit the contents in the HTML file and hit refresh to see the changes.

The CSS

Here again, we had to come up with a custom solution. To avoid the recompile/redeploy issue and also to keep it simple for the customizer, we had to handle the CSS for customizing the application without having to modify any code inside the GWT project.

What we ended up doing was creating three levels of CSS:

  1. UiBinder – Any time we needed to use a CSS style to adjust the size or layout of a widget or panel, we kept that CSS code in UiBinder XML. We only want the actual GWT developers to change the layout/size of the UI elements, so they needed to be in a sense “hidden” from the customizer. We loved how the default UiBinder behaviour is to generate md5 class names, allowing us to create lots of custom CSS rules, without worrying about namespace overlap and also ensure that the customizer would know not to override them.
  2. master.css – Next, we created a “master” CSS file where we put all the other CSS styles, which we thought were fair game, to be overridden by the customizer. This is a huge CSS file, but when minimized (yuicompressor) and gzipped, the end result was still better than the latency hit we had when originally we tried to spread these across multiple files (for organizational purposes). Note that the master.css file is loaded directly from the main HTML file.
  3. designer.css – The final layer is the “designer” CSS, which is where we have the customizer put all the CSS rules which override the defaults. The class names in this file all match the class names in the master CSS, but since we load the designer CSS in the page *after* we load the master CSS, the former will always override the latter.

Summary

Despite our constraints, we were able to configure our GWT application to perform exactly as we desired. Our application is fully customizable, both in terms of the surrounding frame layout and also the internal application’s colors and fonts, all without the customizer having to know any Java or GWT. By carefully separating the different layers of the app, we were able to make it easily and efficiently customizable on the fly, without ever having to redeploy the application.

GeoInformatics, Geography and Informatics

The past years, the work I have done in the field of GIS is getting closer and closer to the roots I have in software development. Is it just my own experience or is the world around us changing?

When I starting my professional career it was with a hydraulic engineering company. I worked with the software department and developed applications to support flood early warning and flood damage assessment. After some years I started creating these applications using ESRI’s Arc/INFO (is it was spelled at the time), ArcView, and ArcIMS.

I remember a Saturday evening when a colleague and I were enjoying lasagna while working through lengthy pieces of SQL trying to figure out why the web application we developed did not return the desired result for the selected location. One of us was coding the thoughts the other came up with combined with his own ideas and interpretation. The problem had been bugging our development team for a while and as the deadline came closer we resorted to this extreme measure.

By midnight the problem was solved and we sat down with a beer and reflected on how the approach we took proved successful and whether or not that could be turned into more practical use. It appeared that the concept of ‘paired programming’ we practiced was one of the elements of a software development methodology call eXtreme Programming (XP, not to be confused with that recent addition to the existing family of operating systems).

That experience made me realize that developing a GIS application successfully depends on well-known software development principles just as much as any other non-GIS software projects. The fact that we started off with products that deliver a lot of functionality out-of-the-box does not change this.

It may even complicate things. Whatever development methodology is applied (RAD, DSDM, XP, Waterfall, RUP), an application goes through the process of design, coding, testing in different cycles of different lengths. But the final step to success always is user acceptance. When starting from a commercial-off-the-shelf product that is being customized, there will always be discussions when anomalies are found as to whether this is part of the customization and thus within responsibility of the developer or is part of the off-the-shelf product and thus within responsibility of the manufacturer.

The fact that this discussion takes place at the end of the project when budget is running out and both developer and client want the product to be finished, but working, adds to the complexity. An idea may be to introduce a second type of acceptance test, this time aimed at the developer! Whatever off-the-shelf product, data or document is supplied to the developer is subjected to an intake test and anomalies are noted and either accepted to exist or lead to modification of the supplied item.

And guess what? Formal acceptance of items delivered to the software team at the starting point of the project or during the project, was one of the things we introduced at this hydraulic engineering company when we started thinking about Software Quality Assurance; nothing new, but still refreshing in a way.

So after some years my interest in software development has been revitalized and I now again read about subjects as software process improvement and test process improvement and how these may contribute to the success of our GIS projects and thus to the success of our clients. And the success of our clients is our primary concern.

Appeared in GeoInformatics Magazine (http://www.geoinformatics.com) in June 2002