Listing 1: Demo1.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.macromedia.com/2003/mxml" width="800" height="600">
	<mx:HSlider x="76" y="199" width="451" height="15" labels="['low','medium','high']" maximum="1000" minimum="0"
	 tickInterval="50" value="75" snapInterval="25"  />
	<mx:HSlider x="76" y="353" width="451" height="15" tickInterval="1" maximum="10" minimum="1"
	 labels="[1,2,3,4,5,6,7,8,9,10]" value="3" snapInterval="1"  />
	<mx:VSlider x="602" y="103" height="402" liveDragging="false" minimum="-50" maximum="50" snapInterval="5"
	 tickInterval="5" thumbCount="2" values="[-20,30]" labels="[-50,0,50]"/>
</mx:Canvas>

Listing 2: Demo2.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.macromedia.com/2003/mxml" height="600" width="800">
	<mx:TitleWindow width="400" height="300" closeButton="true" title="Popup window" horizontalAlign="center"
	 x="147" y="156">
		<mx:Spacer width="20" height="98" />
		<mx:FormItem label="Numeric stepper">
			<mx:NumericStepper />
		</mx:FormItem>
		<mx:ControlBar horizontalAlign="right">
			<mx:Button label="save" toggle="true" />
			<mx:Button label="cancel" />
		</mx:ControlBar>
	</mx:TitleWindow>
</mx:Canvas>

Listing 3: Demo3.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.macromedia.com/2003/mxml" height="600" width="800">
	<mx:MediaPlayback x="100" y="100"  contentPath="demo.flv" height="300" width="400" mediaType="FLV"/>
	<mx:MediaDisplay x="523" y="62"  id="mp3player" contentPath="demo.mp3" />
	<mx:MediaController x="437" y="345"  associatedDisplay="mp3player" />
</mx:Canvas>

Listing 4: Demo4.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.macromedia.com/2003/mxml" height="600" width="800">

	<mx:Script>
	<![CDATA[
	
	var Medals = [{Country: "USA", Gold: 35, Silver:39, Bronze: 29},
	{Country: "China", Gold: 32, Silver:17 , Bronze: 14},
	{Country: "Russia", Gold: 27, Silver:27, Bronze: 38}]
	
	function displayGold(data, field, index, percentValue)
	{
		var temp= (" " + percentValue).substr(0,6);
		return data.Country + ": " + newline + "Total Gold: " + data.Gold + newline + temp + "%";
	}
	
	function displaySilver(data, field, index, percentValue)
	{
		var temp= (" " + percentValue).substr(0,6);
		return data.Country + ": " + newline + "Total Silver: " + data.Silver + newline + temp + "%";
	}
	
	]]>
	</mx:Script>
	
	<mx:ColumnChart id="column" marginLeft="5" height="57%" width="55%" marginRight="5" dataProvider="{Medals}"
	 showDataTips="true" x="359" y="345">
		<mx:horizontalAxis>
			<mx:CategoryAxis dataProvider="{Medals}" categoryField="Country"/>
		</mx:horizontalAxis>
		<mx:series>
			<mx:Array>
				<mx:ColumnSeries xField="Country" yField="Gold" name="Gold"/>
				<mx:ColumnSeries xField="Country" yField="Silver" name="Silver"/>
				<mx:ColumnSeries xField="Country" yField="Bronze" name="Bronze"/>
			</mx:Array>
		</mx:series>
	</mx:ColumnChart>
	
	<mx:Legend dataProvider="column" x="255" y="458"/>

	<mx:BarChart id="bar" marginLeft="5" height="51%" width="45%" marginRight="5" dataProvider="{Medals}"
	 showDataTips="true" x="382" y="26">
		<mx:verticalAxis>
			<mx:CategoryAxis dataProvider="{Medals}" categoryField="Country"/>
		</mx:verticalAxis>
		<mx:series>
			<mx:Array>
				<mx:BarSeries yField="Country" xField="Gold" name="Gold"/>
				<mx:BarSeries yField="Country" xField="Silver" name="Silver"/>
				<mx:BarSeries yField="Country" xField="Bronze" name="Bronze"/>
			</mx:Array>
		</mx:series>
	</mx:BarChart>
			
			
	<mx:PieChart id="chart" marginLeft="5" dataProvider="{Medals}" height="208" width="309" marginRight="5"
	 showDataTips="true" x="73" y="70">
		<mx:series>
			<mx:Array>
				<mx:PieSeries labelPosition="callout" field="Gold" labelFunction="displayGold">
					<mx:calloutStroke>
						<mx:Stroke weight="0" color="0x888888" alpha="100"/>
					</mx:calloutStroke>
					<mx:radialStroke>
						<mx:Stroke weight="0" color="#FFFFFF" alpha="20"/>
					</mx:radialStroke>
					<mx:stroke>
						<mx:Stroke color="0" alpha="20" weight="2"/>
					</mx:stroke>
				</mx:PieSeries>
			</mx:Array>
		</mx:series>
	</mx:PieChart>
	
	<mx:PieChart id="chart2" marginLeft="5" dataProvider="{Medals}" height="195" width="257" marginRight="5"
	 showDataTips="true" x="22" y="300">
		<mx:series>
			<mx:Array>
				<mx:PieSeries labelPosition="callout" field="Silver" labelFunction="displaySilver">
					<mx:calloutStroke>
						<mx:Stroke weight="0" color="0x888888" alpha="100"/>
					</mx:calloutStroke>
					<mx:radialStroke>
						<mx:Stroke weight="0" color="#FFFFFF" alpha="20"/>
					</mx:radialStroke>
					<mx:stroke>
						<mx:Stroke color="0" alpha="20" weight="2"/>
					</mx:stroke>
				</mx:PieSeries>
			</mx:Array>
		</mx:series>
	</mx:PieChart>

