Itec320 flexquestions set ii
This presentation is the property of its rightful owner.
Sponsored Links
1 / 18

Itec320_FlexQuestions_set_II PowerPoint PPT Presentation


  • 77 Views
  • Uploaded on
  • Presentation posted in: General

Itec320_FlexQuestions_set_II. Fill in the blank to produce this out put: <?xml version="1.0"?> <!-- Simple example to demonstrate the ComboBox control. --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> <![CDATA[

Download Presentation

Itec320_FlexQuestions_set_II

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Itec320 flexquestions set ii

Itec320_FlexQuestions_set_II


Itec320 flexquestions set ii

  • Fill in the blank to produce this out put:

    <?xml version="1.0"?>

    <!-- Simple example to demonstrate the ComboBox control. -->

    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>

    <![CDATA[

    import mx.collections.ArrayCollection;

    [Bindable]

    public var cards:ArrayCollection = new ArrayCollection(

    [ {label:“_______", data:1},

    {label:“________", data:2},

    {label:“________", data:3} ]);

    private function closeHandler(event:Event):void {

    myLabel.______ = "You selected: " + ComboBox(event.target).selectedItem.label;

    myData._______= "Data: " + ComboBox(event.target).selectedItem.data;

    }

    ]]>

    </mx:Script>

    <mx:Panel title="ComboBox Control Example"

    height="75%" width="75%" layout="horizontal"

    paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

    <mx:________________ dataProvider="{________}" width="150" close="closeHandler(event);"/>

    <mx:VBox width="250">

    <mx:Text width="200" color="blue" text="Select a type of credit card."/>

    <mx:Label id="myLabel" text="You selected:"/>

    <mx:Label id="myData" text="Data:"/>

    </mx:VBox>

    </mx:Panel>

    </mx:Application>


Itec320 flexquestions set ii

Answer original

<?xml version="1.0"?>

<!-- Simple example to demonstrate the ComboBox control. -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script>

<![CDATA[

import mx.collections.ArrayCollection;

[Bindable]

public var cards:ArrayCollection = new ArrayCollection(

[ {label:"Visa", data:1},

{label:"MasterCard", data:2},

{label:"American Express", data:3} ]);

private function closeHandler(event:Event):void {

myLabel.text = "You selected: " + ComboBox(event.target).selectedItem.label;

myData.text = "Data: " + ComboBox(event.target).selectedItem.data;

}

]]>

</mx:Script>

<mx:Panel title="ComboBox Control Example"

height="75%" width="75%" layout="horizontal"

paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

<mx:ComboBox dataProvider="{cards}" width="150"

close="closeHandler(event);"/>

<mx:VBox width="250">

<mx:Text width="200" color="blue" text="Select a type of credit card."/>

<mx:Label id="myLabel" text="You selected:"/>

<mx:Label id="myData" text="Data:"/>

</mx:VBox>

</mx:Panel>

</mx:Application>


Itec320 flexquestions set ii

  • Fill in the blank to produce this out put:

    <!-- Tree control example. -->

    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>

    <![CDATA[

    [Bindable]

    publicvar selectedNode:XML;

    // Event handler for the Tree control change event.

    publicfunction treeChanged(event:Event):void {

    selectedNode=Tree(event.target).selectedItem as XML;

    }

    ]]>

    </mx:Script>

    <mx:XMLList id="treeData">

    <node label="Mail Box">

    <node label="Inbox">

    <node label="Marketing"/>

    <node label="Product Management"/>

    <node label="Personal"/>

    </node>

    <node label=“_____________">

    <node label=“____________"/>

    <node label=“_____________l"/>

    </node>

    <node label="Spam"/>

    <node label="Sent"/>

    </node>

    </mx:XMLList>

    <mx:Panel title=“____________________________" height="75%" width="50%"

    paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

    <mx:Label width="100%" color="blue"

    text=“__________________________________."/>

    <mx:HDividedBox width="50%" height="100%">

    <mx:Tree id="myTree" width="50%" height="100%" labelField=“__label"

    showRoot="false" dataProvider="{_____________}" change="__________________)"/>

    <mx:TextArea height="100%" width="50%“ text="Selected Item: {selectedNode.@label}"/>

    </mx:HDividedBox>

    </mx:Panel>

    </mx:Application>


Itec320 flexquestions set ii

Answer original

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

<!-- Tree control example. -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script>

<![CDATA[

[Bindable]

publicvar selectedNode:XML;

// Event handler for the Tree control change event.

publicfunction treeChanged(event:Event):void {

selectedNode=Tree(event.target).selectedItem as XML;

}

]]>

</mx:Script>

<mx:XMLList id="treeData">

<node label="Mail Box">

<node label="Inbox">

<node label="Marketing"/>

<node label="Product Management"/>

<node label="Personal"/>

</node>

<node label="Outbox">

<node label="Professional"/>

<node label="Personal"/>

</node>

<node label="Spam"/>

<node label="Sent"/>

</node>

</mx:XMLList>

<mx:Panel title="Tree Control Example" height="75%" width="50%"

paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

<mx:Label width="100%" color="blue" text="Select a node in the Tree control."/>

<mx:HDividedBox width="50%" height="100%">

<mx:Tree id="myTree" width="50%" height="100%" labelField="@label“ showRoot="false" dataProvider="{treeData}" change="treeChanged(event)"/>

<mx:TextArea height="100%" width="50%"

text="Selected Item: {selectedNode.@label}"/>

</mx:HDividedBox>

</mx:Panel>

</mx:Application>


Itec320 flexquestions set ii

<?xml version="1.0"?>

<!-- Simple example to demonstrate the LinkBar control. -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Panel title="LinkBar Control Example"

height="50%" width="35%" horizontalAlign="center"

paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

<mx:Text width="100%"

text="Select a link in the LinkBar control to set the active child of the ViewStack container."/>

<mx:LinkBar color="#0000FF" fontWeight="bold" dataProvider="{___________________}"/>

<!-- Define the ViewStack and the three child containers. -->

<mx:ViewStack id="myViewStack" borderStyle="solid" width="100%" height="80%">

<mx:Canvas id="search" backgroundColor="#FFFFCC" label=“_____________" width="100%" height="100%">

<mx:Label text="Search Screen" color="#000000"/>

</mx:Canvas>

<mx:Canvas id="custInfo" backgroundColor="#CCFFFF" label=“__________" width="100%" height="100%">

<mx:Label text="Customer Info" color="#000000"/>

</mx:Canvas>

<mx:Canvas id="accountInfo" backgroundColor="#FFCCFF" label=“___________" width="100%" height="100%">

<mx:Label text="Account Info" color="#000000"/>

</mx:Canvas>

</mx:________________>

</mx:Panel>

</mx:Application>


Itec320 flexquestions set ii

Answer original

<?xml version="1.0"?>

<!-- Simple example to demonstrate the LinkBar control. -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Panel title="LinkBar Control Example"

height="50%" width="35%" horizontalAlign="center"

paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

<mx:Text width="100%"

text="Select a link in the LinkBar control to set the active child of the ViewStack container."/>

<mx:LinkBar color="#0000FF" fontWeight="bold" dataProvider="{myViewStack}"/>

<!-- Define the ViewStack and the three child containers. -->

<mx:ViewStack id="myViewStack" borderStyle="solid" width="100%" height="80%">

<mx:Canvas id="search" backgroundColor="#FFFFCC" label="Search" width="100%" height="100%">

<mx:Label text="Search Screen" color="#000000"/>

</mx:Canvas>

<mx:Canvas id="custInfo" backgroundColor="#CCFFFF" label="Customer Info" width="100%" height="100%">

<mx:Label text="Customer Info" color="#000000"/>

</mx:Canvas>

<mx:Canvas id="accountInfo" backgroundColor="#FFCCFF" label="Account Info" width="100%" height="100%">

<mx:Label text="Account Info" color="#000000"/>

</mx:Canvas>

</mx:ViewStack>

</mx:Panel>

</mx:Application>


Itec320 flexquestions set ii

<?xml version="1.0"?>

<!-- Simple example to demonstrate the VideoDisplay control. -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Panel title="VideoDisplay Control Example" height="75%" width="75%"

horizontalAlign="center"

paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

<mx:Text width="75%" color="blue"

text=“______________________________________________________."/>

<mx:VideoDisplay id="myVid" height="158" width="211" source="assets/phone.flv" autoPlay="false"/>

<mx:HBox>

<mx:Button label="Play" click=“_______________"/>

<mx:Button label="Pause" click=“______________"/>

<mx:Button label="Stop" click=“_______________"/>

</mx:HBox>

</mx:Panel>

</mx:Application>


Itec320 flexquestions set ii

<?xml version="1.0"?>Answer original

<!-- Simple example to demonstrate the VideoDisplay control. -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Panel title="VideoDisplay Control Example" height="75%" width="75%"

horizontalAlign="center"

paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

<mx:Text width="75%" color="blue"

text="Use the buttons to control the video. The Stop button resets the video to the beginning."/>

<mx:VideoDisplay id="myVid" height="158" width="211" source="assets/phone.flv" autoPlay="false"/>

<mx:HBox>

<mx:Button label="Play" click="myVid.play();"/>

<mx:Button label="Pause" click="myVid.pause();"/>

<mx:Button label="Stop" click="myVid.stop();"/>

</mx:HBox>

</mx:Panel>

</mx:Application>


Itec320 flexquestions set ii

Sketch the out in scale.

<?xml version="1.0"?>

<!-- Simple example to demonstrate the TextInput control. -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Panel title="TextInput Control Example" height="75%" width="75%"

paddingTop="10" paddingLeft="10">

<mx:TextInput id="src" text="Hello World!"/>

<mx:Button label="Copy Text" click="dest.text = src.text"/>

<mx:TextInput id="dest"/>

</mx:Panel>

</mx:Application>


Itec320 flexquestions set ii

  • Answer


Itec320 flexquestions set ii

<?xml version="1.0"?>

<!-- Simple example to demonstrate the Repeater class. -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script>

<![CDATA[

import mx.controls.Alert;

[Bindable]

privatevar dp:Array = [1, 2, 3, 4, 5, 6, 7, 8, 9];

]]>

</mx:Script>

<mx:Panel title=“__________________-" width="75%" height="75%"

paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

<mx:Text width="100%" color="blue"

text=“_____________________________________________."/>

<mx:Tile direction="horizontal" borderStyle="inset"

horizontalGap="10" verticalGap="15"

paddingLeft="10" paddingTop="10" paddingBottom="10" paddingRight="10">

<mx:Repeater id="rp" dataProvider=“______">

<mx:Button height="49" width="50"

label="{String(__.currentItem)}"

click="Alert.show(String(event.currentTarget.getRepeaterItem()) + ' pressed')"/>

</mx:_______________>

</mx:Tile>

</mx:Panel>

</mx:Application>


Itec320 flexquestions set ii

Answer

<?xml version="1.0"?>

<!-- Simple example to demonstrate the Repeater class. -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script>

<![CDATA[

import mx.controls.Alert;

[Bindable]

privatevar dp:Array = [1, 2, 3, 4, 5, 6, 7, 8, 9];

]]>

</mx:Script>

<mx:Panel title="Repeater Example" width="75%" height="75%"

paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

<mx:Text width="100%" color="blue"

text="Use the Repeater class to create 9 Button controls in a 3 by 3 Tile container."/>

<mx:Tile direction="horizontal" borderStyle="inset"

horizontalGap="10" verticalGap="15"

paddingLeft="10" paddingTop="10" paddingBottom="10" paddingRight="10">

<mx:Repeater id="rp" dataProvider="{dp}">

<mx:Button height="49" width="50"

label="{String(rp.currentItem)}"

click="Alert.show(String(event.currentTarget.getRepeaterItem()) + ' pressed')"/>

</mx:Repeater>

</mx:Tile>

</mx:Panel>

</mx:Application>


Itec320 flexquestions set ii

<!-- Simple example to demonstrate the States class. -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<!-- Define one view state, in addition to the base state.-->

<____________>

<mx:State name="Register">

<mx:AddChild relativeTo="{loginForm}" position="lastChild">

<mx:target>

<mx:FormItem id="confirm" label="Confirm:">

<mx:TextInput/>

</mx:FormItem>

</mx:target>

</mx:AddChild>

<mx:SetProperty target=“_______________________" name="title" value="Register"/>

<mx:SetProperty target=“________________________" name="label" value="Register"/>

<mx:SetStyle target="{loginButton}"

name="color" value="blue"/>

<mx:RemoveChild target="{registerLink}"/>

<mx:AddChild relativeTo="{spacer1}" position="before">

<mx:target>

<mx:LinkButton id="loginLink" label=“___________________" click="currentState=''"/>

</mx:target>

</mx:AddChild>

</mx:State>

</mx:states>

<!-- Define a Panel container that defines the login form.-->

<mx:Panel title="Login" id="loginPanel"

horizontalScrollPolicy="off" verticalScrollPolicy="off"

paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

<mx:Text width="100%" color="blue"

text="Click the 'Need to Register?' link to change state. Click the 'Return to Login' link to return to the base state."/>

<mx:Form id="loginForm" >

<mx:FormItem label=“______________________:">

<mx:TextInput/>

</mx:FormItem>

<mx:FormItem label=“_______________________:">

<mx:TextInput/>

</mx:FormItem>

</mx:Form>

<mx:ControlBar>

<mx:LinkButton id="registerLink" label="Need to Register?"

click="currentState='Register'"/>

<mx:Spacer width="100%" id="spacer1"/>

<mx:Button label="Login" id="loginButton"/>

</mx:ControlBar>

</mx:Panel>

</mx:Application>


Itec320 flexquestions set ii

Answer Original

<!-- Simple example to demonstrate the States class. -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<!-- Define one view state, in addition to the base state.-->

<mx:states>

<mx:State name="Register">

<mx:AddChild relativeTo="{loginForm}" position="lastChild">

<mx:target>

<mx:FormItem id="confirm" label="Confirm:">

<mx:TextInput/>

</mx:FormItem>

</mx:target>

</mx:AddChild>

<mx:SetProperty target="{loginPanel}" name="title" value="Register"/>

<mx:SetProperty target="{loginButton}" name="label" value="Register"/>

<mx:SetStyle target="{loginButton}"

name="color" value="blue"/>

<mx:RemoveChild target="{registerLink}"/>

<mx:AddChild relativeTo="{spacer1}" position="before">

<mx:target>

<mx:LinkButton id="loginLink" label="Return to Login" click="currentState=''"/>

</mx:target>

</mx:AddChild>

</mx:State>

</mx:states>

<!-- Define a Panel container that defines the login form.-->

<mx:Panel title="Login" id="loginPanel"

horizontalScrollPolicy="off" verticalScrollPolicy="off"

paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

<mx:Text width="100%" color="blue"

text="Click the 'Need to Register?' link to change state. Click the 'Return to Login' link to return to the base state."/>

<mx:Form id="loginForm" >

<mx:FormItem label="Username:">

<mx:TextInput/>

</mx:FormItem>

<mx:FormItem label="Password:">

<mx:TextInput/>

</mx:FormItem>

</mx:Form>

<mx:ControlBar>

<mx:LinkButton id="registerLink" label="Need to Register?"

click="currentState='Register'"/>

<mx:Spacer width="100%" id="spacer1"/>

<mx:Button label="Login" id="loginButton"/>

</mx:ControlBar>

</mx:Panel>

</mx:Application>


Itec320 flexquestions set ii

<!-- Simple example to demonstrate the List Control -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script>

<![CDATA[

[Bindable]

<!– variable selecteditm is used with meta tag [Bindable]. It means whenever a new item is selected

the UI that displays this variable is updated automatically 

public var selectedItem:Object;

]]>

</mx:Script>

<mx:Model id="mystates">

<states>

<state label="Alabama" data="AL"/>

<state label="Alaska" data="AK"/>

<state label="Arizona" data="AZ"/>

<state label="Arkansas" data="AR"/>

<state label="California" data="CA"/>

<state label="Colorado" data="CO"/>

<state label="Connecticut" data="CT"/>

</states>

</mx:Model>

<mx:Panel title="List Control Example" height="75%" width="75%"

paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

<mx:Label text="Select a state to see its abbreviation."/>

<mx:List id="source" width="100%" color="blue"

dataProvider=“_____________________}"

change="this.selectedItem=List(event.target).selectedItem"/>

<mx:VBox width="100%">

<mx:Label text="Selected State: {selectedItem._____________}"/>

<mx:Label text="State abbreviation: {selectedItem.__________}"/>

</mx:VBox>

</mx:Panel>

</mx:Application>


Itec320 flexquestions set ii

<!-- Simple example to demonstrate the List Control -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script>

<![CDATA[

[Bindable]

<!– variable selecteditm is used with meta tag [Bindable]. It means whenever a new item is selected

the UI that displays this variable is updated automatically 

public var selectedItem:Object;

]]>

</mx:Script>

<mx:Model id="mystates">

<states>

<state label="Alabama" data="AL"/>

<state label="Alaska" data="AK"/>

<state label="Arizona" data="AZ"/>

<state label="Arkansas" data="AR"/>

<state label="California" data="CA"/>

<state label="Colorado" data="CO"/>

<state label="Connecticut" data="CT"/>

</states>

</mx:Model>

<mx:Panel title="List Control Example" height="75%" width="75%"

paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

<mx:Label text="Select a state to see its abbreviation."/>

<mx:List id="source" width="100%" color="blue"

dataProvider="{mystates.state}"

change="this.selectedItem=List(event.target).selectedItem"/>

<mx:VBox width="100%">

<mx:Label text="Selected State: {selectedItem.label}"/>

<mx:Label text="State abbreviation: {selectedItem.data}"/>

</mx:VBox>

</mx:Panel>

</mx:Application>


Itec320 flexquestions set ii

  • One of the biggest differences between MXML and HTML is that MXML-defined applications are compiled into__________ files and rendered by _________ Player or ________, which provides a richer and more dynamic user interface than page-based HTML applications.


  • Login