Adobe AIR article

Building a common desktop application on AIR in Dreamweaver CS3

Building and styling the user interface

The interface for the To Do List application is straightfoward. It has a text box for entering list items, two buttons on top and two buttons on the bottom. The buttons on top replace the interface widgets normally found in a desktop application, that is the minimize and close buttons. The buttons on the bottom are for adding new items to the list and to save the list to a file.

Figure 1. The To Do List user interface.

In the default HTML document, define the text box, the buttons, and a document element for storing the items as follows:

<div id="nav">
     <button id="btnmin"><img src="assets/min.jpg" /></button>
     <button id="btnclose"><img src="assets/close.jpg" /></button>
</div>
<div id="dataentry">
     <input id="itemtext" type="text" />
     <input id="btnadd" type="submit" value="Add" />
     <input id="btnsave" type="submit" value="Save" />
</div>
<div id="items"></div>

Because the To Do List application is based on an HTML document, you can use normal CSS to make it look and feel as you wish. Building the application on AIR provides even more flexibility. The Adobe AIR HTML rendering engine is powered by WebKit, which has a number of CSS extensions, including border radii and multiple backgrounds, that can make it easier to develop your user interface without complicated markup.

This application uses -webkit-border-radius to give the application a rounded feel without the use of graphics. It also uses a background graphic for a simple gradient on the entry and item elements. You can prevent the background from tiling by setting -webkit-background-size to 100%, which stretches the gradient to the size of the element.

#nav {
       text-align:right;
       padding-right:5px;
       position:absolute;
       right:0;
       top:-4px;
}
#nav button {
    color:#999;
    background-color:#555;
    -webkit-border-radius: 3px;
    border:1px inset #777;
    border-width:0 1px 1px;
    padding:6px 6px 3px;
    line-height:1;
    cursor:pointer;
}

#dataentry {
    background:url(bg.png) repeat-x 0 0;
    padding:19px 5px 5px;
    -webkit-background-size: 100%;
    -webkit-border-radius: 5px;
    text-align:center;
}

input[type=text] {
    -webkit-border-radius: 5px;
    font-size:14px;
    width:95%;
    padding:5px;
}

input[type=submit] {
    color:#FFF;
    background-color:#333;
    border: 1px outset #999;
    -webkit-border-radius: 9px;
    width:50px;
    border-color: #999 #000 #000 #999;
}

input[type=submit]:hover {
    color:#FFF;
    background-color:#912A2A;
} 
 .item {
     margin:0 5px;
     overflow:hidden;
     padding:5px;
     background:url(bg.png) repeat-x 0 0;
     -webkit-background-size: 100%;
 }

To give the buttons a "button" feel, the border-color along with the border-style rule creates the illusion of a bezel with light gray on the top and left edges and black on the right and bottom edges. You can also see the use of attribute selectors for your CSS rules. If you're not familiar with an attribute selector, it allows for elements to be styled based on the value of a particular attribute. For example, input[type=submit] will style any input where the type attribute is equal to submit, that is, <input type="submit" value="Save">.

Working within an isolated environment like AIR can be an extremely liberating experience since you can take advantage of these modern CSS features without having to worry about cross-browser support. You can also feel good knowing that your application should look the same on Windows, Mac OS X, and Linux. Just don't get frustrated when you go back into the browser world!

Page 3 of 6

Previous Page

Next Page