Vancouver
Flex­AIR­Flash
Camp


A
full
day
of
Ruby
on
Rails,
Flex,
Flash,
AIR,
ColdFusion,

Dreamweaver,
Java,
BlazeDS
and
LiveCycle

A Tutorial from Technical Evangelism @ Adobe

Synopsis:

This course covers how to build clients to various server side technologies
and using multiple protocols available to Flex, AIR and Flash developers.
This document contains all the necessary materials to prepare someone to
deliver this course. You will need to download some additional resources as
noted herein.

License:

Other than product images, this work is licensed under a Creative Commons Attribution 3.0 Unported License. You may
redistribute and quote from parts of this article however attribution is expected. There is no
need to seek explicit permission to reuse part of this paper or quote from it.


2009
Special
Interest
Code
Kamp
for
Vancouver
(SICK
Vancouver)



Welcome
to
the
2009
course.
During
the
session,
you
will
learn
how
to
work
with
Flex

Builder
and
various
other
technologies
to
build
compelling
applications.

In
order
to
prepare

you
for
the
course,
you
will
need
to
accomplish
all
the
tasks
in
section
one
of
this
document

prior
to
arriving
in
the
room.




Section
One:
Preparation.......................................................................................................... 4

Preparation...................................................................................................................................................................................... 5

A.
Installing
and
configuring
Adobe
Flex
Builder............................................................................................................5

B.
Set
up
and
account
with
Yahoo
and
download
the
SWC
file. ................................................................................5

C.
Accessing
the
configuring
the
YahooMaps.swc
file....................................................................................................8

D.
Download
the
ESRI
ArcGIS
SWC
library.........................................................................................................................8

E.
Downloading,
installing
and
configuring
Java
JDK
1.5......................................................................................... 10

F:
Setting
the
Java
PATH
and
JAVA_HOME...................................................................................................................... 11

G:
Downloading,
Installing
BlazeDS................................................................................................................................... 14

(Optional)
–
Download
and
install
ColdFusion............................................................................................................. 17

(Optional)
–
Download
and
install
MAMP
(Mac)
or
WAMP
(Windows)............................................................ 18

Section
Two:
The
Labs ............................................................................................................ 18

Lab
1:
Advanced
Hello
World
(Duane)............................................................................................................................. 18

Lab
1:
Solution ............................................................................................................................................................................. 24

Lab
2:
Chromeless
Applications
(NEED) ......................................................................................................................... 25

Lab
2
Solution .............................................................................................................................................................................. 29

Lab
3:
Exporting,
Signing,
Distributing
and
Installing
AIR
(Ross)........................................................................ 30

Lab
4:
Capturing
a
Video
Stream
(Ross) .......................................................................................................................... 33

Lab
4
Solution .............................................................................................................................................................................. 35

Lab
5:
Playing
Video
and
Full
Screen
Interactive
Model
(Need)........................................................................... 35

Lab
5
Solution: ............................................................................................................................................................................. 36

Lab
6:
Audio
and
Advanced
Event
Handling
(NEED)................................................................................................. 36

Lab
6
Solution: ............................................................................................................................................................................. 38

Lab
7:
HTML
(Doug) ................................................................................................................................................................. 40

Lab
7
Solution .............................................................................................................................................................................. 41

Lab
8:
Reading
and
Writing
to
a
local
disk
from
AIR
(Ross)................................................................................... 41

Lab
8
Solution: ............................................................................................................................................................................. 42

Lab
9
–
AIR
and
PDF
(Doug).................................................................................................................................................. 42

Lab
9
Solution .............................................................................................................................................................................. 42

Lab
10:
REST
&
Handling
Basic
Communication
Faults
(Duane) ......................................................................... 42

Lab
8
Solution .............................................................................................................................................................................. 49

Lab
11:
 Interacting
with
Ruby
on
Rails
(Peter,
Dima)........................................................................................... 50

Lab
11
Solution
Code
(Server) .............................................................................................................................................. 50

Lab
11
Solution
Code
(Client)................................................................................................................................................ 50

Lab
12:
Web
Services
Consumption
(Duane) ................................................................................................................ 50

Lab
12
Solution............................................................................................................................................................................ 55

Lab
13:
‐
Another
Alternative
Web
Service .................................................................................................................... 56

Lab
13
Solution............................................................................................................................................................................ 57

Lab
14:
Internationalization
Tricks
(Doug) ................................................................................................................... 58

Lab
15:
MYSQLite
(NEED)...................................................................................................................................................... 58

Lab
15
Solution: .......................................................................................................................................................................... 59

Lab
16:
AIR
Native
Windowing
functionality
(NEED) ............................................................................................... 60

Lab
16
Solution
Code: ............................................................................................................................................................... 61

Lab
17:
A
Simple
Yahoo
Map ................................................................................................................................................ 61

Lab
17
Simple
Yahoo
Map
Solution:................................................................................................................................... 63

Lab
18: Yahoo
Maps
adding
markers
at
specific
lat
and
longs............................................................................. 64

Lab
18
Solution............................................................................................................................................................................ 66

Lab
19:

Polyline
–
adding
custom
shapes
to
your
geo‐spatial
Mashup............................................................. 68

Lab
19
Solution: .......................................................................................................................................................................... 70

Lab
20:
Simple
ESRI
MAP ....................................................................................................................................................... 71

Lab
20
Solution............................................................................................................................................................................ 72

Lab
21:
Adding
CSS
to
style
controls ................................................................................................................................. 73

Lab
21
Solution............................................................................................................................................................................ 75

Lab
22:
SVG
Maps ...................................................................................................................................................................... 76

Lab
22
Solution............................................................................................................................................................................ 78

Lab
23:
‐
Flex
Remoting
Project .......................................................................................................................................... 78

Lab
24
‐
Flex
clients
for
PHP ................................................................................................................................................. 81

Lab
24
Solution............................................................................................................................................................................ 86

Lab
25
‐
Flex
Talks
to
ColdFusion....................................................................................................................................... 86

Lab
26
–
Drawing
Graphics ................................................................................................................................................... 90

Lab
26
Solution............................................................................................................................................................................ 90

Lab
27
–
Detecting
Keystroke
Events ............................................................................................................................... 91





Speakers,
Contributors
(Alphabetical
Order)


Peter
Armstrong
(RuBoss),
Andre
Charland
(Nitobi),
Clive
Goodinson
(Pixton),

Dave

Johnson
(Nitobi),
Ross
Ladell,
Duane
Nickull
(Adobe
Systems
),
Doug
Schmidt
(

EffectiveUI),
Dima
Berastau
(RuBoss)

May
28,
2009
8:00
AM
to
6:00
PM

Location:
Vancouver
Harbour
Centre


Abstract:

During
this
day,
you
might
build
up
to
20
different
code
projects
in
a
largely
(85%)
hands
on

learning
environment
using
Adobe
Flex
and
AIR.



The
session
materials
will
be
available
prior
to
the
class
to
download
and
examine
and

attendees
can
use
their
own
computers.




IMPORTANT: There is a high probability we will not get through the entire course
during the time allotted at JavaOne 2009. This is by design. The course reflects a
best case scenario whereby everyone covers the materials quickly. We felt it
better to have extra rather than not enough content. If we do not get through the
entire course, you can take the remaining labs by yourself as this instructional
handout has sufficient notes to complete everything.

This course is written in such a manner that you should be able to take this alone as a
self paced tutorial, although during the delivery of the course, we will be there to lead you
through it and help in the event you encounter any problems.

We hope you enjoy this course as much as we enjoyed putting it together. Remember –
we are here for you. Donʼt hesitate to ask any questions during the event and afterwards.



Section
One:
Preparation




To
take
this
course,
you
will
need
to
do
the
following:

A. Install
and
configure
Adobe
Flex
Builder
3.0
or
later

B. Set
up
an
account
with
Yahoo
Developer
Network
and
get
an
API
key

C. Download
the
Yahoo
SWC
file

D. Download
the
ESRI
SWC
file

E. Download
and
set
up
the
BlazeDS
Server

F. (Optional)
–
Download
and
install
ColdFusion


 G. (Optional)
–
Download
and
install
MAMP
(Mac)
or
WAMP
(Windows)




Preparation




Notes:



This
lab
assumes
you
need
to
install
everything
from
scratch.

While
it
is
possible
to
install
a

standalone
Flex
Builder
(covered
in
these
instructions),
it
is
also
possible
to
install
Flex

Builder
as
an
Eclipse
Plugin.

Please
seek
out
and
follow
the
instructions
from
the
Adobe

website
if
you
wish
to
install
the
plugin
version.


Where
possible,
notes
are
augmented
for
Mac
OSX,
Linux
and
Windows.




A.
Installing
and
configuring
Adobe
Flex
Builder.



1. Take
a
browser
and
go
to

http://www.adobe.com/cfusion/entitlement/index.cfm?e=flexbuilder3
and

download
the
Flex
Builder
trial.

2. Open
up
the
disk
image
and
follow
the
on
screen
instructions.

3. Note
where
you
set
up
your
workspace.

This
is
where
you
will
place
all
the
files
you

work
on
and
various
libraries
needed
for
this
course.



4. Mac
OSX:
By
default,
this
will
be
under
your
~home_directory/Documents/Flex

Builder
3.

5. Windows:
By
default,
this
will
be
under
your
c:\Program
Files\Adobe\Flex
Builder
3.



LINUX
ONLY



6. For
the
Linux
version,
download
the
plugin
from

http://labs.adobe.com/downloads/flexbuilder_linux.html.

7. Run
the
installer
either
marking
it
as
executable
(chmod
+x)
or
by
using
a
shell
to

execute
it
(sh
flexbuilder_linux_install_a4_081408.bin).



8. When
prompted,
specify
whether
to
install
Flash
Player
9
(note
that
this
is
an

updated
version
of
Flash
Player
9
and
that
Flex
Builder
Linux
will
work
with
earlier

versions
of
Flash
Player
9
for
Linux).
This
is
the
debug
version
of
Flash
Player
9,

which
is
required
for
debugging
support
and
exception
display.




B.
Set
up
and
account
with
Yahoo
and
download
the
SWC
file.




1.

Use
your
browser
and
navigate
to
https://developer.yahoo.com/wsregapp/

2.

Sign
in
if
you
already
have
an
account
or
register
for
a
new
one.

If
you
have
already

registered
for
an
API
key,
you
can
see
it
via
the
hyperlink
near
the
top
of
the
page
as
shown

below:




9. If
you
do
not
have
an
API
key,
fill
in
the
form
and
agree
to
any
license
terms
as
shown

below:








 10. Click
“Submit”
and
a
key
will
be
generated
for
you.

Make
sure
you
save
it
somewhere

in
a
text
file
on
your
desk.





C.
Accessing
the
configuring
the
YahooMaps.swc
file.



1.
Next,
you
need
to
download
and
install
the
ShockWave
Component
(SWC)
file.

Aim
your

browser
at
http://developer.yahoo.com/flash/maps/


2.
Save
the
zip
to
your
hard
drive
and
open
the
archive.

You
will
see
a
file
called

YahooMaps.swc
inside
the
zip
as
shown
below.




3.

Remember
the
location
of
this
file
as
you
will
need
it
for
Labs
2,3,4.


D.
Download
the
ESRI
ArcGIS
SWC
library.



1.
Navigate
to

http://resources.esri.com/arcgisserver/apis/flex/index.cfm?fa=downloadDisclaimer

2.
agree
to
the
terms
and
conditions
of
the
license
and
click
“Download”
as
shown
below.

 

3.
Save
the
file
to
your
hard
drive
as
you
will
require
it
for
labs
5,6,7.




H. Unzip
the
file
and
you
will
see
a
ShockWave
Component
file
as
shown
below




 I. Remember
the
location
of
this
file
as
you
will
need
it
for
labs
4,5,6.

That
is
all
for
now
–
now
you
can
start
the
labs.


E.
Downloading,
installing
and
configuring
Java
JDK
1.5



This
courses
uses
a
modified
BlazeDS
that
contains
some
extra
files
not
found
on
the

standard
BlazeDS
available
from
Adobe’s
Open
Source
Website.

In
order
to
install
and

configure
BlazeDS,
you
will
need
to
have
a
Java
JDK
on
your
system
and
the
JAVA_HOME

Environmental
variable
set
properly
as
well
as
your
path.




Note: If you already have Java JDK 1.5 (but not 1.6), please move ahead to the next
step. This lab was tested with java version 1.5.0_16. To find out what version of Java
you have on your system, open up a command window (Windows) or Terminal (Mac,
Linux, Unix) and type “java –version” then hit the enter key.

