New Flash Builder 4 WSDL and HTTP Connectors

New
Flash
Builder
4
WSDL
and

HTTP
Connectors

Java
SDK:

To
run
a
Tomcat
server,
you
must
download
a
Java
SDK
and

setup
a
JAVA_HOME
environmental
variable.

Windows:

• Right click on the My Computer icon on your desktop and select
properties
• Click the Advanced Tab
• Click the Environment Variables button
• Under System Variable, click New
• Enter the variable name as JAVA_HOME
• Enter the variable value as the install path for the Development Kit
(Ex: C:j2sdk1.4.2)
• Click OK
• Click Apply Changes

MAC
OS
X

• Open Terminal.
• First confirm you have JDK by typing “which java”. It should show
something like /usr/bin/java.
• Check you have the needed version of Java, by typing “java -version”.
My setup shows java version “1.5.0_13″
• JAVA_HOME is essentially the full path of the directory that contains
a sub-directory named bin which in turn contains the java.
• For Mac OSX – it is /Library/Java/Home (There are other
directories too, but this is the simplest!)

• Set JAVA_HOME using this command in Terminal: export
JAVA_HOME=/Library/Java/Home
• echo $JAVA_HOME on Terminal to confirm the path
• You should now be able to run your application

Start
the
Server:

Before
we
can
use
Flash
Builder
to
access
our
services,
we

need
to
start
up
the
Tomcat
server.
To
do
so
please
follow

the
steps
below:

WINDOWS:

Open
console
window
and
navigate
to
your
BlazeDS
install

directory:

cd
<BlazeDS
Root>BlazeDStomcatbin

Now
enter
cataina
run
to
start
up
the
Tomcat
server.

MAC:

Open
terminal
window.
Navigate
to
your
install
directory,

in
my
case
it
is
located
in
my
Applications
folder:

cd

<BlazeDS
Root>/BlazeDS/tomcat/bin

Now
enter
./startup.sh
to
start
up
the
Tomcat
server.

TEST
the
Server:

Test
to
make
sure
your
server
is
running
by
opening
a

browser
and
navigating
to:

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

http://localhost:8400/json/Wines.json

http://localhost:8400/axis/MyWebService.jws?wsdl

http://localhost:8400/crossdomain.xml

Notice
the
last
of
the
URL’s
listed
above
is
titled

crossdomain.xml.
This
file
is
required
for
the
FlashPlayer
to

access
data
services
hosted
on
remote
domains.

How
does

it
work?

When
a
Flash
document
attempts
to
access
data
from
another

domain,
Flash
Player
automatically
attempts
to
load
a
policy

file
from
that
domain.
If
the
domain
of
the
Flash
document

that
is
attempting
to
access
the
data
is
included
in
the
policy

file,
the
data
is
automatically
accessible.

Policy
files
must
be
named
crossdomain.xml,
and
can
reside

either
at
the
root
directory
or
in
another
directory
on
the

server
that
is
serving
the
data
with
some
additional

ActionScript.
Policy
files
function
only
on
servers
that

communicate
over
HTTP,
HTTPS,
or
FTP.
The
policy
file
is

specific
to
the
port
and
protocol
of
the
server
where
it

resides.

A
very
simplified
example
of
a
crossdomain.xml
file
is:

<cross-‐domain-‐policy>

<allow-‐access-‐from
domain="*"/>

<site-‐control

permitted-‐cross-‐domain-‐policies="master-‐only"/>

</cross-‐domain-‐policy>

For
more
information
on
crossdomain.xml
please
visit:

http://www.adobe.com/devnet/articles/crossdomain_poli
cy_file_spec.html

Lab
0:
Creating
a
Flash
Builder
Project

We
will
be
creating
multiple
Flash
Builder
projects
within

this
lab,
so
before
we
start
integrating
data,
lets
create
our

first
Flash
Builder
project.

Step
1:
Create
a
new
Flash
Builder
project

Select
File
>
New
Flex
Project
from
the
main
menu

Title
the
project
Lab1
and
choose
Web
(runs
in
Adobe

Flash
Player)
within
the
Application
type.

Set
the
Application
server
type
to
J2EE
and
select
the

BlazeDS
radio
button
and
click
Next.

Click
Next
and
fill
in
the
necessary
information
to
connect

to
your
BlazeDS
server.
Note
that
your
Root
folder
may
be

different
than
what
is
shown
below.

In
my
case
the
Root
folder
is

/Applications/BlazeDS/tomcat/webapps/blazeds
and
the

