Adobe Air and Dreamweaver for JavaScript developers

Author: David Tucker

Adobe Air has excellent support for html/javascript applications and desktop integration, but in addition to all the additional features, additional tools and techniques are required. This article explores the differences between the use of Html/javascript Web development and application development using the same tools. <?xml:namespace prefix = o ns = "Urn:schemas-microsoft-com:office:office"/>

Demand

To better learn this article, you need the following software and files:

Adobe AIR

Download

Dreamweaver CS3

Trial

Buy

Adobe AIR Extension for Dreamweaver CS3

Download

Sample Files

Exercise_files_for_js.zip (Zip, 308K)

Essential Knowledge

This tutorial requires understanding the workings of Dreamweaver CS3 and mastering the intermediate knowledge of JavaScript.

set Dreamweaver for Air

One of the easiest ways to start AIR development is to install Adobe Air Extension for Dreamweaver CS3.

Installation Prerequisites

Please install the air runtime mentioned in this article introduction page. This will enable you to follow the example shown in this tutorial step-by-step.

Additionally, you must install the Adobe AIR Extension for Dreamweaver CS3. This extension enables you to build, test, and deploy air applications within Dreamweaver. After downloading this extension, double-click it. This will open Adobe Extension Manager. If you have previously installed any air extensions for Dreamweaver CS3, you will be prompted to overwrite some files. Overwriting old files does not cause problems because you are installing the latest version of the extension.

Dreamweaver Air Workflow

An air extension installation does not immediately change the layout of the Dreamweaver. You can select the commands item from the menu bar to confirm that the installation has completed successfully. You should see two additional options: AIR applications settings and create Air File. If you are using a Windows machine, you should see the menu shown in Figure 1.

<?xml:namespace prefix = v ns = "urn:schemas-microsoft-com:vml"/>

Figure 1. Site menu in Dreamweaver CS3

After you verify the installation, you can start building your first Air application. While this task may seem daunting at first glance, you will soon find that Dreamweaver will do most of the configuration for you.

Air Application Settings

One of the major differences between Web applications and desktop applications is configuration. For desktop applications, there are some new problems that must be answered. How big the application should be. What the window should look like. It should be positioned where the screen is located. What the program icon should look like. There are a number of similar questions that need to be answered before the application can be packaged and sent to the user.

In air, these configuration items are handled by an XML file called an application descriptor file. The following is a simple application descriptor file:

As you can see, many of the questions you have to answer are answered in this short file. For example, the width and height of an application and other properties related to the main application window are defined within the <initialWindow> tag. The full application descriptor file is much longer and contains options for customizing the program icon, window positioning, and custom file types.

Creating one of these files for each air application you develop may seem cumbersome, but Dreamweaver makes it easy to create application descriptor files. If you have a site that is open on Dreamweaver CS3, you can click the Air application Settings item in the Command menu. This opens the window shown in Figure 2.

Figure 2. Air application and Installer Settings dialog box in Dreamweaver CS3

Many of these settings can retain the default values, but you must change the ID and name values for each air item. IDs are unique values used to differentiate your application from other air applications-even if they have the same name. Many developers use reverse Domain name resolution (REVERSE-DNS) for their IDs. For example, my domain is davidtucker.net, and I might choose an ID such as net.davidtucker.SampleApplication for the application. If developers use this Convention, they can eliminate the possibility of duplication of application IDs to the maximum extent possible.

IDs are particularly important for applications to publish and update. In a later section, you'll learn more. It is necessary to understand that the ID should be set when the application is created and should not be changed thereafter. If you change, you cannot use features such as the update framework in Adobe AIR.

Creating an Air application

Now that you have completed your preparations, you can place a Web application in Adobe AIR and see how it works. To complete this task within Dreamweaver, you first need to create a new site for your project. You can see a folder named Sample application template in the practice file that is included with this article. Put all four files in the site folder.

Next, select Site > AIR application and Installer Settings. Make sure that all four files appear in the Incluede Files section of this dialog box (shown in Figure 3). If some of these files do not appear in this list, you can click the plus sign and select the missing files to add them.

Figure 3. Use Dreamweaver CS3 to include files in an air application

After you finish this task, click the Preview button. Congratulations, you have just tested your first Air application in Dreamweaver CS3. There is another place that must be checked before packaging and deploying this application, that is, security.

Security in Air

A significant change in thinking for Web developers is to realize that they are developing desktop applications, not Web applications, in air. Desktop applications have some special permissions that Web applications do not have, such as file system interactions. For this reason, special attention must be paid to ensure that air applications are not threatened by any external sources, while ensuring that your air applications are from the expected correct publisher. Therefore, you will find the certificate and security sandbox inside the air.

Note: For more information on the safety in AIR, see Lucas Adamski's article introducing the Adobe AIR security model.

from the visa book