If you already have 1.5 installed, skip ahead to Section 2 to check classpath and set
JAVA_HOME.

1. Navigate with a web browser to

http://java.sun.com/javase/downloads/index_jdk5.jsp

2. Navigate down the page until you see the download for JDK 5.0 with Java EE.
Click on download.

3. Select the correct Operating System for yourself, accept the license terms then
click download as shown below
 4. On the next screen select the download again and click the button.

5. Save the files to your desktop, then follow the instructions for your operating
system to complete the installation process.

F:
Setting
the
Java
PATH
and
JAVA_HOME


This assumes you have Java JDK 1.5 installed as per Section 1. To test if your path is
set properly, open up a command window (Windows) or Terminal (Mac, Linux, Unix) and
type “java –version” then hit the enter key. If you see the screen below, your path is set.

If you see something else, you have to set your path.

Windows
1. Click “start” and highlight “My Computer” with your mouse. Right click to bring up
the popup menu and select “Properties” and click on it as shown below.

2. This will bring up a properties pane with several options. Click on the tab labelled
“Advanced”
3. Click “Environment Variables”. This brings up the Environmental Variables
properties pane. If there is already a PATH variable defined, click on the “Edit”
button below “User variables for <username>” and add the path to your java JDK
bin. If there is no PATH variable defined, click “New”.

4. This path will be something like “c:\java1_5\jdk\bin. Make sure in that directory
there is a “java.exe” and a “javac.exe” in that directory.
 5. Under System variables, if there is no JAVA_HOME variable, click “New” and add
one. The value only have to point at the root directory of your Java installation.
This MUST contain a subfolder called \bin. The path will be something like
c:\java1_5\jdk.

6. Click “Okay” after adding these variables and close all the dialogs.

7. To test, open a command window (start -> run -> “cmd”) and type in “java –
version” and hit return. Then type “javac” and hit return. If you do not get both
commands recognized as shown below, consult the Sun documentation on setting
the classpath for your system.
G:
Downloading,
Installing
BlazeDS


1. Grab a browser and navigate to the website at

http://www.web2open.org/downloads/BlazeDS.zip and download the zip file.

2. Unzip the directory to your hard drive and copy the BlazeDS Root Folder over to a
permanent location on your hard drive. This folder should contain the following
folders and files as shown below:

 1. Next,
start
up
the
BlazeDS
server.

To
do
this,
open
a
Command
Window
(or
shell)
and

navigate
to <Course_Root>\BlazeDS\sampledb
(if
on
OSX,
use
forward

slashes
instead
of
back
for
path).




NOTE:
You
must
have
a
Java
JDK
installed
and
configured
according
to
the

instructions

in
the
previous
section
of
this
setup
manual.




a. On
Windows,
type
in
“startdb”.

This
should
start
the
database.



C:\Documents and
Settings\Administrator\Desktop\MAX2008_BuildingServiceClients\s
ampledb>startdb

C:\Documents and
Settings\Administrator\Desktop\MAX2008_BuildingServiceClients\s
ampledb>java -cp hsqldb.jar org.hsqldb.Server
[Server@1d58aae]: [Thread[main,5,main]]: checkRunning(false) entered
[Server@1d58aae]: [Thread[main,5,main]]: checkRunning(false) exited
[Server@1d58aae]: Startup sequence initiated from main() method
[Server@1d58aae]: Loaded properties from [C:\Documents and
Settings\Administrato
r\Desktop\MAX2008_BuildingServiceClients\sampledb\server.properties]
[Server@1d58aae]: Initiating startup sequence...
[Server@1d58aae]: Server socket opened successfully in 40 ms.
[Server@1d58aae]: Database [index=0, id=0,
db=file:flexdemodb/flexdemodb, alias=
flexdemodb] opened sucessfully in 1512 ms.
[Server@1d58aae]: Startup sequence completed in 1552 ms.
[Server@1d58aae]: 2008-11-25 12:29:14.087 HSQLDB server 1.8.0 is
online
[Server@1d58aae]: To close normally, connect and execute SHUTDOWN
SQL
[Server@1d58aae]: From command line, use [Ctrl]+[C] to abort
abruptly








b. On
Mac
or
Linux,
open
a
terminal
and
type
sudo
sh
./startdb.sh



 





2. Now
start
the
servers.



a. On
Windows,
do
this
by
changing
directories
until
you
are
at
the

<Course_Root>\BlazeDS\tomcat\bin
directory
(note:
use
forward

slashes
on
Unix
based
Systems)
and
type
catalina run

C:\Documents and Settings\Administrator\Desktop\MAX2008_BuildingServiceClients\t

omcat\bin>catalina run

Using CATALINA_BASE: C:\Documents and Settings\Administrator\Desktop\MAX2008_B

uildingServiceClients\tomcat
Using CATALINA_HOME: C:\Documents and Settings\Administrator\Desktop\MAX2008_B
uildingServiceClients\tomcat
Using CATALINA_TMPDIR: C:\Documents and Settings\Administrator\Desktop\MAX2008_B
uildingServiceClients\tomcat\temp
Using JRE_HOME: C:\Program Files\Java\jdk1.6.0_10
Nov 25, 2008 12:34:20 PM org.apache.catalina.core.AprLifecycleListener init
INFO: The Apache Tomcat Native library which allows optimal performance in produ
ction environments was not found on the java.library.path: C:\Program Files\Java
\jdk1.6.0_10\bin;.;C:\WINDOWS\Sun\Java\bin;C:\WINDOWS\system32;C:\WINDOWS;C:\CFu
sionMX7\verity\k2\_nti40\bin;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\
Wbem;C:\Program Files\ATI Technologies\ATI Control Panel;C:\Program Files\PC-Doc
tor for Windows\services;C:\Program Files\ATI Technologies\Fire GL 3D Studio Max
;C:\WINDOWS\Downloaded Program Files;C:\Program Files\Common Files\MXI;C:\Progra
m Files\Common Files\Adobe\AGL;C:\Program Files\QuickTime\QTSystem\
Nov 25, 2008 12:34:20 PM org.apache.coyote.http11.Http11Protocol init
INFO: Initializing Coyote HTTP/1.1 on http-8400
Nov 25, 2008 12:34:20 PM org.apache.catalina.startup.Catalina load
INFO: Initialization processed in 432 ms
Nov 25, 2008 12:34:20 PM org.apache.catalina.core.StandardService start
INFO: Starting service Catalina
Nov 25, 2008 12:34:20 PM org.apache.catalina.core.StandardEngine start
INFO: Starting Servlet Engine: Apache Tomcat/6.0.14
Nov 25, 2008 12:34:24 PM org.apache.coyote.http11.Http11Protocol start
INFO: Starting Coyote HTTP/1.1 on http-8400
Nov 25, 2008 12:34:24 PM org.apache.jk.common.ChannelSocket init
INFO: JK: ajp13 listening on /0.0.0.0:8009
Nov 25, 2008 12:34:24 PM org.apache.jk.server.JkMain start
INFO: Jk running ID=0 time=0/20 config=null
Nov 25, 2008 12:34:24 PM org.apache.catalina.startup.Catalina start
INFO: Server startup in 3988 ms
 b. On
Mac
OSX
and
Linux,
do
this
by
changing
directories
until
you
are
at
the

<Course_Root>/BlazeDS/tomcat/bin
directory
and
type


sudo sh ./catalina.sh run






3. You
should
be
able
to
validate
the
servers
are
up
and
running
by
hitting
the
following

URL:


http://localhost:8400/xml/Wines.xml








4. If
you
have
any
problems
with
this,
When
you
come
into
the
classroom
and
try
to

start
this
up,
please
put
your
hand
up
and
a
Teaching
Aide
will
be
right
over.






(Optional)
–
Download
and
install
ColdFusion




With
a
browser,
navigate
to
the
ColdFusion
Download
page
at

http://www.adobe.com/products/coldfusion/
and
follow
the
instructions
on
screen.

We

will
do
one
lab
to
demonstrate
Flex/AIR
to
CF
functionality.


(Optional)
–
Download
and
install
MAMP
(Mac)
or
WAMP
(Windows)



If
you
are
on
a
Mac,
download
and
install
MAMP
‐
http://www.mamp.info/en/index.html

If
you
are
on
a
Windows
Machine,
download
and
install
WAMP
‐

http://www.wampserver.com/en/

Follow
the
instructions
for
your
particular
operating
system
as
per
the
docoments

describing
installation.

Additionally,
download
and
install
the
Zend
Framework
for
AMP‐PHP
connectivity
from

http://www.zend.com/en/







Section
Two:
The
Labs




Lab
1:
Advanced
Hello
World
(Duane)



This
first
exercise
is
designed
to
get
you
familiar
with
Flex
Builder.

For
those
of
you
who
are

advanced
or
have
used
Flex
before,
please
lend
a
hand
to
some
of
the
beginners
who
are

about
to
build
their
first
application.

This
first
lab
is
designed
to
demonstrate
the
following
points:


1.
Setting
up
a
new
project
in
Flex
Builder

2.
Using
MXML
and
AS3
in
one
file

3.
Building
and
running
your
application

4.
Data
binding

5.
Variables
and
scoping

6.
Events
and
event
handling

7.
Setting
values
for
components

8.
Setting
properties
for
components

9.
Writing
your
first
AS2
function
and
return
type

10.
Typing
an
object


1. Open
up
Flex
Builder.

 a. Mac
OSX:
Launch
Finder,
look
under
applications
for
Flex
Builder.

b. Windows:
start
‐>
All
Programs
‐>
Adobe
‐>
Flex
Builder

c. Linux:
Launch
the
Eclipse
Plug
in.



2. Set
up
a
new
Flex
Builder
Project.

To
do
this,
use
the
top
menu




File -> New -> Flex Project







3. Give
your
new
project
a
name
in
the
next
dialog
box.

By
convention,
we
usually
use

“Hello
World”
but
you
can
pick
anything.

 




4. Ensure
that
Application
Server
Type
is
set
to
“none”
and
select
the
“Desktop

application
(runs
in
Adobe
AIR)”
options
as
shown
above.

Click
“Finish”.

5. You
will
now
see
your
new
workbench
view
in
the
Flex
Builder
perspective.

Familiarize
yourself
with
the
interfaces.

This
is
the
design
perspective:




Navigator
Pane

Project

Pane


Components

Pane
 Properties

Console
 Inspector






6. This
is
the
source
perspective:

 

7. While
in
the
Design
perspective,
drag
a
Panel
onto
your
project.



8. Add
a
horizontal
slider,
a
button
and
a
label
to
your
project
as
shown
below.









9. Switch
to
code
view.

We
are
going
to
make
the
button
make
the
panel
(and
therefore

everything
added
to
the
panel)
invisible.

Note
how
the
code
is
already
laid
out
but

 might
not
be
in
the
same
order
as
the
graphical
hierarchy.





Best
Practice!



Eclipse
let’s
you
move
entire
blocks
of
code
up
and
down
if
you
highlight
them,
hit
the

“alt”
button
and
move
them
with
the
arrow
keys.

It
is
a
good
practice
to
keep
your
code

aligned
with
the
vertical
placement
of
your
graphical
components.



10. Change
the
Panel
component
in
the
code
view
as
shown
(add
an
ID):







<mx:Panel id="myPanel" x="10" y="10" width="581" height="261" layout="absolute">






11. Change
the
line
of
code
for
the
button
component
as
follows:




<mx:Button x="246" label="Goobye" click="myPanel.visible=false" y="190" />

12. Now
run
your
project
and
you
should
see
your
panel
disappear.

To
run
your
project,

hit
the
small
green
arrow
button
up
near
the
top
left
hand
side
of
Flex
Builder.








