Air Application window formatting tips

Open your project in flex builder, then open the <appln. name>-app.xml file from the src folder.

Inside the <initialWindow></initialWindow>, there is one tag <title></title> , uncomment it and enter the Application title there. Eg: <title>My Application Window Title</title>

If you want to change the appearance of the window, uncomment the <systemChrome></systemChrome> tags and enter none in it. Eg: <systemChrome>none</systemChrome> , also uncomment the <transparent></transparent> tags and enter true in it. Eg: <transparent>true</transparent>.

If you want to disable the maximize button, uncomment the <maximizable></maximizable> tags and enter false in it. Eg: <maximizable>false</maximizable>

If you want to disable  window resizing, uncomment the <maximizable>false</maximizable> tags and enter false in it. Eg: <maximizable>false</maximizable>

If you want to add Icons to your application, uncomment <icon></icon> tags, and copy your icon images to your application’s src folder and enter image name in the <image>tags just ike following:

<image16x16>icon_16.png</image16x16>
<image32x32>icon_32.png</image32x32>
<image48x48>icon_48.png</image48x48>
<image128x128>icon_128.png</image128x128>


Create menu

All menus  in Air are NativeMenu objects.
Menu items are NativeMenuItem objects.
You can place Submenus within a parent
NativeMenu object.Also you can use event listeners to
associate menu item selection with a function.

To show a sample menu, You can use the following code.

