GIF animation in AIR

To display the GIF animation in an air application here is a way to embed in an HTML component.

First of all create a HTML component object on your desired event. I have placed itunder creationComplete();

public function loadImage():void{
     var cuteDog:HTML = startAnimation("assets/images/dog.gif");
     cuteDog.height = 80;
     cuteDog.width = 80;
     parentContainer.addElement(cuteDog);
}

“startAnimation” function will trigger the do the trick here.

public function startAnimation(url:String):HTML
{
     var gifLoader:HTML = new HTML();
     gifLoader.location=url;
     gifLoader.reload();
     return gifLoader;
}

Just set the desired height and width for the HTML component and its parent component. Finally call the addElement() to add in application.

Custom Context Menu with Air

What if you want to create a custom context menu for say a “Canvas” or a “TextInput” ?

To develop a custom context menu for a component we first need to understand the mx.internal property of a UI component. Here I am taking a TextInput for an example.

Let’s say you have a requirement to edit the font style in TextInput when you right click on a TextInput’s text area. By default context menu will come with a predefined set of options like Cut, Copy, Paste etc.  But here we need to add one more custom feature “Fonts” in the context menu.

To get this done, we need to reach to the “TextField” of a TextInput. We can get this object by using mx.internal property of a TextInput.

var txt:TextField = messageView.txtChatMessage.mx_internal::getTextField() as TextField;

mx.internal is basically those properties of an objext which has a scope of change in future. So these properties are kept hidden and not available to us. To get access these peroperties just add following piece of line at the beging of your class at import level.

use namespace mx_internal;

Now we have a full access to the TextField object of a TextArea. Following method  createCustomContextMenu() has been called on the right click of a TextArea component.

private function createCustomContextMenu () : void
{
     var txt:TextField = messageView.txtChatMessage.mx_internal::getTextField() as TextField;
}

Now create an object of NativeMenuItem, which will represents our customMenuItem. You need to add an event listener also for the same. You would also like to give a “name” to you Context Menu item together with some “data”  using the “name” and “data” property respectively.Finally you need to add this item in your components contextmenu object. Following is an updated version of the createCustomContextMenu() method.

private function createCustomContextMenu() : void
{

     var txt:TextField = messageView.txtChatMessage.mx_internal::getTextField() as TextField;

     var suggestedWord:NativeMenuItem = new NativeMenuItem(suggestionArray[iCount].toString());

     suggestedWord.addEventListener(Event.SELECT,onWordItemSelect);

     suggestedWord.data = "You menu item Label<strong>"</strong>;

     suggestedWord.name = suggestionArray[iCount].toString();

     txt.contextMenu.addItemAt(suggestedWord,0);

}

In this example I am adding my custom Menu Item at 0th location i.e. the first position. This location can be changed using “”addItemAt()” method of you context menu object.

There are other useful properties available like checked, enabled, mnemonicIndex etc. to be used if required.

You can get a better idea of all these option from livedoc’s following link.

http://livedocs.adobe.com/flex/3/html/help.html?content=Menus_2.html

Working with the Dock and the System tray in AIR

Giving a SystemTray menu or a Dock menu option to your user can be proved a very many option.

For Windows its known as a SystemTray and in Mac it’s known as a Dock menu.With a built in support for NativeApplication.nativeApplication.icon in ADOBE Air, it becomes very easy to add a taskbar support.

NativeApplication.nativeApplication.icon object can be either type of DockIcon or SystemTrayIcon depending on the operating system.

Following is a peace of code with a class name SustemTray, which first checks whether the native Operating System supports SystemTray or Dock and add appropriate event listeners which can be bubbled back to the application.

package com.chatApplication.view.components.util
{
import flash.desktop.DockIcon;
import flash.desktop.NativeApplication;
import flash.desktop.SystemTrayIcon;
import flash.display.Loader;
import flash.display.NativeMenu;
import flash.display.NativeMenuItem;
import flash.display.Sprite;
import flash.events.Event;
import flash.net.URLRequest;
import mx.core.Application;
public class SystemTrayApp extends Sprite
{
     public function SystemTrayApp()
     {
     }
     public function loadSystemTray():void
     {
          NativeApplication.nativeApplication.autoExit = false;
          var icon:Loader = new Loader();
          var iconMenu:NativeMenu = new NativeMenu();
          var openCommand : NativeMenuItem = iconMenu.addItem(new NativeMenuItem("Open Your Application"));
          openCommand.addEventListener(Event.SELECT, function(event:Event):void
          {
               dispatchEvent(new SystemTrayAppEvent(SystemTrayAppEvent.SHOW_GROUP_CHAT_VIEW));
          });
          var signOutCommand : NativeMenuItem = iconMenu.addItem(new NativeMenuItem("Sign Out"));
          signOutCommand.addEventListener(Event.SELECT, function(event:Event):void
          {
               iconMenu.removeItem(openCommand);
               iconMenu.removeItem(signOutCommand);
               dispatchEvent(new SystemTrayAppEvent(SystemTrayAppEvent.SIGN_OUT));
          });
          var exitCommand:NativeMenuItem = iconMenu.addItem(new NativeMenuItem("Quite"));
          exitCommand.addEventListener(Event.SELECT, function(event:Event):void
          {
               NativeApplication.nativeApplication.icon.bitmaps = [];
               NativeApplication.nativeApplication.exit();
          });
         if (NativeApplication.supportsSystemTrayIcon)
          {
               NativeApplication.nativeApplication.autoExit = false;
               icon.contentLoaderInfo.addEventListener(Event.COMPLETE, iconLoadComplete);
               icon.load(new URLRequest("assets/images/icon.png"));
               var systray:SystemTrayIcon = NativeApplication.nativeApplication.icon as SystemTrayIcon;
               systray.addEventListener(ScreenMouseEvent.CLICK,onClickMenuIconHandler);
               systray.tooltip = "Your Application Name";
               systray.menu = iconMenu;
          }
          //for Mac, a larger icon is required which can be replaced in below code.
          if (NativeApplication.supportsDockIcon)
          {
               icon.contentLoaderInfo.addEventListener(Event.COMPLETE,iconLoadComplete);
               icon.load(new URLRequest("assets/images/icon.png"));
               var dock:DockIcon = NativeApplication.nativeApplication.icon as DockIcon;
               dock.menu = iconMenu;
          }
     }
     private function iconLoadComplete (event:Event):void
     {
          NativeApplication.nativeApplication.icon.bitmaps = [event.target.content.bitmapData];
trace( NativeApplication.nativeApplication.icon.width + " ==== " + NativeApplication.nativeApplication.icon.height );
     }
     private function onClickMenuIconHandler (event:ScreenMouseEvent):void
     {
          dispatchEvent(new SystemTrayAppEvent(SystemTrayAppEvent.SHOW_GROUP_CHAT_VIEW));
     }
}

That’s it. Call the public method SystemTrayApp.loadSystemTray() to create the Dock/SystemTray for you application.

Useful function for flex

Check out some of the most basic function shortlisted by Ntt.
http://ntt.cc/2008/04/19/12-very-simple-basic-but-useful-function-source-in-flex.html
Worth keeping

How to print in Action Script 3.0

private function Print(event:MouseEvent):void
{
     var printJob : PrintJob = new PrintJob();
     if(printJob.start())
     {
          content.width=printJob.pageWidth;
          content.scaleY=content.scaleX;
     }
     printJob.addPage(content);
     printJob.send();
}