13. When
you
click
the
“Goodbye”
button,
your
program
should
become
invisible
(note

that
it
does
not
terminate,
only
set
the
“visible”
property
to
“false”.


Terminate
the

application.



14. Go
back
into
Flex
Builder
and
switch
to
the
source
view.

Add
the
following
code
right

under
the
line
that
reads

<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"

layout="absolute">.

Instructor:

Explain
the
various
constructs.




<mx:Script>
<![CDATA[
[Bindable]
private var textSize:Number = 12;

private function changeSize():void

{
textSize = mySlider.value;
}
 ]]>
</mx:Script>



15. Now
change
the
line
of
code
that
contains
the
label
as
shown
below.

Instructor:

Explain
the
curly
braces.







<mx:Label fontSize="{textSize}" id="myLabel" left="10" right="10" top="10"
text="Where the 2.0 are you?" height="122" textAlign="center"/>





16. Finally,
add
in
the
code
to
add
control
from
the
horizontal
slider
as
shown
below.





<mx:HSlider change="changeSize()" x="200.5" y="154" allowTrackClick="true"
id="mySlider" minimum="10" maximum="72" snapInterval="2"/>








17. Run
the
Application.

Use
the
slider
to
change
the
text
size.








18. Congratulations
if
this
is
your
first
Flex/AIR
application!




Lab
1:
Solution



NOTE:
your
root
element
will
be
“Application”
if
you
chose
to
build
a
Flex
application.

If

you
chose
AIR,
the
root
element
will
be
“WindowedApplication”.


<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
[Bindable]
private var textSize:Number = 12;

private function changeSize():void

{
textSize = mySlider.value;
}
]]>
</mx:Script>
<mx:Panel id="myPanel" x="10" y="10" width="581" height="261" layout="absolute">
<mx:Label fontSize="{textSize}" id="myLabel" left="10" right="10" top="10"
text="Where the 2.0 are you?" height="122" textAlign="center"/>
<mx:HSlider change="changeSize()" x="200.5" y="154" allowTrackClick="true"
id="mySlider" minimum="10" maximum="72" snapInterval="2"/>
<mx:Button x="246" label="Goobye" click="myPanel.visible=false" y="190" />
</mx:Panel>
</mx:Application>

Lab
2:
Chromeless
Applications
(NEED)
 



Skills
Learned:
Setting
up
an
application
with
no
system
chrome,
using
CSS
within
an

application,
modifying
the
application
descriptor
file,
writing
a
function
for
an
event
listener

and
passing
the
event
object
to
a
function,
calling
stage.nativeWindow.move()
and

stage.nativeWindow.close().

Time
12‐15
minutes.

Presenter:

????


As
teacher,
you
should
take
the
time
to
give
a
thorough
discussion
on
chromeless
apps

including
how
to
make
one
from
scratch.

The
lab
will
contain
the
project
outline
and
basic

assets
but
attendees
will
need
to
go
through
the
exercise
from
start.

The
project
will
change
at

runtime
from
an
Apple
shaped
application
to
a
Pear
shaped
application.

The
following
components
will
be
discussed

stage.nativeWindow
.startMove()

stage.nativeWindow.close()


mainPanel.addEventListener(MouseEvent.MOUSE_DOWN,
startMove
)

Discuss
how
you
have
to
feed
the
“event”
object
to
the
event
handler
and
why
this
is
done.


What
values
might
people
want
to
read
form
the
event
object?

 

AIRBootCamp3:
Chromeless
Application.


For
this,
attendees
will
start
with
a
new
project

with
two
graphics
–
an
apple
and
a
pear
with
transparent
backgrounds.

Demo
will
first
build

the
project,
then
take
attendees
through
all
the
steps
to
making
it
chromeless.

These

include:

1. Modify
the
App
Descriptor
file

(transparency‐true,
chrome=none)
(describe
what

this
does,
what
the
file
is
for)

2. Adding
“showFlexChrome=”false”

3. Adding
the
CSS
style
block
shown
below

4. How
to
add
event
handlers
so
you
can
move
your
app

5. How
to
replace
the
system
chrome
“close()”
function


Instruction:

1. Import
the
project
to
Flex
Builder
from
your
attendee
folder
~/attendees.

The

project
name
is
AIRBootCamp2‐TransparentApp.

2. Open
the
project
and
open
both
the
main.mxml
and
main‐app.mxml
files.

3. Run
the
project
to
see
what
happens.

Note
that
we
will
get
rid
of
the
chrome
in
the

next
steps.

It
should
look
like
this:

 






4. In
the
main‐app.mxml
application
descriptor
file,
find
and
modify
these
two
lines
of

code
by
un‐commenting
them.

Note:

They
are
usually
around
line
45
or
so.



<!-- The type of system chrome to use (either "standard" or "none"). Optional. Default
standard. -->

<systemChrome>none</systemChrome>

<!-- Whether the window is transparent. Only applicable when systemChrome is none.
Optional. Default false. -->
<transparent>true</transparent>




5. Save
and
close
the
application
descriptor
file.

Then
try
running
the
application.

Note

the
ugly
side
effect.



6. Add
the
following
attribute
to
the
Root
Element
of
WindowedApplication



showFlexChrome="false"





7. Add
an
<mx:Style> tag
(don’t
forget
to
close
it)
directly
under
the
root
element,

the
add
the
following
CSS.

Note:
you
can
tell
attendees
to
cheat
by
opening
up
the

finished
project
and
cutting
and
pasting.





<mx:Style>

Application 

