Doomi - To Do List
Today’s Adobe AIR application is Doomi. I chose this example as it shows you what can be done with a custom chrome settings in AIR. In fact Doomi uses no chrome at all. Ordinarily, the complete absence of chrome can make an application very annoying to use and most developers opt for a custom chrome instead, adding the close, minimize and maximize functionality via their own custom made buttons. But in this case, apart from the absence of a quit button, the lack of chrome enhances the application.
As you can see from this screen shot, it takes up a tiny amount of screen estate. It’s default state is just to show the input field for adding new To-dos, using JavaScript to slide information into place as and when it’s required.
How To Change The Chrome Settings When Building an AIR Application
When building an AIR application, there is a file called application.xml which contains parameters that determine the look and feel of the application. One of these is <systemChrome>. If you set this parameter to “none” that that is what you’ll get, no system chrome. If you then set the <transparent> property to true, you’ll be able to create custom look to your application using transparent PNGs or CSS3. Remember, AIR uses WebKit to render the application so you not only have predictable rendering - no problems with PNGs - it’s also the most advanced rendering engine in terms of CSS3 support.
This is what application.xml file looks likes once you’ve made the appropriate changes.
<initialWindow>
<content>[Your file name here]</content>
<systemChrome>none</systemChrome>
<transparent>true</transparent>
……. </initialWindow>
Doomi’s Compact Design
Adding To-dos is a snip. Just type them into the input field and hit the Enter key.
To reveal your list of To-dos, click on the blue arrow key to the right of the input box.
The list of To-dos will glide into view. Remember, this is just HTML and JavaScript. To the left of each item is a check box. Tick the check box and you archive the item.
To the right of the item is a clock symbol which shows you the reminder status of an item.
Setting Reminders In Doomi
To set a reminder, click on the clock symbol and a selection of options will appear.
Once you have set a timer, the clock symbol turns red. Clicking on the clock symbol reveals details of the reminder.
Finally, at the bottom of the list is a Show Old/ Hide Old toggle which do exactly as you’d expect, sliding open a panel to reveal tasks that you’ve marked as done. At this stage you can get rid of them by clicking on Clear or put them back into the main list by un-checking them.
Another nice JavaScript/HTML/CSS example of an Adobe AIR application. Remember, it’s still in development and I’ve included it in this series because it illustrates some features of AIR which you can analyse as developers looking for how to start out in AIR. You can download Doomi at www.doominow.com
