Embed Size (px)
Citation preview
Agency Overview 1
Flex Hands-On Experience
Kristen [email protected] Systems EngineerSeptember 27, 2008
Central Coast Code Camp Sponsors
Outline 3
Outline
What is Flex?
MXML & ActionScript Overview
Components
Hello World Application
Demographics Application
Gallery Application
Q & A
What Is Flex? 4
What Is Flex?(What Are We Doing Here?)
What Is Flex? 5
What Flex Is Not
QuickTime™ and a decompressor
are needed to see this picture.
QuickTime™ and a decompressor
are needed to see this picture.
What Is Flex? 6
What Flex Is
Rich Internet Application Framework
Built using ActionScript and MXML
Generates compiled Flash binaries
Runs on any computer with Flash player
QuickTime™ and a decompressor
are needed to see this picture.
What Is Flex? 7
Deployment
(From Flex Builder Animated Overview)
QuickTime™ and aAnimation decompressor
are needed to see this picture.
What Is Flex? 8
Deployment
(From Flex Builder Animated Overview)
QuickTime™ and aAnimation decompressor
are needed to see this picture.
What Is Flex? 9
Event Flow
Events are dispatched when an event occurs
Events are captured starting from the Stage going down through children
Events are targeted at the object that triggered the event
Events are bubbled up through the parent of the target object
Components can listen for specific events
QuickTime™ and a decompressor
are needed to see this picture.
(From Flex Live Docs)
What Is Flex? 10
Web Services
QuickTime™ and a decompressor
are needed to see this picture.
MXML 11
MXML(Not Your Parent’s XML)
MXML 12
Overview
User interface markup language based on XML
Used to layout components
Can reference components defined in either MXML or ActionScript
Properties on a tag reference property variables in component
(Comic from aralbalkan.com)
MXML 13
Example
<?xml version="1.0" encoding="utf-8" ?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" layout="vertical” creationComplete="initApp()">
<mx:Script> <![CDATA[ public function initApp():void { mainTxt.text = Greeter.sayHello(); } ]]> </mx:Script>
<mx:Label id="title" fontSize="24" fontStyle="bold” text='"Hello, world!" Example'/> <mx:TextArea id = "mainTxt" width="250"/>
</mx:Application>
(From the ActionScript Wikipedia Page)
MXML 14
Example With CSS
<?xml version="1.0" encoding="utf-8" ?><mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
<mx:Style> .error { color: #FF0000; font-size: 12; } .title { font-family: Courier; font-size: 18; } </mx:Style>
<mx:Label styleName="error" text="This is an error"/> <mx:Label styleName="title" text="This is a title"/>
</mx:Application>
(From http://www.adobe.com/devnet/flex/articles/paradigm.html)
ActionScript 15
ActionScript(Not Just For Superheroes)
ActionScript 16
Overview
Object Oriented (packages, namespaces, objects, interfaces, etc.)
Type Checking (compile-time and runtime)
ECMAScript 4 Compliant (what JavaScript is based on) including E4X (XML parsing)
Event driven architecture
QuickTime™ and a decompressor
are needed to see this picture.
(ActionScript Art by Tyler Egeto - http://blog.tyleregeto.com/?p=92)
ActionScript 17
Example
package com.example{ import flash.text.TextField; import flash.display.Sprite;
public class Greeter extends Sprite { public function Greeter() { var txtHello:TextField = new TextField(); txtHello.text = "Hello World"; addChild(txtHello); } }}
(From the ActionScript Wikipedia Page)
Components 18
Components(Everyone Loves Leftovers)
Components 19
Overview
Building blocks of a Flex Application
Encapsulated pieces of functionality
Most frequently used are UI controls
Can be extended and joined together
(From http://www.adobe.com/devnet/flex/articles/paradigm.html& http://flexsamples.blogspot.com/2008/06/flex-component-class-hierarchy.html)
QuickTime™ and a decompressor
are needed to see this picture.
Components 20
Style Explorer
(From http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html)
Components 21
Component Explorer
(From http://examples.adobe.com/flex3/componentexplorer/explorer.html)
Hello World 22
Hello World(And Goodbye)
Hello World 23
Hello World 24
Hello World 25
Hello World 26
Hello World 27
Hello World 28
Hello World 29
Hello World 30
Hello World 31
Hello World Demo(And Goodbye)
Demographics 32
Demographics(Real Data for a Graphics Demo)
Demographics 33
Demographics Example
If you have wireless:
http://10.10.0.191/~kolsen/flex-hands-on
If you have the CD:
There is a folder called “support-files”
For this example we will be using the file called “data.xml”
Demographics 34
Demographics 35
Demographics 36
Demographics 37
Demographics 38
Demographics 39
Demographics 40
Demographics 41
Demographics 42
Demographics 43
Demographics 44
Demographics 45
Demographics 46
Demographics 47
Demographics 48
Demographics 49
Demographics 50
Demographics 51
Demographics 52
Demographics 53
Demographics 54
Demographics 55
Demographics 56
Demographics 57
Demographics 58
Demographics 59
Demographics Demo(Real Data for a Graphics Demo)
Gallery 60
Gallery(More Ways to Show off Your Pets/Children)
Gallery 61
Gallery Example
If you have wireless:
Make sure you can reach:http://10.10.0.191/~kolsen/gallery2
If you have the CD:
There is a folder under support_files called “gallery”
You will need to load in the XML data like we did in the demographics example and modify a few of the first steps
Gallery 62
Gallery Example 1
Gallery 63
Gallery 64
Gallery 65
Gallery 66
Gallery 67
Gallery 68
Gallery 69
Gallery 70
Gallery 71
Gallery 72
Gallery 73
Gallery 74
Gallery 75
Gallery 76
Gallery 77
Gallery 78
Gallery 79
Gallery Demo(More Ways to Show off Your Pets/Children)
Gallery 80
More Information About FlexFlex Homepage: adobe.com/flexAdobe Tutorials: adobe.com/devnet/flex/videotrainingFlex Community: flex.org
Agency Overview 81
Thank You. Questions?
Kristen [email protected] Systems EngineerSeptember 27, 2008