</mx:Canvas>


Listing 5: Global.css

Form
{
	theme-color: 			#ff6600;
	roll-over-color: 			#D0E0EF;
	text-roll-over-color: 		#003366;
	selection-color: 			#D0E0EF;
	text-selected-color: 		#003366;
	color: 				#003366;
	disabled-color: 			#666666;
	font-family: 			Arial,Helvetica,sans-serif;
	font-size: 			12;
	font-weight: 			normal;
	indicator-gap: 			8;
	background-color:		#F4F4FF;
	border-color:			#000000;
}

TitleWindow
{
	header-height: 			30;
	panel-border-style: 		roundCorners;
	shadow-direction: 		right;
	vertical-gap:			-1;
	margin-top:			0;
	margin-left:			5;	
	margin-right:			5;
	margin-bottom:			0;
	header-colors: 			#ff6600,#ffcc00;
	background-color:		#F4F4FF;
	modal-transparency:		75;

}

Tab 
{
	tab-height: 			26;
	fill-colors:			#36586F,#5483A2;
	selected-fill-colors:		#ff6600,#ffcc00;
	corner-radius:			8;
	color:				#FFFFFF;
	text-roll-over-color:		#000000;
}

Panel 
{
	header-height: 			20;
	panel-border-style: 		roundCorners;
	shadow-direction: 		right;
	verticalGap:			-1;
	margin-top:			0;
	margin-left:			5;	
	margin-right:			5;
	margin-bottom:			0;
	background-color:		#F4F4FF;
}

DataGrid 
{
	font-weight: 			normal;
	header-colors: 			#FEFEFE,#E0E0E0;
	color:				#000000;
}

Tree 
{
	font-weight: 			normal;
	header-colors: 			#EAF1F5,#EAF1F5;
}

HDividedBox 
{
	background-color: 		#EEEEEE;
}

Button 
{
	fill-colors: 			#ff9966,#ffff66;
	border-thickness: 		1;
    	margin-bottom: 			0;
    	margin-left: 			0;
    	margin-right: 			0;
    	margin-top: 			0;
}

ComboBox 
{
	font-weight: 			normal;
	fill-colors: 			#FEFEFE,#E0E0E0;
	corner-radius: 			4;
	background-color:		#FEFEFE;
}

CalendarLayout 
{
	font-weight: 			normal;
	header-colors: 			#D0E0EF,#D0E0EF;
	today-color: 			#003366;
	roll-over-color:			#FF0000;
	selection-color:			#00FF00;
}

TextInput 
{
	font-weight: 			normal;
	border-style: 			solid;
	font-size:			12;
	corner-radius:			4;
}

TextArea 
{
	font-weight: 			normal;
	border-style: 			solid;
	border-color:			#666666;
	font-size:			12;
	corner-radius:			4;
}

RadioButton 
{
	font-weight: 			normal;
	fill-colors:			#ff6600,#ffcc00;
}

CheckBox 
{
	font-weight: 			normal;
	fill-colors:			#ff6600,#ffcc00;
}

FormItemLabel
{
	color:				#666666;
	font-weight:			bold;
	font-size:			10;
}

ScrollBar
{
	trackColors:			#d0e0ef,#eaf1f5;
}

HRule
{
	color:				#000000;
}

