Loading data from remote xml file in Flex

You can load the data from the remote xml file using the HTTPService in Flex. To read the data from the xml file do not forget to set the resultFormat property of the HTTPService as e4x.

Main.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
	verticalAlign="middle" backgroundColor="#FFFFFF">
	<mx:Script>
		<![CDATA[
			import com.riacoder.examples.vo.EmployeeVO;
			import mx.collections.ArrayCollection;
			import mx.rpc.events.ResultEvent;
			import mx.rpc.events.FaultEvent;
			import mx.controls.Alert;

			[Bindable]
			private var empCollection:ArrayCollection;

			public var xmlURL:String = "http://localhost:8080/flex_xml/employees.xml";

			private function loadXml():void
			{
				httpService.url = xmlURL;
				httpService.send();
			}

			private function onFault(event:FaultEvent):void
			{
				var title:String = event.type + " ("+ event.fault.faultCode +")";
				var text:String  = event.fault.faultString;
				Alert.show(text, title);
			}

			private function onResult(event:ResultEvent):void
			{
				var xmlList:XMLList = XML(event.result).children();
				empCollection = new ArrayCollection();
				for each(var obj:Object in xmlList)
				{
					var empVO:EmployeeVO = new EmployeeVO();
					empVO.fName  = obj.fname;
					empVO.lName  = obj.lname;
					empVO.uName  = obj.uname;
					empVO.gender = obj.gender;
					empVO.age    = obj.age;
					empVO.email  = obj.email;
					empVO.image  = obj.image;
					empCollection.addItem(empVO);
				}

			}
		]]>
	</mx:Script>

	<mx:HTTPService id="httpService"
		showBusyCursor="true"
		resultFormat="e4x"
		fault="onFault(event)"
		result="onResult(event)" />

	<mx:ApplicationControlBar dock="true">
		<mx:Button label="Load Employees" click="loadXml()" />
	</mx:ApplicationControlBar>

	<mx:TileList id="employeeList" dataProvider="{empCollection}"
		itemRenderer="com.riacoder.examples.components.EmployeeRenderer" columnCount="2" rowCount="3"
		columnWidth="350" rowHeight="160" color="#323232"/>

</mx:Application>

I have created a ItemRenderer to display the employee details for this example. I have named the file as EmployeeRenderer.mxml. See the below code.

EmployeeRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="350" height="180">
	<mx:Image source="{data.image}" width="100" height="100" verticalAlign="top" />
	<mx:VBox>
			<mx:Label text="First Name: {data.fName}" />
			<mx:Label text="Last Name: {data.lName}" />
			<mx:Label text="User Name: {data.uName}" />
			<mx:Label text="Gender: {data.gender}" />
			<mx:Label text="Age: {data.age}" />
			<mx:Label text="E-Mail Id: {data.email}" />
	</mx:VBox>
</mx:HBox>

I have created the ValueObject class named as EmployeeVO to keep a employee data.

EmployeeVO.as

package com.riacoder.examples.vo
{
	[Bindable]
	public class EmployeeVO
	{
		public var fName:String;
		public var lName:String;
		public var uName:String;
		public var gender:String;
		public var age:String;
		public var email:String;
		public var image:String;
		public function EmployeeVO()
		{
		}
	}
}

Content of the xml which I have used in this example

employees.xml

<?xml version="1.0" encoding="utf-8"?>
<employees>
	<employee>
		<fname>Senthil Kumar</fname>
		<lname>Ranganathan</lname>
		<uname>senthil</uname>
		<gender>Male</gender>
		<age>26</age>
		<email>senthil.friends@gmail.com</email>
		<image>http://localhost:8080/flex_xml/images/4.png</image>
	</employee>
	<employee>
		<fname>Ponbharathi</fname>
		<lname>Bakthaduruvan</lname>
		<uname>pon</uname>
		<gender>Male</gender>
		<age>25</age>
		<email>kbponbharathi@gmail.com</email>
		<image>http://localhost:8080/flex_xml/images/5.png</image>
	</employee>
	<employee>
		<fname>Vinoth</fname>
		<lname>Kumar</lname>
		<uname>vinoth</uname>
		<gender>Male</gender>
		<age>27</age>
		<email>vino.mib@gmail.com</email>
		<image>http://localhost:8080/flex_xml/images/3.png</image>
	</employee>
	<employee>
		<fname>Anto</fname>
		<lname>Robin</lname>
		<uname>anto</uname>
		<gender>Male</gender>
		<age>29</age>
		<email>anto@xyz.com</email>
		<image>http://localhost:8080/flex_xml/images/5.png</image>
	</employee>
</employees>

ProgressBar for file uploading in Flex

We can use the ProgessBar to monitor the File upload process in Flex.
See the given example code and use the given Uploader.as

