Building%20Rich%20Internet%20Applications%20with%20Macromedia%20Flex

1
Building Rich Internet Applications with
Macromedia Flex

• Steve DruckerCEOFig Leaf Software

2
Topics

• What is Flex?
• Getting Started
• Interacting with Users
• Working with Data Models
• Retrieving External Data

3
What is Flex?

• J2EE-based application server that compiles
  XML-based syntax into Flash AS/SWF files. Future
  support for .NET is planned.
• Forces model-view-controller approach to
  development
• Analogy CFMLText as MMXMLSWF
• Application can interact with a variety of data
  sources
• Java Objects
• SOAP web services
• Server-side data sources (XML)
• Data may be "baked" into your application at
  compile-time
• Target Uses
• Rich internet applications
• Executive Dashboards, Portal
• E-Commerce
• Example Applications http//www.macromedia.com/d
  evnet/flex/example_apps.html

4
What is Flex (con't)

• Trial and Developer Version
• Generated SWFs expire after 24 hours
• Enterprise Version
• Generated SWF may persist indefinitely

5
Flex Application Elements

• MXML (Flex Markup Language)
• Containers
• ltboxgt, ltcanvasgt, ltcontrolbargt, ltformgt
• Controls
• ltbuttongt,ltcheckboxgt,ltcomboboxgt, etc
• Data Modeling
• ltmodelgt
• Data Communication Services
• ltWebServicegt, ltRemoteObjectgt
• Behaviors
• ltEffectgt, ltFadegt, ltMovegt
• ActionScript 2.0
• Object Oriented
• Strongly Typed
• Case-Sensitive
• Similar to JavaScript / Java

6
Getting Started with Flex

• Installing Flex
• "Brady"
• Hello World

7
Installing Flex

• Flex comes with it's own JRUN-based server
• Can install into CF Enterprise J2EE JRUN server
  as well
• Runs on port 8700 by default
• May be installed on Websphere, BEA, etc (.war
  file)

8
"Brady"

• "Brady" is the code-name for "Macromedia Flex
  Builder" which uses a Dreamweaver-based UI to
  create Flex Applications
• Since Flex code is text-based, you may use any
  editor (including notepad) to write code,
  however, using Brady may give you productivity
  benefits (especially in the short-run)

9
Demo

• "Hello World"

10
Hello World
lt?xml version"1.0" encoding"utf-8"?gt ltmxApplica
tion xmlnsmx"http//www.macromedia.com/2003/mxml
" themeColor"haloSilver"gt ltmxPanel
label"Welcome to Flex" title"Welcome to Flex"gt
ltmxLabel text"Hello World" /gt ltmxLabel
text"Macromedia Flex is FUN!" /gt
lt/mxPanelgt lt/mxApplicationgt
11
Interacting with Users

• Defining User Interfaces
• Creating a Form
• Creating a Binding
• Using the Event Model
• Creating an Event Handler

12
Defining User Interfaces

• Button
• Checkbox
• ComboBox
• DateChooser
• DateField
• DataGrid
• HRule/VRule
• Label
• Link
• List
• Loader

• Menu
• Menubar
• NumericStepper
• Progress Bar
• RadioButton
• RadioButton Group
• Scrollbar
• Text
• Textarea
• TextInput
• Tree

13
Creating a Form

• Use the Form Tags, of course!
• ltmxFormgt
• ltmxFormHeadinggt
• ltmxFormItemgt
• Form Controls
• ltmxTextInputgt
• ltmxTextAreagt
• ltmxDateChoosergt
• ltmxDataGridgt
• ltmxButtongt
• Etc

14
Creating a Binding

• Tying Data in One Object to Another Object
• Use Curly Brace Syntax
• Example

ltmxFormItem label"Enter your last
name"gt ltmxTextInput id"lastname"
/gt lt/mxFormItemgtltmxLabel text"You entered
lastname.text"gt
15
Demo

• Creating a Binding

16
Creating a Binding
lt?xml version"1.0" encoding"utf-8"?gt ltmxApplica
tion xmlnsmx"http//www.macromedia.com/2003/mxml
" themeColor"haloSilver"gt ltmxPanel
title"Simple Form"gt ltmxFormgt ltmxFormItem
label"Enter your last name"gt ltmxTextInput
id"lastname" /gt lt/mxFormItemgt ltmxButton
label"Submit" /gt lt/mxFormgt ltmxLabel
text"You entered lastname.text" /gt
lt/mxPanelgt lt/mxApplicationgt
17
The Event Model

• Flex supports "all the usual suspects" when it
  comes to events
• System Events occur as the result of systematic
  code execution
• draw
• initialize
• load
• User Events
• Click
• Change
• Mousedown
• Etc

18
Creating ActionScript UDF's

• Use the ltmxscriptgt block
• Import external .AS file

ltmxScriptgt lt!CDATA function foo() Void
myLabel.text"Try again"
gt lt/mxScriptgt
ltmxScript source"myactionscript.as" /gt
19
Flex Data Modeling

• The Controller
• Interprets user interaction and converts these to
  programmatic action
• The Model
• Manages data structures, responds to queries
  about state, responds to instructions to change
  state
• The View
• Manages the display

20
Creating Data Models in Flex

• For simple models with no custom methods, use
  ltmodelgt
• For complex models, use Actionscript classes

21
Example Model Definition
ltmxModel id"customer"gt ltnamegt ltfirstgtStevelt/f
irstgt ltlastgtDruckerlt/lastgt lt/namegt ltemailgtsdru
cker_at_figleaf.comlt/emailgtlt/mxModelgt Data can be
accessed as customer.name.first
customer.email
22
Defining Data Validation

• Note that Data validation is performed against
  the MODEL, not against the FORM FIELD
• Validators
• String
• Credit card
• Date
• Email
• Number
• Phone
• Date
• Social Security
• Zip Code

23
Walkthrough

• String Validation

24
String Validation
lt?xml version"1.0" encoding"utf-8"?gt ltmxApplica
tion themeColor"haloSilver" xmlnsmx"http//www
.macromedia.com/2003/mxml"gt ltmxModel
id"cartData"gt ltcustomerlastnamegtlastname.textlt
/customerlastnamegt lt/mxModelgt ltmxStringValidator
field"cartData.customerlastname"
listener"lastname" minLength"1"
maxLength"10" tooShortError"You suck"/gt
ltmxPanel title"Simple Form"gt
ltmxFormgt ltmxFormItem label"Enter your last
name"gt ltmxTextInput id"lastname"
toolTip"Please enter your last name"
/gt lt/mxFormItemgt ltmxButton label"Submit" /gt
lt/mxFormgt ltmxLabel text"You entered
lastname.text" /gt lt/mxPanelgt lt/mxApplicat
iongt
25
Retrieving External Data

• Use the ltmxWebServicegt tag to populate a Flex
  data model
• When referencing data returned from ColdFusion,
  note that variable names must be referenced in
  UPPER CASE

ltmxWebService id"wsCourses"
wsdl"http//localhost/cfun/courses.cfc?wsdl"
load"wsCourses.getcourses()"
result"wsResultHandler(event.result)"/gt
26
Walkthrough

• Accessing CF webservice information and
  displaying in a data grid

27
ColdFusion web service invocation
lt?xml version"1.0" encoding"utf-8"?gt ltmxApplica
tion xmlnsmx"http//www.macromedia.com/2003/mxml
"gt ltmxScriptgt lt!CDATA var myWSData
Array function wsResultHandler(resultArray)Vo
id myWSData result gt lt/mxScrip
tgt ltmxWebService id"wsCourses"
wsdl"http//localhost/cfun/courses.cfc?wsdl"
load"wsCourses.getcourses()"
result"wsResultHandler(event.result)"/gt ltmxMo
del id"CourseData"gt myWSData lt/mxModelgt
ltmxDataGrid id"datagrid1"
dataProvider"CourseData"gtlt/mxDataGridgt lt/mxAp
plicationgt
28
Looping through data using ltmxRepeatergt

• Use the ltmxRepeatergt tag to loop through a data
  structure, generating instances of components

29
Walkthrough

• Using the ltmxRepeatergt Tag

30
Using ltmxrepeatergt
lt?xml version"1.0" encoding"utf-8"?gt ltmxApplica
tion xmlnsmx"http//www.macromedia.com/2003/mxml
"gt ltmxScriptgt lt!CDATA var myWSData
Array function wsResultHandler(resultArray)Vo
id myWSData result gt lt/mxScrip
tgt ltmxWebService id"wsCourses"
wsdl"http//localhost/cfun/courses.cfc?wsdl"
load"wsCourses.getcourses()"
result"wsResultHandler(event.result)"/gt ltmxMo
del id"CourseData"gt myWSData lt/mxModelgt
ltmxPanel vScrollPolicy"on" height"400"
title"Courses"gt ltmxRepeater
dataProvider"CourseData" id"allCourses"gt
ltmxLabel id"mylabels" text"allCourses.currentI
tem.CLASSNAME"/gt lt/mxRepeatergt lt/mxPanelgt lt/
mxApplicationgt
31
Putting it all together

• MXML files ultimately become available as tags to
  be included in a parent component

32
Walkthrough

• Real Estate Example

33
Using 3rd Party Components

• Flex is extendable through SWC files
• Uses the v. 2 Component Framework

34
Summary

• Flex an alternative coding lifestyle!
• Rapidly develop Rich Internet Apps without Flash!
• Resources
• Custom development from www.figleaf.com
• MM Authorized training from training.figleaf.com
• Look for our new free Flex study group, coming
  soon at http//new.figleaf.com/community/studygrou
  ps.cfm