Building Cool apps with flex

860 views
800 views

Published on

Introduction to building cool and rich applications with Adobe Flex. A Flickr image gallery follows the presentation

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
860
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Building Cool apps with flex

  1. 1. Building cool web applications with Flex Presenters Joseph Khan Rasmiranjan Nayak
  2. 2. <ul><li>Joseph Khan </li></ul><ul><li>Senior Software Engineer. </li></ul><ul><li>Flash, Flex, BI </li></ul><ul><li>2.5 yrs of experience. </li></ul>Who are we ? <ul><li>Rasmiranjan Nayak </li></ul><ul><li>Senior Software Developer </li></ul><ul><li>Flex, Java, BI </li></ul><ul><li>2.3 yrs of experience </li></ul>
  3. 3. <ul><li>Aware about Rich Internet Applications (RIA) </li></ul><ul><li>Having knowledge of Flex and Action Script . </li></ul>Who are you ?
  4. 4. <ul><li>Flex at present </li></ul><ul><li>Data binding </li></ul><ul><li>Containers </li></ul><ul><li>Skins </li></ul><ul><li>Item Renderers </li></ul><ul><li>Effects </li></ul>Synopsis
  5. 5. Flex at Present <ul><li>Builder </li></ul><ul><li>Flash builder 4.0.1 </li></ul><ul><li>SDK </li></ul><ul><li>Flex 4.1 SDK </li></ul><ul><li>Language </li></ul><ul><li>Actionscript 3.0 </li></ul><ul><li>Server </li></ul><ul><li>BlazeDS Server 4.0 </li></ul><ul><li>Testing </li></ul><ul><li>flexUnit 4 </li></ul><ul><li>FrameWorks </li></ul><ul><li>Cairngorm 2.2, Mate, Parsley 2.3.0, springActionscript, Swiz, RobotLegs, etc </li></ul>
  6. 6. Controls The Flex framework includes a plethora of basic, and not so basic, controls for building beautiful and functional user interfaces. Image (mx.controls.Image) <mx:Image source=&quot;http://www.adobe.com/adobe-lq.png&quot; /> Button (mx.controls.Button) <mx:Button label=&quot;Push Me&quot; click=&quot;Alert.show('Button Pushed');&quot; /> Text Controls (Label, Text, TextArea, TextInput) <mx:TextInput text=&quot;TextInput Control&quot; /> DataGrid (mx.controls.DataGrid) <mx:DataGrid> <mx:columns> <mx:DataGridColumn headerText=&quot;First Name&quot; /> <mx:DataGridColumn headerText=&quot;Last Name&quot; /> </mx:columns> </mx:DataGrid>
  7. 7. Containers <ul><li>Group </li></ul><ul><li><s:Group id=“groupContainer” width=“100%” height=“100%” /> </li></ul><ul><li>DataGroup </li></ul><ul><li><s:DataGroup id=“dataContainer” width=“100%” height=“100%” /> </li></ul><ul><li>SkinnableContainer </li></ul><ul><li><s:SkinnableContainer id=“skinnableContainer” width=“100%” height=“100%” /> </li></ul><ul><li>BorderContainer </li></ul><ul><li><s: BorderContainer id=“borderContainer” width=“100%” height=“100%” /> </li></ul><ul><li>Panel </li></ul><ul><li><s:Panel id=“panelContainer” width=“100%” height=“100%” /> </li></ul>
  8. 8. Skins What is skining ? “ Skinning is the process of changing the appearance of a component by modifying or replacing its visual elements.” <ul><li>WHY? </li></ul><ul><li>To fulfil Client requirements </li></ul><ul><li>Make Flex not look like Flex </li></ul><ul><li>Cause it looks cool </li></ul>How ? <s:Button label=&quot;Click&quot; skinClass=&quot;assets.skins.ButtonSkin&quot;/>
  9. 9. Item Renderers <ul><li>The itemRenderer property of the DataContainer allows you to create a custom component that will be rendered for each item in the data provider that is passed to the Component. </li></ul><ul><li>The first way to create the item renderer is to use the <fx:Component> tag, as shown here: <s:List id=&quot;list&quot; dataProvider=&quot;{provider}&quot; selectedIndex=&quot;0&quot;> <s:itemRenderer> <fx:Component> <s:ItemRenderer> <s:Label text=&quot;{data}&quot;/> </s:ItemRenderer> </fx:Component> </s:itemRenderer> </s:List> </li></ul>
  10. 10. Effects <ul><li>The effects are nonvisual children, so they go in an fx:Declarations block. </li></ul><ul><li>The Rotate3D effect flips the panel on the y-axis. </li></ul><ul><li>The Move effect moves the panel on the x-axis. </li></ul><ul><li>The Parallel effect runs a Rotate3D and Move effect in parallel. </li></ul><ul><li>The buttons trigger the effects. </li></ul>
  11. 11. Final Demo <ul><li>Requirements </li></ul><ul><li>Flickr API http://www.flickr.com/services/feeds/ </li></ul><ul><li>Cross domain policy files from Flickr </li></ul><ul><li>Steps: </li></ul><ul><li>Enter a search string </li></ul><ul><li>Send a request to Flickr for photo feeds </li></ul><ul><li>Flickr returns a response </li></ul><ul><li>Analyze the response </li></ul><ul><li>Display the images in Flex list control </li></ul><ul><li>For the list control we will use custom item renderer </li></ul>
  12. 12. From Here… Developer Documentation http://www.adobe.com/devnet/flex/documentation.html Get Inspired http://flex.org/showcase http://www.flexapps.com.au/ http://www.scalenine.com/showcase/ Examples and Code http://www.adobe.com/devnet/flex/tourdeflex.html
  13. 13. Any Thoughts? Reach us at [email_address] [email_address]

×