Windows Vista
Windows 7
Windows Azure
Windows Server
Windows Phone
Windows Vista

Dreamweaver CS5 : Packaging Your AIR Application

5/14/2012 4:28:24 PM
Once you've developed your HTML and JavaScript application in Dreamweaver and tested it thoroughly, you're ready to convert it to a full-fledged AIR application. The key component of the AIR Extension for Dreamweaver is a packaging utility that gathers the indicated files, sets the window parameters, determines an icon, and creates a secure, digitally signed application.

To package an AIR application, follow these steps:

  1. Open the page that will appear when your AIR application is first run.

  2. Choose Site => AIR Application Settings.

  3. When the AIR Application And Installer Settings dialog first opens (see Figure 1), enter the name you want to use for the executable file in the File Name field.

    By default, Dreamweaver uses the site name for the executable. Make sure that whatever name you choose is operating system–friendly and does not use any special characters. I also recommend that you remove any spaces, substituting underscores for them instead.

  4. In the Name field, enter the name you want to appear on the installer screen.

    You're free to make this name as user-friendly as you like: there are no restrictions on special characters.

  5. Enter a unique ID for your application in the ID field.

    Again, no special characters are allowed. Be sure to use only 0–9, a–z, A–Z,. (period), and - (dash).

  6. Set the version of your application in the Version field.

    If you're planning to do minor and/or major upgrades, it's a good idea to use a multi-decimal system, like 1.0.0.

    Figure 1. Dreamweaver fills out many of the application and installer settings for you automatically.
  7. Click Browse next to the Initial Content field and locate the HTML page you want to display when your AIR application opens.

  8. If you like, enter a brief description of your application in the Description field, which will appear on the installer screen.

  9. Optionally, enter copyright information in the Copyright field, which will appear on the About screen for Macs. There is no equivalent screen in Windows.

  10. From the Window Style list, choose the type of chrome to apply to your AIR application. The choices are:

    • System Chrome: Uses the standard operating system chrome.

    • Custom Chrome (Opaque): Uses the interface elements included in your HTML page and results in a rectangular frame.

    • Custom Chrome (Transparent): Uses the interface elements in your HTML page and applies a transparency to the edges, which can result in non-rectangular shapes.

  11. Set the dimensions of your application in the Window Size Width and Height fields.

  12. If you'd like your application to have a custom icon, click Select Icon Images and, in the Icon Images dialog box (see Figure 2), choose the file and path for the four required sizes (in pixels): 128 × 128, 48 × 48, 32 × 32, and 16 × 16. The default AIR icon is used if no custom one is defined.

    Icon images must be in PNG format and stored in the current site.

    Figure 2. Set up custom images for various operating systems using PNG files at different sizes.

    Don't want to hassle with creating four different versions of your icon? No worries — there's an AIR application available on the Adobe AIR Marketplace that will do it for you! Visit http://adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=1700072 to download the PNG Icon Generator for Adobe AIR applications by Muzak. All you'll need is an initial icon at 256 × 256 pixels in PNG format and the app does the rest!

  13. If you'd like to associate one or more file types to your application, click Edit List. When the Associated File Type dialog box appears, choose Add (+). In the File Type Settings dialog, enter the name of the file type (up to 38 characters), the file extension (without a leading period), an optional description, the MIME type (that is, text/html), and the icon image locations, if custom icons are desired.

  14. If you want the AIR installer to manage updates to your application, leave the Application Updates option selected. If your application is capable of managing the updates itself, deselect this option.

    That's all of the application settings; there are just a few more settings to define for the installer.

  15. Add any additional files used in your application in the Included Files area. To include an individual file, click Add (+) and select the file. To include a folder, such as SpryAssets, click the folder icon.

    Make sure not to include any system files, including those created by Dreamweaver, such as any _note or _mmServerScript files. If you accidentally include these in the list, select them and click Remove (–).

  16. To define your digital signature, click Set.

    The digital signature is a key piece in AIR security and a requirement for installation. When an application is digitally signed, it assures the user that the application has not been modified since it was created and signed.

  17. In the Digital Signature dialog box (see Figure 3), choose one of the following options:

    • Sign the AIR package with a digital certificate. Select this option if you already have a certificate or if you would like to create one. If you already have a certificate, click Browse and locate it. If you'd like to make a self-signed digital certificate, click Create and complete the dialog that appears. Enter your password and, optionally, choose to remember it for the session. Choose the Timestamp option to ensure that the application will continue to install when the digital certificate expires.


      If you intend to distribute AIR applications publicly, it is highly recommended that you purchase a digital certificate from a known authority, such as GeoTrust. With only a self-signed certificate, the AIR installer lists the publisher as "unknown" — not a very reassuring indication.

    • Prepare an AIR Intermediate (AIRI) package that will be signed later. This option is viable for testing purposes only and the application cannot be installed without a full certificate.

    Figure 3. All AIR applications require a digitally signed certificate for installation.
  18. If you'd like to create a subdirectory in the Windows Start menu, enter its name in the Program Menu Folder field. This option has no equivalent on the Mac.

  19. If you'd like to save your application installer in a different location than the site root, click Browse and select a new path. The name of the installer is automatically supplied for you, but can be modified as long as you keep the .air extension.

  20. Click Preview to display your AIR application.

  21. If you're ready to create the application installer, click Create AIR File.

    As you'll see shortly, you can also use another command to create this file once your settings are saved.

  22. Click Save to store your settings and create the AIR file at a later time.