HBox
{
}

VBox
{
	margin-left:			5;	
	margin-right:			5;
}

Accordion
{
	fill-colors:			#36586F,#5483A2;
	selected-fill-colors:		#ff6600,#ffcc00;
	theme-color:			#0066cc;
	color:				#ffffff;
	background-color:		#F4F4FF;
}

Accordion Tab, Form, VBox, HBox
{
	color:				#003366;
}

ErrorTip
{
	border-color:			#FF0000;
	color:				#FFFFFF;
}

ToolTip
{
    	fontSize: 			10;
    	shadowColor: 			#000000;
    	backgroundColor: 		#FFFF88;
    	borderColor: 			#666666;
    	paddingBottom: 			2;
  	 paddingLeft: 			4;
   	 paddingRight: 			4;
 paddingTop: 			2;
 	 color: 				#000000;
  	 corner-radius:			10;
}

Link
{
	color:				#0000FF;
	text-decoration:			underline;
}

.infoText
{
	color:				#339900;
	font-weight:			bold;
}

.errorText
{
	color:				#FF0000;
	font-weight:			bold;
}

.applicationTitleText
{
	color:				#CC3300;
	font-weight:			bold;
	font-size:			28px;
}

.sectionHeader
{
	font-weight:			bold;
	font-size:			16px;
}

.TitleWindowHeaderText
{
	color:				#FFFFFF;
	font-size:			14px;
	font-weight:			bold;
}


Listing 6: Demo5.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Form xmlns:mx="http://www.macromedia.com/2003/mxml" height="400" width="600" load="initData()" fontSize="30">

	<mx:Script>
	<![CDATA[
	
		var userObj:Object = new Object;

		private function initData() : Void
		{
			userObj.name 	= 'Fred';
			userObj.phone 	= '1234567890';
			userObj.email	= 'fred@fred.com';
		}
	
		private function editUser() : Void
		{
			mx.managers.PopUpManager.createPopUp(this, UserEditForm, true,{parentref:this,userobject:userObj});
		}
		
		public function setUserData(obj:Object) : Void
		{
			userObj = obj;
		}
	]]>
	</mx:Script>

	<mx:FormItem label="Name">
		<mx:Label text="{userObj.name}" width="300" />
	</mx:FormItem>
	<mx:FormItem label="Email">
		<mx:Label text="{userObj.email}" width="300" />
	</mx:FormItem>
	<mx:FormItem label="Telephone">
		<mx:Label text="{userObj.phone}" width="300" />
	</mx:FormItem>
	<mx:FormItem >
		<mx:Button label="Edit" click="editUser()"/>
	</mx:FormItem>
</mx:Form>


Listing 7: userEditForm.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.macromedia.com/2003/mxml" width="400" height="200" modalTransparency="75"
 title="Edit user" closeButton="true" click="closePopup()" load="this.centerPopUp()">

	<mx:Script>
	<![CDATA[
	
		var parentref:Object;
		var userobject:Object;
	
		private function saveUser() : Void
		{
			// Validate the form inpout before saving
			if (mx.validators.Validator.isStructureValid(this,'userdata'))
			{
				// Disable to whole panel so the user cannot interact any further whilst we are saving
				this.enabled = false;
				parentref.setUserData(userdata.user);
				closePopup();
			}
			else
				// There is an error in the form so we will show a warning message
				// Note: You cannot use the function userOnError() to show the erro rmessages since this seems to be
				// a ColdFusion genertaed function that is not available inside out Flex application.
				errorText.visible = true;
		}
	
		private function closePopup() : Void
		{
			// if panel is disabled, it means we are currently saving, so ignore the close window request.
			// We need to do this because the close button is always active, even if the entire panel is disbaled
			if (this.enabled) this.deletePopUp();
		}
	]]>
	</mx:Script>

	<mx:Model id="userdata">
		<user>
			<name>{namefield.text}</name>
			<phone>{phonefield.text}</phone>
			<email>{emailfield.text}</email>
		</user>
	</mx:Model>

	<mx:StringValidator 		field="userdata.user.name"/>
	<mx:PhoneNumberValidator 	field="userdata.user.phone"/>
	<mx:EmailValidator 			field="userdata.user.email"/>
	
	<mx:Form>
		<mx:FormItem label="Name" required="true">
			<mx:TextInput id="namefield" text="{userobject.name}" />
		</mx:FormItem>
		<mx:FormItem label="Email" required="true">
			<mx:TextInput id="emailfield" text="{userobject.email}"/>
		</mx:FormItem>
		<mx:FormItem label="Telephone" required="true">
			<mx:TextInput id="phonefield" text="{userobject.phone}"/>
		</mx:FormItem>
	</mx:Form>
	
    <mx:Label id="errorText" text="There are errors in the form. Please correct before saving."
	 styleName="errorText" visible="false" />
	
	<mx:HBox width="100%" horizontalAlign="right">
		<mx:Button label="save" click="saveUser()"/>
		<mx:Button label="cancel" click="closePopup()"/>
	</mx:HBox>
	
