Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Switch To Flex

2,965 views

Published on

Published in: Technology, Economy & Finance
  • Be the first to comment

Switch To Flex

  1. 1. Switching Paradigms: From Regular Web to Flex Joshua Partogi September 13th, 2008
  2. 2. About Me <ul><li>2,5 years professional experience in Enterprise Java </li></ul><ul><li>Focusing in web technology </li></ul><ul><li>All of them is HTML based </li></ul><ul><li>Currently doing freelance Flex project </li></ul>
  3. 3. Objectives <ul><li>One of the main challenge in Flex is getting in the way of thinking of how things work in Flex </li></ul><ul><li>Especially when you've been working with HTML for a long time </li></ul><ul><li>Everything is asynchronous! </li></ul><ul><li>This presentation is intended to get you inline with Flex </li></ul>
  4. 4. Application <ul><li><mx:Application xmlns:mx=&quot; http://www.adobe.com/2006/mxml &quot; layout=&quot; vertical &quot; xmlns:local=&quot; * &quot;> </li></ul><ul><li></mx:Application> </li></ul>
  5. 5. Layout <ul><li>// main.mxml </li></ul><ul><li><mx:ViewStack id=&quot; viewStack &quot;> </li></ul><ul><ul><ul><li><local:Dashboard/> </li></ul></ul></ul><ul><ul><ul><li><local:UserForm/> </li></ul></ul></ul><ul><li></mx:ViewStack> </li></ul><ul><li>// UserForm.mxml </li></ul><ul><li><mx:Canvas> </li></ul><ul><li></mx:Canvas> </li></ul>
  6. 6. Layout (2) <ul><li><mx:states> </li></ul><ul><ul><li><mx:State name=&quot;salesReport&quot;> </li></ul></ul><ul><ul><ul><li>... </li></ul></ul></ul><ul><ul><li></mx:State> </li></ul></ul><ul><ul><li><mx:State name=”productReport”> </li></ul></ul><ul><ul><ul><li>... </li></ul></ul></ul><ul><ul><li></mx:State> </li></ul></ul><ul><li></mx:states> </li></ul>
  7. 7. Navigation <ul><li><mx:LinkButton label=&quot; Home &quot; click=&quot; viewStack.selectedIndex = 0&quot;/> </li></ul><ul><li><mx:LinkButton label=&quot; Product Report &quot; click=&quot; this .currentState = 'productReport &quot;/> </li></ul>
  8. 8. Binding Java Objects <ul><li>package { </li></ul><ul><ul><li>import mx.collections.ArrayCollection; </li></ul></ul><ul><ul><li>[ Bindable ] </li></ul></ul><ul><ul><li>[ RemoteClass (alias=&quot;model.Product&quot;)] </li></ul></ul><ul><ul><li>public class Product { </li></ul></ul><ul><ul><ul><li>public var id: Number; </li></ul></ul></ul><ul><ul><ul><li>public var name: String; </li></ul></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>} </li></ul>
  9. 9. Sending Data <ul><li><mx:Form id=&quot;productForm&quot;> </li></ul><ul><ul><li><mx:FormItem> </li></ul></ul><ul><ul><ul><li><mx:TextInput id=&quot;name&quot;/> </li></ul></ul></ul><ul><ul><li></mx:FormItem> </li></ul></ul><ul><ul><li><mx:Button label=&quot;Add&quot; click=&quot;add()&quot;/> </li></ul></ul><ul><li></mx:Form> </li></ul><ul><li>public function add():void{ </li></ul><ul><ul><li>// do something here </li></ul></ul><ul><li>} </li></ul>
  10. 10. Sending Data (2) <ul><li><mx:WebService </li></ul><ul><li>id=&quot;productRequest&quot; </li></ul><ul><li>wsdl=&quot; http://localhost:8080/ws/product.wsdl &quot;> </li></ul><ul><ul><li><mx:operation name=&quot; search &quot; resultFormat=&quot; object &quot; /> </li></ul></ul><ul><li></mx:WebService> </li></ul>
  11. 11. Sending Data (3) <ul><li><mx:HTTPService id=&quot; save Request &quot; url=&quot; /search.do &quot; </li></ul><ul><li>result =&quot; onSave (event)&quot; </li></ul><ul><li>useProxy=&quot; false &quot; method=&quot; POST &quot;> </li></ul><ul><ul><li><mx:request xmlns=&quot;&quot;> </li></ul></ul><ul><ul><ul><li><name>{name.text}</name> </li></ul></ul></ul><ul><ul><li></mx:request> </li></ul></ul><ul><li></mx:HTTPService> </li></ul><ul><li>private function add(): void { </li></ul><ul><ul><li>saveRequest.send(); </li></ul></ul><ul><li>} </li></ul>
  12. 12. Sending Data (4) <ul><li><mx:RemoteObject id=&quot; productService &quot; </li></ul><ul><li>destination=&quot; productService &quot; </li></ul><ul><li>endpoint=&quot;http://localhost:8080/messagebroker/amf&quot;> </li></ul><ul><ul><li><mx:method name=&quot; save &quot; /> </li></ul></ul><ul><li></mx:RemoteObject> </li></ul><ul><li>public function add():void{ </li></ul><ul><ul><li>var product:Product = new Product(); </li></ul></ul><ul><ul><li>product.name = name.text; </li></ul></ul><ul><ul><li>productService.save(product); </li></ul></ul><ul><li>} </li></ul>
  13. 13. Receiving Data <ul><li>// Data is received asynchronously </li></ul><ul><li><mx:RemoteObject id=&quot; productService &quot; </li></ul><ul><li>destination=&quot; productService &quot; </li></ul><ul><li>endpoint=&quot; http://localhost:8080/messagebroker/amf &quot;> </li></ul><ul><ul><li><mx:method name=&quot;find&quot; result=&quot; onSearch(event) &quot; fault=&quot;onFault(event)&quot;/> </li></ul></ul><ul><li></mx:RemoteObject> </li></ul><ul><li>private function onSearch(event:ResultEvent): void { </li></ul><ul><li>products = event.result as ArrayCollection; </li></ul><ul><li>} </li></ul>
  14. 14. Receiving Data (2) <ul><li><mx:HTTPService id=&quot; search Request &quot; url=&quot; /search.do &quot; </li></ul><ul><li>result =&quot; onSearch (event)&quot; </li></ul><ul><li>useProxy=&quot; false &quot; method=&quot; POST &quot;> </li></ul><ul><ul><li><mx:request xmlns=&quot;&quot;> </li></ul></ul><ul><ul><ul><li><name>{name.text}</name> </li></ul></ul></ul><ul><ul><li></mx:request> </li></ul></ul><ul><li></mx:HTTPService> </li></ul><ul><li>private function onSearch(event:ResultEvent): void { </li></ul><ul><li>products = event.result as ArrayCollection; </li></ul><ul><li>} </li></ul>
  15. 15. Data Table <ul><li>[ Bindable ] </li></ul><ul><li>public var products:ArrayCollection; </li></ul><ul><li><mx:DataGrid dataProvider=&quot; {products} &quot;> </li></ul><ul><ul><li><mx:columns> </li></ul></ul><ul><ul><ul><li><mx:DataGridColumn dataField=&quot; name &quot;/> </li></ul></ul></ul><ul><ul><li></mx:columns> </li></ul></ul><ul><li></mx:DataGrid> </li></ul>
  16. 16. Localization <ul><li>// Localization is compiled, not retrieved </li></ul><ul><li>// during runtime </li></ul><ul><li><mx:LinkButton label=&quot;{resourceManager.getString( ' Admin ' , ' home ' )}&quot; /> </li></ul><ul><li><mx:LinkButton label=”@Resource(key=' home ', bundle=' Admin ')”/> </li></ul><ul><li>#Admin.properties </li></ul><ul><li>home = Home </li></ul>
  17. 17. Validation <ul><li>// Validation is done during event, not after </li></ul><ul><li>// form submission </li></ul><ul><li><mx:StringValidator id=&quot; usernameV&quot; source=&quot; {username} &quot; required=&quot; true &quot; property=&quot; text &quot; /> </li></ul><ul><li><mx:TextInput id=&quot;username&quot; change=&quot; validateForm(event) &quot; /> </li></ul><ul><li>private function validateForm(event:Event): void { </li></ul><ul><li>// validation logic </li></ul><ul><li>} </li></ul>
  18. 18. Demo
  19. 19. Questions?
  20. 20. Thank You! [email_address] http://joshuajava.wordpress.com

×