new flash builder 4 wsdl and http connectors
DESCRIPTION
MAX 2009 tutorial on how to use the new WSDL and HTTP Connectors built into Flash Builder 4TRANSCRIPT
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.
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 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.