Introduction to Flex 2

Central Pennsylvania
ColdFusion User Group
March 7, 2006

[email protected]
 Outline
• What is Flex? • Demos
• What is Flex 2? • Connecting Flex to
• Flex 2 SDK, Pricing ColdFusion
• Getting Started • ActionScript / CFC
• Class Mapping
Your First Flex
Application • Additional Resources
• MXML Basics
• ActionScript Basics
 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\flex-
enterprise-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 auto-
updates
• 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-enterprise-
services.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
• FlexCoders Mailing List
– http://groups.yahoo.com/group/flexcoders/
• IFBIN – Flex By Example
– http://ifbin.com/?page=xbe
 Thanks!

• Questions / Comments?

• Contact me
– [email protected]
– http://www.darronschall.com