You are on page 1of 28

Introduction to Flex 2

Central Pennsylvania ColdFusion User Group
March 7, 2006

darron@darronschall.com

Outline
• • • • • What is Flex? What is Flex 2? Flex 2 SDK, Pricing Getting Started Your First Flex Application • MXML Basics • ActionScript Basics • Demos • Connecting Flex to ColdFusion • ActionScript / CFC Class Mapping • Additional Resources

What is Flex?
• Flex 1.5
– Server technology – Runs on top of J2EE (Tomcat, JRun, etc) – Place .mxml on server
• User requests .mxml file • Server compiles to .swf and delivers back to user

• Flex Builder 1.5
– Integrated Development Environment – Based on Dreamweaver codebase

What is Flex 2?
• • • • • • • • Flex 2 Flex Framework 2 Flex Builder 2 Flex Enterprise Services 2 Flex Charting Components 2 Flex Compiler ActionScript 3 Flash Player 8.5

Flex 2
• Term that encompasses all Flex-related technology • “Flex 2 Application”
– – – – Built with the Flex Framework 2 Interface defined via MXML Client-side, deployed as Flash .swf Requires Flash Player 8.5 to view

Flex Framework 2
• MXML (Macromedia XML)
– Declarative language to define User Interface – Similar to XHTML

• User Interface Components
– Buttons, ComboBoxes, Layout Managers, Containers, Effects

• Class Libraries
– Everything in the mx.* packages – Validation Routines, Web Services, DataTypes

Flex Builder 2
• Integrated Development Environment (IDE)
– Edit MXML – Edit ActionScript

• Built on top of the Eclipse Platform
– Pluggable architecture for anything and everything

• Killer features
– – – – – Integrated compiler Code hints Debugger Design View Integrated Version Control (CVS, SVN, etc.)

Flex Enterprise Services 2 (FES2)
• The “Next Generation” of the original Flex 1.5 Server • Deploy .mxml files on webserver
– User requests .mxml file – Server compiles to .swf and delivers back to user

• Publish / Subscribe messaging systems
– “Real time” multi-user applications

Flex Charting Components 2
• Part of the Flex Framework 2, but technically a separate “product” • Provides data visualization components
– Pie Charts, Bar Charts, Area Charts, etc.

• Made to integrate seamlessly with FES2
– Remotely synchronized data – “Shared dashboard”

Flex Compiler
• mxmlc
– Converts .mxml into ActionScript code – Compiles ActionScript code to .swf

• compc
– Similar to mxmlc – Used to create libraries
• .swc archives • Similar to Java .jar files

ActionScript 3
• Core of the Flex Framework • 100% ECMAScript 4 compliant
– Standard is still being written – Flash Player Engineers are part of standard committee

• Similar to ActionScript 2, but..
– Much much (much) faster
• Just-in-time compiled to native machine code

– Powerful new features
• Native Regular Expression support • E4X syntax makes working with XML easy

Flash Player 8.5
• Latest version of the Flash Player • Features two virtual machines
– ActionScript 1, 2 VM – ActionScript 3 VM
• Completely new underlying architecture • Not compatible with ActionScript 1 or 2 • Just-in-time compiled (super fast)

• New rendering model based on Display List
– More intuitive, easier to work with

Flex 2 SDK, Pricing
• Flex 2 SDK to be made available FREE
– Flex 2 Framework, Flex 2 Compiler

• Flex Builder 2 priced at under $1000
– No official price announced

• Flex Enterprise Services 2 available FREE
– Limited connections / bandwidth – No clustering support – Can scale as necessary by purchasing licenses
• No idea what the price might be

Getting Started
• Download Software
– http://www.macromedia.com/go/labs_flex2_do wnloads

• FlexBuilder 2.0 • ColdFusion/Flex Connectivity
– Requires CFMX 7 installed on Windows

Configuring ColdFusion Server
• After installing update…
– Open C:\CFusionMX7\wwwroot\Web-INF\flex\flexenterprise-services.xml – Modify “endpoint” to point to correct server / port
• <endpoint uri="http://localhost:8500/flex2gateway/" class="flex.messaging.endpoints.AMFEndpoint"/>

