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

SpringBoot : Performance War

Reactive Systems are designed to address challenges posed by modern software systems - the challenges related to large number of users and high throughput. Reactive systems are expected to be highly responsive, resilient, elastic and message driven. In this article we will: Build a set of fully non-blocking REST API using SpringBoot 2.0, WebFlux and Reactive Redis. Performance test the above Reactive APIs against the traditional non-reactive APIs. The code used in this example can be downloaded from GitHub Step 1: Create a skeleton Reactive WebFlux SpringBoot project Create a SpringBoot maven project using - https://start.spring.io/ Add the following dependencies: spring-boot-starter-web spring-boot-starter-data-redis spring-webflux spring-boot-starter-data-redis-reactive Refer to the dependencies in pom.xml Step 2: Create Domain Objects The demo project uses the domain objects Customer and Account . A customer can have multiple accounts.
Post a Comment
Read more

Java Web Framework Comparison

Wikipedia has listed over 85 web applications frame works with Java based on the top – 28. Below table lists of most widely used web Application Frameworks products available today. Product what type of project is best fit? Struts 2 The new version Struts 2.0 is a combination of the Sturts action framework and Webwork (a total redesign). Struts2 may a good fit for an enterprise application when there is existing Struts resource and projects of medium complexity. Spring MVC Good choice for medium sized project. Convention-based defaults for controllers, model object names, and view resolves. Spring MVC addresses request-driven processing at the HTTP level. It does not aim to provide a component model like JSF. Stripes
Post a Comment
Read more