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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (19)

Andere mochten auch

Andere mochten auch (6)

Ähnlich wie Test

Ähnlich wie Test (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Test