|
Adobe® AIR™ allows you to leverage your existing web development skills to build and deploy Rich Internet Applications (RIAs) to the desktop. You can choose to develop with Adobe Flex or with Ajax.
In this article I will give you directions on how to build applications with Backbase Enterprise Ajax framework running in Adobe AIR, will explain best practices for the combination and will show a sample application running on the Backbase framework in the Adobe AIR execution container.
- Backbase Enterprise Ajax and Adobe AIR
- Backbase & Adobe AIR best practices
- Setting up an AIR application
- Packaging an AIR application
- Sample AIR application
Backbase Enterprise Ajax and Adobe AIR
One of the benefits of Adobe AIR is that it can run Ajax applications that have access to system resources (such as file system, notification tray). Looking great, right? But it can be tough developing Ajax applications in a rapid and efficient way. What if I need rich Ajax widgets? What if I want a solid architecture for my Ajax application? These questions have been partially answered in the past and people chosen development with UI frameworks. Backbase Enterprise Ajax framework has proven its benefits and demonstrated excellent development efficiency over the past years.
When considering combination "Backbase Enterprise Ajax and Adobe AIR" it is easier to see it in the following simplified way:
- Backbase Enterprise Ajax for Application UI and logic
- Adobe AIR for access to system resources as well as to local database
Backbase & Adobe AIR best practices
Adobe AIR runtime has two application security modes:
- application sandbox (applications have direct access to system resources provided with AIR API)
- non-application sandbox (applications run in a frame and don't have direct access to system resources)
Although Backbase Enterprise Ajax framework can run in both security modes, when running in the "application sandbox" there are several best practices to be followed. This is because of a single inherent AIR security constraint: JavaScript cannot be compiled during the Application Runtime (after the page load event)
1) Tag definition files (TDL) cannot be loaded dynamically (asynchronously)
Due to the security limitation imposed by Adobe AIR, JavaScript cannot be compiled after the page is loaded thus making it impossible to lazy-load TDL resources and evaluate them when the application requires them. In order to resolve the situation Backbase framework got an adjustment - it will load all TDL resources referenced during boot-time.
2) Partial content (loaded with lazy-loading mechanisms) cannot have execution logic integrated
It has become a good practice (also known as lazy-loading) in Ajax applications to load parts of the page/application/data only when users come to a point where they actually need this part of the page/application/data. Along with UI fragments the server then often sends inline logic (on- handlers or even chunks of JavaScript code). That actually has always been considered as dangerous or simply bad practice. In the application running on AIR you are prohibited from any evaluation of JavaScript code after the page has loaded, thus fragments being lazy-loaded can only have UI but no execution logic. In order to solve such a problem (if you consider it as such) you are advised to include all the logic used by the application in the application file, so it will be loaded at boot time.
3) JavaScript cannot be used as selector in attributes resolved at the application runtime.
It is anyway not recommended to use JavaScript as selection language in attributes. If you have used it and now you convert your application to run it in AIR try getting rid of the practice:
instead of:
<e:if test="javascript:this.getAttribute('label')==''">
<c:alert select="'My @label attribute has no value'" />
</e:if>
</e:handler>
use:
<e:if test="not(@label)">
<c:alert select="'My @label attribute has no value'" />
</e:if>
</e:handler>
4) XML Execution Language (XEL) instructions cannot be mixed with JavaScript code fragments
It is often nice to make use of JavaScript and XEL/Command and write code in the language fitting better your contextual needs. However in the application running in AIR such mixing is not possible so you have to stick to either writing a handler/function in JavaScript or XEL/Command. As an option you can also define a function in JavaScript and still be able to call it from XEL or define it in XEL and call it from JavaScript!
instead of:
<e:if test="not(@label)">
<e:script type="application/javascript">
alert('My @label attribute has no value');
</e:script>
</e:if>
</e:handler>
use:
<e:argument name="myArgument" />
<e:body type="text/javascript">
alert(myArgument);
</e:body>
</e:handler>
<e:handler event="DOMActivate" type="application/xml">
<e:if test="not(@label)">
<e:call function="myFunction" myArgument="'My @label attribute has no value'"/>
</e:if>
</e:handler>
Setting up an AIR application
To get started with development of an Adobe AIR application with Backbase framework you need Adobe AIR SDK and Backbase Enterprise Ajax 4.2. You can use any text editor of your choice to edit application files - most of them will likely be HTML/JavaScript/CSS and XML documents.
Follow the steps below to quick start:
- Acquire a copy of Adobe AIR SDK
- download Adobe AIR SDK from Adobe website
- deploy SDK on your local disk, for example at c:/AdobeAIRSDK
- Acquire a copy of Backbase Enterprise Ajax
- download Backbase Enterprise Ajax from Backbase site
- Create a new project (for example at c:/Projects/BackbaseOnAir) and setup directory structure:
- create a source/ folder
- copy frameworks/AIRAliases.js file from AdobeAIRSDK to your source/ folder (this file contains shortcuts to extensive AIR API relevant for Ajax developer)
- copy Backbase_4_2_0/ folder to your application source/ folder
- create an index.html file with your application code (include AIRAliases.js and Backbase_4_2/engine/backbase.js references in this file)
- create AIR application descriptor file, for example source/descriptor.xml and refer to index.html from it (you may use a template from samples/descriptor-sample.xml found in AdobeAIRSDK)
Now the project directory structure will look the following way:
c:/Projects/BackbaseOnAir/source/Backbase_4_2/
c:/Projects/BackbaseOnAir/source/AIRAliases.js
c:/Projects/BackbaseOnAir/source/index.html
c:/Projects/BackbaseOnAir/source/descriptor.xml - Test application setup
From command line type in:
c:/AdobeAIRSDK/bin/adl 'c:/Projects/BackbaseOnAir/source/descriptor.xml'
You should see a window pop-up with your application running! If you get "The application descriptor file cannot be found" check your paths and the validity of the application descriptor file.
Packaging an AIR application
Packaging an AIR application is a process in which you create an application that can be distributed. In fact such an application is an archive with ".air" extension that can be understood by the AIR Runtime when installed. In this section I will explain three simple steps that help you quickly create an AIR application distribution. (The recommendations produced refer to Windows-based development environment)
- Open a command line and go into a directory with your application sources
c:
cd c:/Projects/BackbaseOnAir/source/ - Obtain signing certificate / generate one
If you do not have a signing certificate you can generate one. Although such certificate is in a way "insecure" you can still use it to sign applications with a purpose of showing them to friends or for yourself.c:/AdobeAIRSDK/bin/adt -certificate -cn ANYTHINGHERE 1024-RSA ../test_cert.pfx PASSWORDPlease refer to Digitally signing an AIR file page to find more on certificates.
- Package and sign application
From command line type in:
c:/AdobeAIRSDK/bin/adt -package -storetype pkcs12 -keystore ../test_cert.pfx -storepass PASSWORD ../build/BackbaseOnAir.air descriptor.xml *
Now you should have your application BackbaseOnAir.air package available in c:/Projects/BackbaseOnAir/build/
Sample AIR Application
During the event on AIR Tour I have had a chance to explain the benefits of building applications with Backbase Enterprise Ajax and demonstrated a sample application "RSSReader" that was developed over a night by a couple of Backbase people.
During the course of application development we developed a behavior "b:airData" that significantly simplifies binding data between SQLite AIR database and Backbase databinding mechanism. For now the behavior implementation can be found in the application available for download below and will likely be delivered with the next release of Backbase Enterprise Ajax framework.
Use the link below to download and try the sample application (You will need Adobe AIR Runtime to run it)
| Attachment | Size |
|---|---|
| RSSReader0.2.zip | 526.74 KB |