Root
URL
is
http://localhost:8400/blazeds
and
the
Context

root
is
/blazeds.
Click
Validate
Configuration.

Lab
1:
Code
View

(MXML
and
AS3
to
get
REST
Data)

Section
1:
Connect
to
data
using
MXML

Open
the
project
created
above
named
Lab1.

To
define
the
service,
we
need
to
add
an
<fx:Declarations>

block
to
wrap
the
HTTPService.
Note:
this
is
something
that

is
new
to
Flex
4.
Within
the
declarations
nested
tags,
you

will
notice
the
<mx:HTTPService/>
tag.
This
tag
defines
the

service
operation.
The
attributes
define
the
id,
expected

result
format,
URL
of
the
service,
whether
or
not
to
use
the

proxy
(more
on
this
later),
and
the
callback
functions
for

successful
or
failed
operations.

<fx:Declarations>
<mx:HTTPService
id="wines"
resultFormat="e4x"
url="http://localhost:8400/xml/Wines.xml"
useProxy="false"
result="parseXML(event)"
fault="trace(event.fault)"/>
</fx:Declarations>

Next,
add
the
<fx:Script>
block
defined
below.

<fx:Script>
<![CDATA[
import mx.collections.XMLListCollection;
import mx.rpc.events.ResultEvent;
private function parseXML(event:ResultEvent):void{
var xml:XML = event.result as XML;
dg.dataProvider = xml["Vintage"];

}
]]>
</fx:Script>

If
you
look
at
the
script
block
above
you
will
notice
the

parseXML()
function.
This
is
the
callback
function
that
we

previously
discussed
which
will
parse
out
the
XML
that
is

returned
on
a
successful
service
call.

Finally
we
need
some
UI
elements
to
trigger
the
call
and
to

display
the
data.
Add
the
component
declarations
below
to

your
application.

<mx:VBox horizontalCenter="0">
<mx:DataGrid id="dg">
<mx:columns>
<mx:DataGridColumn headerText="Vintner"
dataField="Vintner" />
<mx:DataGridColumn headerText="Name"
dataField="Name" />
<mx:DataGridColumn headerText="Vintage"
dataField="Vintage" />
<mx:DataGridColumn headerText="ParkerNotation"
dataField="ParkerNotation" />
<mx:DataGridColumn headerText="Price"
dataField="Price" />
</mx:columns>
</mx:DataGrid>
<mx:HBox>
<s:Button click="wines.send()"
label="Get Wines MXML"/>
</mx:HBox>
</mx:VBox>

Examining
the
code
above
you
will
notice
that
we
have
a

DataGrid
with
an
id
of
dg
that
contains
five
columns
that

match
the
XML
nodes.
There
is
also
a
Button
that
is
used
to

trigger
the
wines
service.

Save
you
file
and
run
the
application
and
you
should
see

the
following
after
clicking
the
Get
Wines
button.

Section
2:
Connect
to
data
using
AS3

In
Section
1
of
Lab
1
we
utilized
MXML
to
call
our
service,

we
can
also
call
the
service
using
ActionScript.

Add
the
function
below
to
the
<fx:Script>
block
of
Lab1.

private function getWines():void{
var service:HTTPService = new HTTPService();
service.resultFormat = "e4x";
service.url="http://localhost:8400/xml/Wines.xml";
service.useProxy=false;

service.addEventListener(ResultEvent.RESULT,parseXML);
service.send();
}

Notice
that
we
have
many
of
the
same
properties
set
as

were
declared
within
the
MXML
component.
By
setting
the

event
listener
for
the
successful
call,
we
are
able
to
reuse

the
parseXML()
function.

Now,
simply
add
a
few
buttons
below
the
Get
Wines
MXML

to
call
the
getWines()
function
and
clear
the
data
button:

<s:Button click="getWines()" label="Get Wines AS3"/>
<s:Button click="dg.dataProvider=null" label="Clear Datagrid"/>

Save
your
file,
run
the
project,
and
click
on
the
new
Get

Wines
AS3
button
and
you
should
see
the
results
shown

below.

Lab
2:
Code
View

(MXML
and
AS3
to
get
WSDL
Data)

Create
a
new
project
named
Lab2
(as
demonstrated

previously
in
Lab0)

Add
the
following
declarations
tag
to
define
the
connection

to
the
WSDL:

<fx:Declarations>
<mx:WebService
id="myWebService"
wsdl="http://localhost:8400/axis/MyWebService.jws?wsdl"
useProxy="false"
result="parseResult(event)"
fault="trace(event.fault)"/>
</fx:Declarations>

