Posts in Category "Ajax"

JavaScript Memory and CPU Profiling in Adobe AIR 2

One of the biggest challenges our team continued to hear from JavaScript developers using Adobe AIR 1.5 was that it was too difficult to track down CPU and memory issues within their HTML-based AIR applications. To help JavaScript developers detect and resolve these issues, we have introduced new runtime support for CPU and memory profiling of HTML-based AIR applications in the Adobe AIR 2 beta.

By doing so, tools like Aptana Studio can build powerful features that make analyzing memory and CPU usage of JavaScript execution within an AIR app a breeze. In the video above, Paul Colton, CEO of Aptana, provides an overview of how Aptana Studio is able to take advantage of the new runtime support and build powerful new features to assist developers in tracking down performance issues.

Some of the features included in the new Adobe AIR 2 Beta Plug-In for Aptana Studio include:

  • Live Objects View
    • Shows current information about how much current and cumulative memory is used by the application
    • Shows the number of current and cumulative instances of objects
  • Memory Usage View
    • Peak memory used
    • Current memory used
  • Memory Snapshot and Object References Views
    • Captures the number of class instances as well as memory used at a point in time
    • Select an object to view its references
    • Allocation trace information reveals where the objects are allocated
  • Loitering Objects View
    • Displays the memory usage difference between two memory snapshots
    • Helps detect loitering objects that are still present
  • Performance Profile View
    • Displays a list of all method calls along with amount of time for each to run
  • Method Statistics View
    • Presents information on the callers and callees of a function including statistics
    • Quickly navigate to location of the function in the code

Both Adobe AIR 2 and Adobe AIR 2 Beta Plug-in for Aptana Studio are currently in beta. If you run into issues or have feature requests, both the Adobe and Aptana teams would appreciate hearing your feedback on these new capabilities.

Next steps:

  1. Watch the tutorial video for a quick introduction on the new profiler capabilities
  2. Download the Adobe AIR 2 Beta Plug-In
  3. Discuss the feature on the Adobe AIR 2 Beta forums or post a comment below

Note: For Flex and Flash developers, support for application profiling has been available in Adobe Flex Builder for some time. We are very excited to bring this support to JavaScript developers as well.

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'
});