FileUploadExample.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	backgroundColor="#FFFFFF">

	<mx:Script>
		<![CDATA[
			import com.riacoder.examples.Uploader;

			private var uploader:Uploader = new Uploader();

			private function onUploadClick(event:MouseEvent):void
			{
				uploader.browseAndUpload();
			}
		]]>
	</mx:Script>

	<mx:Canvas width="200" height="200" horizontalCenter="0" verticalCenter="0" backgroundColor="#525252">
		<mx:Button label="Select a file and upload" horizontalCenter="0" verticalCenter="0" click="onUploadClick(event);"/>
	</mx:Canvas>

</mx:Application>

Use the following code to upload the file and for displaying the ProgressBar.

Uploader.as

package com.riacoder.examples
{

	import flash.events.Event;
	import flash.events.IOErrorEvent;
	import flash.events.ProgressEvent;
	import flash.net.FileReference;
	import flash.net.URLRequest;
	import flash.net.URLRequestMethod;
	import flash.net.URLVariables;

	import mx.controls.Alert;
	import mx.controls.ProgressBar;
	import mx.core.Application;
	import mx.core.UIComponent;
	import mx.managers.PopUpManager;

	public class Uploader
	{
		// FileReference instance, used to select the file.
		private var fileReference:FileReference;	

		// ProgressBar instance, used to display the upload status.
		private var progressBar:ProgressBar;

		// String instance, used to hold the url of the upload location.
		public static const FILE_UPLOAD_URL:String = "http://localhost/test/FileUpload.php";

		// Constructor
		public function Uploader()
		{
			// Initialize the fileReference.
			fileReference = new FileReference();

			// Register the event listeners.
                       fileReference.addEventListener(Event.SELECT, onSelect);
                       fileReference.addEventListener(ProgressEvent.PROGRESS, onProgress);
                       fileReference.addEventListener(Event.COMPLETE, onComplete);
                       fileReference.addEventListener(IOErrorEvent.IO_ERROR, onIOError);

                      // Initialize the progressBar.
                     progressBar = new ProgressBar();
		}

		public function browseAndUpload():void
		{
			// open the file browser window.
			fileReference.browse();
		}

		private function onSelect(evt:Event):void
		{
	             try
	             {
	        	// used to upload the file to the specified location.
	        	var uploadURL:URLRequest = new URLRequest(FILE_UPLOAD_URL);
	        	// used to send the datas while uploading.
		        var uploadData:URLVariables = new URLVariables();
		        // specifiying the fileSize. So from server side you can get the fileSize.
			uploadData.fileSize = fileReference.size;
			// set the HTTP method.
			uploadURL.method = URLRequestMethod.POST;

			// set the progressBar mode to manual. So, you have to set the progress manually.
			progressBar.mode = "manual";
			// While starting the upload process ProgessBar's lable will be displayed as "Uploading File"
			progressBar.label = "Uploading file.";
			// Show the progressbar as popup.
			PopUpManager.addPopUp(progressBar, Application.application as UIComponent, true);
			PopUpManager.centerPopUp(progressBar);

			uploadURL.data = uploadData;
			// start to upload the file.
	               fileReference.upload(uploadURL);
	        }
	        catch (error:Error)
	        {
	        	Alert.show("Error "+error);
	        }
	    }

	    private function onIOError(event:IOErrorEvent):void
	    {
	    	PopUpManager.removePopUp(progressBar);
	    	Alert.show("Uploader::IOError-Unable to upload the file.  "+event.text);
	    }

	    private function onProgress(evt:ProgressEvent):void
	    {
	    	// Calculating the uploaded percentage.
	    	var numPerc:Number = Math.round((Number(evt.bytesLoaded) / Number(evt.bytesTotal)) * 100);
	    	// set the label of progessbar. So the user can see the uploaded percentage.
	    	progressBar.label = "Uploading file "+numPerc+"% Completed.";
	    	// set the progress value of the progressBar.
	    	progressBar.setProgress(numPerc, 100);
	    }

	    private function onComplete(evt:Event):void
	    {
	    	PopUpManager.removePopUp(progressBar);
	    }

	}
}

Image Loader in Flex

Loading Image using Loader in Flex

You can load your image source using the Loader class in Flex. You should create a URLRequest with the image’s location and pass it to the Loader.load() method. For Example, imageLoader.load(new URLRequest(“image location”));

See the below example

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	creationComplete="onCreationComplete(event);">

	<mx:Script>
		<![CDATA[

			import mx.events.FlexEvent;

			// Loader instance to load the image.
			private var imageLoader:Loader;

			private function onCreationComplete(event:FlexEvent):void
			{
				// create the loader.
				imageLoader = new Loader();
				// register the complete event of imageLoader's contentLoaderInfo
				imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadComplete);
				// load the image.
				loadImage("http://localhost:8080/test/images/1.jpg");
			}

			private function onLoadComplete(event:Event):void
			{
				// set the source of the image.
				image.source = event.currentTarget.content;
			}

			private function loadImage(url:String):void
			{
				// load the content from the given url.
				imageLoader.load(new URLRequest(url));

			}

		]]>
	</mx:Script>

	<mx:Image id="image" verticalCenter="0" horizontalCenter="0"/>

</mx:Application>