Skip to main content

Sample MXML Flex Application

The primary reason why I think Flex is awesome is it's easiness of use in creating great rich internet application. Secondly- platform in-dependency. I can code with out having to worry about the browsers. For back-end I have wide range of choice php, java, .NET ..c# etc. Also, there is wide range of resource over internet in case of any problem. Flash player is readily available almost in any machines around the world. Here is an end to end Flex application.


resource.mxml



<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

layout="absolute" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #337381]"

xmlns:custom="myComponents.*">



<mx:Style source="style/style.css"/>



<mx:Script>

<![CDATA[

import myComponents.activityEditor;

import mx.controls.Alert;

import mx.rpc.events.ResultEvent;

import mx.validators.Validator;

import mx.events.ValidationResultEvent;

import mx.controls.Alert;

public var careerCentreArray:Array= new Array("", "416", "417","418","419","420");

public var jobGradeArray:Array= new Array("", "1", "2","3","4","5", "5", "7", "8", "9");



]]>



</mx:Script>



<mx:Label x="642.5" y="45" text="Resources" width="203" fontSize="29"/>

<mx:TabNavigator x="192.5" y="106" width="1103" height="507">

<mx:Canvas label="Resource" width="100%" height="100%">

<mx:Label x="184" y="97" text="Resource" width="125" fontWeight="bold" height="18"/>

<mx:Label x="184" y="139" text="First Name :" width="84" fontWeight="bold" height="18"/>

<mx:Label x="184" y="187" text="Last Name :" fontWeight="bold" height="18"/>

<mx:Label x="183" y="236" text="Carrier Centre" fontWeight="bold" height="18"/>

<mx:Label x="183" y="286" text="Job Grade" fontWeight="bold" height="18"/>

<mx:TextInput x="404" y="95"/>

<mx:TextInput x="404" y="137" width="215"/>

<mx:TextInput x="404" y="185" width="215"/>

<mx:ComboBox id="careerCentre" dataProvider="{careerCentreArray}" x="404" y="234" ></mx:ComboBox>

<mx:ComboBox id="jobGrade" dataProvider="{jobGradeArray}" x="404" y="284" width="87"></mx:ComboBox>

<mx:Button x="845" y="354" label="Save"/>

</mx:Canvas>



<custom:GetMySkills />



<custom:GetMyAssignments />



</mx:TabNavigator>



</mx:Application>







MyAssignments.mxml





<?xml version="1.0" encoding="utf-8"?>

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" label="Assignments" width="100%" height="100%">



<mx:XML id="assignmentsXML" source="resource/assignments.xml" />

<mx:XMLListCollection id="assignments" source="{assignmentsXML.assignment}" />



<mx:Script>



<![CDATA[



import mx.events.DataGridEvent;

import mx.events.DataGridEventReason;

import mx.validators.NumberValidator;



public var nv:NumberValidator;





private function handleAddRow(event:MouseEvent):void

{



var newTmpAssignment:XML = <assignment>

<assignmentNum>new</assignmentNum>

<activityResoReqNum>new</activityResoReqNum>

<activityName>New</activityName>

<resourceNum>new</resourceNum>

<allocationPer>New</allocationPer>

<allocStartDt>new</allocStartDt>

<allocEndDt>new</allocEndDt>

<status>new</status>

</assignment>



assignmentDg.dataProvider.addItem(newTmpAssignment)

}



// Define the event listener.

public function getAssignementEditSupport(event:DataGridEvent):void {

// Check the reason for the event.

if (event.reason == DataGridEventReason.CANCELLED){

// Do not update cell.

return;

}



if(event.dataField == "activityName")

{

// Disable copying data back to the control.

event.preventDefault();



// get a new activity from the editor

assignmentDg.editedItemRenderer.data.activityName = activityEditor(DataGrid(event.target).itemEditorInstance).pickActivity.text;



// Close the cell editor.

assignmentDg.destroyItemEditor();



// Notify the list control to update its display.

assignmentDg.dataProvider.itemUpdated(event.itemRenderer.data);

}



if (event.dataField == "allocationPer")

{

nv = new NumberValidator();



nv.source = event.currentTarget.itemEditorInstance;

nv.property = "text";

nv.maxValue = 100;

nv.minValue = 0;



var val:* = nv.validate();



if(val.type == "invalid")

{

nv.invalidCharError = "Please enter a valid % allocation. Valid values are between 0 and 100";

nv.exceedsMaxError = "Please enter a valid % allocation. Valid values are between 0 and 100";

nv.lowerThanMinError = "Please enter a valid % allocation. Valid values are between 0 and 100";



// Prevent the user from removing focus,

// and leave the cell editor open.

event.preventDefault();

}

}

}



]]>