– Restart ColdFusion – Browsing to endpoint should be a blank page
• http://localhost:8500/flex2gateway/

Installing CFEclipse
• CFEclipse
– Eclipse plugin for ColdFusion development

• • • •

Open FlexBuilder 2 Help -> Software Updates -> Find and Install Search for New Features New Remote Site
– http://www.cfeclipse.org/update

Your First Flex Application
• <mx:Application /> • <mx:Button />
– click event handler

• mx.controls.Alert.show • Demo1 Project

MXML Basics – Visual Tags
• Layout
– Canvas, Form, VBox, HBox, ControlBar

• Navigation
– Accordion, LinkBar, MenuBar, ViewStack

• Controls
– Button, CheckBox, ComboBox, DataGrid, TextInput, List, Label, Tree

• Charts
– BarChart, PieChart, LineChart

MXML Basics – Misc. Tags
• Data Connectivity
– HTTPService, RemoteObject, WebService, XML

• Validation
– EmailValidator, DateValidator, ZipCodeValidator

• Effects
– Zoom, Resize, Move, Fade

• Style
– Either inline or “source” set to external .css

• Script
– Either inline or “source” set to external .as

MXML Basics – Data Binding
• “Glues” data from source to destination
– When source data changes, destination autoupdates

• Define with { and }
– <mx:Button label=“{ userInput.text }” />

• Use [Bindable] meta-data to mark properties as able to be bound
– Explicit because performance implications

ActionScript Basics
• Familiar syntax
– Similar to C++, Java, C#, JavaScript

• Dynamic Language, Weak Typing
– Similar to ColdFusion – Variables can hold any type

• Support for Strong Typing
– Can bind variable to specific data type – Faster code execution – Easier to develop
• More help from compiler • Easier to find bugs via Flash Debug Player and type errors

ActionScript Basics – Part 2
• Strong typing
– Uses “strict” compilation mode
• Enabled by default • Best practice

– var value:Number; – function f( param1:String ):Number { … }

• The * datatype
– Any type – http://www.darronschall.com/weblog/archives/000210. cfm

ActionScript Basics – part 3
• Visibility Modifiers
– public
• Accessible to anyone

– private
• Only accessible inside the class (current .mxml file)

– protected
• Accessible inside the class and subclasses

– internal
• Only accessible to classes in the same package • Default value (when visibility is omitted)

Simple Demos
• Demo2
– Various visual components

• Demo3
– Client-side validation for a form – HTTPService to send/receive data

• Demo4
– Binding to a WebService result

• Demo5
– Using states and transitions

Connecting Flex to ColdFusion
• Modify Flex Project Properties
– Flex Compiler additional arguments
• --services=C:\CFusionMX7\wwwroot\WEB-INF\flex\flex-enterpriseservices.xml

• Create CFC on Server
– access=“remote”

• <mx:RemoteObject /> on Client
– destination=“ColdFusion” – source=“path.to.Component”

• SampleConnectivity Project

ActionScript / CFC Class Mapping
• Define properties in CFC via <cfproperty /> • Return CFC via “remote” method (CFC -> AS) • Use CFC as the argument type of “remote” method (AS -> CFC) • Use [RemoteClass] for the ActionScript class
– [RemoteClass(alias=“path.to.Component”)] – “public var” for every <cfproperty />

• SampleClassMapping Project

Additional Resources
• Sample Explorer
– 70+ Examples – http://weblogs.macromedia.com/flex_samples/flex_expl orer/explorer.html

• Documentation

– http://labs.macromedia.com/wiki/index.php/Flex_Fram ework#Documentation – http://groups.yahoo.com/group/flexcoders/

• FlexCoders Mailing List • IFBIN – Flex By Example
– http://ifbin.com/?page=xbe

Thanks!

• Questions / Comments?

• Contact me
– darron@darronschall.com – http://www.darronschall.com