Because desktop applications can pose a risk to a user's computer, it is necessary to find a way to verify the identity of the air application Publisher. Like some other desktop application platforms, Adobe air requires your application to have a certificate. This does not mean that you must use a commercial certificate. Adobe actually allows developers to use their own visa books. In Dreamweaver, you can click the Set button next to the Digital signature field in the Air Application and installation window to create a certificate for your application. This opens a window where you need to click the Create button. The next window that appears allows you to fill in information about you and your organization (see Figure 4). After you complete this step, Dreamweaver will notify you if the certificate was created correctly.

Note: for further information on the rationale of the signed application, see the article Digitally signing Adobe AIR applications Why sign an application in Todd Prekaski.

Figure 4. Certificate Creation window in Dreamweaver CS3

You can now set up a digital signature in the Air Application Settings window. You need to acknowledge and remember the password that was used to create the certificate, and you must enter this password each time you create the. Air file.

Commercial Signature Certificate

The business signing certificate confirms your identity to the end-user of the application. This is important because the installation screens that appear when a user installs a signed air application and a commercial signature application are different. Figure 5 and Figure 6 Show the difference.

Figure 5. From the application of the Visa Book installation window

Figure 6. The installation window for the commercial signing certificate application

The commercial signature certificate is provided by enterprises such as Thawte. Unlike the process of creating a visa book, the publisher of a commercial certificate processes the certificate creation process.

Security Sandbox

A sandbox assigns a specific permission group to an asset in a page or application. The root HTML file referenced in the application descriptor file is automatically placed in the application sandbox. The application's root file will be in the application sandbox.

The application sandbox provides the broadest range of functionality. In fact, there is only one constraint to the content in the application sandbox: the use of the Eval method is strictly restricted. The Eval method can still compute the literal value, but the function call cannot be passed through JSON. Because this is a desktop application and not a Web application, core Air API calls need to be protected. What happens if the remote server receives a threat and sends the following JSON statement.

{air. NativeApplication.nativeApplication.exit ()}

This will cause the application to exit without warning. Many JavaScript developers do not write this into their code, but many JavaScript frameworks implement this functionality. In this case, developers can use a remote sandbox, using Parentsandboxbridge and Childsandboxbridge to communicate between two different sandbox.

Create approject using advanced templates

The functionality used to process between different sandboxing can be confusing, so Adobe provides a template for dealing with such applications exclusively. You can find this template in the practice file that is included with this article. This template is an ideal starting point for integrating existing Web applications with air.

Master the details

The sandbox in air is a complex subject. This basic application/non-application sandbox approach is sufficient for many applications, but when data is dynamically loaded from multiple data sources, there is a need for a more thorough understanding of the security model within the air. In developing AIR applications with HTML and Ajax, you'll see a full chapter that covers the security model. Lucas Adamski recently wrote an article about the air security model and the rationale behind it.

Debugging Applications

Debugging is an important part of Ajax development. There are a number of debugging tools available, but many developers simply rely on plug-ins such as Firebug (a Firefox plug-in developed by Joe Hewitt). How to debug an air Ajax application. Firebug is not an ideal choice, so what developers should do. Adobe has taken this issue into account when designing tools for air developers, offering two options.

Simple Debugging

Simple debugging is a simple way to get some piece of information. In many cases, if you are debugging a single block of code, this is the only way to do it. There are many ways to implement simple debugging in air, but there are two common methods: Call the Alert method and use the trace function inside the air. The alert method has the same functionality as it does in a standard JavaScript Web application, but Air.trace is unique to the Air API. The Air.trace method allows developers to send trace statements through the ADL (AIR Debug lanuncher). Dreamweaver does not support this approach, so you often need to consider complex debugging solutions--introspector.

using air introspector to implement complex debugging

In almost all cases, the AIR Introspector provides a higher and more specific level of debugging than any of the above mentioned methods. Introspector provides most of the functionality in standard tools such as Firebug. Introspector contains five tabs (see Figure 7):

· Console: The console will receive errors, warnings, and notifications from air, as well as custom messages sent by the user. Developers can send data to the console using five different methods.

o Air. Introspector.Console.log (' Sample log Item ')

o Air. Introspector.Console.warn (' Sample Warning Item ')

o Air. Introspector.Console.info (' Sample info Item ')

o Air. Introspector.Console.error (' Sample error Item ')

o Air. Introspector.Console.dump (object)

HTML: HTML tab provides a way to view HTML using a tree layout and view the DOM properties and computed style elements of a node in the XML. When you move the mouse over an XML node, the corresponding content in the application is highlighted.

The Dom: Dom Tab provides a list of all the DOM properties for a window.

Assets: The Assets tab provides a way to view all of the files used in your application, including images, JavaScript files, and CSS files.

Source: The Source tab allows you to view not only the actual source code of your application (as well as the source codes of JavaScript files, CSS files, and application descriptor files), but also the parsed source code.

XHR: XHR tab allows you to view all xmlhttprequests