{
/*make app window transparent*/
background-color:"";
 background-image:"";
padding: 0px;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
</mx:Style>



8. Discussion
point:
why
does
the
<mx:Style>
element
NOT
use
the
CDATA
declaration?



9. Run
the
project.

It
should
look
good
but
we
still
cannot
move
it
and
the
close
button
does
not

work.

Discussion:
Why?



10. Time
for
some
scripting
to
control
these
things.

First
we
add
the
functionality
to
close
the

application.

Add
this
code
in
the
<mx:Script>
block:




import mx.events.CloseEvent;

public function closeApp():void

{
stage.nativeWindow.close();
}

and
add
this
line
to
the
<mx:Button>
to
make
the
button
call
the
function:


click="closeApp()"




Now
ask
the
attendees
to
run
it
and
test
the
close
button.

It
should
work.
Next
we

have
to
deal
with
the
moving
of
the
application.



11. inside
the
init()
function,
add
the
following
line
of
code:



mainPanel.addEventListener(MouseEvent.MOUSE_DOWN, startMove )






12. then
add
this
function
inside
the
<mx:Script>
element:






public function startMove(event:MouseEvent):void

{
stage.nativeWindow.startMove();
 }





13. run
your
application.
You
should
be
able
to
move
it
by
dragging
it
with
the
mouse!




Lab
2
Solution


<?xml version="1.0" encoding="utf-8"?>

<mx:WindowedApplication name="MyApple" creationComplete="init()"
showFlexChrome="false" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style>
Application
{
/*make app window transparent*/
background-color:"";
background-image:"";
padding: 0px;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
</mx:Style>
<mx:Script><![CDATA[
import flash.display.Bitmap;
import mx.events.CloseEvent;

public function init():void

{
// Move the app when the panel is dragged
mainPanel.addEventListener(MouseEvent.MOUSE_DOWN, startMove )
}

public function startMove(event:MouseEvent):void

{
stage.nativeWindow.startMove();
}

public function closeApp():void

{
stage.nativeWindow.close();
}
]]></mx:Script>

<mx:Image id="mainPanel" x="46" y="0" width="363" height="343"

horizontalAlign="center" source="assets/apple.gif" scaleContent="true"
autoLoad="true"/>

<mx:Button x="182" click="closeApp()" y="277" label="Close" width="60" height="21"/>

<mx:Text x="145" y="166" text="This is an Adobe AIR Application. AIR allows you to
define applications that break existing boundaries (examples - rectangles)." width="137"
height="121" fontFamily="Verdana" fontWeight="bold" fontSize="10" textAlign="center"/>
<mx:Button x="181" y="106" label="Pear" width="60"
click="mainPanel.source='assets/pear.gif'"/>

<mx:Button x="182" y="136" label="Apple" click="mainPanel.source='assets/apple.gif'"/>

</mx:WindowedApplication>

Lab
3:
Exporting,
Signing,
Distributing
and
Installing
AIR
(Ross)



Skills
learned:

How
and
where
to
get
a
certificate,
how
to
export
an
AIR
application
(note:

uses
the
previous
example
as
basis
for
exporting),
self
signed
certs
vs
real
certs,
installing

AIR,
AIR
badge.


Time:
10‐15
minutes

Presenter:
Ross
Ladell

Ross
will
demonstrate
how
to
export,
sign,
distribute
and
install
the
AIR
application
from
the

first
Lab.

If
you
want
to
do
this,
you
will
need
to
make
a
self
signed
certificate.

Points
to
cover:

Install
Badges,
Signed
vs.
Unsigned
certificates.

This
exercise
is
to
demonstrate
how
to
export,
sign
and
distribute
AIR
applications.

Use
the

preceding
project
(keep
loaded
in
FB3)
and
take
the
following
steps.



1. Click
“File
‐>
Export
‐>
Release
Build”

The
following
dialog
will
appear.

Select
your

project
and
click
“next”.



 



2. You
can
now
sign
your
application.

For
production,
you
will
want
a
real
certificate

registered
with
a
CA
working
with
the
AIR
runtime.

For
now,
select
“Create”.

Fill
out

the
following
dialog
box.

NOTE:
Self
signed
certificates
are
basically
worthless.



 



3. Pick
your
cert
and
sign
it.
Click
Next.

Note:
In
a
real
production
environment,
you

would
select
the
CA
assured
cert.






 

4. Select
the
parts
you
want
to
export
and
client
“finish”








5. The
*.AIR
file
is
now
ready
to
be
distributed.

Find
it
and
install
it.




Lab
4:
Capturing
a
Video
Stream
(Ross)



Skills
Learned:
How
to
interact
with
local
system
resources
(camera),
how
to
use
the
MX:

VideoDisplay,
movie
codecs
(discussion),
importing
a
resource
(flash.media.Camera;).

Time:
8‐12
minutes


Presenter:
Ross
Ladell

VIDEO
–
learning
how
to
work
with
Video.

AIR
has
the
same
basic
video
classes
as
Flash.


You
can
access
system
resources
such
as
cameras.

We
will
build
this
file
from
the
ground
up.

 

The
main
point
of
this
project
is
to
demonstrate
how
to
work
with
capturing
video
using
the

flash.media.camera
class.

Secondary
Goals:

Layouts.

This
project
makes
use
of
layout
managers
including
how
to
use

“vertical”
vs
“absolute”,
using
the
anchors,
using
%
vs
absolute
values
etc.



AIRBootCamp4‐VideoCapture:
Building
a
simple
AIR
application
to
capture
the
camera
input

stream
and
display
it
to
a
video
object.
Adding
a
Play
button.

This
will
be
built
from
scratch

so
no
attendee
project
exists.



NOTE:
you
need
a
camera
for
this
to
work!

Instructions:

1. start
a
new
project
named
“AIRBootCamp3‐VideoCapture”

2. Add
a
Panel,
an
<mx:VideoDisplay>
and
a
button.

3. Name
the
Video
Display
“myVideo”

4. Add
a
script
block
and
import
the
following
classes:

import flash.media.Camera;
import flash.display.Bitmap;
import mx.events.CloseEvent;





5. Create
a
new
Camera
variable
and
add
the
following
function





public var myCamera:Camera;

public function startCam():void

{
myCamera = Camera.getCamera();
myVid.attachCamera(myCamera);
myVid.autoPlay;
}




6. Wire
up
the
button
to
the
function
(click
=
startCam())

7. Run
the
program.


Lab
4
Solution

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Script>
<![CDATA[
import flash.media.Camera;
import flash.display.Bitmap;
import mx.events.CloseEvent;

public var myCamera:Camera;

public function startCam():void

{
myCamera = Camera.getCamera();
myVid.attachCamera(myCamera);
myVid.autoPlay;
}
]]>
</mx:Script>
<mx:Panel id="myPanel" width="370" height="345" top="10"
left="10" right="10" layout="absolute" horizontalAlign="center">

<mx:VideoDisplay id="myVid" width="330" bottom="45" right="10" height="250"/>

<mx:Button label="Capture" x="139.5" y="268" click="startCam()"/>

</mx:Panel>
</mx:WindowedApplication>


Lab
5:
Playing
Video
and
Full
Screen
Interactive
Model
(Need)




Skills
Learned:
Replacing
H.264
codec
in
full
screen
interactive
mode,
difference
between

AIR
and
Flex
in
terms
of
full
screen
capabilities,
bundling
resources
with
applications.


Time:
10
minutes

Presenter:
??????


AIRBootCamp4:
An
extension
of
the
video
project
to
simply
demonstrate
the
H.264
codecs.


This
project
will
make
use
of
one
asset
–
the
HDTV
video.

Attendees
will
write
it
from

scratch.


This
project
will
also
demonstrate
one
new
feature
of
AIR
–
full
screen
mode.

The

full
screen
mode
combined
with
HDTV
looks
pretty
slick.


Instructions:

1. You
will
need
to
import
the
AIRBootCamp4‐FullScreenVideo
project
under
the

attendees
folder.

2. Note
the
movie
is
in
HD
but
the
audio
might
not
play
(codecs).

3. Add
the
code
below
and
run


Lab
5
Solution:



<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
applicationComplete="init()" layout="absolute">
<mx:Script>
<![CDATA[
private function init():void
{
stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
}
]]>
</mx:Script>
<mx:VideoDisplay width="100%" height="100%" source="DWStinger.mov" autoPlay="true"/>
</mx:WindowedApplication>

Lab
6:
Audio
and
Advanced
Event
Handling
(NEED)



Skills
learned:

working
with
Audio,
including
a
custom
library
component
in
an
AIR

application,
namespace
qualification
of
components,
soundChannel
and
play,
pause
and
stop.

Time:
10‐15
minutes


Presenter:
?????


This
project
helps
attendees
understand
how
to
use
audio.
Since
this
is
not

specific
to
AIR<
it
may
be
dropped
until
later
but
we
encourage
you
to


complete
this
on
your
own.

It
combines
several
aspects
of
the
previous
lessons

including
building
chromeless
apps,
events,
opening
local
assets
and
how
to

bundle
(using
[embed])
audio
files
vs
streaming.

 

Instructions:




1. Open
up
the
AIRBootCamp5
project
under
the
attendees
folder.



2. Note
the
structure
of
the
folders
~/com/fusiox/ui/Visualization.as




3. Add
it
to
the
project
by
adding
this
line
to
the
root
element:




xmlns:fx="com.fusiox.ui.*"




4. Add
it
into
the
project
(inside
the
mx:TitleWindow)
by
adding
the
following
line
to

the
source
code
(in
source
view):



<fx:Visualization id="vis" width="460" height="70" x="10" y="43"/>



5. In
order
to
control
sound,
you
need
a
way
to
track
where
you
are
in
the
soundAsset.


Using
MXML,
declare
a
variable
as
shown
(find
the
comment
and
add
the
line
under

it)

<!--TODO: Add a variable here using MXML-->
<mx:Number id="myPos">0</mx:Number>



6. Load
up
the
media
asset
by
locating
the
comment
and
adding
the
three
lines
below
it.




<!--TODO: add theURLRequest, Sound and SoundChannel-->

<net:URLRequest id="myURLReq" url="assets/22ndCentury_509.mp3" />
<media:SoundChannel id="mySoundChannel" />
<media:Sound id="mySound" />





1. Now
wire
up
the
URLRequest
by
adding
the
second
function
call
triggered
from
the

creationComplete
event.




creationComplete="init(), mySound.load(myURLReq)"



2. Inside
the
control
bar,
add
the
following
buttons:

<!-- Add three buttons-->
<mx:Button id="play" label="PLAY" click="mySoundChannel = mySound.play(myPos,0,null);
prog.text='Playing'" />

<mx:Button id="pause" label="PAUSE" click="myPos = mySoundChannel.position;

mySoundChannel.stop(); prog.text='Paused'" />

<mx:Button id="stop" label="STOP" click="mySoundChannel.stop(); myPos=0;

prog.text='Stopped'" />



3. Run
the
damn
program
and
rock
out
to
the
fine
tunes
from
22nd
Century!

(http://www.myspace.com/22ndcentury)


Lab
6
Solution:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication showFlexChrome="false" xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:fx="com.fusiox.ui.*" xmlns:net="flash.net.*" xmlns:media="flash.media.*"
layout="absolute" creationComplete="init(), mySound.load(myURLReq)" >
<mx:Style>
Application
{
/*make app window transparent*/
background-color:"";
background-image:"";
padding: 0px;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
HSlider
{
labelOffset: 19;
thumbOffset: 0;
tickOffset: -2;
tickLength: 0;
showTrackHighlight: true;
borderColor: #ff0000;
trackColors: #000000, #ffffff;
themeColor: #ffff00;
fillColors: #ff0000, #ffffff, #ff0000, #eeeeee;
 }
Button
{
cornerRadius: 12;
textIndent: 0;
letterSpacing: 0;
highlightAlphas: 0.28, 0.68;
fillAlphas: 0.43, 0.82, 0.75, 0.65;
fillColors: #cc3366, #ff0000, #ff0000, #000000;
color: #000000;
textRollOverColor: #ffffff;
borderColor: #aab3b3;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.events.CloseEvent;
import flash.display.Bitmap;

private function init():void

{
// register listeners
mainPanel.addEventListener(MouseEvent.MOUSE_DOWN, startMove);
}

// This makes the close button work.

public function closeEvent(event:CloseEvent):void
{
stage.nativeWindow.close();
}

// Move the app when the panelis dragged

public function startMove(event:MouseEvent):void
{

nativeWindow.startMove();
}
]]>
</mx:Script>

<!--TODO: Add a variable here using MXML-->

<mx:Number id="myPos">0</mx:Number>

<net:URLRequest id="myURLReq" url="assets/509.mp3" />

<media:SoundChannel id="mySoundChannel" />
<media:Sound id="mySound" />
<mx:TitleWindow mouseMove="mainPanel.addEventListener(MouseEvent.MOUSE_DOWN,
startMove)" id="mainPanel" title="MP3 Player" showCloseButton="true" layout="absolute"
close="closeEvent(event)"
borderColor="#F02323" themeColor="#FE0E02" cornerRadius="12" alpha="1.0"
width="500" height="199">
<mx:Text id="prog" width="125" x="195"/>
<mx:Label text="Status:" x="152"/>
<fx:Visualization id="vis" width="460" height="70" x="10" y="43"/>
<mx:ControlBar>
<mx:Button id="play" label="PLAY" click="mySoundChannel =
mySound.play(myPos,0,null); prog.text='Playing'" />
<mx:Button id="pause" label="PAUSE" click="myPos = mySoundChannel.position;
mySoundChannel.stop(); prog.text='Paused'" />
<mx:Button id="stop" label="STOP" click="mySoundChannel.stop(); myPos=0;
prog.text='Stopped'" />
<mx:Label text="Volume"/>
<mx:HSlider mouseDown="mainPanel.removeEventListener(MouseEvent.MOUSE_DOWN,
startMove)"/>
</mx:ControlBar>

</mx:TitleWindow>
</mx:WindowedApplication>







Lab
7:
HTML
(Doug)



Skills
Learned:
Working
with
HTML
in
AIR,
creating
a
custom
browser
(walking
through

how
to
use
the
HTML
control
plus
some
nav
buttons).

Time:
10‐15
minutes

Presenter:
Doug
Schmidt


Demonstrates
the
WebKit
engine
including
a
discussion
on
how
much
is
available
from

Webkit
in
AIR.

Attendees
will
write
this
project
from
scratch
and
learn
how
to
set
the
URL,

how
it
handles
international
characters,
CSS
and
AJAX.








Instructions:



Build
this
from
Scratch
(new
­>
Project
­>
AIR…)



Lab
7
Solution



<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical" cornerRadius="12" backgroundGradientAlphas="[1.0, 1.0]"
backgroundGradientColors="[#FD0303, #FEBCBC]">

<mx:Text text="Enter URL and hit enter" fontFamily="Arial"

fontSize="16" fontWeight="bold"/>

<mx:TextInput id="urlTxt" width="100%" enter="html.location=urlTxt.text"

text="http://www.adobe.com" />

<mx:HTML id="html" width="100%" height="100%" location="http://www.google.com" />

</mx:WindowedApplication>





Lab
8:
Reading
and
Writing
to
a
local
disk
from
AIR
(Ross)



Skills
Learned:
How
AIR
can
interact
with
the
local
hard
drive,
how
the
rich
text
editor

works,
how
the
fileSystem
class
works.

Time:
10‐15
minutes

Presenter:
Ross
Ladell


In
this
example
when
the
user
clicks
the
save
button
the
application
pops
up
the
“Save
As”

dialog
which
lets
the
user
select
which
file
they
would
like
to
save
the
contents
of
the

RichTextEditor
to.

When
the
user
has
selected
a
file
the
“saveData”
method
is
called.

The

“saveData”
method
creates
a
new
FileStream
object
which
allows
for
read
and
write

operations
on
a
file.

Next
the
file
which
the
user
selected
is
opened
in
write
mode,
the
bytes

from
the
htmlText
property
of
the
RichTextEditor
are
written
to
the
file,
and
finally
the
file
is

closed.


Similar
to
the
“Save
As”
dialog
which
is
opened
by
calling
the
“browseForSave”
function
on
a

File
object
there
are
also
functions
for
opening
files
and
directories.

Those
functions
are

“browseForDirectory”,
“browseForOpen”
which
can
take
a
filter
parameter
so
that
only

specific
file
types
can
be
selected,
and
“browseForOpenMultiple”
which
can
open
multiple

files
at
once.

There
are
also
a
number
of
out‐of‐the‐box
Flex
components
for
browsing
the
file
system

such
as
FileSystemComboBox,
FileSystemDataGrid,
FileSystemList,
and
FileSystemTree.

You

can
easily
use
these
components
in
a
Flex
application
such
as:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
layout="horizontal">
<mx:FileSystemDataGrid directory="{File.desktopDirectory}"/>
<mx:FileSystemTree directory="{File.desktopDirectory}"/>
</mx:WindowedApplication>


Instructions:

Build
From
Scratch:


Lab
8
Solution:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
private function saveData(event:Event):void
{
var stream:FileStream = new FileStream();
stream.open((event.target as File),FileMode.WRITE);
stream.writeUTFBytes(rte.htmlText);
stream.close();
}
</mx:Script>
<mx:RichTextEditor id="rte" width="100%" height="100%" title="Text Editor"/>
<mx:Button label="Save">
<mx:click>
var f:File = File.desktopDirectory;
f.browseForSave("Save As");
f.addEventListener(Event.SELECT, saveData);
</mx:click>
</mx:Button>
</mx:WindowedApplication>






Lab
9
–
AIR
and
PDF
(Doug)

Skills
Learned:
Wrapping
PDF
in
Webkit,
interacting
with
the
PDF
from
AS3.


Time:
12‐18
minutes

Presenter:
Doug
Schmidt


Lab
9
Solution




TBD
by
Doug


Lab
10:
REST
&
Handling
Basic
Communication
Faults
(Duane)



Skills
learned:
Making
a
basic
call
to
a
remote
server
using
HTTPService,
capturing

communication
faults
and
acting
upon
them,
using
the
Alert()’s,
best
practices
(busy
cursor)

for
applications
that
make
remote
calls.


Time:
15
minutes

Presenter:
Duane
Nickull

Representational
State
Transfer
refers
to
a
collection
of
network
architecture
principles
that

outline
how
resources
are
defined
and
addressed
(as
opposed
to
HTTP,
which
is
strictly

limited
to
one
abstract
interaction
pattern
with
minor
variations).




A
REST
interface
describes
any
service
that
transmits
domain‐specific
data
over
HTTP

without
an
additional
messaging
layer
such
as
SOAP,
or
session
tracking
via
HTTP
cookies.




REST
is
worth
reading
about
in
further
detail
as
it
contains
many
subtle
nuances.
Claims

have
been
made
(as
noted
at

http://en.wikipedia.org/wiki/Representational_State_Transfer)


that
it
is
possible
to:



1.
Design
a
service
in
accordance
with
the
REST
architectural
style
without
using
HTTP,
and



2.
That
it
is
possible
to
design
simple
XML
+
HTTP
interfaces
that
do
not
conform
to
REST

principles
http://en.wikipedia.org/wiki/Representational_State_Transfer



Project
GUI








Instructions:



The
BlazeDS
must
be
started
and
running



1. Grab
a
web
browser
and
navigate
to
the
following
URL:

http://www.nickull.net/xml/Wines.xml

Or
optionally
to:

http://localhost:8400/xml/Wines.xml





2. You
should
see
the
following
XML:








3. With
Flex
Builder,
start
a
new
Project
called
“MAX‐Project2”.

Make
it
a
web
based

project
(Flex)
and
select
no
server
type
as
follows:



 



4. Click
“Finish”.

Change
your
Application
layout
to
“vertical”.



5. Switch
to
the
code
view
in
Flex
Builder
and
add
the
line
of
code
as
shown
below

ABOVE
the
panel
declaration:




<mx:HTTPService id="srv" url="http://localhost:8400/xml/Wines.xml"/>








6. In
order
for
this
to
work,
a
small
file
called
crossdomain.xml
is
in
the
same

directory
as
the
Wines.xml
on
the
server.

This
file
looks
like
this:








Describing
what
this
file
does
is
beyond
the
scope
of
this
tutorial
however
more
can

be
read
at

http://livedocs.adobe.com/flash/8/main/wwhelp/wwhimpl/common/html/wwhel
p.htm?context=LiveDocs_Parts&file=00001621.html



 

7. This
is
the
creation
of
a
new
HTTPService
Object.

It
has
an
ID
and
accepts
a

parameter
of
the
URI,
corresponding
to
the
URL
to
get
the
XML
above.



8. Add
a
<mx:DataGrid>
to
your
project
as
follows:





<mx:DataGrid dataProvider="{srv.lastResult.Wines.Vintage}" 

width="690" height="336"/>







9. Add
a
button
object
to
your
project,
below
the
datagrid
and
set
the
label
on
the
button

to
“Get
Data”.




<mx:Button label="Get Data" click="srv.send()"/>

10. Your
completed
code
project
should
look
like
this:




<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical">

<mx:HTTPService id="srv"
url="http:///www.nickull.net/xml/Wines.xml"/>

<mx:DataGrid dataProvider="{srv.lastResult.Wines.Vintage}"
width="690" height="336"/>

<mx:Button label="Get Data" click="srv.send()"/>

</mx:Application>







TroubleShooting:



If
this
runs
but
doesn’t
load
up
the
wine
list
into
the
datagrid,
several
things
may
have

happened.

What
can
we
do
to
help
provide
feedback
to
the
user?



11. Best
Practice
–
using
the
busyCursor.

Within
the
HTTPService
element,
add

the
attribute
showBusyCursor="true”

12. Run
your
application
again.
This
time
you
should
see
the
busy
cursor
during
the
time

your
call
is
made.

It
will
be
very
briefly
as
the
localhost
returns
data
fast.



NOTE:
Keep
open
the
previous
lab
entitled
“REST”



Not
all
things
go
as
per
how
we
plan
them.

In
this
exercise,
we
will
create
and
handle
a

communication
fault.

This
is
good
practice
for
all
applications
that
use
remote
service
calls.




1. Use
the
previous
project
you
had
for
the
REST
example



2. Add
in
the
following
code
block:




<mx:Script>

<![CDATA[
import mx.controls.Alert;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;

//TODO here – handle faults

]]>
</mx:Script>







3. Now
we
have
to
capture
the
faults.

In
the
HTTPService
element,
change
it
to
add
the

following
lines
(in
yellow)
NOTE:
your
URL
might
be
different
if
you
used
locahost.


<mx:HTTPService id="httpService" result="handleResult(event)"

fault="handleFault(event)"
url="http://www.nickull.net/xml/Wines.xml" />





 4. Now
we
have
to
add
the
two
functions
into
our
code.

Write
them.

The
first
will
be

the
handleResult()
function
which
must
take
the
event
as
a
parameter.

In
this
case,

the
resultEvent.



private function handleResult(evt:ResultEvent):void
{
//do nothing since it went pretty damn good but
//you can use this for further debugging.
}



5. Now
handle
the
event
for
a
fault.

The
syntax
is
roughly
the
same.

Add
the
following

lines:




private function handleFault(evt:FaultEvent):void

{
mx.controls.Alert.show("Bad day for you sucka!",
"URL sucked!");
}





The
first
parameter
is
the
Alert
main
message,
the
second
is
the
title
of
the
alert

window.



Now
try
running
your
application
in
two
ways.

First,
keep
the
URL
proper
and
make

sure
it
runs
normally.

Second,
change
the
URL
inside
the
HTTPService
to
an
invalid

URL
and
see
what
happens.





 



Lab
8
Solution




<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical" borderColor="#BA3F3F" backgroundGradientAlphas="[1.0,
1.0]" width="763" height="517" >

<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;

private function handleResult(evt:ResultEvent):void

{
//do nothing since it went pretty damn good but
//you can use this for further debugging.
}

private function handleFault(evt:FaultEvent):void

{
//you can optionally not include “mx:controls” below
mx.controls.Alert.show("Bad day for you sucka!", "URL
sucked!");
}
 ]]>
