In this section of the tutorial, you take the application you have just completed and expand it by adding components. You add some view components to your application. You then define an ADF data control based on a web service. In the last section you create a page that uses the web service to update salary information for an employee.

Preparation

Application

During this section of the tutorial, you create a data control that consumes a web service. The web service will run locally on your machine. You can download the JDeveloper Workspace that contains the web service right now. Later in this tutorial, you learn how to run the web service. Download the compressed file using the download button to the right, and extract the file into a myWork directory.

In this part of the tutorial, you add view components and navigation rules to the existing application. You will create the pages for these components in the next section.

1. Open EmpsTaskFlow.xml in the editor.

   

2. Add a View Activity from the Component Palette to the task flow and name it SalaryUpgrade.

   

3. Drag another View Activity to the task flow and name it TakePicture.

   

4. Draw a Control Flow Case between empList and TakePicture. Name the flow takePicture.

   

5. Draw a Control Flow Case between EmpList and SalaryUpgrade. Name the flow goWS.

   

You now have the components on which you will base the remainder of the application.

In this section, you open and run a web service that you will use in your application. You then create a data control based on the web service and consume the data control from your application.

1. In the Preparation step of this tutorial, you downloaded SampleWS.zip and extracted it into a myWork directory of your choice. If you did not do that, go to the beginning of this tutorial and download and extract that file now.

2. In JDeveloper click File > Open and navigate to the directory you used when you unzipped SampleWS.jws. Select SampleWS.jws and click Open.

   

3. In the Application Navigator, expand Project 1 > Application Sources > a to show Service.java. Right-click Service.java and select Run.

   

4. If this is the first time you have invoked the WebLogic Server (WLS), it will prompt you for a password. Enter a password, confirm the password, and click OK. If you are running WLS for the first time, it builds a default domain and might take a few minutes to start.

   

5. When the web service is deployed and running, you see a completion message in the Running messages tab. pane when the web service is deployed and is running. IMPORTANT NOTE: If the web service stops for any reason, you must restart the web service or your deployed mobile application will not function correctly. Specifically, you will see a failure when you try to update an employee's salary.

   

6. Click the link for the Target URL to open the HTTP Analyzer. You can use the HTTP Analyzer to test the web service. If you were to enter values in each of the parameters and click Send Request. The web service will process the request and return the results all from within the HTTP Analyzer.

   

7. Right-click the WSDL URL near the top of the Analyzer pane and select Copy. You will use this WSDL address when you create the Data Control.

   

Now that the web service is running, you switch back to the Employees workspace to use the web service.

8. Use the drop down list in the Application Navigator to navigate back to the Employees workspace.

   

9. Right-click the ViewController project and select New.

   

10. In the New Gallery, select Business Tier > Data Controls > Web Service Data Control and click OK.

    

11. If you deploying to a device or an emulator, you need to specify the IP address of the machine on which the web service is running.

    1. To find the IP address on a Windows machine, start a command window (select Start > Run, enter CMD, and then click OK.)

       

    2. In the command window, type ipconfig and press enter.

       

    3. Copy the IP address of the machine. Use that IP Address in the URL of the web service data control. THe image below has the I.P. address blacked out for security purposes.

       

12. In the Create Web Service Data Control wizard, name the web service data control SalaryService, and paste the URL of the WSDL into the URL field. Click Next.
    
    Again, for security purposes, the I.P. address is not visable in the image below.

    

13. Select the SalaryUpgrade method, shuttle it to the Selected list, and click Finish.

    

14. Save your work.

15. Open the Data Controls palette and click Refresh to see the new web service data control, SalaryService.

    

You now have a Data Control that is based on the SalaryService web service. In the next few steps, you create the SalaryUpgrade page for the view activity you added earlier. You also add navigation to the EmpsList page.

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

1. Open EmpsList.amx in the editor.

   

2. As you did earlier, use the splitter in the editor to view both the code and the preview of the page.

   

3. Choose iPad as the device type so you can see more detail on the screen while you are working on the page.

   

4. In the source code editor, select the button with the Id cb2 (the right-most button on the page). I the Property Inspector, set the Text to Update and the Action to goWS.

   

5. Save your work.

Next, you will design the second page, SalaryUpgrade which you will use to consume the web service.

6. Open EmpsTaskFlow.xml in the editor.

   

7. Double-click SalaryUpgrade to create the page. Click OK to accept the default values for the new page.

   

There will be two parts to this page. The first part will show the employee data for the currently selected row. The second part will be used to invoke the web service.

8. To show the employee data, drag the emps collection to the Panel Page and drop it as an ADF Mobile Form.

   

9. Remove all the attributes except for Name and Salary and click OK to add the form to the page.

   

10. Click the Bindings tab at the bottom of the editor to see that the bindings for Name and Salary are added to the page.

    

This data control and bindings will show employee data, but you need to make sure that the page displays the data of the currently selected row. To select the current row, you add a call to a method that will set the row.

11. To ensure that you have the row you want, add an Action binding that will call the method. Click the Add icon (the green plus sign ) on the Bindings panel.

    

12. Select action as the binding type and click OK.

    

13. In the Create Action Binding editor, select the empsIterator and set the Operation to setCurrentRowWithKeyValue.

    

14. Set the Value property of the rowKey parameter to #{pageFlowScope.empId}. Remember that you created this variable to store the current rowKey from the previous page, empList.amx.

    

Now that you have the action binding, you need to add it to the list of executables.

