Introduction to Flex. Indy Nagpal. Web On The Piste August 2007

Transcription

1 Introduction to Flex Indy Nagpal Web On The Piste August 2007

2 Who am I Senior Developer with Straker Interactive Trainer -- Flex, ColdFusion, ShadoCMS A couple of years with Flex A decade of working with ColdFusion In New Zealand since last four years And loving it!

3 The next 45 minutes What is Flex Examples MXML and ActionScript Controls and Containers Events Work with a small application

4 What is a Rich Internet Application (RIA) Every user interaction does not require request/web server response Data can be obtained from server without redrawing entire page Efficiently utilize network bandwidth transmitting only portion of the data that changed Combine the best of desktop, web and communications

5 What is Flex A bunch of developer tools from Adobe to build and deploy Rich Internet Applications on the Flash platform

6 Flex Tools Flex Software Development Kit (Free) MXML and ActionScript Flex Framework Command-line compiler and debugger Flex Builder 2 (based on Eclipse) Visual Layout Code Hinting Debugging Flex Charting LiveCycle Data Services (Flex Data Services)

7 In a way, Flex is an easy way for developers to make SWF files! Makes applications for: the web (Flash Player) and the desktop (AIR)

8

9

10

11

12

13

14

15 How it all works The slightly bigger picture

16 Flex Builder Love it IDE for the Flex framework Based on Eclipse Provides design, coding and debugging tools Built-in compiler to create SWFs from MXML and ActionScript Flex Builder costs money -- and it is worth every cent

17 The Goodies in Flex SDK MXML: XML-based language ActionScript: ECMAScript-compliant scripting Library of pre-built components Compiler: Create SWFs from MXML/ActionScript

18 MXML XML-based language Declarative way to build applications <mx:application xmlns:mx=" <mx:button id = "mybutton" label = "Button" click = "mylabel.text='button clicked'" /> <mx:label id="mylabel" /> </mx:application>

19 ActionScript Core of the Flex ECMAScript-compliant scripting Familiar syntax public class MyClass implements MyInterface { private var myvariable:string; public function dosomething():void { } }

20 The cost of Flex SDK Flex SDK is free Repeat after me!flex SDK is free You can write code in a text editor and compile it into a Flash SWF using MXMLC -- the MXML compiler Download from:

21 Flex Controls Controls are user-interface components, like Button, TextArea, ComboBox Placed in containers Customizable -- styles, skins, fonts MXML API to declare the control ActionScript API for calling methods and setting properties

22 Controls Button CheckBox ColorPicker ComboBox DataGrid DateChooser DateField HSlider HorizontalList Image Label LinkButton List NumericStepper PopUpButton PopUpMenuButton ProgressBar RadioButton RichTextEditor Text TextArea TextInput TileList Tree VSlider VideoDisplay

23 Flex Containers Provide a structure to layout child components Consist of other components, both controls and containers Control sizing and positioning of all children Control navigation among multiple child containers

24 Containers Layout Containers Navigator Containers Canvas ControlBar Form FormHeading Grid Hbox HDividedBox HRule ModuleLoader Panel Spacer Tile TitleWindow Vbox VDividedBox VRule Accordian ButtonBar LinkBar MenuBar TabBar TabNavigator ToggleButtonBar ViewStack

25 mx:application mx:button mx:panel mx:button mx:datagrid <mx:application> <mx:button/> <mx:panel width="100%" height="100%"> <mx:button width="100%" /> <mx:datagrid /> </mx:panel> </mx:application>

26 Flex Explorer Quick Peek

27 Say hello to the world Code Create a new Flex project in Flex Builder Add a button Add a Panel Add a Label

28 Properties Use the <mx:script> tag to create properties Properties created in ActionScript Access modifiers: public, private, protected, internal <mx:script> <![CDATA[ public var myprop:string = "Hello World"; ]]> </mx:script>

29 Data Binding Very cool Properties of an object can be bound to another As property value changes, the bound object automatically reflects the changes Curly bracket ( {} ) notation used to indicate binding Properties used in bindings specified with the [Bindable] meta tag

30 Data Binding <mx:script> <![CDATA[ [Bindable] private var slabel:string = "I am a label"; ]]> </mx:script> <mx:panel> <mx:label text="{slabel}"/> </mx:panel>

31 Say hello with binding Code Create a new property Bind value of the label to the property Change the value of the property when the button is clicked

32 Functions/Methods Functions written in ActionScript Can contain multiple lines of code Enable code reuse Cleaner code <mx:script> <![CDATA[ private function handlecreationcomplete():void{ var slabel:string = "I am a label"; var operson:object = new Object; } ]]> </mx:script>

33 Events Very cool Events notify the developer when something happens in a Flex application System Events Occur as a result of systemic code execution E.g., creationcomplete, initialize User Events Occur as a result of user interaction with the application E.g., click, change, mouseover

34 Handling Events Handling an event means taking an action when an event is broadcast/dispatched Handle inline -- as in the HelloWorld example <mx:button label = "Say hello" click = "slabel = 'Hello World'"/> Handle with functions -- preferable <mx:button label = "Say hello click = "handleclick()"/>

35 Handling Events Code <?xml version="1.0" encoding="utf-8"?> <mx:application xmlns:mx=" creationcomplete="handlecreationcomplete()"> <mx:script> <![CDATA[ [Bindable] private var slabel:string = ""; private function handlecreationcomplete():void{ slabel = "I am a label, and exact"; } private function handleclick():void{ slabel = "A big loud hello to the world"; } ]]> </mx:script> <mx:button label="say hello to the world" click="handleclick()"/> <mx:panel width="400" height="300 layout="vertical title="i'm a panel"> <mx:label fontsize="20" text="{slabel}"/> </mx:panel> </mx:application>

36 The Events state of mind Big mind jump for most web developers Procedural to event-driven programming Different parts of an application keep firing events Handlers keep handling events asynchronously

37 Data Access Flex can work with remote data sources Flex applications can make asynchronous calls to remote data services Three components to work with server-side data services HTTPService WebService RemoteObject

38 HTTPService Easy Sends HTTP requests to specified URIs GET, POST, HEAD, OPTIONS, PUT, TRACE, DELETE Results returned as text/xml Great to work REST-style services (More on REST in my session on Web APIs) <mx:httpservice id="feedrequest" url=" />

39 WebService Access any SOAP-compliant Web Service Sends request to methods of a Web Service Results returned as XML (SOAP) <mx:webservice id="oservice" wsdl=" webservices/mxna2.cfc?wsdl"> <mx:operation name="getmostpopularposts"> <mx:request> <daysback>30</daysback> </mx:request> </mx:operation> </mx:webservice>

40 RemoteObject [The Force is strong with this one!] The Jedi Access methods of a server-side objects without converting them into WebServices Data exchanged in a compressed, binary format -- AMF - Action Message Format <mx:remoteobject source="com.nagpals.wotp.yahoo.flickr" id="oflickr" destination="coldfusion" showbusycursor="true" > <mx:method name="tagsearch" result="handlegetresults(event)"/> </mx:remoteobject>

41 Building an RSS Reader Code Create a new application Add a Panel Add a Datagrid Add a TextArea Add a HTTPService Call HTTPService Populate Datagrid with results Populate TextArea on clicking the Datagrid

42 Resources

43 Comments / Questions?

44 Thanks! Indy Nagpal