</mx:Script>

<mx:HTTPService result="handleResult(event)"
fault="handleFault(event)" id="srv"
url="http://www.nickull.net/xml/Wines.gggggggggggggg"/>

<mx:DataGrid dataProvider="{srv.lastResult.Wines.Vintage}"
width="711"
height="383" x="29.5" y="30"/>

<mx:Button x="338.5" y="435" label="Retrieve"

click="srv.send()"/>

</mx:Application>





Lab
11:
 Interacting
with
Ruby
on
Rails
(Peter,
Dima)



Skills
learned:
What
is
RoR
(basic
101
talk),
how
Flex
and
Rails
fit
together,
how
to
wire

them
together.

Time:
30
minutes

Presenter:
Peter
Armstrong


Lab
11
Solution
Code
(Server)



See
files
on
CD
in
root
folder
called

2009.05.28_RestfulX_Presentation_Peter_Armstrong_minimal.zip and
2009.05.28_RestfulX_Presentation_Peter_Armstrong.zip




Lab
11
Solution
Code
(Client)




See
files
on
CD
in
root
folder
called

2009.05.28_RestfulX_Presentation_Peter_Armstrong_minimal.zip and
2009.05.28_RestfulX_Presentation_Peter_Armstrong.zip


Lab
12:
Web
Services
Consumption
(Duane)



Skills
learned:
How
to
use
Flex
Builders
WSDL
introspection
wizard,
code
generation,
how
to


bind
web
services
results
to
visual
components.

Time:
15‐20
minutes

Presenter:

Duane


NOTE:
BlazeDS
must
be
up
and
running.

1. Set
up
a
new
Flex
project
called
“MAX2008WebService”.




2. When
your
project
us
set
up,
navigate
with
a
browser
to
the
following
URL

http://localhost:8400/axis/services/Version?wsdl



3. In
Flex
Builder,
from
the
top
menu,
select
“Data
‐>
Import
WSDL”.









This
will
open
the
following
dialog
and
prompt
you
for
the
folder
that
you
wish
to

store
the
generated
code
into.

Select
your
<Project_Folder>/src
folder
for
this

purpose.








4. On
the
next
Dialog
box,
fill
in
the
URL
(cut
and
paste
from
your
browser
to
avoid

errors).

Click
“Next”.



 



5. Flex
Builder
has
an
Apache
Axis
2.0
SOAP
stack
under
the
hood
and
this
will
inspect

the
WSDL
file
and
generate
your
available
operations
for
you.

Leave
the
defaults
as
is

(below)
and
select
“Next”.








6. Select
“Finish”.

Note
that
under
your
project
directory,
you
now
have
several
new

files.

They
should
have
been
generated
for
you
by
Flex
Builder.

You
can
open
them

up
to
inspect
the
magnitude
of
work
that
Flex
Builder
saved
you.



 



7. Open
up
the
BaseVersionService.as
class
to
see
the
work
done
by
Apache
Axis.





8. In
your
Flex
Project,
start
by
adding
a
Panel,
Button
and
Label
as
shown
below:


<?xml version="1.0" encoding="utf-8"?>

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Panel x="10" y="10" width="497" height="414" layout="absolute">
<mx:Button x="206" y="333" label="Button"/>
<mx:Label x="35" y="41"
text="This is the state of the Application before we send the
service request!" width="401" height="175"/>
</mx:Panel>
</mx:WindowedApplication>






9. Switch
to
Code
view
and
then
add
a
<mx”Script>
block
as
shown
below
and
start
the

imports.

Note
that
if
you
successfully
imported
the
WSDL,
the
code
complete
will

help
you
by
selecting
“generated”
as
shown
below:

 

10. The
imports
you
need
are
the
concrete
service
class
and
the
result
event
class.

They

are
shown
below:



<![CDATA[
import generated.webservices.VersionService;
import generated.webservices.GetVersionResultEvent;




11. The
next
thing
to
do
is
to
initialize
two
variables:





public var myService:VersionService = new VersionService;
public var resultXML:XML; 





12. The
first
line
creates
a
new
instance
of
the
service
object
and
the
second
creates
a
null

XML
object
which
we
will
use
to
contain
the
Web
Service
result.



13. The
next
thing
is
to
set
up
your
service
call.

This
is
done
via
one
simple

function.

There
are
two
other
things
you
must
do
too.

One
is
to
wire
up
the
send

button
to
the
function
(click=”getService”)
and
the
second
is
to
add
an
id
to
the

label
(id=”myLabel”)



public function getService():void
{
myService.addgetVersionEventListener(resultHandler);
myService.getVersion_send();
myLabel.text = "Loading. Hold your horses dawg" ;
} 



14. The
getService()
function
returns
nothing
but
it
calls
a
result
handler
function
that

you
have
to
write.

This
takes
the
result
as
an
argument.

This
final
class
can
be

written
as
such:



public function resultHandler(e:GetVersionResultEvent):void
{
resultXML = new XML(e.result);
myLabel.text = resultXML.valueOf();
}




Now
run
the
application.








Lab
12
Solution




<?xml version="1.0" encoding="utf-8"?>

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Script>
<![CDATA[
import generated.webservices.VersionService;
import generated.webservices.GetVersionResultEvent;

public var myService:VersionService = new VersionService;

public var resultXML:XML;

public function getService():void

{
 myService.addgetVersionEventListener(resultHandler);
myService.getVersion_send();
myLabel.text = "Loading. Hold your horses dawg";
}

public function resultHandler(e:GetVersionResultEvent):void

{
resultXML = new XML(e.result);
myLabel.text = resultXML.valueOf();
}
]]>
</mx:Script>

<mx:Panel x="10" y="10" width="497" height="414" layout="absolute">

<mx:Label id="myLabel" x="35" y="41"
text="This is the state of the Appliation before we send the service
request!" width="401" height="175"/>
<mx:Button x="206" y="333" label="Button" click="getService()"/>
</mx:Panel>
</mx:WindowedApplication>




Lab
13:
‐
Another
Alternative
Web
Service



This
is
a
Web
Service
sample
done
by
James
Ward.

It
depends
upon
an
internet
connection

and
is
meant
to
show
a
simpler
method
of
connecting
to
a
web
service.
Using
only
MXML,
not

using
AS3.



1. Grab
a
browser
and
check
to
make
sure
you
can
connect
to
this
endpoint:

http://www.jamesward.com/census/webservices/CensusService?wsdl



 



2. You
should
see
the
WSDL
and
you
can
manually
walk
it
to
find
the
name
of
the

operation.

The
operation
we
want
to
invoke
is
getElements.

This
takes
two

parameters,
both
integers.

The
first
is
the
starting
place
(use
0)
and
the
second
is
the

number
of
records
to
return
(use
15).

You
will
see
this
reflected
in
the
root
element

of
the
AIR
application
below.


Lab
13
Solution



<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
applicationComplete="srv.getElements.send(0, 15)" layout="vertical">

<mx:WebService id="srv" showBusyCursor="true"

endpointURI="http://www.jamesward.com/census/webservices/CensusService?id=flex_so
ap_as "
wsdl="http://www.jamesward.com/census/webservices/CensusService?wsdl" >

<mx:operation name="getElements" />

</mx:WebService>

<mx:DataGrid dataProvider="{srv.getElements.lastResult}" />

</mx:WindowedApplication>






Lab
14:
Internationalization
Tricks
(Doug)



Skills:
tips
on
internationalization

Time:
10
minutes


Presenter:
Doug




Lab
15:
MYSQLite
(NEED)




Skills:
Using
the
SQLite
in
the
AIR
runtime
for
offline
content
storage.


Time:
15
minutes

Presenter:
????






The
following
project
gives
attendees
a
quick
overview
of
how
SQLite
works
in
AIR.


In
this
example
when
the
application
has
fully
initialized
the
applicationComplete
event
is

dispatched
which
calls
the
initApp
function.

In
this
function
a
connection
to
a
database
is

opened.

There
can
be
multiple
open
connections
to
a
single
database
and
those
connections

can
either
be
synchronous
or
asynchronous.

In
the
default
synchronous
method
database

operations
will
block
the
UI
while
they
are
being
performed.

This
means
that
for
long

running
database
transactions
the
UI
will
be
unresponsive.

The
asynchronous
method
does

not
block
the
UI
but
requires
the
developer
to
specify
call‐backs
for
when
the
database

transaction
completes.

The
synchronous
method
is
more
straightforward
and
should

probably
be
used
for
most
interactions.

If
you
do
want
to
use
the
asynchronous
method

simply
call
“sqlConn.openAsync”
instead
of
“sqlConn.open”.

The
database
also
supports

transactions.

To
begin
a
transaction
just
call
the
“sqlConn.begin”
function.

To
commit,
call

the
“sqlConn.commit”
function.

And
to
rollback,
call
the
“sqlConn.rollback”
function.

If
you

do
have
long
running
database
operations
it’s
best
to
wrap
them
in
a
transaction
since
it
will

perform
faster.

In
the
example
the
“queryNames”
function
does
a
simple
SQL
query
for
the
items
in
the

“names”
table.

Since
the
connection
is
synchronous
the
results
are
available
after
the

statement
has
been
executed
and
the
results
have
been
fetched.

The
SQL
query
syntax
is

standard
SQL‐92
and
supports
all
the
typical
SQL
grammar.

The
Button
in
the
example
has
a
click
event
handler
which
creates
a
new
SQLStatement,

specifies
the
SQL
to
be
an
insert
statement
using
parameters
which
are
then
replaced

automatically
by
the
SQL
engine.

This
is
the
preferred
approach
to
doing
inserts,
updates,

and
deletes
since
it
limits
the
potential
for
SQL
injection
attacks
in
your
application.

After

the
statement
has
executed
the
queryNames
function
is
called
so
that
the
list
of
names

refreshes.

Many
times
applications
which
need
to
work
offline
will
maintain
a
cache
of
the
server
data

on
the
local
machine.

These
two
different
datasets
then
need
to
be
synchronized.

This
can

be
a
complex
and
time
consuming
problem
to
solve.

LiveCycle
Data
Services
now
has
this

functionality
built‐in
and
should
be
considered
before
attempting
to
custom
build
a
data

synchronization
framework.




Lab
15
Solution:





<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
applicationComplete="initApp()">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import flash.data.*;

private var sqlConn:SQLConnection;

[Bindable]
private var names:ArrayCollection;

private function initApp():void

{
sqlConn = new SQLConnection();
 sqlConn.open(File.applicationStorageDirectory.resolvePath("my.db"));
var stmt:SQLStatement = new SQLStatement();
stmt.sqlConnection = sqlConn;
stmt.text = "create table if not exists names (name string)";
stmt.execute();
queryNames();
}

private function queryNames():void

{
var stmt:SQLStatement = new SQLStatement();
stmt.sqlConnection = sqlConn;
stmt.text = "select * from names";
stmt.execute();
var result:SQLResult = stmt.getResult();
names = new ArrayCollection(result.data);
}
]]>
</mx:Script>
<mx:Panel title="Names" width="300" height="200">
<mx:List dataProvider="{names}" labelField="name" width="100%" height="100%"/>
<mx:ControlBar>
<mx:TextInput id="newName"/>
<mx:Button label="Add Name">
<mx:click>
<![CDATA[
var stmt:SQLStatement = new SQLStatement();
stmt.sqlConnection = sqlConn;
stmt.text = "insert into names (name) values (:name)";
stmt.parameters[":name"] = newName.text;
stmt.execute();
queryNames();
]]>
</mx:click>
</mx:Button>
</mx:ControlBar>
</mx:Panel>
</mx:WindowedApplication>










