Switch To Flex

Switching Paradigms: From Regular Web to Flex Joshua Partogi September 13th, 2008

About Me 2,5 years professional experience in Enterprise Java Focusing in web technology All of them is HTML based Currently doing freelance Flex project

Objectives One of the main challenge in Flex is getting in the way of thinking of how things work in Flex Especially when you've been working with HTML for a long time Everything is asynchronous! This presentation is intended to get you inline with Flex

Application <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml " layout=" vertical " xmlns:local=" * "> </mx:Application>

Layout // main.mxml <mx:ViewStack id=" viewStack "> <local:Dashboard/> <local:UserForm/> </mx:ViewStack> // UserForm.mxml <mx:Canvas> </mx:Canvas>

Layout (2) <mx:states> <mx:State name="salesReport"> ... </mx:State> <mx:State name=”productReport”> ... </mx:State> </mx:states>

Navigation <mx:LinkButton label=" Home " click=" viewStack.selectedIndex = 0"/> <mx:LinkButton label=" Product Report " click=" this .currentState = 'productReport "/>

Binding Java Objects package { import mx.collections.ArrayCollection; [ Bindable ] [ RemoteClass (alias="model.Product")] public class Product { public var id: Number; public var name: String; } }

Sending Data <mx:Form id="productForm"> <mx:FormItem> <mx:TextInput id="name"/> </mx:FormItem> <mx:Button label="Add" click="add()"/> </mx:Form> public function add():void{ // do something here }

Sending Data (2) <mx:WebService id="productRequest" wsdl=" http://localhost:8080/ws/product.wsdl "> <mx:operation name=" search " resultFormat=" object " /> </mx:WebService>

Sending Data (3) <mx:HTTPService id=" save Request " url=" /search.do " result =" onSave (event)" useProxy=" false " method=" POST "> <mx:request xmlns=""> <name>{name.text}</name> </mx:request> </mx:HTTPService> private function add(): void { saveRequest.send(); }

Sending Data (4) <mx:RemoteObject id=" productService " destination=" productService " endpoint="http://localhost:8080/messagebroker/amf"> <mx:method name=" save " /> </mx:RemoteObject> public function add():void{ var product:Product = new Product(); product.name = name.text; productService.save(product); }

Receiving Data // Data is received asynchronously <mx:RemoteObject id=" productService " destination=" productService " endpoint=" http://localhost:8080/messagebroker/amf "> <mx:method name="find" result=" onSearch(event) " fault="onFault(event)"/> </mx:RemoteObject> private function onSearch(event:ResultEvent): void { products = event.result as ArrayCollection; }

Receiving Data (2) <mx:HTTPService id=" search Request " url=" /search.do " result =" onSearch (event)" useProxy=" false " method=" POST "> <mx:request xmlns=""> <name>{name.text}</name> </mx:request> </mx:HTTPService> private function onSearch(event:ResultEvent): void { products = event.result as ArrayCollection; }

Data Table [ Bindable ] public var products:ArrayCollection; <mx:DataGrid dataProvider=" {products} "> <mx:columns> <mx:DataGridColumn dataField=" name "/> </mx:columns> </mx:DataGrid>

Localization // Localization is compiled, not retrieved // during runtime <mx:LinkButton label="{resourceManager.getString( ' Admin ' , ' home ' )}" /> <mx:LinkButton label=”@Resource(key=' home ', bundle=' Admin ')”/> #Admin.properties home = Home

Validation // Validation is done during event, not after // form submission <mx:StringValidator id=" usernameV" source=" {username} " required=" true " property=" text " /> <mx:TextInput id="username" change=" validateForm(event) " /> private function validateForm(event:Event): void { // validation logic }

Thank You! [email_address] http://joshuajava.wordpress.com

Switch To Flex

More Related Content

What's hot

Viewers also liked

Similar to Switch To Flex

Recently uploaded

Switch To Flex