1 / 18

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[

brina
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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Itec320_FlexQuestions_set_II

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

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

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

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

  6. <?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>

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

  8. <?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>

  9. <?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>

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

  11. Answer

  12. <?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>

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

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

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

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

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

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

More Related