15. Click the Add icon (the green plus sign) on the Executables panel.

    

16. Select invokeAction as the type and click OK.

    

17. Set the id the setEmpId and Binds to setCurrentRowWithKeyValue. Click OK.

    

18. Notice that the invokeAction is the last executable in the list. This action sets the current row in the iterator, so it should be the first action to be executed.

    

19. Drag setEmpId to the top of the executables list.

    

In the next few steps, you add the components that call the web service.

20. Save your work.

21. Click the Source tab on the SalaryUpgrade.amx page.

22. From the SalaryService data control, drag the SalaryUpgrade method to the Panel Page and drop it as an ADF Mobile Button.

    

The Salary Upgrade web service accepts the following parameters; Name, Date, Salary, and Commission. Name and Salary are fields on the form you just added. Therefore, when you call the the web service, you pass the Name and Salary from the fields on that form.

23. Click the down arrow next to the Value property of the name parameter and click Show EL Expression Builder.

    

24. Use the Expression Builder to select bindings.name.inputValue and click OK. (The expression gets the current value of the name field on the form.)

    

25. Repeat those steps for the sal field. (HINT: In the Expression Builder, select bindings.salary.inputValue and click OK.)

    

For the next two parameters you set the values to viewScope variables you populate later.

26. Using the same process as before, select the date parameter and set the Value to #{viewScope.start}

    

27. Using the same process as before, select the comm parameter and set the Value to #{viewScope.commission}.

    

28. Click OK to create the button.

    

29. Save your work.

30. Click the bindings tab to examine the bindings you just added.

    

31. Expand SalaryUpgrade in the Structure pane to see the parameters.

    

32. Click each of the parameters and notice in the Property Inspector that you can see the ND values for each of the parameters.

    
    

As you have seen, the SalaryUpgrade web service accepts four parameters. The first two values come from the form you created from the emps data control. That leaves two more values that need to come from somewhere. You have already set the bindings on the SalaryUpgrade method call to use the two form fields. Now you need to create fields to accept the two additional parameter values (date and commission) and store those values in the viewScope parameters that you created.

33. Click the Source tab on the SalaryUpgrade page and drag a Switch (boolean) component from the Component Palette to the Panel Form Layout component in the Structure window.(HINT: The Switch component is under Text and Selection in the Component Palette)

    
    

34. In the Property Inspector, set the label to Commissioned? and the Value to #{viewScope.commission}.
    
    

35. Drag an Input Date component to the Panel Form Layout.

    
    

36. In the Property Inspector, set the label to Starting and the Value to #{viewScope.start}.

That takes care of the parameter values passed to the web service, but we also want to show the results from the web service.

37. Expand the SalaryService data control to see the String, which represents the results from the web service.

    

38. Drag String to the Panel Page and drop it as an ADF Mobile Output Text.

    

At this point, the page is complete and would run. However because the output field is based on a call to the web service, the page will call the web service before the user can enter the start date or the commission value. In the next few steps you set the page to call the web service only after the SalaryUpgrade button is clicked.

39. First, you want to control the rendering of the Output Text field that holds the results from the web service. To do that, add a condition to the Rendered property. Using the Expression Builder, set the Rendered property to evaluate a new variable, #{viewScope.displayResults == 'Y'}. Click OK.

    

40. Next, add a setPropertyListener component that sets the value of the viewScope.displayResults variable to Y. To do this, drag a SetPropertyListener component to the SalaryUpgrade button, and set the following properties:
        From: #{'Y'}
        To: #{viewScope.displayResults}
        Type: action

    
    
    

41. Finally, you need to do provide a way back to the calling page. Select the first button, which is cb1 and in the Property Inspector, set the Text to Back and the Action to __back.

    
    

42. Save your work.

As a result of the previous few steps, when the user enters values in the commission and date fields and clicks the SalaryUpgrade button, the page calls the web service and displays the results.

In preparation for the completed application, you created a view activity on EmpsTaskFlow called TakePicture. In Part 3 of this tutorial, you will use that view activity to use device services. However, before you can deploy the application in this part of the tutorial, you need to create a page as a place holder for that view activity.

43. Create a default empty page for the TakePicture view activity using the default values. (HINT: Open EmpsTaskFlow, double-click TakePicture and click OK to accept the default values for the page.)

    

44. Save your work.

Next, deploy and test the application

45. From the Application menu in JDeveloper, select Deploy Anfroid2 to Android emulator.

    

46. In the Deployment tab of the Log window, make sure the deployment is finished.

    

47. Remember that the SalaryUpgrade web service needs to be running for the application to work. The instructions for running the web service are in step 2 of this tutorial.

48. In the emulator, or your device, navigate to the Applications page and open the Emps application.

    

The emulator now shows the Emp List page which is the entry page to your application.



49. Click the right-arrow on the left side of the page to show the list of employees.

    

50. Click Shay (or any of the employees in the list) to select an employee.

    

51. Click the Update button. The application now shows the SalaryUpgrade page.

    

52. Using the Android Emulator UI, change the salary to 5555, set the Commission to On, and change the Start Date to a few days from today.

    

53. Click SalaryUpgrade. Notice the message that appears under the SalaryUpgrade button. This message is returned from the SalaryUpgrade web service. Your application has successfully called a web service and displayed the returned values.

    

You have now successfully added ADF controls to your application that consume a web service. In the next section of this tutorial, you integrate some native device features into your application.

Expand all | Hide all