Agency Overview0 0Presentation Title Flex Hands-On Experience Kristen Olsen Web Systems Engineer September 27, 2008

Central Coast Code Camp Sponsors

Outline2  What is Flex?  MXML & ActionScript Overview  Components  Hello World Application  Demographics Application  Gallery Application  Q & A

What Is Flex?3 (What Are We Doing Here?)

What Is Flex?4 What Flex Is Not

What Is Flex?5 What Flex Is  Rich Internet Application Framework  Built using ActionScript and MXML  Generates compiled Flash binaries  Runs on any computer with Flash player

What Is Flex?6 Deployment (From Flex Builder Animated Overview)

What Is Flex?7 Deployment (From Flex Builder Animated Overview)

What Is Flex?8 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 (From Flex Live Docs)

What Is Flex?9 Web Services

MXML10 MXML (Not Your Parent’s XML)

MXML11 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)

MXML12 Example <mx:Application xmlns:mx=" xmlns="*" layout="vertical” creationComplete="initApp()"> <![CDATA[ public function initApp():void { mainTxt.text = Greeter.sayHello(); } ]]> <mx:Label id="title" fontSize="24" fontStyle="bold” text='"Hello, world!" Example'/> (From the ActionScript Wikipedia Page)

MXML13 Example With CSS.error { color: #FF0000; font-size: 12; }.title { font-family: Courier; font-size: 18; } (From

ActionScript14 ActionScript (Not Just For Superheroes)

ActionScript15 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 (ActionScript Art by Tyler Egeto -

ActionScript16 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)

Components17 Components (Everyone Loves Leftovers)

Components18 Overview  Building blocks of a Flex Application  Encapsulated pieces of functionality  Most frequently used are UI controls  Can be extended and joined together (From &

Components19 Style Explorer (From

Components20 Component Explorer (From

Hello World21 Hello World (And Goodbye)

Hello World22 Hello World Example 1

Hello World23 Hello World Example 2

Hello World24 Hello World Example 3

Hello World25 Hello World Example 4

Hello World26 Hello World Example 5

Hello World27 Hello World Example 6

Hello World28 Hello World Example 7

Hello World29 Hello World Example 8

Hello World30 Hello World Demo (And Goodbye)

Demographics31 Demographics (Real Data for a Graphics Demo)

Demographics32 Demographics Example  If you have wireless:   If you have the CD:  There is a folder called “support-files”  For this example we will be using the file called “data.xml”

Demographics33 Demographics Example 1

Demographics34 Demographics Example 2

Demographics35 Demographics Example 3

Demographics36 Demographics Example 4

Demographics37 Demographics Example 5

Demographics38 Demographics Example 6

Demographics39 Demographics Example 7

Demographics40 Demographics Example 8

Demographics41 Demographics Example 9

Demographics42 Demographics Example 10

Demographics43 Demographics Example 11

Demographics44 Demographics Example 12

Demographics45 Demographics Example 13

Demographics46 Demographics Example 14

Demographics47 Demographics Example 15

Demographics48 Demographics Example 16

Demographics49 Demographics Example 17

Demographics50 Demographics Example 18

Demographics51 Demographics Example 19

Demographics52 Demographics Example 20

Demographics53 Demographics Example 21

Demographics54 Demographics Example 22

Demographics55 Demographics Example 23

Demographics56 Demographics Example 24

Demographics57 Demographics Example 25

Demographics58 Demographics Demo (Real Data for a Graphics Demo)

Gallery59 Gallery (More Ways to Show off Your Pets/Children)

Gallery60 Gallery Example  If you have wireless:  Make sure you can reach:  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

Gallery61 Gallery Example 1

Gallery62 Gallery Example 2

Gallery63 Gallery Example 3

Gallery64 Gallery Example 4

Gallery65 Gallery Example 5

Gallery66 Gallery Example 6

Gallery67 Gallery Example 7

Gallery68 Gallery Example 8

Gallery69 Gallery Example 9

Gallery70 Gallery Example 10

Gallery71 Gallery Example 11

Gallery72 Gallery Example 12

Gallery73 Gallery Example 13

Gallery74 Gallery Example 14

Gallery75 Gallery Example 15

Gallery76 Gallery Example 16

Gallery77 Gallery Example 17

Gallery78 Gallery Demo (More Ways to Show off Your Pets/Children)

Gallery79 More Information About Flex Flex Homepage: adobe.com/flexadobe.com/flex Adobe Tutorials: adobe.com/devnet/flex/videotrainingadobe.com/devnet/flex/videotraining Flex Community: flex.orgflex.org

Agency Overview80 All Hands - August Thank You. Questions? Kristen Olsen Web Systems Engineer September 27, 2008