</mx:TitleWindow>


Listing 8: userEditForm.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.macromedia.com/2003/mxml" width="400" height="200" modalTransparency="75"
 title="Edit user" closeButton="true" click="closePopup()" load="this.centerPopUp()">

	<mx:Script>
	<![CDATA[
	
		var parentref:Object;
		var userobject:Object;
	
		private function saveUser() : Void
		{
			// We need to keep a reference to our window object since when we get the response to our remoting call
			// that context will have been lost.
			var windowObject = this;
			
			// Validate the form inpout before saving
			if (mx.validators.Validator.isStructureValid(this,'userdata'))
			{
				// Hide our error text (if shown) since form is now ok
				errorText.visible = false;
				
				var connection:mx.remoting.Connection =
				 mx.remoting.NetServices.createGatewayConnection('http://localhost/flashservices/gateway');
				var myService:mx.remoting.NetServiceProxy;
				
				var responseHandler = {};
				responseHandler.onResult = function(results:Object):Void 
				{	
					// Remove BUSY cursor
					mx.managers.CursorManager.removeAllCursors();
					
					// Send our new data back to the server
					windowObject.parentref.setUserData(windowObject.userdata.user);
						
					// If we just close the popup, then a Flex 1.0 bug leaves the shadow behind.
					// windowObject.deletePopUp();
					
					// Instead we will remove the dropShadow prior to closing the window.
					windowObject.setStyle("dropShadow",false);

					// Because of the way flash does its redraws, unless you are very lucky, the window will be closed
					 before
					// the drop shadow is removed and it will remain just as before. To avoid this, we force flash to
					 do an
					// immediate redraw of the window object
					windowObject.redraw(true);
					
					// Now it is safe to close the window
					windowObject.deletePopUp();
				}
				
				// Disable to whole panel so the user cannot interactany further whilst we are saving
				this.enabled = false;
				
				mx.managers.CursorManager.setBusyCursor();
				myService = connection.getService('cfdj.demo', responseHandler );
				myService.saveUser(userdata);
			}
			else
				// There is an error in the form so we will show a warning message
				// Note: You cannot use the function userOnError() to show the erro rmessages since this seems to be
				// a ColdFusion genertaed function that is not available inside out Flex application.
				errorText.visible = true;
		}
	
		private function closePopup() : Void
		{
			// if panel is disabled, it means we are currently saving, so ignore the close window request.
			// We need to do this because the close button is always active, even if the entire panel is disbaled
			if (this.enabled) this.deletePopUp();
		}
	]]>
	</mx:Script>

	<mx:Model id="userdata">
		<user>
			<name>{namefield.text}</name>
			<phone>{phonefield.text}</phone>
			<email>{emailfield.text}</email>
		</user>
	</mx:Model>

	<mx:StringValidator 		field="userdata.user.name"/>
	<mx:PhoneNumberValidator 	field="userdata.user.phone"/>
	<mx:EmailValidator 			field="userdata.user.email"/>
	
	<mx:Form>
		<mx:FormItem label="Name" required="true">
			<mx:TextInput id="namefield" text="{userobject.name}" />
		</mx:FormItem>
		<mx:FormItem label="Email" required="true">
			<mx:TextInput id="emailfield" text="{userobject.email}"/>
		</mx:FormItem>
		<mx:FormItem label="Telephone" required="true">
			<mx:TextInput id="phonefield" text="{userobject.phone}"/>
		</mx:FormItem>
	</mx:Form>
	
    <mx:Label id="errorText" text="There are errors in the form. Please correct before saving." styleName="errorText" visible="false" />
	
	<mx:HBox width="100%" horizontalAlign="right">
		<mx:Button label="save" click="saveUser()"/>
		<mx:Button label="cancel" click="closePopup()"/>
	</mx:HBox>
	
</mx:TitleWindow>


Listing 9: demo.cfc

<cfcomponent>
	<cffunction name="saveUser" access="remote" returntype="boolean">
		<cfargument name="user" type="struct" required="yes">
		<cfreturn true>
	</cffunction>
</cfcomponent>