Introduction to Flex 2

Introduction to Flex 2: 

Introduction to Flex 2 Central Pennsylvania ColdFusion User Group March 7, 2006

Outline: 

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?: 

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?: 

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: 

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: 

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: 

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

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: 

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: 

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: 

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: 

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, 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: 

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

Configuring ColdFusion Server: 

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: 

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: 

Your First Flex Application <mx:Application /> <mx:Button /> click event handler mx.controls.Alert.show Demo1 Project

MXML Basics – Visual Tags: 

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: 

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: 

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: 

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: 

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: 

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: 

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: 

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: 

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: 

Additional Resources Sample Explorer 70+ Examples http://weblogs.macromedia.com/flex_samples/flex_explorer/explorer.html Documentation http://labs.macromedia.com/wiki/index.php/Flex_Framework#Documentation FlexCoders Mailing List http://groups.yahoo.com/group/flexcoders/ IFBIN – Flex By Example http://ifbin.com/?page=xbe

Thanks!: 

Thanks! Questions / Comments? Contact me darron@darronschall.com http://www.darronschall.com