</mx:Script>



<mx:DataGrid editable="true" id="assignmentDg" x="66" y="89" width="958" height="291"

dataProvider="{assignments}"

itemEditEnd="getAssignementEditSupport(event);">

<mx:columns>

<mx:DataGridColumn headerText="Activity" itemEditor="myComponents.activityEditor" dataField="activityName"/>

<mx:DataGridColumn width="100" headerText="Allocation %" dataField="allocationPer"/>

<mx:DataGridColumn width="150" headerText="From" dataField="allocStartDt" itemEditor="myComponents.dateEditor" />

<mx:DataGridColumn width="150" headerText="To" dataField="allocEndDt" itemEditor="myComponents.dateEditor" />

</mx:columns>

</mx:DataGrid>



<mx:RadioButton x="451" y="55" label="next month" fontWeight="bold"/>

<mx:Label x="607" y="23" text="From Date" fontWeight="bold"/>

<mx:DateField id="dateField2" yearNavigationEnabled="true" disabledRanges="{[ {rangeEnd: new Date(2006, 5, 1)} ]}" x="681" y="21"/>



<mx:Label x="789" y="23" text="To Date" fontWeight="bold"/>

<mx:DateField id="dateField0" yearNavigationEnabled="true" disabledRanges="{[ {rangeEnd: new Date(2006, 5, 1)} ]}" x="860" y="21"/>



<mx:Button x="968" y="21" label="Filter"/>

<mx:Button x="66" y="423" click="handleAddRow(event)" label="New Assignment"/>

<mx:Button x="214" y="423" label="Delete"/>

<mx:Button x="309" y="423" label="Save"/>

<mx:Label x="607" y="57" text="Activity" width="64" fontWeight="bold"/>

<mx:ComboBox x="679" y="55" width="271"></mx:ComboBox>

<mx:RadioButton x="451" y="21" label="this month" fontWeight="bold"/>



<!-- Assignments view goes here. -->

</mx:Canvas>



GetMySkills.mxml



<?xml version="1.0" encoding="utf-8"?>

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" label="Skills" width="100%" height="100%"

creationComplete="send_data();">



<mx:HTTPService id="httpSkillService"

url="http://localhost:8080/SkillTrackEngine/searchSkills.do?action=getSkills"

resultFormat="e4x"

result="resultHandler(event)"

fault="faultHandler(event)"

useProxy="false"/>



<mx:Script>

