การออกแบบ User Interface ใน Flex Apllication

ตัวอย่างนี้ จะเป็นการออกแบบ User Interface วางคอมโพเนนท์ต่าง ๆ ลงบนพื้นที่หน้าเว็บ ซึ่งจะนำมาใช้ในการเชื่อมต่อข้อมูลกับ PHP โดยใช้ร่วมกับฐานข้อมูล MySQL โดยลักษณะหน้าตาที่ออกแบบจะเป็นดังนี้

สำหรับโค้ด MXML ของ User Interface นี้ก็เป็นดังนี้

<?xml version="1.0" encoding="utf-8"?> 
<s:Application  minWidth="955" minHeight="600" xmlns:fx="http://ns.adobe.com/mxml/2009" 
                         xmlns:s="library://ns.adobe.com/flex/spark" 
                         xmlns:mx="library://ns.adobe.com/flex/mx">
	<s:Label x="50" y="50" color="maroon" fontSize="20" fontWeight="bold" text="XYZ Corporation Directory"/> 
	<s:Button id="empBtn" x="50" y="100" label="Employees"/> 
	<s:Button id="deptBtn" x="140" y="100" label="Departments"/> 
	<s:DataGrid id="empDg" x="50" y="130" requestedRowCount="4">
		<s:columns> 
			<s:ArrayList> 
				<s:GridColumn dataField="dataField1" headerText="Column 1">
				</s:GridColumn> 
				<s:GridColumn dataField="dataField2" headerText="Column 2">
				</s:GridColumn> 
				<s:GridColumn dataField="dataField3" headerText="Column 3">
				</s:GridColumn>
			</s:ArrayList> 
		</s:columns> 
		<s:typicalItem> 
			<fx:Object dataField1="Sample Data" dataField2="Sample Data" dataField3="Sample Data">
			</fx:Object> 
		</s:typicalItem> 
		<s:ArrayList> 
			<fx:Object dataField1="data1" dataField2="data1" dataField3="data1">
			</fx:Object> 
			<fx:Object dataField1="data2" dataField2="data2" dataField3="data2">
			</fx:Object> 
			<fx:Object dataField1="data3" dataField2="data3" dataField3="data3">
			</fx:Object> 
			<fx:Object dataField1="data4" dataField2="data4" dataField3="data4">
			</fx:Object> 
		</s:ArrayList>
	</s:DataGrid>
</s:Application>

* อ้างอิงจาก Tutorial ของ Adobe.com