|
Thinking Inside the Boxely
by Kurt Cagle A fairly radical change is sweeping through the world of application development, driven in great part by the increasingly sophisticated ways that XML is being used. The idea is simple--just as you can put together a web page by using a number of HTML tags to describe the "bones" or structure of the page, so too can you describe the visual pieces, the GUI, of an application using an XML application description language. This particular approach has been tried by a number of different application frameworks, including Mozilla XUL (XML User-interface Language, which describes the interface for Mozilla Firefox and Thunderbird), Microsoft's XAML (XML Application Mark-up Language), Adobe's Flex (used by Flash), and OpenLaszlo. One of the newest entries into this particular race towards application definition using XML is AOL's Boxely, an XML-based language originally developed by Joe Hewitt (who is also responsible for the Firefox debugging extension Firebug). After Joe left AOL, Boxely development continued with the ultimate goal of enabling effective creation of cross-browser and desktop applications by AOL's own developers (for example, the AIM team) and by the independent developer community. Boxely is currently featured on AOL's Greenhouse site, and can be downloaded from the Boxely website at www.boxely.com as an open beta (the examples discussed in this particular article are based on the Beta Preview 2). Boxely apps are not web pages--they are actually standalone applications that can best be thought of as "widgets," although such widgets have a number of interesting capabilities and can be quite sophisticated. One of the more fun apps comes in the AOLOCP sampler--a small toy racing car that can move around on the screen independent of any other application, and that can be controlled by the keyboard arrow keys (see Figure 1). While the core image is definitely a bitmap (in this case, an alpha-channel-enabled PNG file), the system handles the rendering of that bitmap at any angle with very little corruption, pointing to a reasonably sophisticated graphical renderer in the background.
Boxely itself consists of an interpreter and runtime that currently work with Microsoft's Internet Explorer libraries, meaning at the present time the application framework is limited to Windows. However, plans are in the works for other runtime engines that will be able to take the core Boxely code (which is largely operating-system agnostic) and map it into other rendering systems, with a view towards providing such support by early 2008. There are a number of reasons why the Boxely technology is of interest to AOL, and for developers both in and outside the AOL space these reasons are similarly valid.
Boxely also figures fairly heavily in the future plans of AOL, and as the technology and developer base becomes more robust, it will not be surprising if AOL's strategic partners (such as Google) also begin developing Boxely applications. Already within the sample applications provided with the Boxely SDK there are things like the Boxely Media Player, which is a surprisingly simple application that still could compete fairly effectively with most of the media players on the market (Figure 2). Given the strong media orientation that AOL has, it's not hard to imagine integrated Boxely media applications, some with strong marketing tie-ins, being developed that can tie in with rapid and sophisticated data binding.
Data-binding and Ajax manipulation play heavily in the Boxely universe, a tacit recognition of the fact that most contemporary data is being transferred not from local sources but from web-based data feeds using either XML or JavaScript Object Notation (JSON). On the JSON side, Boxely contains a number of embedded binding elements that communicate using JSON as the default data source, though it is also possible to set the binding to use XML as a data source (see Figure 3).
In either case, the mappings into the Boxely data widgets are very straightforward and rather astonishingly fast, and the default widget library for displaying that data is similarly fast and quite expressive. It includes such controls as lists, sortable and searchable tables, form controls, tree-view controls, rich text editors, multi-level menus, range controls, horizontal and vertical tabs, tooltips, and considerably more, most of them designed with modern sensibilities with regard to animation effects and all of them quite extensible in terms of visual style. The combination of easy-to-create data binding templates and the large variety of controls for displaying and manipulating that data makes Boxely a compelling candidate for creating rich, front-end, enterprise-quality applications (Figure 4).
It's important to understand here as well that Boxely addresses one of the major shortcomings of Mozilla XUL, which it otherwise resembles to a remarkable degree. XUL applications use a special bundled XML binding language called XBL to handle componentization, with the components in turn bound through CSS. This CSS dependency makes reasonable componentization in XUL fairly fragile and difficult to manage (and notoriously difficult to debug). Boxely, on the other hand, cleanly separates the XML presentation for each component from the JavaScript that runs it, and collects these XML objects and scripts in specialized libraries with a .box extension. This makes it considerably easier to both debug the code and assure validity of it, and makes it easier to break up the JavaScript into clearly defined object libraries and event listeners. This same approach is used for assigning styles, with a special style language applied via stylistic attributes (and class collections of such attributes) written in XML. This will have significant benefits once a formal Boxely IDE is developed. By breaking out the style aspects in this manner, changing Boxely skins becomes a no-brainer (which is not as true of XUL applications, which are notoriously difficult to create skins for). The stylist approach extends beyond the simple assignment of graphics as well. The Boxely stylistic toolkit includes a number of rendering goodies including fast and relatively lightweight gradients, alpha channel masks, dynamic patterns, filters (such as drop shadows and convolutions), and other goodies that are familiar to the SVG developer community but less so to those working with XUL (see Figure 5).
This approach towards viewing Boxely as a UI-rich language also applies to the realm of animations. Boxely has a number of declarative animation primitives to handle movement, animation of color (and gradients), animation of custom style attributes, and animation of images, making it possible to create very complex animation effects solely within the XML files without having to spend a lot of time building JavaScript animation handlers. This is complemented with something lacking in most other XML language libraries but that's nonetheless both cool and useful--transition effects. Transitions make it possible to segue between one "scene" and the next (whether that be a single picture or the entire window) and are indispensable in any kind of multimedia work. The transition effects that come with Boxely are incredible--beyond the standard wipes and fades (enhanced with little "bounces" at the end), Boxely also includes such things as shattering glass, jigsaw puzzle pieces, and my own favorite, raindrops (see Figure 6). This factor alone opens up Boxely as an application that may be of interest to multimedia developers, not to mention PowerPoint creators, especially since video as well as audio is well supported under Boxely.
The robustness in GUI (and media) presentation is matched by the full suite of XML tools, including the ability to validate on schemas, to search data using XPath, and to call XSLT transformations on data that can then be passed back into either the data paths or the application code directly. Support for additional data services (such as SQL and LDAP) are currently being incorporated into the system as well, though they are not yet as robust as the JSON or XML tools. Overall, the Boxely environment is a surprisingly robust, powerful, and comprehensive toolset for making both standalone widgets and web-enabled applications, and may very well give XUL, XAML, and Flash/Flex a serious run for the money in the XML application space. ConclusionI wanted in this article to provide a fairly high-level overview of what Boxely is and what it is capable of doing as the start of a series on the technology. Subsequent articles will concentrate on actually building and deploying Boxely applications and look at how this fascinating technology may very well do an end run around the existing players, both at the consumer and the enterprise level. If you've played with Boxely and have comments and questions about the technology, please contact me and I'll try to focus specific questions in either this forum or my O'Reilly blog. Kurt Cagle is an author, consultant, and XML technology evangelist living in Victoria, Canada (and contemplating a jump across the pond to Vancouver to avoid the ferries). References
|