Lab
16:
AIR
Native
Windowing
functionality
(NEED)



Skills:
Working
with
AIR’s
windowing
kit.

Calling
one
window
from
another,
discussion
on

multiple
instances
of
an
application
vs.



Time:
10‐14
minutes


Presenter:
????

This
project
will
demonstrate
how
to
open
and
close
another
window
using
the
windowing

API’s.




Lab
16
Solution
Code:




<?xml version="1.0" encoding="utf-8"?>

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:Component className="MyNativeWindow">
<mx:Window horizontalAlign="center">
<mx:Button label="close" click="this.close()"/>
</mx:Window>
</mx:Component>
<mx:Button label="Open New Window">
<mx:click>
<!--as a good practice use CDATA declarations wherever you use script-->
<![CDATA[
var newWindow:MyNativeWindow = new MyNativeWindow();
newWindow.width = 200;
newWindow.height = 200;
newWindow.open();
]]>
</mx:click>
</mx:Button>
</mx:WindowedApplication>








Lab
17:
A
Simple
Yahoo
Map





This
second
exercise
is
designed
to
show
you
how
easy
it
is
to
create
a
Yahoo
Map
Flex

application
and
center
it
where
we
are
(San
Jose).


NOTE:
You
can
also
import
the
entire
project
into
Flex
Builder.

1. Set
up
a
new
Flex
Project
and
call
it
“Where2.0‐CourseStarters”.
Choose
the
project

type
as
a
Flex
project
(for
the
rest
of
the
lab
we
will
stay
in
Flex).



2. When
the
project
is
set
up,
you
will
see
a
number
of
directories
in
the
Navigator
Pane.


Place
the
YahooMaps.swc
and
ags-lib-1.1-2009-01-21.swc
files
inside
the

~/<project_root>/libs
directory
as
shown
below.




These
are
the
core

SWC
libraries
you

downloaded
in

the
set
up
portion

of
this
lab.

Do
this

PRIOR
to
the
lab

 






3. Using
a
text
editor
open
up
the
file
<Lab_Root_Folder>/AttendeeProjects/Lab1.mxml

and
copy
all
the
text
to
your
buffer
(Control
–
C
on
a
PC/Linux
/
Command
–
C
on
a

Mac).








4. Delete
all
the
text
in
the
new
main.mxml
file
and
replace
it
with
the
text
from
the

YahooMap_FlexExample.mxml
file.

Some
basic
plumbing
has
been
done
for
you
but

you
will
still
have
to
write
code.

Look
for
the
lines
where
there
is
a
comment
and
a

TODO:



5. You
will
first
need
to
add
your
developer
API
key
value.

Look
for
the
line
that
looks

like
this:


//TODO: Add your Yahoo Developer Network API Key here as a String named 'appid"
var appid:String = "Use your ID here";

6. And
another
line
that
looks
like
this:





// creating a new address object, passing our address string as the single parameter.
_address = new Address("170 S. Market Street, san jose, ca");




 

7. Fix
the
two
lines
so
they
contain
your
developer
key
and
an
address
which
you
would

like
the
course
to
be
centered
around.

They
should
look
similar
to
this.




//TODO: Add your Yahoo Developer Network API Key here as a String named 'appid"

var appid:String = "<replace_this_string_with_your_developer+_key>";

// creating a new address object, passing our address string as the single parameter.
_address = new Address("170 S. Market Street, san jose, ca");







8.
Save
and
run
the
project.

You
should
see
a
map
as
shown
below:




Lab
17
Simple
Yahoo
Map
Solution:



<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
creationComplete="handleCreationComplete();">
<mx:Panel title="Yahoo! Maps - Simple Flex Example" top="5" left="5" bottom="5" right="5">
<mx:UIComponent id="mapContainer" width="100%" height="100%"/>
</mx:Panel>
<mx:Script>
<![CDATA[
import mx.events.ResizeEvent;
import com.yahoo.maps.webservices.geocoder.GeocoderResult;
import com.yahoo.maps.api.YahooMapEvent;
import com.yahoo.maps.api.core.location.Address;
import com.yahoo.maps.api.YahooMap;
import com.yahoo.maps.webservices.geocoder.events.GeocoderEvent;

private static const APP_ID:String = "YahooDemo";

 private var _yahooMap:YahooMap;
private var _address:Address;

private function handleCreationComplete():void

{
_yahooMap = new YahooMap(APP_ID,mapContainer.width,mapContainer.height);
_yahooMap.addEventListener(YahooMapEvent.MAP_INITIALIZE, handleMapInitialize);

mapContainer.addChild(_yahooMap);
mapContainer.addEventListener(ResizeEvent.RESIZE, handleContainerResize);

_yahooMap.addPanControl();
_yahooMap.addZoomWidget();
_yahooMap.addTypeWidget();

// creating a new address object, passing our address string as the single parameter.
_address = new Address("170 S. Market Street, san jose, ca ");

// listen for the GEOCODER_SUCCESS event.

// then we'll get the zoom level and center latlon to position the map on.
_address.addEventListener(GeocoderEvent.GEOCODER_SUCCESS, handleGeocodeSuccess);
}

private function handleMapInitialize(event:YahooMapEvent):void

{
_address.geocode();
}

private function handleGeocodeSuccess(event:GeocoderEvent):void

{
// retrieve the first result returned by the geocoder.
var result:GeocoderResult = _address.geocoderResultSet.firstResult;

_yahooMap.zoomLevel = result.zoomLevel;
_yahooMap.centerLatLon = result.latlon;
}

private function handleContainerResize(event:ResizeEvent):void {

_yahooMap.setSize(mapContainer.width,mapContainer.height);
}
]]>
</mx:Script>
</mx:Application>

Lab
18: Yahoo
Maps
adding
markers
at
specific
lat
and
longs



This
lab
will
teach
you
how
to
add
specific
markers
on
a
map.

There
is
a
project
under
the

<lab_root_folder>/AttendeeProjects
directory
entitled
“YahooMaps_Markers.mxml.

Either

import
it
into
your
existing
project
or
add
a
new
MXML
application
to
the
existing
project

you
have.




 1. Review
the
source
code
for
the
project.

Most
of
the
work
has
been
done
and
the
code

is
commented.

Find
the
line
where
you
have
a
task
TODO.
There
are
two.





2. The
first
one
is
to
add
your
license
key.
This
is
around
line
27.

Simply
cut
and
paste

your
key
into
this
code
as
per
the
previous
lessons
(note
–
this
key
is
not
a
valid
key
–

just
for
example
purposes
only).




//TODO: Add your Yahoo Developer Network API Key here as a String named 'appid"
var appid:String ="gaQNTzvV3djksgn;flsgiolcAK6a3t1EizU23TC.fjgdklkgzfd—“





The
second
TODO
is
located
under
the
array
of
latitude
and
longitude
values
around

line

61.

Just
prior
to
that,
you
will
see
a
small
array
as
shown
below.






//an array of lanlon coords.

var contactsList:Array = new Array();
contactsList[0] = ["Duane Nickull", "49.25", "-123"];
contactsList[1] = ["Ted Patrick", "37.7", "-122.5"];
contactsList[2] = ["Ryan Stewart", "47.7", "-122.3"];
contactsList[3] = ["Michele Turner", "37", "-122"];
//add yourself too?







3. Add
the
following
code
under
the
commented
line
with
TODO
(NOTE:
if
we
are

running
late,
feel
free
to
cut
and
paste
this
code).


// TODO loop over the contactsList array and use addMarket();

for (var i:int; i < contactsList.length; i++){

var latlon:LatLon = new LatLon(contactsList[i][1],contactsList[i][2], true);
var marker:SimpleMarker = new SimpleMarker;
marker.latlon = latlon;
_yahooMap.markerManager.addMarker(marker);
}




4. Now
save
and
run
your
project.

If
you
have
no
red
X’s,
you
should
see
the
following:

 

Lab
18
Solution






<?xml version="1.0" encoding="utf-8"?>
<!--
Copyright (c) 2008 Yahoo! Inc. All rights reserved.
The copyrights embodied in the content of this file are licensed under the BSD
(revised) open source license
-->
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
creationComplete="handleCreationComplete();"
viewSourceURL="srcview/index.html">

<mx:UIComponent id="mapContainer" width="100%" height="100%"/>

