Switch To Flex

2,870 views

Published on

Published in: Technology, Economy & Finance
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,870
On SlideShare
0
From Embeds
0
Number of Embeds
21
Actions
Shares
0
Downloads
70
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

×