1 / 14

Flex Component 101

Flex Component 101. dan mcweeney. What’s Flex. “…is a cross platform, open source framework for creating rich Internet applications that run identically in all major browsers and operating systems, and now the desktop with Adobe AIR” Runs just on the Flash Player

kim-johns
Download Presentation

Flex Component 101

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. Flex Component 101 dan mcweeney

  2. What’s Flex “…is a cross platform, open source framework for creating rich Internet applications that run identically in all major browsers and operating systems, and now the desktop with Adobe AIR” Runs just on the Flash Player “Flash content reaches 99.0% of Internet viewers”

  3. What’s Flex “…is a cross platform, open source framework for creating rich Internet applications that run identically in all major browsers and operating systems, and now the desktop with Adobe AIR” Runs just on the Flash Player “Flash content reaches 99.0% of Internet viewers” Makes Pretty Uis easy Integrates with SAP Web Services Java via BlazeDS Flash Islands

  4. Point of reuse in the Flex Framework for UI components Mostly written in AS but can be created in MXML Skinable through CSS Flex Components

  5. Flex Applications • Created with many components • Stitched together using Actionscript • The actual run-able unit

  6. Flash Islands • Allows Flex Applications to talk to the Web Dynpro Framework • Set Data • Get Data • Receive and Fire Events • Why the hell are you talking about Components!?!?

  7. Flex Basics • MXML (backronymed to Magic eXtensible Markup Language) • XML based markup for defining UI and components <mx:Button fillColors=“[blue,blue]” color=“red” label=“This is a button”> </mx:Button>

  8. Flex Basics • Actionscript 3 • Object oriented language similar to Javascript, both adhere closely to ECMAScript standards package { import mx.controls.Button; public class MyButton extends Button { public function MyButton() { super(); setStyle("fillColors", ["blue","blue"]); setStyle("color", "red"); label = ”This is a button"; } } }

  9. Actionscript Cheat Sheet Class Syntax package i.could.be.useful { publicclass Foo extends Bar { publicvar imPublic:XML; protectedvar imProtected:Number; privatevar imPrivate:String; publicfunction Foo(){ super(); } } }

  10. Actionscript Cheat Sheet Traverse XML privatefunction traverseXML(xml:XML):Boolean{ foreach(var node:XML in xml.collectionToTraverse){ trace("do something with the name"); } returntrue; } Get an attribute of a XML Node node.@attributeName

  11. Actionscript Cheat Sheet Binding Bindings allow you to connect a component to a data set Data bindings are one way in Flex, from the data to the control. The control has event[s] to allow you to update the data item e.g. “changed”

  12. Actionscript Cheat Sheet Setters and Getters Flex has public properties but also setters and getters The standard way package{ publicclass Foo{ privatevar _myString:String; publicfunction Foo(){} publicfunctionget myString():String{ return _myString; } publicfunctionset myString(o:String){ _myString = o; } } }

  13. Actionscript Cheat Sheet Component Methods you might need addChild(child:DisplayObject):DisplayObject

  14. Actionscript Cheat Sheet Print to Console trace(“this will make it to the console to help you debug”); Alert Window Alert.show(“This is the text”,”this is the title”);

More Related