ChartIQ Blog

Posted on by Josh McCrowell

< DIV > on the Desktop

Overhauling a technology stack is time consuming, expensive, and laborious. However, being left behind could be disastrous for an institution.

How do you keep your head above water when there’s a sea change?

It’s clear that companies must adapt in an economical and intelligent way. This article discusses HTML development on the desktop using web design techniques.

<div> on the Desktop: Repurposing for the HTML5 Revolution

“If you wish to make an apple pie from scratch, you must first invent the universe.” - Carl Sagan

In his book Rules for Revolutionaries, Guy Kawasaki talks about the evolution of a car’s cigarette lighter. Originally, it had no other purpose than to facilitate the tobacco culture of the early twentieth century. Car manufacturers couldn’t have anticipated the need for a power source for electronic gadgets. But, as time progressed, the cigarette lighter became an important facility for radar detectors, cell phones, and a wide array of devices. Even as cigarette use declined, car manufacturers began adding multiple lighter outlets to facilitate the ubiquity of the digital device.

Like the cigarette lighter in the twentieth century, HTML is everywhere. Originally intended for creating web pages and web applications, its utility has transcended its original purpose. Given its power and flexibility, HTML5 is now recognized as being a powerful tool for building desktop applications. However, many developers consider making a desktop app in HTML a relatively simple affair: build the web app first, then slap it into a container. Yes, it launches from the desktop, but only delivers the same basic experience as the browser. This is hardly utilizing the full power of the desktop.

Let’s look at a sample HTML5 app. Here’s Symphony’s browser-based chat client. It has your contact list, your inbox, your active chat window, and a search bar across the top of the page. All standard stuff.

<div> on the desktop 1 chartiq

However, if you download their desktop client, you’ll notice that the experience is essentially the same. It loads in a single window with the same layout.

<div> on the desktop 2 chartiq

This approach represents a significant downgrade in user experience when compared to desktop apps built with legacy technologies such as Java and .Net. Legacy desktop applications could launch multiple windows and stretch across several monitors. Compared to what people are used to on their desktop, apps that are mere clones of web applications will leave users unsatisfied as they perceive the experience as inferior.

It may be that HTML is ubiquitous, but recreating rich desktop functionality with HTML5 is almost uncharted territory. HTML was designed to display a web page, not an interactive application: each HTML window is a self-contained world running in its own dedicated program space. Of course, this isolated process space has advantages we don’t want to give up: single web pages benefit from a layer of security, simplicity, and reliability. So how do we create a rich HTML5 desktop experience and still maintain the benefits of loosely-coupled processes?

This was a question that we’ve wrestled with at ChartIQ. The revelation we had was that a series of HTML5’s web development paradigms can be repurposed and applied to desktop development. This article discusses how you can build a multi-window app by applying the same techniques used to build a single page application.

Let’s turn that cigarette lighter into a charger.

Window is the new <div>

The basic way to separate content in HTML5 is by using the ubiquitous <div>. The <div> is a generic container—a blank box that houses content. By itself, the <div> has no real functionality; it just allows large sections of content to be grouped so that it can be styled by CSS.

This simple explanation makes <div> sound, at best, kind of dull, but really the <div> is an essential tool for assembling pages. Web pages are composed of several sections, each of which serve a particular function. Defining these sections with <div> allows you to apply styles to these sections uniformly. And, once you’ve defined a <div> class, you can use it over and over again.

<div> on the desktop 3 chartiq

The same principle can be applied to separate windows in a desktop app. Imagine if you cut out each <div> section and put it into a separate window—a “frameless” window, without a title bar, buttons etc. If you were designing a chat client as desktop app, you could treat each discrete window like a <div> container: each window simply acts as a container for your HTML functionality. Similarly, each window would parse a centralized styling and display the window appropriately. With this model, it’s simple to spawn multiple windows that derive their styling from a central CSS. Critically, each window remains loosely coupled, so you don’t give up the advantages of an isolated process space.

When we integrated Symphony chat into the Finsemble ecosystem, we used similar methods to this. We found they worked incredibly well.

