Test

Building and Architecting Flex Applications ,[object Object],[object Object]

About myself ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Why am I doing this session? ,[object Object],[object Object],[object Object],[object Object]

What we will cover ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Design Decisions ,[object Object],[object Object],[object Object],[object Object],[object Object]

Design Decisions ,[object Object],[object Object],[object Object]

Cube ,[object Object],[object Object],[object Object]

AIR Specific Capabilities ,[object Object],[object Object],[object Object],[object Object],[object Object]

Architecture Overview – No cool name for it yet ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Simple Architecture ,[object Object]

Overview MODEL CONTROLLER VIEW M: Databinding of data objects M: events, databinding, responders C: Call methods and properties C: Set dataprovider Call methods/properties Change states Change views V: Dispatch events

Model ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Controller ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Views ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Controls ,[object Object],[object Object],[object Object]

What Are Application Components?

Cheat Sheet ,[object Object],[object Object],[object Object],[object Object],[object Object]

Setting Up The Component ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],package com.rewindlife.views { import mx.containers.Canvas; public class ContactDetails extends Canvas { } } <?xml version="1.0" encoding="utf-8"?> <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml "> </mx:Canvas>

Think Of MXML Components Like Full Applications

Adding Sub-Components & Handling Layout <?xml version="1.0" encoding="utf-8"?> <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml " width="100%" backgroundColor="#f8f8f8" height="100%"> <mx:Label id="contactName" x="10" y="10" text="John Doe"/> <mx:Label x="62" y="42" text="phone"/> <mx:Label x="53" y="94" text="address"/> <mx:Label x="66" y="68" text="email"/> <mx:TextArea x="110" y="93" editable="false" enabled="true" width="160" height="63" id="address"/> <mx:TextInput x="110" y="40" editable="false" id="phone"/> <mx:TextInput x="110" y="66" editable="false" id="email"/> <mx:Button id="edit" bottom="10" left="10" label="Edit" width="41" height="20" toggle="true" /> </mx:Canvas>

Adding The Component <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:pf2="com.oreilly.programmingflex.contactmanager.views.*"> <pf2:ContactDetails/> </mx:Application>

Think of Components as Black Boxes

Adding States ,[object Object],[object Object],<mx:states> <mx:State name="{VIEW_MODE}"/> <mx:State name="{EDIT_MODE}" basedOn="{VIEW_MODE}"> <mx:SetProperty target="{address}" name="editable" value="true"/> <mx:SetProperty target="{email}" name="editable" value="true"/> <mx:SetProperty target="{phone}" name="editable" value="true"/> </mx:State> </mx:states>

Adding Methods & Properties ,[object Object],[object Object],public static const VIEW_STATE:String = "view" ; public static const EDIT_STATE:String = "edit" ; [ Bindable ] public function get mode():String { return this .currentState; } [Inspectable(enumeration= "{ContactDetails.VIEW_MODE},{ContactDetails.EDIT_STATE}" )] public function set mode(value:String): void { this .currentState = value; }

Adding Events ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Creating a Custom Event Class ,[object Object],[object Object],package com.oreilly.programmingflex.contactmanager.events { import flash.events.Event; public class EditChangeEvent extends Event { public static const EDIT_CHANGE:String = "editChange"; public var edit:Boolean; public function EditChangeEvent(edit:Boolean=false) { super(EDIT_CHANGE); this.edit = edit; } override public function clone():Event { return new EditChangeEvent(this.edit); } } }

Adding Events ,[object Object],[object Object],[object Object],import com.oreilly.programmingflex.contactmanager.events.EditChangeEvent; private function clickHandler(e:MouseEvent:void { if(this.currentState == VIEW_MODE) { this.mode = EDIT_MODE; phone.setFocus(); var eventEditing:EditChangeEvent = new EditChangeEvent(true); dispatchEvent(eventEditing); } else if(this.currentState == EDIT_MODE) { this.mode = VIEW_MODE; var eventDoneEditing:EditChangeEvent = new EditChangeEvent(false); dispatchEvent(eventDoneEditing); } }

Adding the Event Metadata tag ,[object Object],[object Object],<mx:Metadata> [Event(name="editChange", type="com.oreilly.programmingflex.contactmanager.events.EditChangeEvent")] </mx:Metadata>

Things To Keep In Mind About Application Components ,[object Object],[object Object],[object Object]

Taskie ,[object Object],[object Object]

Thank You! ,[object Object],[object Object],[object Object],[object Object]

Test

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Destacado

Destacado (6)

Similar a Test

Similar a Test (20)

Último

Último (20)

Test