1. Installing AIR into Dreamweaver
AIR is a rapidly evolving system
and to make sure that you're always right on the cutting edge, it does
not come preinstalled in Dreamweaver. Instead, you need to download and
install the AIR runtime. The Dreamweaver team has also created an
extension that can be used to preview AIR files and package them for
deployment. In this section, you walk through the process of downloading
and installing both.
To download and install AIR, follow these steps:
Open your browser and visit http://get.adobe.com/air.
NOTE
As of this writing, the
current AIR version is 1.5.3. It is entirely possible that a later
version may be available when you're reading this book. The preceding
address will always get the latest version of AIR for you to install.
Click the Download Now badge in the middle of the screen.
Save the file on your desktop or in any convenient location.
Double-click the downloaded file to begin the installation process.
When the license agreement is presented, click I Agree to accept it and continue.
After installation is complete, click Finish.
The next step is to
retrieve and install the Adobe AIR extension for Dreamweaver.
Dreamweaver provides a command for just that purpose:
In Dreamweaver, choose Commands => Get AIR Extension.
When your browser opens on the page in the Adobe site, click the Download The Adobe AIR Extension For Dreamweaver CS5 link.
Save the file in a convenient location.
NOTE
If you previously installed an earlier version, be sure to use the Extension Manager — accessible by choosing Help 
Managing Extensions — to remove it.
After the file has completely downloaded, navigate to its new location and double-click the Adobe_AIR_CS5.mxp file.
In the Extension Manager, accept the extension disclaimer.
After the installation is complete, quit Dreamweaver if it is open and restart it.
If you explore the menu system a bit, you'll discover that three new items have been added:
File => Preview in Browser => Preview in AIR — For previewing your applications during initial testing
Site => AIR Applications Settings — For defining your project parameters
Site => Create AIR File — For packaging the AIR project
In the next section, you learn some of the ways you can use Dreamweaver to design your AIR application.
NOTE
In addition to
Dreamweaver CS5 and Extension Manager CS5, you'll also need the Java JRE
1.4 or later installed to preview and create AIR applications. You can
get the latest Java JRE at http://java.sun.com.
2. Designing for AIR
Dreamweaver is an ideal
environment for developing HTML and JavaScript applications for AIR. The
site-oriented development situation is perfect for creating a complete
AIR project. Dreamweaver's Live View uses the same rendering engine, the
open source WebKit, as AIR. Therefore, WYSILVIWYGIA. Or, to spell it
out, what you see in Live View is what you get in AIR.
Moreover, both Dreamweaver
and AIR support advanced JavaScript frameworks, which open the door to a
vast array of Web widgets and sophisticated user interaction. Supported
frameworks include:
Take special notice of the
last entry in the list. As noted throughout this book, numerous Spry
widgets are available as drag-and-drop objects in Dreamweaver, for
layout, data, and form validation — and they can all be used in AIR.
To demonstrate how easy it is to
create AIR applications in Dreamweaver, let's create the most basic Web
application possible — a single line of text — and then see what it
would look like as an AIR app:
Create a new site in Dreamweaver by choosing Site => New Site.
Set up an empty folder for your local site root.
It's
best to use a new, empty site when setting up an AIR application to
avoid incorporating unnecessary files in the compiled app.
Enter the text Hello World!.
From the Property inspector HTML tab, select Heading 1 from the Format list.
Save your page.
Now you're ready to see how your incredibly sophisticated Web application looks in AIR.
Choose File => Preview in Browser => Preview in AIR.
The AIR window opens instantly with the text rendered appropriately, as shown in Figure 1.
Because no CSS formatting was applied and Dreamweaver and AIR have
different defaults, the fonts in Dreamweaver and AIR may not look alike.
Let's add some specific styles to address that issue.
Close the AIR preview window and return to Dreamweaver.
Let's make sure your AIR application has a title and enter AIR 01 in the Title field of the Document toolbar. Press Enter (Return).
Place your cursor anywhere in the h1 tag.
In
the Property inspector's CSS tab, make sure Targeted Rule is set to
<New CSS Rule> and set Font to Palatino Linotype, Book Antiqua,
Palatino, Serif.
As you can see in the AIR preview shown in Figure 1, if you don't specify a style, you risk unexpected results. It's best to specify everything in CSS for your AIR app.
When the CSS Rule Definition dialog box opens, select Tag from the Selector Type list and click OK.
In the Property inspector, choose the following settings:
| Size: | 36px |
| Color: | #069 |
| Align: | Center |
Save your file.
If you don't save your file now, Dreamweaver will ask that you save it before previewing.
Choose File => Preview in Browser => Preview in AIR.
Now, as evident in Figure 2, the Dreamweaver page matches the AIR rendering.
There's no limit to how you
can style your AIR application in Dreamweaver. In fact, because both
Dreamweaver and AIR use the WebKit rendering engine, you can achieve
more advanced CSS styling than you can when building pages for the Web.
Unlike a standard Web site, your user interface will be seen only
through one lens: AIR. Not only does this one-to-one correspondence
eliminate the need for cross-browser testing, it also opens the door to
additional CSS properties, listed in Table 1.
Table 1. Additional CSS Properties in AIR
| CSS Property Name | Values | Description |
|---|
| -webkit-border-horizontal-spacing | Non-negative unit of length | Specifies the horizontal component of the border spacing. |
| -webkit-border-vertical-spacing | Non-negative unit of length | Specifies the vertical component of the border spacing. |
| -webkit-line-break | after-white-space, normal | Specifies the line break rule to use for Chinese, Japanese, and Korean (CJK) text. |
| -webkit-margin-bottom-collapse | collapse, discard, separate | Defines how the bottom margin of a table cell collapses. |
| -webkit-margin-collapse | collapse, discard, separate | Defines how the top and bottom margins of a table cell collapse. |
| -webkit-margin-start | Any unit of length | The
width of the starting margin. For left-to-right text, this property
overrides the left margin. For right-to-left text, this property
overrides the right margin. |
| -webkit-margin-top-collapse | collapse, discard, separate | Defines how the top margin of a table cell collapses. |
| -webkit-nbsp-mode | normal, space | Defines the behavior of non-breaking spaces within the enclosed content. |
| -webkit-padding-start | Any unit of length | Specifies
the width of the starting padding. For left-to-right text, this
property overrides the left padding value. For right-to-left text, this
property overrides the right padding value. |
| -webkit-rtl-ordering | logical, visual | Overrides the default handling of mixed left-to-right and right-to-left text. |
| -webkit-text-fill-color | Any named color or numeric color value | Specifies the text fill color. |
| -webkit-text-security | circle, disc, none, square | Specifies the replacement shape to use in a password input field. |
| -webkit-user-drag | auto — Default behavior, element — The entire element is dragged. none — The element cannot be dragged | Overrides the automatic drag behavior. |
| -webkit-user-modify | read-only, read-write, read-write-plaintext-only | Specifies whether the content of an element can be edited. |
| -webkit-user-select | auto — Default behavior, none — The element cannot be selected, text — Only text in the element can be selected | Specifies whether a user can select the content of an element. |
Because AIR is
cross-platform, most differences between the operating systems are
handled for you. For example, if you choose to use the system chrome for
your AIR windows, they will be identical to the operating system
windows.
