Schogini

The code below does this .

Simply copy and paste 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:Style>

Alert

{

color : #124332;

background-color: #ffffff;

header-colors : #243322, #243322;

header-height:19;

drop-shadow-enabled: true;

drop-shadow-color :#243322;

corner-radius :10;

border-style :solid;

border-thickness: 1;

border-color : #243322;

footer-colors : #243322, #ffffff;

title-style-name : "title";

}

.myalertstyle

{

backgroundAlpha: 0.3;

backgroundColor: black;

borderAlpha: 0.3;

borderColor: white;

dropShadowEnabled: false;

}

ToolTip {

backgroundAlpha: 1.0;

fontSize: 21;

backgroundColor: #456789;

color: white;

cornerRadius: 20;

}

</mx:Style>

<mx:Script>

<![CDATA[

import mx.controls.Alert;

private function init():void

{

var alert:Alert;

alert=Alert.show("hELLO ","my Style");

alert.styleName="myalertstyle";

}

]]>

</mx:Script>

<mx:Button x="75" y="100" label="Button" toolTip="Hello"/>

</mx:WindowedApplication>

In the following code the ‘navigateToURL’ property is navigating to the same page which creates the refreshing of the page.

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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="1024"

applicationComplete="init()" minHeight="768">

<mx:Script>

<![CDATA[

import flash.net.navigateToURL;

import mx.controls.Alert;

private function init():void

{            }

protected function button1_clickHandler(event:MouseEvent):void

{

navigateToURL(new URLRequest("javascript:location.reload(true)"), "_self");

var urlRequest:URLRequest = new URLRequest(Application.application.url);

navigateToURL(urlRequest,"_self");

}

]]>

</mx:Script>

<mx:Button x="187" y="101" label="Button" click="button1_clickHandler(event)"/>

</mx:Application>

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>

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

1. Put a datagrid control in the design.

2. Apply necessary changes to the datagrid like the following.

//  Datagrid.
<mx:DataGrid x=”10″ y=”55″ height=”386″ id=”datagrid” dataProvider=”{source..order}” width=”598″ themeColor=”#17621A”>
<mx:columns>
<mx:DataGridColumn headerText=”PRODUCT ID” dataField=”orderId”/>
<mx:DataGridColumn headerText=”PRODUCT NAME” dataField=”productName”/>
<mx:DataGridColumn headerText=”QUANTITY ” dataField=”productQuantity”/>
<mx:DataGridColumn headerText=”TOTAL AMOUNT” dataField=”productAmount”/>
<mx:DataGridColumn headerText=”Ship” dataField=”productAmount”>

<mx:itemRenderer>

<mx:Component>
<mx:Box>
<mx:Button label=”Ship” click=”outerDocument.show_dialog()”>

</mx:Button >
</mx:Box>
<!–<mx:Image horizontalAlign=”center” click=”outerDocument.show_dialog();” source =”@Embed(source=’resources/email.png’)” buttonMode=”true” useHandCursor=”true” />–>
</mx:Component>
</mx:itemRenderer></mx:DataGridColumn>

<mx:DataGridColumn headerText=”Cancel” dataField=”productAmount”>
<mx:itemRenderer>

<mx:Component>
<mx:Box>
<mx:Button label=”Cancel”>

</mx:Button>
</mx:Box>
<!–<mx:Image horizontalAlign=”center” click=”outerDocument.show_dialog();” source =”@Embed(source=’resources/email.png’)” buttonMode=”true” useHandCursor=”true” />–>
</mx:Component>
</mx:itemRenderer></mx:DataGridColumn>
<mx:DataGridColumn headerText=”Remark” dataField=”productAmount”>
<mx:itemRenderer>

<mx:Component>
<mx:Box>
<mx:Button label=”Remark” click=”outerDocument.show_comment();”>

</mx:Button>
</mx:Box>
<!–<mx:Image horizontalAlign=”center” click=”outerDocument.show_dialog();” source =”@Embed(source=’resources/email.png’)” buttonMode=”true” useHandCursor=”true” />–>
</mx:Component>
</mx:itemRenderer></mx:DataGridColumn>
</mx:columns>

</mx:DataGrid>

Note : Close the datagrid column only after adding mx:itemrenderer and then mx:component and with in that place your control . You can have action on that control on the click property of that control as

click=”outerDocument.show_dialog();”

or you cant write the

<mx:Script>

<![CDATA[

"your function".........

]]>

</mx:script>

inside the control inside the datagrid column to skip the outerDocument.

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!!!

1. Place an HTML control  in your design for loading the html content.

2. Then add the following code to your source.

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="init()">
<mx:Script>
<![CDATA[
private function init():void
{
this.stage.nativeWindow.maximize();    // maximizes your window.
html.location="page.html";            // loads the html content in the html text area.
}
]]>
</mx:Script>
<mx:HTML id="html"     width="100%" height="100%" />
</mx:WindowedApplication>

Note : The function init() is called when the application load is complete.

i.e  applicationComplete=”init()”.

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:-

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

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…….