In this section of the tutorial, you expand the application you have just completed. You will find a web service and get access to the Web Services Description Language (WSDL). From that, you will create an MAF data control and consume it from a page in your application.

Preparation	Application
This part of the tutorial is designed to be completed in order and as the third and final step in this tutorial. However, you may choose to download the application that has parts 1 and 2 completed for you. If you would like to start from the completed application, download the compressed file using the download button to the right, and import the file into your workspace.

In this part of the tutorial, you find a web service that you want to add to your application. The web service we are going to use is available from webservice.net. It is a weather web service that accepts a zip code and returns weather information. Although we are using that service in this tutorial, you could easily substitute any web service you choose.

1. Close all the open editors in OEPE.

2. In preparation for downloading a wsdl into OEPE, create a folder within your project to hold the wsdl resource.
   In the Project Explorer, right-click EmployeeView and select New > Folder. Name the folder resource and click Finish.

   
   
   

3. First, using a browser of your choice, find the web service you want to consume. In our case, navigate to http://wsf.cdyne.com/WeatherWS/Weather.asmx. Click the Service Description link to show the WDSL document.

   
   
   

4. Save the file as Weather.asmx.xml to the resource folder you just created. This should be the default name.

   
   
   

5. Locate the file using Windows explorer and rename it to weather.wsdl. Click Yes on the warning dialog about renaming the file extension. NOTE: Make sure to use the extension wsdl.

   

6. In the Project Explorer in OEPE, expand EmployeeView > resource. You should see the weather.wsdl file. If not, right-click resource and select Refresh (or hit F5).

   

7. Double-click weather.wsdl to open it in the wsdl editor. You will see a graphic that shows the interfaces available from the service.

   

Now that you have the web service, you can build the components on which you will base the remainder of the application.

In order to consume (or use) this web service in your MAF application, you need to create a MAF data control. The data control is an abstraction of the services or methods available in the web service. This abstraction layer allows the application developer to use the web service without needing to worry about the implementation details of the service. It becomes another drag and drop component to use however the developer needs.

1. To create the data control, right-click weather.wsdl and select Model Components > Create Data Control.

   

2. Click Next to accept the default name (Weather).

   

3. Select WeatherSoap12 in the Operations panel and click Next.

   

4. On the Summary page, click Finish to create the data control. OEPE will show a dialog showing the affected files. Click OK to dismiss the dialog.

   

5. OEPE will open the Data Control Manager. It should look something like the following:

   

   You now have a data control that is based on the Weather web service. In the next section, you create a Weather page that will use the data control.

In MAF, the steps for consuming all data controls are the same. It doesn't matter if the data control is based on a Java class or a web service. In this section, you add elements to your application that consume the weather data control.

1. Close any open editors and open the MAF Feature Editor (HINT: expand EmployeeView > MAF and double-click MAF Feature Editor.)

   

2. Add a new feature (use the add button) and set the Id of the feature to WeatherService.

   

3. Select the new WeatherService feature and click the Add button to create content for the feature. Select AMX Page and click OK to accept the default ID.

   

4. With the amx page content selected, click the create icon to create an amx page. Name the page GetWeather.amx and click Finish to create the page. OEPE will open the page in the page editor.

   

5. Save your work.

Next, you design the page to consume the web service data control.

6. In the GetWeather.amx page, set the Value property of the header facet to Get Weather .

   

7. Select the primary commandButton and set the Action to __back. (HINT: Use the Properties Inspector and the drop down next to Action.)

   

8. Save your work.

   That sets up the basic page. Next, you add the data control to consume the web service.

9. In the Data tab of the Palette, expand Weather to show GetCityWeatherByZIP(String).

   

10. Drag GetCityWeatherByZIP(String) to just after the closing </amx:facet> tag and select Parameter Form as the component type. Click Finish to accept the Form Configuration bindings.

    

11. Save your work.

    As you can see in the code, there is a binding to an input text component to accept the zip code. There is also a button to execute the binding which will call the web service. What is missing is the output text to show the return values.

    

12. To show the return, or results, of the web service, select the returnGetCityWeatherByZipResult in the Data Palette and drag it to just before the closing </amx:panlePage> tag and select Form.

    
    
    

13. In the Form Configuration dialog, remove all of the Value Bindings except: City, Temperature, RelativeHumidity, and Wind. Click Finish to create the form.

    

14. Save your work.

    One UI consideration is that we don't want to show the output text until the user clicks to button to call the web service. This UI change is pretty simple, but requires two things to happen. First, when the button is clicked, we will set a variable to some value. Next, we'll add a property to the output text that says to display the value only when the variable is set.

15. We need to add a Set Property Listener to the command button. First, remove the embedded end tag mark (/) from the end of the amx:commandButton.

    

16. At the end of the line, enter </. OEPE will automatically close the nearest non-closed tag by adding </amx:commandButton>.

    




17. Insert a couple of new lines after the before </amx:commandButton>.

    

18. Select the Tags tab in the Palette and use the filter to find set property.

    

19. Drag the Set Property Listener to the empty lines you just added inside the command button tag.

    

20. In the dialog, set the From value to #{'Y'}.

    

21. For the To value, click the Bind to a Dynamic value icon to open the Expression Builder.

    

22. In the Expression, enter #{viewScope.displayResult}.

    

23. Click OK and then click Finish to create the Set Property Listener.

    With this Set Property Listener created, when the user clicks the GetCiyWeatherByZIP button, in addition the the web service call, the Set Property Listener will set the viewScope variable displayResult to Y. In the next few steps, you set the output text so that it will not display unless the variable is set.

24. Save your work.

25. Click the <amx:panelFormLayout tag and select the Common on the Properties tab.

    

26. Click the Bind to Dynamic Value icon (lightning bolt) to open the Expression Builder.

    

27. In the Expression Builder, enter the expression #{viewScope.displayResult == 'Y'} and click OK.

    

28. Save your work.

    We are almost ready to deploy the application. Before we can deploy, we have to grant the device feature permissions just like we did for the Camera and email features.

29. Click the maf-feature.xml tab. If it is not open, use the Project Explorer to find and open the MAF Features Editor.

    

30. Expand WeatherService and select Device Access.

    

31. Select Network Access in the access list. When you do, notice the warning icon that indicates that the application needs to grant the requested access.

    

32. Save your work.

33. Click the application editor link to open the Mobile Application Editor.

    

34. In the Mobile Application Editor, select Network access to grant the access to your feature.

    

35. Save your work.

    Now you are ready to deploy your application.

    If you are running the emulator from behind a firewall, you will need to start the emulator from a command line with a special parameter to account for a proxy.

    If you are not behind a firewall, you can use the emulator as you have been and skip to step 38.

36. Open a command window and navigate to your <your Android SDK Install>\sdk\tools directory.

    

37. Start the emulator by entering emulator -avd MAF -verbose -http-proxy MyProxyHere:80. (HINT: Substitute MyProxyHere with the name of your proxy. If MAF is the name of the AVD device you created earlier use it, otherwise substitute the name you used here.)

    

    You are now ready to deploy the application.

38. In the menu bar, click Debug > Debug Configuration.

    

39. Select MAF Application > MAF and click Debug.

    

40. You will see the deployment success message in the log window when the deployment is complete.

    

In the Emulator, click Applications and then Employee to launch your application.



42. Click the WeatherService feature.

    

43. Enter 77089 (or the zip code of your choice) in the symbol field and click GetCityWeatherByZIP.

    

44. The web service returns the results and displays them in the form.

You have now successfully added MAF data controls to your application that consume a web service. This concludes this tutorial.

Expand all | Hide all