<![CDATA[



import mx.events.DragEvent;

import mx.managers.DragManager;

import mx.events.DataGridEvent;

import mx.validators.NumberValidator;

import mx.effects.easing.*;

import mx.rpc.events.ResultEvent;

import mx.rpc.events.FaultEvent;



public var nv:NumberValidator;



[Bindable]

private var skillsList:XML;



private function faultHandler(event:FaultEvent):void

{

mx.controls.Alert.show(event.fault.message,"Error in getting result");

}



private function resultHandler(event:ResultEvent):void

{

skillsList=event.result as XML;

}



private function send_data():void

{

httpSkillService.send();

}



private function dragEnterHandler(event:DragEvent):void

{

// Get the drop target component from the event object.

var dropTarget:Image =event.currentTarget as Image;



// Accept the drop.

DragManager.acceptDragDrop(dropTarget);

}



// Called if the target accepts the dragged object and the user

// releases the mouse button while over the drop target.

private function dragDropHandler(event:DragEvent):void

{

trash.visible = false;

trash.visible = true; //causes effect to fire

}





//This gets fired when the itemEditor is about to be destroyed.

//As a result of hitting enter, tab, or mouse clicking away.



private function validateMySkills(event:DataGridEvent):void

{

var dataField:String = event.dataField;



nv = new NumberValidator();



if(event.dataField == 'skillLevel')

{

//specify the source - in this case the itemEditor instance

//We only care to do this if they started typing in something

nv.source = event.currentTarget.itemEditorInstance;

nv.property = "text";

nv.maxValue = 9;

nv.minValue = 1;



var val:* = nv.validate();



if(val.type == "invalid")

{

nv.invalidCharError = "Please enter a valid Skill Level. Valid values are between 1 and 9"

nv.exceedsMaxError = "Please enter a valid Skill Level. Valid values are between 1 and 9"

nv.lowerThanMinError = "Please enter a valid Skill Level. Valid values are between 1 and 9"

event.preventDefault();

}

}

}

]]>



</mx:Script>



<!-- Rotate effect -->

<mx:Rotate id="rotate"

angleFrom="-180"

angleTo="0"

easingFunction="Elastic.easeInOut"

duration="2000" />



<mx:DataGrid id="resCentreskills" styleName="DataGrid" allowMultipleSelection="true" dataProvider="{skillsList.skill}"

dragMoveEnabled="false" dragEnabled="true" dropEnabled="true" x="25" y="55" width="392" height="316">

<mx:columns>

<mx:DataGridColumn textAlign="left" headerText="Skills" dataField="name"/>

</mx:columns>

</mx:DataGrid>



<mx:DataGrid id="mySkills" allowMultipleSelection="true" dataProvider="[]" dragEnabled="true"

dragMoveEnabled="true" dropEnabled="true" editable="true" x="446" y="55" width="534" height="316"

itemEditEnd="validateMySkills(event)" >

<mx:columns>

<mx:DataGridColumn width="350" textAlign="left" editable="false" headerText="My Skills" dataField="name"/>

<mx:DataGridColumn textAlign="center" editable="true" headerText="Skill Level" dataField="skillLevel"/>

</mx:columns>

</mx:DataGrid>



<mx:Text x="25" y="20" text="Career Centre" fontWeight="bold"/>



<mx:Button x="875" y="395" label="Save My Skills"/>



<mx:Image id="trash" toolTip="Trash"

width="66" height="66"

source="images/trash.png" x="1005" y="305"

dragEnter="dragEnterHandler(event);"

dragDrop="dragDropHandler(event);" showEffect="{rotate}" />



</mx:Canvas>




skills.xml




<?xml version="1.0" encoding="UTF-8" standalone="no" ?>

<skills>

<skill><name>AJAX</name></skill>

<skill><name>AXIS</name></skill>

<skill><name>ActiveX</name></skill>

<skill><name>Apache Tomcat</name></skill>

<skill><name>Applet</name></skill>

<skill><name>BPEL</name></skill>

<skill><name>BPEL4WS</name></skill>

<skill><name>Clearspace</name></skill>

<skill><name>Client/Desktop Applications</name></skill>

<skill><name>Databases</name></skill>

<skill><name>EJB</name></skill>

<skill><name>Eclipse RCP</name></skill>

<skill><name>Emerging Technologies</name></skill>

<skill><name>FreeMarker</name></skill>

<skill><name>GRID</name></skill>

<skill><name>Geronimo</name></skill>

<skill><name>HTML/ XHTML</name></skill>

<skill><name>IBM DB2</name></skill>

<skill><name>IBM WebSphere</name></skill>

<skill><name>IBM WebSphere MQ</name></skill>

<skill><name>IBM WebSphere Portal</name></skill>

<skill><name>IBM Workplace</name></skill>

<skill><name>Informix</name></skill>

