Logo
programming4us
programming4us
programming4us
programming4us
Home
programming4us
XP
programming4us
Windows Vista
programming4us
Windows 7
programming4us
Windows Azure
programming4us
Windows Server
programming4us
Windows Phone
 
Windows Vista

Dreamweaver CS5 : Creating Adobe AIR Applications - Installing AIR into Dreamweaver & Designing for AIR

- Windows 10 Product Activation Keys Free 2019 (All Versions)
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire
3/26/2012 4:12:18 PM

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:

  1. 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.

  2. Click the Download Now badge in the middle of the screen.

  3. If necessary, log in to Adobe.com.

  4. Save the file on your desktop or in any convenient location.

  5. Double-click the downloaded file to begin the installation process.

  6. When the license agreement is presented, click I Agree to accept it and continue.

  7. 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:

  1. In Dreamweaver, choose Commands => Get AIR Extension.

  2. When your browser opens on the page in the Adobe site, click the Download The Adobe AIR Extension For Dreamweaver CS5 link.

  3. 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.

  4. After the file has completely downloaded, navigate to its new location and double-click the Adobe_AIR_CS5.mxp file.

  5. In the Extension Manager, accept the extension disclaimer.

  6. 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:

  • Dojo Toolkit 1.1.0 Beta

  • Ext JS 2.0.2 with Adobe AIR adapter

  • jQuery 1.2.3

  • MochiKit 1.3.1

  • MooTools 1.11

  • Spry 1.6.1

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:

  1. Create a new site in Dreamweaver by choosing Site => New Site.

  2. 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.

  3. Create a new HTML page.

  4. Enter the text Hello World!.

  5. From the Property inspector HTML tab, select Heading 1 from the Format list.

  6. Save your page.

    Now you're ready to see how your incredibly sophisticated Web application looks in AIR.

  7. 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.

    Figure 1. Previewing your AIR application is immediate.
  8. Close the AIR preview window and return to Dreamweaver.

  9. 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).

  10. Place your cursor anywhere in the h1 tag.

  11. 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.

  12. When the CSS Rule Definition dialog box opens, select Tag from the Selector Type list and click OK.

  13. In the Property inspector, choose the following settings:

    Size:36px
    Color:#069
    Align:Center

  14. Save your file.

    If you don't save your file now, Dreamweaver will ask that you save it before previewing.

  15. Choose File => Preview in Browser => Preview in AIR.

    Now, as evident in Figure 2, the Dreamweaver page matches the AIR rendering.

Figure 2. It's important to style all your content to achieve matching results.

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 NameValuesDescription
-webkit-border-horizontal-spacingNon-negative unit of lengthSpecifies the horizontal component of the border spacing.
-webkit-border-vertical-spacingNon-negative unit of lengthSpecifies the vertical component of the border spacing.
-webkit-line-breakafter-white-space, normalSpecifies the line break rule to use for Chinese, Japanese, and Korean (CJK) text.
-webkit-margin-bottom-collapsecollapse, discard, separateDefines how the bottom margin of a table cell collapses.
-webkit-margin-collapsecollapse, discard, separateDefines how the top and bottom margins of a table cell collapse.
-webkit-margin-startAny unit of lengthThe 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-collapsecollapse, discard, separateDefines how the top margin of a table cell collapses.
-webkit-nbsp-modenormal, spaceDefines the behavior of non-breaking spaces within the enclosed content.
-webkit-padding-startAny unit of lengthSpecifies 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-orderinglogical, visualOverrides the default handling of mixed left-to-right and right-to-left text.
-webkit-text-fill-colorAny named color or numeric color valueSpecifies the text fill color.
-webkit-text-securitycircle, disc, none, squareSpecifies the replacement shape to use in a password input field.
-webkit-user-dragauto — Default behavior, element — The entire element is dragged. none — The element cannot be draggedOverrides the automatic drag behavior.
-webkit-user-modifyread-only, read-write, read-write-plaintext-onlySpecifies whether the content of an element can be edited.
-webkit-user-selectauto — Default behavior, none — The element cannot be selected, text — Only text in the element can be selectedSpecifies 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.

Other -----------------
- Dreamweaver CS5 : Creating Adobe AIR Applications - About Adobe AIR
- Creating Basic Windows Images : Building a Reference Computer (part 2) - Preparing the reference computer for imaging
- Creating Basic Windows Images : Building a Reference Computer (part 1)
- Adobe Illustrator CS5 : Working with Illustrator Documents - Artboards
- Adobe Illustrator CS5 : Setting Up a New Document & Modifying the Setup of a Document
- Adobe Photoshop CS5 : Working with Layers - Selecting Layers & Creating a Layer Group
- Adobe Photoshop CS5 : Working with Layers - Creating a New Layer
- Configure and Manage Shared Folders : Understand Default Permissions
- Configure and Manage Shared Folders : Create Your Own Shared Folders
- Deploying with Windows DS : Capturing Custom Images & Using Windows DS with BDD 2007
 
 
Top 10
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
Popular tags
Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 windows Phone 7 windows Phone 8
programming4us programming4us
Celebrity Style, Fashion Trends, Beauty and Makeup Tips.
 
programming4us
Windows Vista
programming4us
Windows 7
programming4us
Windows Azure
programming4us
Windows Server