AdvancED Flex 4

FLEX AND AIR: TAKING APPLICATIONS TO THE DESKTOP

117

Building a Browser

AIR comes with a built-in native web browser that you can use within your Flex application. It works just

like any other Flash sprite. Shown here is a simple example AIR application that uses the web browser

control to display any web page you wish. Create a new AIR application and call it Browser. The

application MXML content is the following code:

<?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"

creationComplete="onStartup()" resize="onResize(event)">

<fx:Script>

<![CDATA[

import flash.html.HTMLLoader;

import mx.core.UIComponent;

private var htmlPage:HTMLLoader = null;

private function onStartup() : void

{

var ref:UIComponent = new UIComponent();

ref.setStyle('top', 50);

htmlPage = new HTMLLoader();

htmlPage.width = 600;

htmlPage.height = 600;

ref.addChild( htmlPage );

addElement(ref);

}

private function onResize(event:Event) : void

{

if (htmlPage)

{

htmlPage.height = height - 50;

htmlPage.width = width;

}

}

private function onKeyDown(event:KeyboardEvent):void

{

if ( event.keyCode == Keyboard.ENTER )

htmlPage.load(new URLRequest(txtUrl.text));

}

]]>

</fx:Script>

<mx:Form width="100%">

<mx:FormItem label="Url" width="100%">

CHAPTER 4

118

<mx:TextInput id="txtUrl" width="100%" text="http://adobe.com"

keyDown="onKeyDown(event)" />

</mx:FormItem>

</mx:Form>

</s:WindowedApplication>

The code for this example is pretty simple. When the application receives the creation complete event, it

builds a new HTMLLoader object. Because the HTMLLoader is based on a sprite, it needs to be wrapped in

a Flex UIComponent object. The code then responds to the resize event by resizing the HTML page

control to match the new frame size. It also looks at the key-down event on the URL text to see when the

user presses the Enter or Return key to start browsing to that location. When you run this AIR application

from Flash Builder, you get something that looks like Figure 4-6.

This example shows just a portion of what you can do with the browser control. You can get access to the

browsing history as well as inject JavaScript objects into the runtime space of the page.

Another common use case is the viewing of a PDF file within the application. You could use a PDF to store

documentation or to present the licensing agreement for the software.

Figure 4-6. The built-in web browser

AIR has special support for PDF built right in. It’s just as easy to look at a PDF page as it is any web page.

Using the following code, create a new AIR project and call it PDFSupport.

<?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"