1 / 13

Building cool web applications with Flex

Building cool web applications with Flex. Presenters Joseph Khan Rasmiranjan Nayak. Who are we ?. Joseph Khan Senior Software Engineer. Flash, Flex, BI 2.5 yrs of experience. Rasmiranjan Nayak Senior Software Developer Flex, Java, BI 2.3 yrs of experience. Who are you ?.

apollo
Télécharger la présentation

Building cool web applications with Flex

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Building cool web applications with Flex Presenters Joseph Khan RasmiranjanNayak

  2. Who are we ? • Joseph Khan • Senior Software Engineer. • Flash, Flex, BI • 2.5 yrs of experience. • Rasmiranjan Nayak • Senior Software Developer • Flex, Java, BI • 2.3 yrs of experience

  3. Who are you ? • Aware about Rich Internet Applications (RIA) • Having knowledge of Flex and Action Script.

  4. Synopsis Flex at present Data binding Containers Skins Item Renderers Effects

  5. Flex at Present Builder Flash builder 4.0.1 SDK Flex 4.1 SDK Language Actionscript 3.0 Server BlazeDS Server 4.0 Testing flexUnit 4 FrameWorks Cairngorm 2.2, Mate, Parsley 2.3.0, springActionscript, Swiz, RobotLegs, etc

  6. Controls The Flex framework includes a plethora of basic, and not so basic, controls for building beautiful and functional user interfaces. Button (mx.controls.Button) <mx:Button label="Push Me" click="Alert.show('Button Pushed');" /> Text Controls (Label, Text, TextArea, TextInput) <mx:TextInput text="TextInput Control" /> Image (mx.controls.Image) <mx:Image source="http://www.adobe.com/adobe-lq.png" /> DataGrid (mx.controls.DataGrid) <mx:DataGrid> <mx:columns> <mx:DataGridColumn headerText="First Name" /> <mx:DataGridColumn headerText="Last Name" /> </mx:columns> </mx:DataGrid>

  7. Containers • Group • <s:Group id=“groupContainer” width=“100%” height=“100%” /> • DataGroup • <s:DataGroup id=“dataContainer” width=“100%” height=“100%” /> • SkinnableContainer • <s:SkinnableContainer id=“skinnableContainer” width=“100%” height=“100%” /> • BorderContainer • <s: BorderContainer id=“borderContainer” width=“100%” height=“100%” /> • Panel • <s:Panel id=“panelContainer” width=“100%” height=“100%” />

  8. Skins What is skining ? “ Skinning is the process of changing the appearance of a component by modifying or replacing its visual elements.” • WHY? • To fulfil Client requirements • Make Flex not look like Flex • Cause it looks cool How ? <s:Button label="Click" skinClass="assets.skins.ButtonSkin"/>

  9. Item Renderers • 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. • The first way to create the item renderer is to use the <fx:Component> tag, as shown here:<s:List id="list" dataProvider="{provider}" selectedIndex="0"><s:itemRenderer><fx:Component> <s:ItemRenderer> <s:Label text="{data}"/> </s:ItemRenderer></fx:Component></s:itemRenderer></s:List>

  10. Effects • The effects are nonvisual children, so they go in an fx:Declarations block. • The Rotate3D effect flips the panel on the y-axis. • The Move effect moves the panel on the x-axis. • The Parallel effect runs a Rotate3D and Move effect in parallel. • The buttons trigger the effects.

  11. Final Demo • Requirements • Flickr API http://www.flickr.com/services/feeds/ • Cross domain policy files from Flickr • Steps: • Enter a search string. • Send a request to Flickr for photo feeds. • Flickr returns a response • Analyze the response • Display the images in Flex list control • For the list control we will use custom item renderer

  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. Any Thoughts?

More Related