Next
add
a
script
block
below
the
declarations
block
to

handle
the
service
result.

<fx:Script>
<![CDATA[
import mx.rpc.events.ResultEvent;
private function parseResult(event:ResultEvent):void{
lbl.text = event.result as String;
}
]]>
</fx:Script>

Finally,
add
a
Label
component
to
display
the
service

results.

<mx:Label id="lbl" fontSize="36"
creationComplete="myWebService.hello()"
horizontalCenter="0"
verticalCenter="0"/>

Run
the
project
and
you
should
see
the
message
shown

below:

Lab
3:
Design
View

(Using
Flash
Builder
to
get
REST
data)

Now
that
we
have
looked
at
several
ways
to
connect
to
data

services,
lets
take
a
look
at
how
the
new
Flash
Builder

tooling
creates
data
connections.

Create
a
new
project
named
Lab3
(as
demonstrated

previously
in
Lab0)

Next,
click
on
the
Connect
to
Data
/
Services
link
within
the

Data
/
Services
view.

Select
HTTPService
from
the
New
Flex
Service
window.

Click
Next
and
you
will
see
the
Configure
HTTP
Service

form.

Enter
getWines
for
the
Operation
name
and

http://localhost:8400/xml/Wines.xml
for
the
URL
within
the

Operations
Grid.
Then
enter
WinesService
for
the
Service

Name
and
click
Finish.

You
should
now
see
the
new
service
defined
within
the

Data
/
Services
view.

Switch
your
project
to
Design
View
and
drag
a
DataGrid

component
from
the
Components
view
onto
the
stage.

Right
click
on
the
DataGrid
component
and
select
Bind
To

Data.

The
Bind
To
Data
window
will
open.

Before
you
can
select
the
service,
you
need
to
configure
the

return
type.
Click
on
the
Configure
Return
Type
button
and

the
Configure
Operation
Return
Type
window
will
open.

Leave
the
radio
button
set
to
Auto
detect
and
click
Next.

In
Step
2,
leave
the
radio
button
set
to
Enter
parameter

values
and
click
Next.

Within
Step
3,
select
Vintage
from
the
Select
Node
drop

down
menu
and
click
Finish.

Now
click
OK
to
close
the
Bind
To
Data
window
and
you

should
see
the
DataGrid
now
has
the
column
names

defined.

Run
the
project
and
you
will
see
your
data!

Lab
4:
Design
View

(Using
Flash
Builder
to
get
WSDL
data)

Create
a
new
project
named
Lab4
(as
demonstrated

previously
in
Lab0)

Section
1:
Connect
to
a
WSDL
within
Design

View

Next,
click
on
the
Connect
to
Data
/
Services
link
within
the

Data
/
Services
view.

Select
WSDL
from
the
New
Flex
Service
window.

Click
Next
and
the
Specify
WSDL
to
Introspect
form
will

open.
Enter
a
WSDL
URI
of

and
if

it
doesn’t
automatically
create
one,
enter
a
Service
Name
of

MyWebService.

Click
Next
and
the
Configure
Code
Generation
form
will

open.
Click
Select
All
to
generate
the
code
for
the
hello()

and
personalHello()
web
service
operations.
Now
click

Finish.

Switch
the
editor
to
Design
View
and
from
within
the

Properties
panel,
change
the
applications
layout
to

sparks.layouts.VerticalLayout.

Now
drag
a
TextInput
component
onto
the
stage,
right
click

on
it
and
select
Bind
To
Data.

Select
the
MyWebService
/
hello()
from
the
New
Service

Call
combo
boxes

and
click
OK.

You
should
now
see
the
following:

Run
the
application
and
you
should
again
see
a
welcome

message.

Section
2:
Connect
to
a
WSDL
with
Form

Generation

When
we
created
the
service
connection
to
the

MyWebService
WSDL,
there
were
two
operations.
In

Section
1
above
we
connected
to
the
simple
hello()
method

which
did
not
have
any
required
arguments.

The
second
method
personalHello()
has
two
incoming

String
arguments.
Flash
Builder
has
another
new
feature

that
will
do
some
quick
code
generation
to
connect
to
this

WSDL.

To
create
a
form
to
access
the
WSDL,
right
click
on
the

personalHello()
method
and
select
Generate
Form.

The
Generate
Form
window
will
open.
You
can
leave
all
as

is
and
just
click
Next.

The
next
screen
is
the
Property
control
mapping
screen.

