Building Cool apps with flex
Upcoming SlideShare
Loading in...5
×
 

Building Cool apps with flex

on

  • 965 views

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

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

Statistics

Views

Total Views
965
Slideshare-icon Views on SlideShare
965
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Building Cool apps with flex Building Cool apps with flex Presentation Transcript

    • Building cool web applications with Flex Presenters Joseph Khan Rasmiranjan Nayak
      • Joseph Khan
      • Senior Software Engineer.
      • Flash, Flex, BI
      • 2.5 yrs of experience.
      Who are we ?
      • Rasmiranjan Nayak
      • Senior Software Developer
      • Flex, Java, BI
      • 2.3 yrs of experience
      • Aware about Rich Internet Applications (RIA)
      • Having knowledge of Flex and Action Script .
      Who are you ?
      • Flex at present
      • Data binding
      • Containers
      • Skins
      • Item Renderers
      • Effects
      Synopsis
    • 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
    • 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>
    • 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%” />
    • 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=&quot;Click&quot; skinClass=&quot;assets.skins.ButtonSkin&quot;/>
    • 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=&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>
    • 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.
    • 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
    • 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
    • Any Thoughts? Reach us at [email_address] [email_address]