Flex: Simple Components Introductions & Examples

1. PopUpWindow

<?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>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	
	<fx:Script>
		<![CDATA[
			[Bindable]
			private var title:String = "PopUpAnchor";
			[Bindable]
			private var message:String = "Click Me";
			
			private function openPopUpButton():void
			{
				panelPopUp.displayPopUp = true;
			}
			private function closePopUpButton():void
			{
				panelPopUp.displayPopUp = false;
			}
		]]>
	</fx:Script>
	
	<s:Button label="Click Me" click="openPopUpButton();"/>
	<s:PopUpAnchor id="panelPopUp">
		<!-- mouseDownOutside event enables close popup window when we click outside the popup window -->
		<s:Panel title="{title}" mouseDownOutside="closePopUpButton();">
			<s:Button id="closeButton" click="closePopUpButton();" label="{message}"/>
		</s:Panel>
	</s:PopUpAnchor>
	
</s:Application>

 

2. Scrollable container

     1) Scorller can only contain one scrollable component that implments the IViewport interface.

     2) s:VGroup implements IViewport inteface.

<?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>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	
	<s:Scroller verticalScrollPolicy="on">
		<s:VGroup height="100">
			<s:Button label="Hello"/>
			<s:Button label="Hello"/>
			<s:Button label="Hello"/>
			<s:Button label="Hello"/>
			<s:Button label="Hello"/>
			<s:Button label="Hello"/>
			<s:Button label="Hello"/>
			<s:Button label="Hello"/>
			<s:Button label="Hello"/>
			<s:Button label="Hello"/>
		</s:VGroup>
	</s:Scroller>
</s:Application>

 

3. Radio buttons

    1) Using simple group

<?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>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			private function radioChangeHandler(e:Event):void
			{
				Alert.show(e.target.label);
			}
		]]>
	</fx:Script>
	<s:VGroup>
		<s:RadioButton label="Cairngorm" groupName="microarchitecture" change="radioChangeHandler(event)"/>
		<s:RadioButton label="PureMVC" groupName="microarchitecture" change="radioChangeHandler(event)"/>
		<s:RadioButton label="Robotlegs" groupName="microarchitecture" change="radioChangeHandler(event)"/>
		<s:RadioButton label="Mate" groupName="microarchitecture" change="radioChangeHandler(event)"/>
		<s:RadioButton label="Parsley" groupName="microarchitecture" change="radioChangeHandler(event)"/>
	</s:VGroup>
</s:Application>

 

    2) Using RadioButtonGroup

<?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>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
		<s:RadioButtonGroup id="codeStyleRadioGroup"
						 change="groupChangeHandler(event)"/>
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			private function groupChangeHandler(e:Event):void
			{
				// The result of the two alerts is the same!
				Alert.show((codeStyleRadioGroup.selection as RadioButton).label); 
				Alert.show(codeStyleRadioGroup.selectedValue as String);
			}
		]]>
	</fx:Script>
	<s:VGroup>
		<s:RadioButton label="pirate" group="{codeStyleRadioGroup}"/>
		<s:RadioButton label="ninja" group="{codeStyleRadioGroup}"/>
	</s:VGroup>
</s:Application>

 

4. Submit a Flex-Form to a Server Side Script

<?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>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			private function submit(e:Event):void
			{
				// Set the request params
				var variables:URLVariables = new URLVariables();
				variables.username = nameText.text;
				variables.password = passText.text;
				
				// Wrap the request params in request and send the request
				var url:String = "http://mockup.com/script.php";
				var request:URLRequest = new URLRequest(url);
				request.data = variables;
				request.method = URLRequestMethod.POST;
				sendToURL(request);
			}
		]]>
	</fx:Script>
	<s:VGroup>
	<s:Form>
		<s:FormItem label="Username">
			<s:TextInput id="nameText"/>
		</s:FormItem>
		<s:FormItem label="Password">
			<s:TextInput id="passText"/>
		</s:FormItem>
	</s:Form>
	<s:Button label="Submit" click="submit(event)"/>
	</s:VGroup>
</s:Application>