Again
for
the
purposes
of
this
demo,
you
can
leave
it
all
as

is
and
just
click
Finish.

You
should
now
see
a
new
form
that
has
been
generated
on

stage.

Go
ahead
and
run
the
application,
fill
in
you’re
first
and
last

name
and
click
the
PersonalHello
button
and
you
should

see
something
like
what
is
shown
below.

Lab
5:
Accessing
a
Proxy
Defined

Service

To
use
a
proxy
configuration
rather
than
hard
coding
the

service
URL
within
the
application,
we
will
need
to
make

some
edits
to
the
BlazeDS
configuration
files.

Navigate
to:

Install directory/BlazeDS/tomcat/webapps/blazeds/WEB-
INF/flex

Open the proxy-config.xml file within a text editor.
(TextEdit on Mac or NotePad on Windows)

To define the web service, you will need to add the
following within the <service> node right above the last
</service> tag:

<destination id="MyWebService" adapter="soap-proxy">
<properties>
<wsdl>
</wsdl>
<soap>
http://localhost:8400/axis/MyWebService*
</soap>
</properties>
</destination>

You will now need to restart the BlazeDS server so that
the newly defined service is available to FlashBuilder.

Now, as we have done previously done, click on Connect
to Data/Service within the Data/Service panel.

Select
WSDL
from
the
New
Flex
Service
window.

Next
select
the
Through
a
LCDS/BlazeDS
proxy
destination

and
after
a
few
second
you
should
be
able
to
select
the

MyWebService
destination
from
the
Destination
combo

box.

Go
ahead
and
run
the
application,
fill
in
your
first
and
last

name
and
click
the
PersonalHello
button
and
you
should

see
something
like
what
is
shown
below.

Lab
6:
Enable
Paging
(Bonus)

One of the coolest new features of Flash Builder 4 is the
Enable Paging option. We will demonstrate this by using
a Java class defined as a remote object within the
remoting-config.xml file.

Create a new project named Lab6.

Click on Connect to Data/DService

Choose BlazeDS and click Next

If prompted, check No password required

Check the MyService checkbox and click Finish

Right click on the getItems_paged method within the
MyService and choose Enable Paging

Check Index from the Enable Paging window and click
Next

Enter 20 as the Number of Items to fetch and set the
Count operation to count() and click Finish

Now switch to design view, drag a DataGridto the
workspace.

Right click on the DataGrid and choose Bind To Data

Select the MyService with the Operation
getItems_paged() and click OK

Now run the project and you will see the following. You
will also notice that as you scroll the DataGrid, your data
will be retrieved.

Lab
7:
JSON
HTTPService
(extra
credit)

The
BlazeDS
server
also
included
a
JSON
sample
at

http://localhost:8400/json/Wines.json.

For
extra
credit,
attempt
to
connect
to
this
file
and
output

the
contents
to
a
DataGrid.
As
we
have
seen
throughout
the

examples
in
this
document,
there
are
several
ways
to

accomplish
this.

You
have
your
choice
of
manually
connecting
and
parsing

the
file
(Note:
you
will
need
to
utilize
the
JSON.decode()

function
located
in
the
com.adobe.serialization.json

package
within
the
as3corelib
located
at

http://code.google.com/p/as3corelib).

Or,
you
can
use
the
HTTPService
Wizard
to
connect
to
a

JSON
file,
just
as
we
had
previously
done
with
the
XML

example.

You
can
see
the
completed
solutions
in
the
Lab7A
and

Lab7B
projects.

Conclusion

If
I
have
done
my
job
properly
you
should
be
able
to
see
the

benefits
of
the
new
tooling
within
FlashBuilder
for

connecting
to
data
services.
Not
only
does
it
make
you
job
a

lot
easier,
you
also
wind
up
with
nicely
documented
and

structured
code.

It
is
also
worthwhile
to
point
out
that
although
we
didn’t

cover
it
within
this
session,
there
are
also
FlashBuilder
data

wizards
to
connect
to
BlazeDS,
ColdFusion,
LCDS,
and
PHP

services.

If
you
still
don’t
see
the
benefits
of
using
FlashBuilder
as

your
development
tool,
you
can
still
go
the
route
of

manually
connecting
and
parsing
the
results
and
compiling

your
code
via
the
Free
SDK.

New Flash Builder 4 WSDL and HTTP Connectors

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to New Flash Builder 4 WSDL and HTTP Connectors (20)

New Flash Builder 4 WSDL and HTTP Connectors