<skill><name>Integration and Collaboration Tools</name></skill>

<skill><name>Interbase</name></skill>

<skill><name>Java</name></skill>

<skill><name>J2ME</name></skill>

<skill><name>J2SE</name></skill>

<skill><name>J9 JVM</name></skill>

<skill><name>JAX-RPC</name></skill>

<skill><name>JBoss</name></skill>

<skill><name>JCA connectors</name></skill>

<skill><name>JDBC</name></skill>

<skill><name>JMS</name></skill>

<skill><name>JNDI</name></skill>

<skill><name>JSF</name></skill>

<skill><name>JSP</name></skill>

<skill><name>JTA/JTS</name></skill>

<skill><name>JavaMail</name></skill>

<skill><name>JavaScript</name></skill>

<skill><name>LAMP</name></skill>

<skill><name>MS SQL</name></skill>

<skill><name>Macromedia Flex</name></skill>

<skill><name>MySQL</name></skill>

<skill><name>ODC Framework (OBF)</name></skill>

<skill><name>Oracle</name></skill>

<skill><name>Oracle AS</name></skill>

<skill><name>Oracle Portal</name></skill>

<skill><name>Oracle TopLink</name></skill>

<skill><name>Oracle XML DB</name></skill>

<skill><name>PostgreSQL</name></skill>

<skill><name>Process Choreographer and BPEL</name></skill>

<skill><name>RFID</name></skill>

<skill><name>RMI/IIOP</name></skill>

<skill><name>Rich Internet Applications (RIAs)</name></skill>

<skill><name>SOAP</name></skill>

<skill><name>SWING</name></skill>

<skill><name>SWT</name></skill>

<skill><name>Servlets</name></skill>

<skill><name>Sybase</name></skill>

<skill><name>UDDI</name></skill>

<skill><name>WCT/RCP Technologies</name></skill>

<skill><name>WS-I</name></skill>

<skill><name>WS-Security</name></skill>

<skill><name>WSDL</name></skill>

<skill><name>Web Servers and Application Servers </name></skill>

<skill><name>Web Services</name></skill>

<skill><name>Web development</name></skill>

<skill><name>Web services</name></skill>

<skill><name>WebWork</name></skill>

<skill><name>XForms</name></skill>

<skill><name>XML RPC</name></skill>

</skills>





Assignments.xml



<?xml version="1.0" encoding="UTF-8"?>

<assignments>

<assignment>

<assignmentNum>100</assignmentNum>

<activityResoReqNum>500</activityResoReqNum>

<activityName>Mortgage Inquiry Application Development</activityName>

<resourceNum>1000</resourceNum>

<allocationPer>100</allocationPer>

<allocStartDt>01/01/2010</allocStartDt>

<allocEndDt>02/14/2010</allocEndDt>

<status>Complete</status>

</assignment>



<assignment>

<assignmentNum>101</assignmentNum>

<activityResoReqNum>501</activityResoReqNum>

<activityName>Mortgage Inquiry Application Development</activityName>

<resourceNum>1000</resourceNum>

<allocationPer>25</allocationPer>

<allocStartDt>02/15/2010</allocStartDt>

<allocEndDt>02/28/2010</allocEndDt>

<status>In progress</status>

</assignment>



<assignment>

<assignmentNum>103</assignmentNum>

<activityResoReqNum>503</activityResoReqNum>

<activityName>Skill TrackerApplication Development</activityName>

<resourceNum>1000</resourceNum>

<allocationPer>75</allocationPer>

<allocStartDt>2010/15/02</allocStartDt>

<allocEndDt>2010/28/02</allocEndDt>

<status>In progress</status>

</assignment>



<assignment>

<assignmentNum>104</assignmentNum>

<activityResoReqNum>504</activityResoReqNum>

<activityName>Skill TrackerApplication Support</activityName>

<resourceNum>1000</resourceNum>

<allocationPer>25</allocationPer>

<allocStartDt>03/01/2010</allocStartDt>

