AdvancED Flex 4

FLEX AND AIR: TAKING APPLICATIONS TO THE DESKTOP

119

xmlns:mx=“library://ns.adobe.com/flex/mx”

creationComplete="creationCompleteHandler()"

resize="onResize()">

<fx:Script>

<![CDATA[

import mx.core.UIComponent;

private var htmlWin:HTMLLoader;

protected function creationCompleteHandler():void

{

var ref:UIComponent = new UIComponent();

htmlWin = new HTMLLoader();

htmlWin.width = width;

htmlWin.height = height;

ref.addChild( htmlWin );

addElement( ref );

htmlWin.load( new URLRequest( '/1.pdf' ) );

}

private function onResize():void

{

if ( htmlWin )

{

htmlWin.width = width;

htmlWin.height = height;

}

}

]]>

</fx:Script>

</s:WindowedApplication>

In this example, you are loading a local PDF file called 1.pdf, which is in the AIR project locally. Just as

with the original HTML reader application, the code watches for the resize event and adjusts the size of the

HTML viewer to match the current window size.

Having PDF support (if the reader is installed on the user’s computer) can be very helpful when it comes to

embedding help support in your application.

Native Menus

Menus are important when it comes to creating a native user experience. Java Swing, for example, puts

menus on the window regardless of how the native operating system does it. That makes for an awkward

user experience on Macintosh. On the other hand, AIR gives you real native menus and makes them easy

to use.

CHAPTER 4

120

Have a look at the following code, which creates a very simple menu, to see how easy it is to create

menus.

<?xml version="1.0" encoding="utf-8"?>

<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx=“library://ns.adobe.com/flex/mx”

width="650" height="400"

creationComplete="creationCompleteHandler()">

<fx:Script>

<![CDATA[

import flash.display.NativeMenu;

import flash.display.NativeMenuItem;

import flash.events.Event;

import flash.filters.BlurFilter;

import flash.filters.DropShadowFilter;

private var itemDS:NativeMenuItem = new NativeMenuItem("Drop Shadow" );

private var itemBlur:NativeMenuItem = new NativeMenuItem( "Blur" );

protected function creationCompleteHandler():void

{

var filterMenu:NativeMenuItem = new NativeMenuItem("Filters");

if(NativeWindow.supportsMenu)

{

stage.nativeWindow.menu = new NativeMenu();

stage.nativeWindow.menu.addItem(filterMenu);

}

if(NativeApplication.supportsMenu)

NativeApplication.nativeApplication.menu.addItem(filterMenu);

var filterSubMenu:NativeMenu = new NativeMenu();

itemBlur.addEventListener(Event.SELECT,onMenuSelect);

itemDS.addEventListener(Event.SELECT,onMenuSelect);

filterSubMenu.addItem( itemBlur );

filterSubMenu.addItem( itemDS );

filterMenu.submenu = filterSubMenu;

}

private function onMenuSelect( event:Event ):void

{

var mi:NativeMenuItem = event.target as NativeMenuItem;

var filters:Array = [];

mi.checked = !mi.checked;

if ( itemDS.checked )

FLEX AND AIR: TAKING APPLICATIONS TO THE DESKTOP

121

filters.push( new DropShadowFilter() );

if ( itemBlur.checked )

filters.push( new BlurFilter() );

image.filters = filters;

}

]]>

</fx:Script>

<mx:Image id="image" source="@Embed('max09_640x360_vasava.jpg')" />

</s:WindowedApplication>

The application starts by creating a new Filter menu item. Then, it adds that to the main application or

window menu. From there, it adds two submenu items: one for Blur and another for Drop Shadow. It also

adds an event listener to these items to watch for the SELECT message that is sent when the user selects

the menu item. From there, the onMenuSelect method applies the selected filters to the image.

When you run this AIR application in Flash Builder 4, you should see an image with no filters.

Then you can switch the filters on and off selectively and have the image instantly updated to match. For

example, if you choose Blur, you should see the result shown in Figure 4-7.

Figure 4-7. The picture with the Blur filter applied

You can create menu separators, sub-submenus, and so on to give your application all of the menu

options that an operating system native application would have.