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>\BlazeDS\tomcat\bin

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

Now click Finish.

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 http://localhost:8400/axis/MyWebService.jws?wsdl 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> http://localhost:8400/axis/MyWebService.jws?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.