In the normal process, you would typically create a build of your AIR application and then test it. To make changes, return to Dreamweaver and add any refinements or modifications needed. If you need to add additional files, re-open the AIR Application Settings dialog box and include them.

With your settings stored, you can continue to make changes. When you're ready to create a new build of your application, choose Site => Create AIR File. Dreamweaver will note that the file exists and ask if you'd like to replace it; click Yes. After a progress screen is displayed, Dreamweaver informs you whether the operation was successful and, if so, where the AIR installer file can be found.

You can double-click the AIR installer right in Dreamweaver's Files panel and it will begin the installation process, shown in Figure 4. Here, you can see that using a self-identifying certificate results in the publisher being listed as unknown.

Figure 4. The AIR installer lets the user know the system access level as well as the publisher's identity.

After Install is clicked, a second screen displays the name of application and description previously defined. It also asks if you'd like an icon placed on the desktop and if you'd like the application to start after the installation is complete; click Continue to proceed.

Next, your fully functioning desktop application is displayed, like mine in Figure 5. Here, I've added a Spry Accordion panel, rounded corners via WebKit's enhanced CSS styling, with transparent chrome to show them off, and, of course, a lovely image to complete the Hello World application.

Figure 5. Create all manner of desktop applications, including personalized birth announcements, with Dreamweaver and AIR.
Other -----------------
- CorelDraw X5 : Getting Artistic with Text - Formatting Paragraph Text
- CorelDraw X5 : The Text Bar and Special Paragraph Formatting
- Adobe Illustrator CS5 : Working with Illustrator Documents - Saving Files (part 2) - Saving as Illustrator EPS, Saving files as Adobe PDF & Saving files in SVG
- Adobe Illustrator CS5 : Working with Illustrator Documents - Saving Files (part 1)
- Adobe Photoshop CS5 : Working with Layers - Converting a Background into a Layer
- Adobe Photoshop CS5 : Working with Layers - Creating a Selection from a Layer & Creating a Layer from a Selection
- Adobe Fireworks CS5 : Improving Your Workflow - Thinking ahead: future-proofing your projects (part 2) - Using Fireworks files with Photoshop
- Adobe Fireworks CS5 : Improving Your Workflow - Thinking ahead: future-proofing your projects (part 1) - Metadata
- Adobe After Effects CS5 : The Timeline - Spatial Offsets
- Adobe After Effects CS5 : The Timeline - Timeline Panel Shortcuts
Top 10 video Game
-   Minecraft Mods - MAD PACK #10 'NETHER DOOM!' with Vikkstar & Pete (Minecraft Mod - Mad Pack 2)
-   Minecraft Mods - MAD PACK #9 'KING SLIME!' with Vikkstar & Pete (Minecraft Mod - Mad Pack 2)
-   Minecraft Mods - MAD PACK #2 'LAVA LOBBERS!' with Vikkstar & Pete (Minecraft Mod - Mad Pack 2)
-   Minecraft Mods - MAD PACK #3 'OBSIDIAN LONGSWORD!' with Vikkstar & Pete (Minecraft Mod - Mad Pack 2)
-   Total War: Warhammer [PC] Demigryph Trailer
-   Minecraft | MINIONS MOVIE MOD! (Despicable Me, Minions Movie)
-   Minecraft | Crazy Craft 3.0 - Ep 3! "TITANS ATTACK"
-   Minecraft | Crazy Craft 3.0 - Ep 2! "THIEVING FROM THE CRAZIES"
-   Minecraft | MORPH HIDE AND SEEK - Minions Despicable Me Mod
-   Minecraft | Dream Craft - Star Wars Modded Survival Ep 92 "IS JOE DEAD?!"
-   Minecraft | Dream Craft - Star Wars Modded Survival Ep 93 "JEDI STRIKE BACK"
-   Minecraft | Dream Craft - Star Wars Modded Survival Ep 94 "TATOOINE PLANET DESTRUCTION"
-   Minecraft | Dream Craft - Star Wars Modded Survival Ep 95 "TATOOINE CAPTIVES"
-   Hitman [PS4/XOne/PC] Alpha Gameplay Trailer
-   Satellite Reign [PC] Release Date Trailer
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
Popular keywords
HOW TO Swimlane in Visio Visio sort key Pen and Touch Creating groups in Windows Server Raid in Windows Server Exchange 2010 maintenance Exchange server mail enabled groups Debugging Tools Collaborating
programming4us programming4us
PS4 game trailer XBox One game trailer
WiiU game trailer 3ds game trailer
Trailer game
Natural Miscarriage
Windows Vista
Windows 7
Windows Azure
Windows Server
Game Trailer