The power of positioning

Breaking up an application into multiple windows allows users to prioritize the arrangement of information and quickly switch between tasks—separated windows allows users to decide what’s important for them and their workflows. But it also introduces dilemmas for developers who have to accomodate their application potentially stretching across multiple monitors of different sizes and scaling.

Let’s get technical for a minute. Windows are positioned on a screen through a coordinate system, a two-dimensional space that locates points using horizontal and vertical axes—that is, an x- and y-axis. In a basic way, this gives developers extreme control over placement, but it’s a low level abstraction. Imagine if you could only position a <div> with x/y coordinates! You’d need to code up calculations to position every single item on the screen, keeping track of position and size relative to every other item and to the screen itself.

Thankfully, CSS provides higher level abstractions that shield us from this hassle. CSS allows us to position by percentage, which automatically makes all the necessary calculations. CSS further allows us to position our items relative to one another—this allows developers to operate as designers, intelligently positioning and sizing UI based on context.

We can leverage the repurposing philosophy by applying the positioning rules to a window on a screen the same way you’d apply them to a div on a page. For instance, CSS allows you to specify the location and size of a window by percentage of monitor space. This is very convenient for generating layouts that work consistently across various monitor configurations. You might also position windows relative to one another so that all sizes and positions are “nested” within a parent window. This is extremely convenient for building menus and dialogs.

Our desktop platform, Finsemble, was built on this paradigm. We developed some new styles that are specific to free form windows, including “adjacent,” which allows a window to be positioned adjacent to another window. We also leveraged the ability to position windows in the context of a “viewport.” A viewport, for instance, can be either the entire virtual desktop, a specific monitor, or the available space in a monitor less the space occupied by toolbars and taskbars.

This level of control is essential for developers to deliver a meaningful layout. By way of an example, let’s say we wanted to break up Symphony into a multi-window desktop application. To place your contact list along the left side of your screen, simulating the experience of the browser, you might use:

{monitor:"mine", position:”unclaimed”, left:0, top:0, width:”25%”, height:”100%”}

In Finsemble, this opens the window on the same monitor as the parent window; positions it in a viewport that represents space “unclaimed” by any toolbars; positions the top left corner of the window at the very top and left of the viewport; and makes the window 25% of the width and 100% of the height of the viewport.

Then, if you wanted to open a new chat window with its left edge adjacent to the contact list you would simply specify:

{left: "adjacent"}

This automatically positions the chat window relative to the window from which it was opened—the contact window.

Of course, the user is the ultimate authority. By breaking a single page into multiple windows, you give your users the ability to control their screen real estate. In the finance world, where users might have many monitors and many apps jockeying for position, it’s important that they can control the flow of information in a way that’s meaningful for them.

<div> on the desktop 4 chartiq

The dynamic <div>

A critical aspect of the <div> is that it is dynamic. They come and go. They change height and size. This creates a rich and active experience on the web—but it all happens within the confines of the browser window.

Treating the window as a <div> allow for this dynamic experience on the desktop. Windows can open and close. They move around and change size. When developing Finsemble, this let us put our windows to work in new and innovative ways.

For example, Finsemble has a toolbar that acts as a hub for the user experience. The toolbar stretches across the top of the user’s screen. This toolbar allows a user to launch apps, save and switch between workspaces, etc.

<div> on the desktop 5 chartiq

What if I told you the toolbar was just an HTML5 window? Sure, it’s styled like a native component, but it’s essentially a thin, long HTML5 window positioned at the `top` of the screen. The same technique is used for the menus that launch from the toolbar. When you click on, say, the “Apps” button, the menu that opens is also an HTML5 window that opens `relative` to its parent.

CSS has already solved a lot of pertinent design issues. By borrowing from CSS, you draw on the collected wisdom of HTML development. This allows developers to build multi-window desktop apps in HTML5 the same way that they’d build a single page application.

And that’s awesome.

If you want more reasons why we love HTML5, download the Bridge to HTML5 guide.