<?xml version="1.0" encoding="utf-8"?> <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="init()"> <mx:Script> <![CDATA[ import mx.controls.Alert; import mx.controls.Button; import flash.display.*; import flash.desktop.*; function init() { this.stage.nativeWindow.menu = new NativeMenu(); var menuItem:NativeMenuItem = new NativeMenuItem("File!"); var subMenu:NativeMenu = new NativeMenu(); var btn1:NativeMenuItem = new NativeMenuItem("Open"); btn1.addEventListener(Event.SELECT, itemClicked); subMenu.addItem(btn1); menuItem.submenu = subMenu; stage.nativeWindow.menu.addItem(menuItem); function itemClicked(e) { Alert.show("You Clicked",e.target); //trace("You Selected: ", e.target); } } ]]> </mx:Script> </mx:WindowedApplication>

After executing You can see the result as

How to use air sdk to compile an AIR application to show an HTML Page

You can air sdk to compile an AIR application to show an HTML Page. Try the steps given below:

1. Create an HTML File with the following code and saved it as HelloWorld.html:

<html>

<head>

<title>Hello World</title>

</head>

<body>

<b>Hello World</b>

</body>

</html>

2. Created an xml file with the following code and save it as app.xml

<application xmlns=”http://ns.adobe.com/air/application/1.0″>

<id>test.html.HelloWorld</id>

<version>0.1</version>

<filename>HelloWorld</filename>

<initialWindow>

<content>HelloWorld.html</content>

<visible>true</visible>

<width>400</width>

<height>200</height>

</initialWindow>

</application>

3. Save these two files in a new directory. Here I have stored in D:\HelloWorld .

4. Then go to your flex folder using command prompt as shown in the figure given below and type the command:

5. You will get an output as the figure shown below:

Note: You should note the version of adl installed in your PC with the version given in your xml file.

That’s it. You have done!!!

MP3 Player in AIR

A simple AIR application Program to Play, Stop and Resume the MP3 sound.

Program:-

//MP3Player.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Panel width="396" height="314" layout="absolute" horizontalCenter="0" verticalCenter="-6" borderColor="#323120" backgroundColor="#D5F5F5" fontFamily="Verdana">
<mx:Button x="47" y="86" label="Play" click="playSound();" id="btn_play" fillAlphas="[1.0, 1.0, 1.0, 1.0]" fillColors="[#7CE444, #E7ECD2]" borderColor="#F418DD" fontWeight="bold" fontFamily="Verdana"/>
<mx:Button x="151" y="86" label="Stop" id="btn_stop" click="stopSound();" fillAlphas="[1.0, 1.0]" fillColors="[#9AF85B, #D8F8F9]" borderColor="#D328E7"/>
<mx:Button x="262" y="86" label="Resume" id="btn_resume" click="resumeSound();" fillAlphas="[1.0, 1.0]" fillColors="[#6AF44A, #F0F7EE]" borderColor="#C010E6"/>
</mx:Panel>
<mx:Script>
<![CDATA[
import adobe.utils.CustomActions;
import air.net.URLMonitor;
import flash.media.Sound;
import flash.media.ID3Info;
import flash.net.URLRequest;

var snd:Sound = new Sound(new URLRequest("app:/sound.mp3"));
var channel:SoundChannel;
var pausePosition:int;
[Bindable]
private function playSound():void
{
channel = snd.play();
}
private function stopSound():void
{
pausePosition = channel.position;
channel.stop();
}
private function resumeSound():void
{
channel = snd.play(pausePosition);
}
]]>
</mx:Script>
</mx:WindowedApplication>

Output:-



Accessing the contents of a given URL using AIR

When the user inputs a name in the textbox and press the search button , the name is appended to the given URL and it is sent.  Then the details of the given name is get displayed in the text area.    The code is given below.

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:WindowedApplication xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>

<mx:Script>
<![CDATA[
private var myUrl:String =”http://schogini.co.in/mca/mca2.php?name=”;
//private var myUrl:String =”http://”;
private function passUrl():void
{ //function for navigating to the url.

var userName : String;
userName = nameInput.text;
// To append the input name to the url
myUrl = myUrl + userName;

var url = new URLRequest(myUrl);
//navigateToURL(url);

//Add event Listener
var loader = new URLLoader();
loader.addEventListener(Event.COMPLETE,loadComplete);

//load the resource
loader.load(url);

//Function that handles the complete loading of the details
function loadComplete():void
{
outputdetails.text = loader.data;

}
}
]]>
</mx:Script>

<mx:Label x=”94″ y=”35″ text=”Name” width=”160″ id=”namelb” fontWeight=”bold” fontSize=”20″ fontFamily=”Georgia”/>
<mx:TextInput x=”208″ y=”35″ id=”nameInput” height=”26″/>
<mx:Button x=”388″ y=”33″ label=”Search” id=”searchbtn” click=”passUrl();” fontSize=”15″/>
<mx:TextArea x=”10″ y=”91″ id=”outputdetails” height=”239″ width=”529″/>
</mx:WindowedApplication>

Output

Program to resize the input image using AIR

This is a simple program to resize an  image which is loaded from the user’s system. This image can be  zoom-in or zoom-out using a Horizontal Slider(HSlider).The code is shown below….

<?xml version="1.0" encoding="utf-8"?> <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="850" height="800"> <mx:Script> <![CDATA[ import mx.effects.Effect; private var file:File; /*  This function is invoked when browse button is selected. This will create a file chooser by which we can select image */ private function click(evt:MouseEvent):void { file = new File(); file.addEventListener(Event.SELECT,file_select); file.browseForOpen("Select an image"); } /*  This function is used to get the currently selected image path */ private function file_select(evt:Event):void { img.source = File(evt.currentTarget).nativePath; } /*  change image size when the slider is moved    */ private function changeSize():void { img.width=900-temp.value; img.height=900-temp.value; } ]]> </mx:Script> <mx:HSlider x="319" y="32" minimum="200" maximum="600" allowTrackClick="true" id="temp" liveDragging="true" enabled="true" change="changeSize()"/> <mx:Image id="img" /> <mx:ApplicationControlBar x="10" y="0" width="796" id="dock" dock="true" height="55"> <mx:Button label="Click To Browse" width="791" height="36" fontWeight="bold" fontSize="21" id="but"  click="click(event);"/> </mx:ApplicationControlBar> </mx:WindowedApplication>



The output look like this…….