Introduction to Flex 2

1
Introduction to Flex 2

• Central Pennsylvania ColdFusion User Group

March 7, 2006
2
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

3
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

4
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

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

6
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

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

8
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

9
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

10
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

11
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

12
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

13
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

14
Getting Started

• Download Software
• http//www.macromedia.com/go/labs_flex2_downloads
• FlexBuilder 2.0
• ColdFusion/Flex Connectivity
• Requires CFMX 7 installed on Windows

15
Configuring ColdFusion Server

• After installing update
• Open C\CFusionMX7\wwwroot\Web-INF\flex\flex-enter
  prise-services.xml
• Modify endpoint to point to correct server /
  port
• " class"flex.messaging.endpoints.AMFEndpoint"/
• Restart ColdFusion
• Browsing to endpoint should be a blank page
• http//localhost8500/flex2gateway/

16
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

17
Your First Flex Application

• click event handler
• mx.controls.Alert.show
• Demo1 Project

18
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

19
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

20
MXML Basics Data Binding

• Glues data from source to destination
• When source data changes, destination
  auto-updates
• Define with and
• Use Bindable meta-data to mark properties as
  able to be bound
• Explicit because performance implications

21
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

22
ActionScript Basics Part 2

• Strong typing
• Uses strict compilation mode
• Enabled by default
• Best practice
• var valueNumber
• function f( param1String )Number
• The datatype
• Any type
• http//www.darronschall.com/weblog/archives/000210
  .cfm

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

24
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

25
Connecting Flex to ColdFusion

• Modify Flex Project Properties
• Flex Compiler additional arguments
• --servicesC\CFusionMX7\wwwroot\WEB-INF\flex\flex
  -enterprise-services.xml
• Create CFC on Server
• accessremote
• on Client
• destinationColdFusion
• sourcepath.to.Component
• SampleConnectivity Project

26
ActionScript / CFC Class Mapping

• Define properties in CFC via
• 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(aliaspath.to.Component)
• public var for every
• SampleClassMapping Project

27
Additional Resources

• Sample Explorer
• 70 Examples
• http//weblogs.macromedia.com/flex_samples/flex_ex
  plorer/explorer.html
• Documentation
• http//labs.macromedia.com/wiki/index.php/Flex_Fra
  meworkDocumentation
• FlexCoders Mailing List
• http//groups.yahoo.com/group/flexcoders/
• IFBIN Flex By Example
• http//ifbin.com/?pagexbe

28
Thanks!

• Questions / Comments?
• Contact me
• darron_at_darronschall.com
• http//www.darronschall.com