Monday, September 24, 2012

Flex "Hello World" Application

This is my first mxml script. Here I have used a label to display "Hello World". This is a flex web application.

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

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" 
               minWidth="955" minHeight="600">

    <fx:Declarations>
    </fx:Declarations>

    <s:Label id="lb" x="350" y="350" text="hello world" />

</s:Application>

==================================================================

     <s:Label id="lb" x="350" y="350" text="hello world" /> - introduces a label component to the application. [id is the attribute by which this component will be referred, x and y define the coordinates and text holds what's to display. ]

This mxml is further enhanced, adding a button which will change the text of the label.

==================================================================
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" 
               minWidth="955" minHeight="600">

    <fx:Declarations>

    </fx:Declarations>

    <s:Label id="lb" x="350" y="350" text="hello world" />
    <s:Button id="btn" x="350" y="400" 
        label="click" click="changeLabel();"/>
    <fx:Script>
        <![CDATA[
             private function changeLabel() : void {
                if (lb.text == "hello world")
                    lb.text = "good bye ..";
                else 
                    lb.text = "hello world";
            }
         ]]>
    </fx:Script>

</s:Application>

==================================================================

Here,     <s:Button id="btn" x="350" y="400" label="click" click="changeLabel();"/>  adds a button component to the application. [id is the attribute by which this component will be referred, x and y define the coordinates and label is the caption and click triggers a function that is to be called when the button is clicked. ]

fx:Script encloses actionscript code in an mxml script. Here a function, changeLabel() is defined, which is to be called when a user clicks on the button (The function is bound to "on click" event of the button). This function changes the text of the label to "good bye .." if it is "hello world" and visa-verse.


thanks,
Shyarmal.

No comments:

Post a Comment