Adobe

Archives / Ajax

Adobe AIR Development Plug-In for Aptana Studio Now Available

Today, we are pleased to announce with Aptana that the next major update to the Adobe AIR Development Plug-In for Aptana Studio is now available for download. Joelle Lam, an Aptana engineer that worked on the project, has recorded a video overview (see above) and also authored an excellent overview article describing the new JavaScript debugging capabilities.

The full list of features in the plug-in include:

  • Support for Adobe AIR 1.5. (new)
  • Integrated JavaScript Debugger. Watch screencast. (new)
  • Bundled JavaScript frameworks with full code assist (new)
  • Tools for generating application badges (new)
  • Integrated content assist for the Adobe AIR SDK
  • Pre-installed Adobe AIR runtime and SDK
  • Project wizard generates all necessary files for out-of-the box launching of Adobe AIR applications
  • Export wizard bundles and deploys Adobe AIR applications
  • Easily import Ajax libraries into Adobe AIR projects
  • Create and manage certificates for signing Adobe AIR applications
  • Support for localization, menu builders, and source viewing
  • Adobe AIR samples that can be previewed or imported as project
  • Help and online documentation

As we've been speaking to JavaScript developers, one of the most requested features has been the ability to debug their applications. While we exposed this capability in Adobe AIR 1.5 released in November of last year and Aptana announced a beta plugin that supports this, today's announcement is particularly exciting because the final version of this plugin is now available to users and includes many bug fixes and enhancements. Debugging support includes the ability to step in, step over, and step out of code. Errors are displayed in the Console.

aptana-debugging.jpg

Screenshot of the new debugging view.

Related links:

Creating cinematic effecs with Adobe Pixel Bender and JavaScript

Photo

The team at Ext created an Adobe AIR application called Pixel Bender Explorer that demonstrates how to apply compelling animations and other effects to your JavaScript-based AIR applications. The effects are accomplished using Flash Player 10's new Pixel Bender technology, the same technology behind many filters and effects in Adobe After Effects software. Aaron Conran from Ext discusses on the blog post how he was able to to access these effects from JavaScript and integrate this functionality into the Ext JavaScript framework.

The application allows you to load a sample video and image and then apply filters effects in real-time. It's impressive to see the responsiveness when you load a video, apply an effect and adjust the supported properties (angle, direction, center point, etc.). Try loading the sample video, selecting "RadialCaleidoscope" and then slowing adjusting the "angle" property.

Adobe AIR + Netflix API + Dojo Toolkit = Queued Movie Manager

SitePen announced an impressive new technology demonstration called Queued that showcases what's possible when you combine the new Netflix API with the Dojo Toolkit and Adobe AIR.

Queued is a desktop application built on AIR that offers some of the functionality available on the Netflix website including support for search for and prioritizing your movie queue, but also adds new capabilities such as allowing you to view and manage your queue while offline (a synchronization engine updates your queue when you're back online). In addition, since this application runs in the background, you can receive popup notifications when Netflix receives or sends you new movies. The source code is available on Google and can also be accessed directly from within the application as well. This application, built using JavaScript, takes advantage of the Dojo Extensions library for Adobe AIR built by SitePen.

For more information, be sure to check out Revin Guillen's blog post and watch the video demonstration below (if you're a Netflix customer, be sure to download the application too!). Congratulations to the SitePen team for pulling off another stunning AIR application!

ActiveRecord JavaScript Library Announced AIR Support

Ryan Johnson of Aptana announced the beta version of ActiveRecord.js, an open source JavaScript library that implements the ActiveRecord pattern popularized by the Ruby on Rails community. In addition to supporting Adobe AIR, it provides support for other JavaScript application runtimes including web browsers. On the server-side, ActiveRecord.js also works with MySQL and SQLite via Aptana Jaxer, the Ajax server based on the Mozilla browser engine. Work is underway as well to support HTML 5’s SQL APIs, now available in some versions of WebKit, once that specification is finalized. 

For developers creating Ajax applications using Adobe AIR, this means they can persist JavaScript objects and data using pure JavaScript syntax. All the underlying SQL commands are simplified into higher level APIs that are more natural feeling for JavaScript developers. In many cases, the syntax results in far fewer lines of code to implement as well. 

There is an Adobe AIR sample application provided with the project that demonstrates a basic example of the ease of use. 

active-record.png

As shown below, it takes one line to connect ActiveRecord.js and a few lines more to define a record object, in this case Note.

      ActiveRecord.connect(ActiveRecord.Adapters.AIR);
      
      Note = ActiveRecord.define('notes',{
        body: '',
        created: {
          type: 'DATETIME'
        }
      });
            
With the Note type record defined, getting a collection of records is a easy as Note.find() as shown below.

      window.onload = function(){
        //display all existing persisted notes
        var notes = Note.find({
            all: true
        });
        for(var i = 0; i < notes.length; ++i){
            display_note(notes[i]);
        }

Note.create() not surprisingly adds a new Note record.

        //form logic to create new notes
        document.getElementById('add_note_button').onclick = function(){
          var note = Note.create({
            body: document.getElementById('add_note_text').value
          });
          display_note(note);
        };
      };

Perhaps the most verbose part of the sample is where it directly updates the user interface using native HTML DOM APIs. Of course, this could be further simplified by using jQuery, Dojo Toolkit, Ext JS and other popular Ajax libraries. ActiveRecord.js is intended to complement, not replace, the use of other Ajax libraries. 

Aptana has also put a .project file into the source repository for this example to make it easy to import into Aptana Studio and run this with the Adobe AIR Development Plugin. Since the project contains JavaScript files, you can also use Dreamweaver or any other text editor to view it as well.

Related Links:

Building Desktop Applications Powered by Dojo and Adobe AIR

Dylan Schiemann from SitePen presented an excellent talk at MAX in San Francisco last week titled "Building Desktop Applications Powered by Dojo and Adobe AIR." Dylan has made the slide deck (.pdf) from his talk available on his blog.

In his session, Dylan covered numerous topics related to Dojo and Adobe AIR including:

dojoandair.png

Ext JS announces enhanced support for Adobe AIR

The team at Ext JS announced today several major new enhancements to the Ext.air package today including the addition of several new classes:

  • Ext.air.MusicPlayer - a more advanced version of Ext.air.Sound designed for playing mp3's and podcasts
  • Ext.air.Notify - a new notification class for displaying user notifications
  • Ext.air.VideoPanel - allows for embedding of Flash based video while maintaining the same functionality as an Ext.Panel
  • Ext.air.Clipboard - a more friendly Ext JS way of manipulating the clipboard

In addition, Aaron also announced the availability of a new Adobe AIR sample application (.air) called ExtPlayer, including source code, that demonstrates some of these new API's in action. For more information, be sure to check out Aaron's post.

ExtPlayer.png

Here is an example of how to display a notification using Ext.air.Notify function:

var msg = 'Title: {0}<br/>Artist: {1}';
var sample = new Ext.air.Notify({
    msg: String.format(msg, id3info.songName, id3info.artist),
    icon: '../famfamfam/music.png'
});

Archives

About

Adobe AIR

The Adobe® AIR™ runtime lets developers use proven web technologies to build rich Internet applications that deploy to the desktop and run across operating systems. Continues

Maxexplorer