<mx:Script>
<![CDATA[
import com.yahoo.maps.api.markers.SimpleMarker;
import com.yahoo.maps.api.core.location.LatLon;
import com.yahoo.maps.api.core.location.BoundingBox;
import com.yahoo.maps.api.YahooMapEvent;
import com.yahoo.maps.api.YahooMap;

private var _yahooMap:YahooMap;

private function handleCreationComplete():void

{
// this examples uses an application id passed into the app via FlashVars.
// Get your own from the Yahoo! Developer Network @
http://developer.yahoo.com/wsregapp/
var appid:String = "jklsasdfklflkdsnfds3TC.hSIrVI.1Qlj5Jw--";

// create YahooMap instance and listen for map initialize event

_yahooMap = new YahooMap();
_yahooMap.addEventListener(YahooMapEvent.MAP_INITIALIZE,
handleMapInitialize);
_yahooMap.init(appid, mapContainer.width, mapContainer.height);

_yahooMap.addPanControl();
_yahooMap.addZoomWidget();

mapContainer.addChild(_yahooMap);
}

private function handleMapInitialize(event:YahooMapEvent):void

{
_yahooMap.zoomLevel = 13;
_yahooMap.centerLatLon = new LatLon(37.5, -122.14);

// add 1000 markers randomly across the bounds of the map.

var bounds:BoundingBox = _yahooMap.getMapBounds();
var southwest:LatLon = bounds.southwest;
var northeast:LatLon = bounds.northeast;

var lonSpan:Number = northeast.lon - southwest.lon;

var latSpan:Number = northeast.lat - southwest.lat;

//an array of lanlon coords.

var contactsList:Array = new Array();
contactsList[0] = ["Duane", "49.25", "-123"];
contactsList[1] = ["Ted", "37.7", "-122.5"];
contactsList[2] = ["Ryan", "47.7", "-122.3"];
contactsList[3] = ["Michele", "37", "-122"];
//add yourself too?

// TODO loop over the contactsList array and use addMarket();

for (var i:int; i < contactsList.length; i++){

var latlon:LatLon = new LatLon(contactsList[i][1],contactsList[i][2],
true);
var marker:SimpleMarker = new SimpleMarker;
marker.latlon = latlon;
_yahooMap.markerManager.addMarker(marker);
}

private function onAddedToStage( event:Event):void

{
trace(event.type, event.target);
 }

private function onRemoved( event:Event):void

{
trace(event.type, event.target);
}
]]>
</mx:Script>
</mx:Application>







Lab
19:

Polyline
–
adding
custom
shapes
to
your
geo‐spatial
Mashup



This
lab
demonstrates
how
to
draw
shapes
using
the
Yahoo
Maps
API
over
the
Yahoo
Flash

maps.






1. Set
up
a
new
application
within
the
existing
propject
and
call
it

“YahooMaps_PolyLines”.



2. Cut
and
paste
the
starter
code
from
the
<lab_root_folder>/AttendeeProjects
directory

into
the
application.



3. Enter
your
own
Yahoo
Developer
API
key
around
line
27
as
per
previous
Labs.



4. Look
over
the
source
code
–
it
is
well
commented
and
fairly
self
explanatory.

There
is

only
one
item
for
you
to
complete
near
line
65
where
the
TODO
marker
is.

Please
add

the
code
as
follows
(Note:
you
may
use
your
own
coordinates
or
less
precise
ones
if

you
desire.





// TODO: pass latlon values into the polyline data provider to draw the overlay.
_polyline.dataProvider = [new LatLon(47.610015,-122.187029), new LatLon(37.371612,-
122.038258), new LatLon(40.714550,-74.007124)];








5. Save
the
project
and
run
it.

If
you
have
no
red
X’s,
you
should
see
the
following.

 



Lab
19
Solution:




<?xml version="1.0" encoding="utf-8"?>
<!--
Copyright (c) 2008 Yahoo! Inc. All rights reserved.
The copyrights embodied in the content of this file are licensed under the BSD (revised) open
source license
-->
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
creationComplete="onCreationComplete(event)"
viewSourceURL="srcview/index.html">

<mx:UIComponent id="mapContainer" width="100%" height="100%"/>

<mx:Script>
<![CDATA[
import mx.effects.Resize;
import mx.events.ResizeEvent;
import com.yahoo.maps.api.overlays.PolylineOverlay;
import com.yahoo.maps.api.core.location.LatLon;
import com.yahoo.maps.api.YahooMapEvent;
import com.yahoo.maps.api.YahooMap;

private var _yahooMap:YahooMap;

private var _polyline:PolylineOverlay;

private function onCreationComplete(event:Event):void

{
// this examples uses an application id passed into the app via FlashVars.
// Get your own from the Yahoo! Developer Network @
http://developer.yahoo.com/wsregapp/
var appid:String = "gaQfdszfewn..K6a3t1EizU23TC.hSIrVIddse --";

// create YahooMap instance and listen for map initialize event

_yahooMap = new YahooMap();
_yahooMap.addEventListener(YahooMapEvent.MAP_INITIALIZE, handleMapInitialize);
_yahooMap.init(appid, mapContainer.width, mapContainer.height);

mapContainer.addEventListener(ResizeEvent.RESIZE, handleResize);
mapContainer.addChild(_yahooMap);
}

private function handleResize(event:ResizeEvent):void

{
_yahooMap.setSize(mapContainer.width,mapContainer.height);
}

private function handleMapInitialize(event:YahooMapEvent):void

{
_yahooMap.zoomLevel = 14;
_yahooMap.centerLatLon = new LatLon(39.23225,-99.84375);

_yahooMap.addPanControl();
_yahooMap.addZoomWidget();
_yahooMap.addTypeWidget();

_polyline = new PolylineOverlay(0xFF0000, 0.85, 4);

 _yahooMap.overlayManager.addOverlay(_polyline);

// disable the mouse so we can still click and drag the map when the mouse is over
the polyline
_polyline.mouseEnabled=false;

// set the fill color and fill alpha of the overlay

_polyline.fillColor = 0xFFFFFF;
_polyline.fillAlpha = 0.60;

// TODO: pass latlon values into the polyline data provider to draw the overlay.
_polyline.dataProvider = [new LatLon(47.610015,-122.187029), new
LatLon(37.371612,-122.038258), new LatLon(40.714550,-74.007124)];
}

]]>
</mx:Script>
</mx:Application>











Lab
20:
Simple
ESRI
MAP



This
lab
will
be
built
from
Scratch.



1. Make
a
new
Flex
application
within
your
existing
project.

If
you
wish
to
do
it
outside

the
project,
you
will
need
to
import
the
swc
file
you
downloaded
from
ESRI.



2. Add
the
following
namespace
declarations
to
the
top
of
your
project:


xmlns:esri="http://www.esri.com/2008/ags">



3. Optional:

add
some
text
to
your
project.




<mx:Text text=" Map Service from ArcGIS Online. Where 2.0 rules!" width="100%"/>

4. Now
add
the
ESRI
component




<esri:Map>
 <esri:ArcGISTiledMapServiceLayer/>
</esri:Map>





5.

Now
add
the
URL
attribute
with
a
value
of


url=http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServ
er to
the
ArcGISTiledMapServiceLayer
element.

Your
code
should
now
be
ready
to
run.

You

should
see
this
map.




Lab
20
Solution


<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:esri="http://www.esri.com/2008/ags">

<mx:Text text="This is a tiled Map Service from ArcGIS Online." width="100%"/>

<esri:Map>
<esri:ArcGISTiledMapServiceLayer
url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapSer
ver"/>
</esri:Map>
</mx:Application>



Lab
21:
Adding
CSS
to
style
controls



1. Start
in
your
current
project
(Lab
5)


2. Right
click
(control
click
on
mac)
on
the
current
projects
/src
folder
and
select
“new”

and
then
“file”
as
shown
below.








3. Make
sure
your
location
is
selected
as
the
/src
directory
of
the
current
project
and

add
a
name
for
your
CSS
file.

I
used
where20styles.css
as
shown
below.



 



4. Click
“Finish”.

Flex
Builder
will
automatically
open
the
newly
created
file
for
you.

Cut

and
paste
the
following
CSS
into
the
file
then
save
it.



.myMapStyle
{
navigation-style-name: myNavigationStyle;
}

.myNavigationStyle
{
top: 6;
left: NaN;
right: 6;
navigation-slider-style-name: myNavigationSlider;

.myNavigationSlider
{
dataTipPlacement: "left";
tickColor: #FFFFFF;
tickLength: 10;
tickOffset: 13;
tickThickness: 3;
borderColor: red;
 invertThumbDirection: true;
showTrackHighlight: true;

} 









5. In
the
Flex
project
(not
the
CSS),
add
in
the
following
line
of
code
to
reference
the

newly
created
CSS:

<mx:Style source="where20styles.css"/> 

6. Now
add
in
a
style
attribute
to
the
<esri:Map> so
it
looks
as
follows:


<esri:Map styleName="myMapStyle" level="3">



7. Now
run
your
code.

You
should
see
the
following
result.







Lab
21
Solution




<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:esri="http://www.esri.com/2008/ags">

<mx:Style source="where20styles.css"/>

<mx:Text text="CSS rocks!" width="100%"/>

<esri:Map styleName="myMapStyle" level="3">
 <esri:ArcGISTiledMapServiceLayer

url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/
MapServer"/>
</esri:Map>
</mx:Application>




Lab
22:
SVG
Maps



This
project
will
show
you
how
to
use
basic
SVG
with
Flex
to
build
an
interactive
map.

Note

that
SVG
is
very
difficult
to
interpret
for
humans
and
Flex
does
not
support
100%
of
SVG,

nevertheless,
this
is
a
great
lab
to
investigate
the
possibilities.

1. Import
the
SVG
project
from
the
<course_root>/AttendeeProjects
directory.

This
is

done
in
Flex
Builder
by
clicking
“File
‐>
Import”
and
then
selecting
“Flex
Project”.



The
type
is
a
Flex
Archive
so
make
sure
to
select
that
option.

2. The
starter
project
has
an
SVG
file
under
the
/assets
directory
in
the
Package

Explorer.

Take
a
look
at
it.

Here
is
a
sample.








3. In
Flex
Builder,
locate
the
line
of
code
where
you
have
work
to
do.



 <!--TODO: add a script tag, read in the SVG file and display the map -->





4. Add
a
new
<mx:Script>
block
to
your
code
right
under
the
TODO
comment.



5. Within
the
newly
added
script
tag,
add
the
following
code:





[Embed(source="./assets/map.svg")]

[Bindable]
public var SvgMap:Class;






6. The
Bindable
keyword
registers
event
listeners
so
you
can
bind
the
value
of
this

variable
to
other
Flex
Components.

Next
add
the
following
block
of
MXML
code
to

your
project:





<mx:Image top="10" bottom="10" left="10" right="10" id="large" source="{SvgMap}"
width="100%"
height="100%" x="10" themeColor="#ffffff" y="10"/>






7. Now
run
your
project.

You
should
see
the
following
result.






Lab
22
Solution





<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
viewSourceURL="srcEmbeddingSvgFiles/index.html"
width="100%" height="100%"

borderColor="#ffffff" color="#ffffff"
backgroundGradientColors="[#ffffff, #ffffff]">
<mx:Script>
<![CDATA[
[Embed(source="./assets/map.svg")]

[Bindable]
public var SvgMap:Class;
]]>
</mx:Script>

<mx:Image top="10" bottom="10" left="10" right="10" id="large" source="{SvgMap}"

width="100%"
height="100%" x="10" themeColor="#ffffff" y="10"/>
</mx:Application>



Lab
23:
‐
Flex
Remoting
Project



Note:
Make
sure
BlazeDS
is
still
up
and
running
for
this
lab.

This
can
be
done
by
checking

http://localhost:8400/samples/

1. Start
a
new
project
and
name
it
MAX‐BlazeDS.

Make
this
a
Flex
application
and
select

the
box
for
server
technologies
as
shown
below.



Application Server Type -> J2EE
Use Remote Object Access Service -> Checked
LiveCycle Data Services -> Checked




Click
“Next”

 



2. As
shown
below,
on
the
next
screen
you
will
need
to
validate
your
server

configuration.

You
will
need
to
fill
in
the
proper
values
for
Root
Folder,
Root
URL
and

Context
Root
as
shown.

Use
the
“Browse”
button
to
locate
the




<Course_Root>\BlazeDS\tomcat\webapps\samples


directory.



Set
the
other
values
as
shown:



Root
URL
‐>
http://localhost:8400/samples

Context
Root
‐>
/samples



The
output
folder
should
be
filled
out
by
default.





NOTE:
you
must
have
permissions
to
write
to
this
folder
for
the
lab
to
work.

 



3. Click
Finished
and
you
will
have
a
new
project
done.
(if
you
run
into
troubles,
please

put
your
hand
up
and
a
TA
will
come
around).



4. In
your
Flex
project,
enter
the
following
code:



Lab
23
Solution




<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundColor="#FFFFFF">

<mx:RemoteObject id="srv" destination="product"/>

<mx:DataGrid dataProvider="{srv.getProducts.lastResult}"
width="100%" height="100%"/>
<mx:Button label="Get Data" click="srv.getProducts()"/>
</mx:Application>






 5. Click
“run”
and
your
project
should
be
able
to
connect
to
the
locahost:8400
remote

object
and
return
the
screen
as
follows:




Lab
24
‐
Flex
clients
for
PHP




Major
thanks
to
Kevin
Hoyt
for
this
section!



1. In
your
attendee
projects
folder,
you
will
see
the
following
structure:






1. First,
start
MAMP
(Note
if
using
Windows,
you
must
set
up
WAMP
as
described
in

the
text
below
this
section
entitled
“WAMP”
and
put
the
same
files
in
the

<root_folder>).

This
can
be
done
either
by
using
the
GUI
tool
as
shown
below
or
by

 navigating
to
the
MySQL
and
MAMP
~/bin
directories
and
starting
it
with
line

command.








2. Verify
MAMP
us
up
and
running
by
visiting
the
webpage
at

http://localhost:8888/MAMP/?language=English



3. Open
up
and
inspect
the
file
under
the
~/MAMP/htdocs/contacts/object/

folder
called
contactsDAO.php




 



4. This
file
does
most
of
your
low
level
plumbing
in
and
out
of
the
database.

The
second

file
to
look
at
is
called
getContacts.php.





 

5. This
is
the
file
we
are
going
to
get
to
with
Flex
as
a
client.

To
verify
this
is
working

and
your
database
has
been
initialized,
please
go
to
the
URL:

http://localhost:8888/contacts/object/getContacts.php



6. You
should
see
some
XML
with
a
bunch
of
evangelists
names
in
it:





 






7. Next,
open
up
your
Flex
folder
named
“Objects”
and
create
a
new
MXML
Application

(NOT
a
new
Flex
Project).



8. Name
the
new
project
PHPClient.



9. Add
the
code
below
to
your
project:

Lab
24
Solution


<?xml version="1.0" encoding="utf-8"?>

<mx:Application
pageTitle="Contacts"
layout="absolute"
creationComplete="doCreationComplete( event )"
xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script>
<![CDATA[
public function doCreationComplete( event:Event ):void
{
svcContacts.send();
}
]]>
</mx:Script>

<mx:HTTPService
id="svcContacts"
url="/contacts/object/getcontacts.php" />

<mx:DataGrid
bottom="10"
left="10"
right="10"
top="10"
dataProvider="{svcContacts.lastResult.rolodex.contact}" />

</mx:Application>

Lab
25
‐
Flex
Talks
to
ColdFusion



Major
thanks
to
Ben
Forta
for
this
project!

This
is
probably
beyond
the
scope
of
the
hands

on
lab
and
can
be
studied
later
on
your
own.


Notes:

This
assumes
you
have
installed
ColdFusion
with
all
the
stock
configuration
(samples

etc.).

If
you
do
not
get
results,
you
might
have
to
check
the
database
or
use
a
SQL
statement

to
enter
some
raw
data
before
running
this
project.




1. Make
the
following
files
and
put
them
under
the
CF
wwwroot
inside
a
folder
(shown

below
the
folder
created
was
“service’):



 



data.cfc



<cfcomponent output="false">
<cffunction name="getArtists" access="remote" returntype="query">

<cfset var result="">

<cfquery datasource="cfartgallery" name="results"> SELECT
* FROM artists ORDER BY lastname, firstname
</cfquery>
<cfreturn results>
</cffunction>
</cfcomponent>


test.cfm



<cfobject type="component" component="data" name="dObj"> <cfdump
var="#dObj.getArtists()#">


2. Start
ColdFusion
server
(port
8500)






3. Make
sure
your
CF
is
up
and
running
by
hitting

http://localhost:8500/service/test.cfm



 



4. Start
a
new
Flex
Project.

When
the
dialog
window
presents
itself,
check
the
options

as
shown
below:








5. Click
“Next”.

You
will
get
a
second
dialog
box
to
ask
you
for
your
server

configuration.

Your
ColdFusion
Server
must
be
up
and
running
for
it
to
be
validated.


 If
you
have
installed
CF
in
the
stock
location,
all
you
should
have
to
do
is
to
validate
as

shown
below.

If
it
comes
back
okay,
click
Finish.








6. Make
the
following
Flex
project
and
run
it.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >

<mx:RemoteObject id="svc" destination="ColdFusion" source="service.data"

makeObjectsBindable="true" showBusyCursor="true"/>

<mx:Panel x="10" y="10" width="800" height="446" layout="absolute">

<mx:DataGrid x="10" y="10" width="734"

dataProvider="{svc.getArtists.lastResult}"/>

<mx:TextArea x="10" y="177" width="734" height="167" text="{svc.toString()}"/>

<mx:Button x="351.5" y="352" label="Get Data" click="svc.getArtists()"/>

</mx:Panel>
</mx:Application>

You
should
see:




Note
that
the
text
area
is
not
really
necessary.


Lab
26
–
Drawing
Graphics

This lab teaches you how to draw and use the graphics packages
Build from Scratch:

Lab
26
Solution

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="700"
height="500">
<mx:Script>
<![CDATA[
import flash.display.*;

private function drawCircle():void

{
var circle:Shape = new Shape;
var xPos:Number = myX.value;
var yPos:Number = myY.value;
var radius:Number = myDia.value;

circle.graphics.beginFill(0xFF8800);
circle.graphics.drawCircle(xPos, yPos, radius);
this.rawChildren.addChild(circle);
 }
]]>
</mx:Script>

<mx:Label x="58" y="380" text="X position"/>

<mx:HSlider id="myX" x="126" y="386" maximum="600" minimum="25"/>

<mx:Label x="58" y="414" text="Y position"/>

<mx:HSlider id="myY" x="126" y="420" maximum="450" minimum="25"/>

<mx:Label x="58" y="449" text="Diameter"/>

<mx:HSlider id="myDia" x="126" y="455" minimum="20" maximum="75"/>

<mx:Button x="384" y="420" label="Add round thing" click="drawCircle()"/>

</mx:Application>



Lab
27
–
Detecting
Keystroke
Events




Build
this
one
from
scratch


Lab
27
Solution





<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()"
layout="absolute">
<mx:Script><![CDATA[
import flash.events.KeyboardEvent;

public var keyString:String;

private function init():void

{
this.addEventListener(KeyboardEvent.KEY_DOWN, trapKeys);
}

private function trapKeys(e:KeyboardEvent):void

{
keyCode.text = String(e.keyCode);
}
]]></mx:Script>
<mx:Panel x="10" y="10" width="480" height="184" layout="absolute" title="Keystroke
Detection">
<mx:Text x="67" y="12" text="Enter text here:"/>
<mx:TextInput x="168" y="10" />
<mx:TextInput id="keyCode" x="168" y="49" />
<mx:Text x="82" y="51" text="You entered:" textAlign="right"/>
</mx:Panel>
</mx:WindowedApplication>







Lab
28:
Working
with
XML



This
project
will
teach
students
how
to
work
with
XML,
continuing
from
the
syntax
of
the

previous
project.

This
will
be
presented
to
them
and
they
will
have
to
code
up
the
solutions.


Teacher
note:
use
this
project
to
show
how
to
create
the
illusion
of
fast
execution
by
using

the
visible
attribute
on
components.






Problem:



<?xml version="1.0" encoding="utf-8"?>

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
width="800" height="560">
<mx:Script>
<![CDATA[
[Bindable]
public var myGMLData:XML =
<MultiLineString srsName="http://www.opengis.net/gml/srs/epsg.xml">
<lineStringMember value="1">
<LineString>
<coord>
<X>56.1</X>
<Y>0.45</Y>
</coord>
<coord>
<X>67.23</X>
<Y>0.98</Y>
 </coord>
</LineString>
</lineStringMember>

<lineStringMember value="2">
<LineString>
<coord><X>46.71</X><Y>9.25</Y></coord>
<coord><X>56.88</X><Y>10.44</Y></coord>
</LineString>
</lineStringMember>

<lineStringMember value="3">
<LineString>
<coord><X>324.1</X><Y>219.7</Y></coord>
<coord><X>0.45</X><Y>4.56</Y></coord>
</LineString>
</lineStringMember>
</MultiLineString>
]]>
</mx:Script>
<mx:Panel x="10" y="10" width="746" height="480" layout="absolute">

<!--TODO: Access 67.23 from the XML above and bind it to a label-->

<!--TODO: Access 0.45 from the XML above and bind it to a label-->

<!--TODO: Return the entire XML Fragment of the second instance of LineStringMember-->

<!--TODO: use parathensis operator to grab the instance of X where is equals 324.1 and
return the coord fragent-->

<!--TODO: Return any fragment for coord where Y has a specific value of "10.44" -->

<!--TODO: Return all instances of Y where it is a descendent of the lineStringMember

element-->

<!--TODO: Return the lineStringMember XML fragment where the attribute value = 2 -->
</mx:Panel>
</mx:WindowedApplication>


Lab
28
Solution



<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
width="800" height="560">
<mx:Script>
<![CDATA[
[Bindable]
public var myGMLData:XML =
<MultiLineString srsName="http://www.opengis.net/gml/srs/epsg.xml">
<lineStringMember value="1">
<LineString>
<coord>
<X>56.1</X>
<Y>0.45</Y>
 </coord>
<coord>
<X>67.23</X>
<Y>0.98</Y>
</coord>
</LineString>
</lineStringMember>

<lineStringMember value="2">
<LineString>
<coord><X>46.71</X><Y>9.25</Y></coord>
<coord><X>56.88</X><Y>10.44</Y></coord>
</LineString>
</lineStringMember>

<lineStringMember value="3">
<LineString>
<coord><X>324.1</X><Y>219.7</Y></coord>
<coord><X>0.45</X><Y>4.56</Y></coord>
</LineString>
</lineStringMember>
</MultiLineString>
]]>
</mx:Script>
<mx:Panel x="10" y="10" width="746" height="480" layout="absolute">

<!--TODO: Access 67.23 from the XML above and bind it to a label-->
<mx:Label text="{myGMLData.lineStringMember[0].LineString.coord[1].X}" x="26" y="28"
width="305" fontWeight="bold" color="#e82d1b"/>

<!--TODO: Access 0.45 from the XML above and bind it to a label-->
<mx:Label text="{myGMLData.lineStringMember[0].LineString.coord.Y[0]}" x="24" y="80"
width="307" fontWeight="bold" color="#e82d1b"/>

<!--TODO: Return the entire XML Fragment of the second instance of LineStringMember-->
<mx:Label text="{myGMLData.lineStringMember[1]}" height="263" width="233" x="446" y="28"
fontWeight="bold" color="#e8351c"/>

<!--TODO: use parathensis operator to grab the instance of X where is equals 324.1 and
return the coord fragent-->
<mx:Label text="{myGMLData.lineStringMember.LineString.coord.(X == 324.1)}" height="33"
width="349" x="24" y="143" fontWeight="bold" color="#e8371c"/>

<!--TODO: Return any fragment for coord where Y has a specific value of "10.44" -->
<mx:Label text="{myGMLData.lineStringMember..coord.(Y == 10.44)}" height="80" width="326"
x="24" y="195" fontWeight="bold" color="#e9441c"/>

<!--TODO: Return all instances of Y where it is a descendent of the lineStringMember

element-->
<mx:Label text="{myGMLData.lineStringMember..Y}" height="87" width="235" x="24" y="295"
fontWeight="bold" color="#e9471b"/>

<!--TODO: Return the lineStringMember XML fragment where the attribute value = 2 -->
<mx:Label text="{myGMLData.lineStringMember.(@value == 2)}" x="418" y="225" width="261"
height="105" fontWeight="bold" color="#e9431b"/>

</mx:Panel>

</mx:WindowedApplication>
Lab
29
–
Scribbling
on
a
screen
in
AIR


<?xml version="1.0" encoding="utf-8"?>

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
applicationComplete="init()" layout="absolute" showFlexChrome="false">
<mx:Script>
<![CDATA[
[Bindable]
private var lineWidth:Number = 1;
[Bindable]
private var lineColor:uint = 0x000000;
[Bindable]
private var prevX:Number;
private var prevY:Number;

private function init():void

{
stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
}

private function changeColor():void

{
lineColor = myCP.selectedColor;
myLabel.text = String(myCP.value);
}

private function changeThickness():void

{
lineWidth = mySlider.value;
}
]]>
</mx:Script>

<mx:Canvas id="myCanvas" width="100%" height="100%" >

<mx:mouseMove>
<![CDATA[
if(!isNaN(prevX))
{
myCanvas.graphics.lineStyle(lineWidth, lineColor);
myCanvas.graphics.moveTo(prevX, prevY);
myCanvas.graphics.lineTo(event.localX, event.localY);

}
prevX = event.localX;
prevY = event.localY;
]]>
</mx:mouseMove>

<mx:TitleWindow layout="absolute" close="close()" title="Scribbler Settings"

showCloseButton="true" width="200" height="150" >
<mx:Button label="Draw Off" x="10" y="10" width="95"/>
<mx:ColorPicker x="148" y="10" id="myCP" change="changeColor()"/>
<mx:HSlider x="10" y="40" id="mySlider" change="changeThickness()" minimum="1"
maximum="10" snapInterval="1" enabled="true" allowTrackClick="true"/>
<mx:Label id="myLabel" x="10" y="82" text="Label" width="160"/>

</mx:TitleWindow>
</mx:Canvas>
</mx:WindowedApplication>