<allocEndDt>03/31/2010</allocEndDt>

<status>Not Started</status>

</assignment>



<assignment>

<assignmentNum>105</assignmentNum>

<activityResoReqNum>505</activityResoReqNum>

<activityName>Mortgage Inquiry Application Development</activityName>

<resourceNum>1000</resourceNum>

<allocationPer>10</allocationPer>

<allocStartDt>03/01/2010</allocStartDt>

<allocEndDt>03/31/2010</allocEndDt>

<status>Not Started</status>

</assignment>



</assignments>


ActivityEditor.mxml








<?xml version="1.0" encoding="utf-8"?>

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400">



<mx:ComboBox id="pickActivity" selectedItem="{data.activityName}">

<mx:dataProvider>

<mx:String>Mortgage Inquiry Application Development</mx:String>

<mx:String>Mortgage Inquiry Application Support</mx:String>

<mx:String>Skill TrackerApplication Development</mx:String>

<mx:String>Skill TrackerApplication Support</mx:String>

</mx:dataProvider>

</mx:ComboBox>



</mx:Canvas>

DateEditor.mxml



<mx:DateField xmlns:mx="http://www.adobe.com/2006/mxml"

implements="mx.controls.listClasses.IListItemRenderer" focusIn="open()">



<mx:Script>

<![CDATA[

override public function set data(value:Object):void{

if(listData){

var newDate:Date;

var value1 = value.allocEndDt.toString();



if (value1 is String){

newDate = new Date(Date.parse(value1 as String));

super.selectedDate=newDate;

}

else if (value1 is Date){

super.selectedDate=value1 as Date;

}

}

}

]]>

</mx:Script>

</mx:DateField>
Labels:

Comments

Post a Comment

Popular posts from this blog

SAAS Simple Maturity Model

There are two architectural models – commonly referred as SAAS Maturity models- that describe the transition of a service to what is called Multi-tenant efficient, highly scalable application. The SAAS Maturity model described by Microsoft has four distinct stages and is illustrated below. Another similar well-known model for SaaS-maturity is known as Forrester-model but adds another stage known as "Dynamic Business Apps-as-a-service". The three key Attributes of a SAAS Architecture: Configurability: Metadata used to configure the way the application behaves for customers Multi-tenant Efficiency : Maximizing the sharing of resources across tenants Scalability: Maximizing concurrency, resource efficiency SAAS Simple Maturity Model (Microsoft, 2006) SaaS Maturity Model (Forres...
Post a Comment
Read more

What is an ESB?

ESB is another of these amorphous terms that means different things to different people. An ESB can be thought of as the next generation of Service Oriented Architecture. Everybody knows web services today, and they have been used extensively to allow companies to break the tyranny of proprietary architectures. Now you can wire applications to service providers without having to know or worry about the provider's underlying operating system or programming language. It is an architectural concept/construct - not a technology, despite some vendors (and even gartner) telling you otherwise. You'll find many different types of technology can fulfil the conceptual role of an ESB, hence be careful not to associate it with a particular technology. Therefore designing the architecture is more important than choosing a 'product'. An Enterprise Service Bus (ESB) is the "backbone" of the service-oriented architectural model which allows different protocols to be communica...
Post a Comment
Read more

Web Service Framework comparison

Web Services is one of those concepts made all the more difficult to understand because of the myriad acronyms and abbreviations that are superfluous in any discussion. Covering all the concepts and standards associated with Web Services is a vast topic in itself. There are a large number of standards around Web Services. These standards define the norms of a Web Services implementation and ensure that a Web Services is accessed independently of the client platform. There are numerous frameworks available to select to build web service today. Below is the most widely used ones. Product Does it fit my need? Axis2.0 Apache Axis2 is a complete re-design and re-write of the widely used Apache Axis SOAP stack to build on the lessons learnt from Apache Axis. An advantage of Axis 2 is its support for the binding frameworks XMLBeans. Axis 2 with XMLBeans is widely ...
Post a Comment
Read more