Part 3: Develop and Consume a Web Service for a Mobile Application
In this part of the tutorial, you convert a POJO into a web service, create data controls from the web service, and then consume the web service in a mobile page. In the first section, you start with an existing application that contains plain old Java classes. Then you add a method to return employee and department information. You also add a web method annotation to define a method as part of the web service.
Then you modify the method properties using the Code Editor, Property Inspector, and Structure window. After you compile the web service and deploy it to the integrated server, you run it in the HTTP Analyzer, which returns the result of the method.
In the second section, you use your MyMobileApp application and create data controls from the running web service. This process then allows you to consume the data controls in two ADF Mobile pages you later create.
Then in the next section, you create a new Feature for the application, as another entry point. This Feature's content will be a new task flow that is created when you specify the feature. While creating the Feature's content, you'll specify a new task flow as the entry point to the Feature.
In the fourth section, you modify the task flow and add two pages. In the first page you include a parameter to be passed to the web service, and a button to execute the web service. In the second page, you display the results that are returned from the web service.
The fifth and final section, is where you deploy the application to the iOS simulator and test it.
show more or lessRead more...
enter alt text hereenter alt text here
Step 1: Build a POJO Annotation-Driven Service
1.
Navigate to the mobilelabs.zip application you downloaded earlier and unzip it onto your machine. Within the zip are two additional zip archive files (webservice.zip and MyMobileApp.zip). Unzip the webservice.zip file to your machine.
Then in JDeveloper, open the WebService application.
Select the Applications Navigator tab and click Open Application (alternatively, you can select File- Open)
open application menu option
The most common way of using web services in a feature developed with local ADF Mobile XML is to create a data control for a SOAP web service. Show more or lessRead more...
2.
In the Open Application dialog box, locate the WebService directory that was created when you unzipped the WebService.zip file. Select WebService.jws, and then click Open.
When prompted, click OK to migrate application. Let that process complete and dismiss the window.
select webservice.jws file
3.
The Applications Navigator now displays the WebService application, which contains an Annotation project.
annotation project selected in applications navigator
4.
In the next couple of steps you add a method to return the employees and department information. You annotate a class to define it as a web service. You also add a web method annotation to define a method as part of the web service. This section shows how to modify the method properties using the Code Editor, Property Inspector, and Structure window.
In the Applications Navigator, expand the Annotation project nodes to show the POJO classes:
- Dept.java describes the department structure.
- Emp.java describes the employee structure.
- MyCompany.java populates information about department and employees.
- TestClient.java used as a test client to print department information.
annotation package expanded
5.
Double-click MyCompany.java to edit it.
my company . java selected
6.
Notice the existing data for departments and employees. Add a @WebService annotation after the import statements. This annotation denotes that the class contains a method to be used by a web service.
Web service annotations have been defined in a few JSRs.Show more or lessRead more...
When prompted to 'Select Import from WebService' select the 'WebService (javax.jws)' option.
mycompany.java in code editor with @WebService added to code
7.
In the margin, click the Quick Hint (light bulb icon) and select the Configure Project for Web Services option
configure project for web service selected in menu
8.
In the Select Deployment Platform dialog box, ensure that Java EE 1.5, with support for JAX-WS Annotations is selected.
Then click OK. This step adds the javax.jws.WebService import statement to the Java class and creates a web.xml file.
java ee 1.5 with support for jax-ws annotation radio button selected
9.
The Applications Navigator should now look like the following image. Notice that the icon for MyCompany.java class is changed to represent a WebService class, and the web.xml file has been added to your project
web.xml added to project and icon for mycompany.java changed in applications navigator
10.
Back in the Code Editor, scroll down to the bottom of the MyCompany.java class and define the following method, which returns information about all employees working in a specific department.
Then save all your work.
public Dept getDeptInfo (int id) {
for (Dept a: this.getMyDepts() ) {
if (a.getId() == id) {
return a;
}
}
return null;
}
code editor with new code added
11.
Create a second annotation before the getDeptInfo() method. The annotation signifies that the method will be exposed from the web service. Add a blank line above the getDeptInfo() method, and insert @WebMethod.
.@webMethod added to code
When prompted, add the import javax.jws.WebMethod; statement.
The class should look like the image below.
image after the import statement is included. no red line below @WebMethod
12.
Click Save All to save your work.
13.
You can use the Property Inspector to modify the characteristics of the class. In the menu bar, select View - Properties. The Property Inspector opens as a tab in another area (right side or bottom) of the IDE. Note: If the Property Inspector opens in a different part of the IDE, you can drag its tab and drop it on the bottom panel if you would rather work with it there.
Window - Properties menu optio selected
14.
To display the properties of the MyCompany class in the Property Inspector, select the Source tab at the bottom of the Structure window, then select the top level MyCompany class name.
MyCompany selected in application navigaotr and structure panemycompany in the property inspector
15.
The Property Inspector displays a few expandable nodes on the left side of the window. Expand the JAX-WS tab and notice that the Service Name has the word 'Service' appended to the class name. If you don't want to have the service named "MyCompanyService", you can change it, and the class reflects the change.
Change the Service Name to MyCompanyWS.
Then save all your work.
service name property set to MyCompanyWS
16.
In the Code Editor you can see that the @WebService annotation updates to reflect the new service name. Likewise, changes in the Code Editor are synchronized in the Property Inspector. This functionality is available at the method level also.
You now have a class, defined as a web service, that contains an exposed method. In the next few steps you test the web service.
mycomapny.java in coe editor with @WebService(serviceName = "MyCompanyWS") hightlighted
17.
Before testing the web service, check that your web browser settings are correct. Select Tools - Preferences and then scroll down the list on the left to select the Web Browser and Proxy page. On the Proxy Setting tab, ensure that the Manual Proxy Settings radio button is not selected, then click OK.
Web Server and Proxy node selected in Preferences and Use System Default Proxy Setting radio button selected
18.
In the Applications Navigator, right-click the MyCompany.java node, and in the context menu, select Test Web Service.
This option invokes the integrated WebLogic Server, deploys the service, and then starts the analyzer. It might take a few seconds to start WebLogic Server if you are running it for the first time.
Test Web Service menu item selecte
If you are testing a service for the first time, you need to enter a password for the WebLogic Server. This password is defined by you for this embedded version of WLS and is not to be confused with any external WLS instance that you might have running.
Insure the Listen Address is set to <All Available Addresses>.
create default domain pane
19.
The top portion of the HTTP Analyzer editor window displays the URL for the web service, the WSDL URL, and the exposed operations. Select the MyCompanyPort.getDeptInfo(,) operation from the list.
Copy the URL and paste it into a text document for use later.
Do not close the project or shutdown the Web server. The deployed service needs to be running while we test it. If it does get shut down, rerun it.
HTTP anayzer showing url being used to access the web service
The HTTP Analyzer allows you to examine the content of HTTP request/response package pairs. You can edit the content of a request package, resend it and observe the response packet returned.Show more or lessRead more...
Step 2: Create Data Controls from the WebService
1.
Now that the web service is up and running, let's go back to the mobile application you created earlier and create some data controls. Reopen the MyMobileApp application in the Applications Navigator.
Note: Do not use the WebService application from the earlier step. All the following work should be done in the Mobile application you created earlier.
MyMobileApp in the application navigator with view controller project selected
2.
Before we consume the web service in a page, the project must be able to support creating data controls. To confirm this, open the ViewController project properties, and examine the list of Features to make sure it contains the SOAP Web Services technology.
Close the Project Properties window, and save your work.
features node in project properties selected and a displayed list of features being used by the project
3.
Because the project contains the Web Services technology, we can create data controls to access our web service.
Right click the ViewController project and select New. In the gallery select the Business Tier - Data Controls category and then double click Web Service Data Control.
new gallery - business tier - data controls selected - web service data control item selected
4.
In the first step of the Web Service Data Control wizard, set the Name property to MyDeptWS.
To access the web service, set the URL property to the url that you earlier copied into a text document. For example: http://localhost:7101/WebService-Annotation-context-root/MyCompanyPort.
The mobile runtime simulator cannot resolve localhost. Therefore, you must replace the URL value for localhost with a valid IP address.
To find a valid IP address, open a command window and enter the command ipconfig. Replace the URL value for localhost with a valid address and then append the string ?WSDL to complete the value.
The completed value should look something like the following (with your IP address):
http://101.155.1.67:7101/WebService-Annotation-context-root/MyCompanyPort?WSDL
step 1 of 5 - url property filled in with http analyzer value plus ?WSDL selected
5.
The WSDL is then read, and the Service property is populated with a list of available services. In this tutorial, the MyCompanyWS service should be available.
Ensure the Copy WDSL Locally checkbox is selected. Having the WSDL local will make the application start quicker, since the web service definition is available and does not have to be remotely read.
Click Next.
step 1 of 5 - service property populated with {http://annotation/}MyCompanyWS
6.
The Data Control Operations page shows all the methods that the web service supports. Shuttle all the methods to the Selected side.
Click Finish.
step 2 of 5 - all of the available operations are shuttled to the right - they will be the ones the data controls will support
7.
When you refresh the Data Controls pane, the new web service control is displayed.
Expand the MyDeptWS node to see all the available methods.
If you expand the DeviceDataControl, you'll see all the pre-build methods used to access platform specific functionality.
In the Data Controls panel, each data control object is represented by an icon. Show more or lessRead more...
data controls pane displaying all the new controls
Step 3: Create a Feature to Access the Application
1.
In this section, you configure a new feature so the user can access the newly defined AMX pages from the native application container.
In the Applications Navigator, expand the ViewController project. Locate and expand the Application Sources folder. Then expand the META-INF folder. You will see the adfmf-feature.xml file as shown.
adfmf-feature,xml selected in the applications navigator
2.
Double click on the adfmf-feature.xml file to launch the Feature editor, where you will see the feature you added earlier.
adfmf-feature.xml in editor
3.
Add a new feature by clicking the green plus sign on the Features table near top of the editor. If you cannot see the plus sign, scroll the Feature editor to the right (the plus sign is on the far right side of the Feature editor).
adfmf-feature.xml with create adf mobile feature pane displayed with default values
4.
In the Create ADF Mobile Feature dialog, modify the following values:
- Name: Dept
- Feature ID: oracle.dept
- Confirm the Add a corresponding feature reference to adfmf-application.xml check box is selected, and then click OK.
adfmf-feature.xml with create adf mobile feature pane displayed with correct values
5.
In the Features table, select the newly created feature named Dept. Under the Features table, click the Content tab, and table. Notice that the content item oracle.dept.1 is created by default.
Save your work.
adfmf-feature.xml with content tab displayed with correct values
6.
Click in the Id field of the content item oracle.list.1. Make sure the content is highlighted as shown below before proceeding to the next step.
7.
In the Content table, click the newly created oracle.list.1 entry, and ensure the Type is set to ADF Mobile AMX.
content tab with correct type displayed
8.
In the Content section, find the File text box.
On the right side of the File text box, click the green plus sign icon, and select Task Flow.
task flow selected when green plus sign is clicked
9.
You are then prompted with a Create Task Flow pane. Use the default value (ViewController-task-flow.xml) and click OK. This will add a new, empty task flow to your application and bring you to it. Next you'll add the pages and control flows.
view controller rask flow option selected in content tab
10.
Click the adfmf-feature.xml file to confirm it is correct and matches the image below.
Then Save all your work.
completed feature displayed in the editor
Step 4: Develop the Application's Task Flow and Pages
1.
From the Components tab, create two new views to consume the web service, and name them request and results. Create the request view first, and it will be surrounded by a green circle, signifying it is the entry point to the task flow.
view controller task flow with request and results views
2.
Add one control flows to access the pages.
Control Flow Case Name
Source View
Destination View
results request results
The flow will be used to navigate to the Results page. A default __back option can be used to navigate from the results page to the page that called it.
view controller task flow with controls flows between both pages
3.
Define the request page that will include a call to the web service. In the task flow diagram, double click the request view. In the Create ADF Mobile AMX Page pane, accept the default File Name and Directory.
Notice the Page Facets section. This is a handy way to quickly build standard facets on the page. If you do not do this here, you'll have to manually add them in your page. Create a Header and Primary Action facet, then click OK. In this application there is no need for a Secondary Action or Footer facet.
create adf mobile amx page for request view
4.
Click the Preview tab at the bottom of the editor and then set iPhone Standard as value the first drop down.
iphone standard selected in request.amx
5.
Now we'll add some components to the page. To see all the mobile components, select View - Component Palette.
ADF Mobile pages allow you to develop in the same way as you would for a standard web application. Show more or lessRead more...
6.
From in the Structure Pane, expand the Panel Page - Header Facet and select the Output Text..
In the Property Inspector, set the Value property to Request and the Rendered property to true. Save your work.
output text in property inspector showing changed values
The results in the Structure Pane...
output text item set below panel page in structure pane
,,, and the Editor Preview tab.
output text in property inspector showing changed values
7.
In the Data Controls pane, expand the MyDeptWS - getDeptInfo(integer) - Parameters node, and select arg0. Drag arg0 onto the Panel Page (in the Structure pane), and release the mouse. In the context menu, select Text - ADF Mobile Input Text w/ Label.
adf mobile input text w/ lable selected in context menu
8.
With the new input item still selected, find the Property Inspector and set the Label property to Department Id.
input item in property inspector
The results in the Editor Preview tab.
input item in property inspector
Expand the Behavior node and ensure the Required and Maximum Length properties are null.
input item in property inspector
9.
In the Structure Pane, expand the Primary facet and select the Button component. It was automagically created when you selected to create the Primary facet.
button selected in general controls of component tab
In the Property Inspector, set the Id and Text properties to RunWS and the Action property to results.
button displayed in property inspector
10.
From the Operations section of the component palette, drag and drop a Set Property Listener onto the RunWS button.
set property listener in structure pane
In the Property Inspector, set the From property to #{bindings.arg0.inputValue} and set the To property to #{applicationScope.deptID}. The From property is the source value from the input item, and the To property contains a scoped parameter to use later.
Finally, set the Type property to action. This sets the Property Listener to become and Action Listener.
Save all your work.
set property listener in structure pane
set property listener in property inspector with correct values
11.
Now create the results page and add components to display the returned department information.
From the ViewController-task-flow.xml diagram, double click the results page and accept the default File Name and Directory.
Make sure to only create the Header and Primary Action facets.
create adf mobile amx page for result view
Look at the Preview and set iPhone Standard as the form to work with.
iphone standard option selected
12.
Select the Output Text for the Header and in the Property Inspector, set the following values:
Value to Results
Rendered to true.
Save all your work.
output text in property inspector
The results in the Structure Pane
output text in property inspector
13.
Now add a Form to the Panel Page to display the results returned from the web service.
In the Data Controls pane, select the child Return node of the getDeptInfo(Integer) parent Return node. Drop it on the Panel Page as a Form - ADF Mobile Read-only Form.
Form - ADF Mobile Read-only menu option selected
14.
In the Edit Form Fields pane, for each item, change the Display Label to something short and clear. Then click OK.
edit form fields with all attribute labels updated
15.
The Edit Action Binding pane is then displayed, and you must set the parameter value so that the web service returns the department information.
Set the Value property to #{applicationScope.deptID}. This is the value that you specified earlier in the To property of the Set Property Listener.
edit action binding with value set correctly
Then click OK and the Editor Preview should look like the image below,
edit action binding with value set correctly
16.
In the Structure Pane, expand the Primary facet and set the Button to go back to the Request page.
Set the Id and Text properties to Request and the Action property to __back.
button component shown in the property inspector
button shown in structure pane
17.
One final task must be performed in the results page. We must execute the web service.
In the Bindings tab, click the green plus sign next to Executables.
binding tab with executable green plus sign highlighted
In the Insert Item pane, select invokeAction and click OK.
An invokeAction executable calls an existing action or method binding defined in the action bindings.Show more or lessRead more...
inser item pane shown with invokeAction selected
18.
In the Insert invokeAction pane, set the id to RunWS and the Binds property to getDeptInfo. Then click OK.
insert invokeAction pane with correct values
19.
Finally, for the RunWS action, in the Property Inspector, confirm that the Refresh property is set to <default>(deferred).
result binding tab with runws properties defined
20.
Save all your work.
Step 5: Run and Test the Web Service from the Simulator
1.
Deploy the application just like you did in the previous section. If you still have the deployment profile from before, then use it and go directly to step 4 and continue from there. The next three steps show you how to create a new deployment profile, if the old one isn't available.
To make the whole development process easier, always test your application in a simulator.Show more or lessRead more...
To create a new deployment profile, in the Application menu, select Deploy - New Deployment Profile.
deploy - new deployment profile menu option selected
2.
In the Profile Type list, select ADF Mobile for iOS. Then click OK.
create deployment profile pane with correct values
3.
In the Deployment Profile Properties, select the iOS Options node and set the Simulator Target Version to the version of the simulator you are using. In this tutorial, we are using 5.0.
profile properties with simulator target set to 5.0
Click OK, and then save all your work.
4.
In the Application menu, select Deploy - iOS_Native_Mobile_archive1 deployment profile.
deploy - ios_mobile_native_archive selected in menu
In the subsequent dialog box, select Deploy application to simulator, and then click Finish.
deploy application to simulator selected in deployment action
5.
Watch the Deployment Log window for any errors. If the compilation and deployment process completes as expected, you should see the Deployment Log window as shown below.
deployment log window
6.
In the iOS Simulator, find and double click the MyMobileApp icon to invoke the application.
If prompted, allow MyMobileApp to use your current location
Then on the bottom of the page, click Dept.
log file after installing schema
The Dept item is visible in the application because the task flow was included as a feature in the adfmf-feature.xml file.
7.
In the Department ID field, enter 30, dismiss the keyboard and then click the RunWS button.
log file after installing schema
8.
The results page is displayed, and you should see information for department 30 which is named WebLogic and located in New York.
Click the Request button to return to the request page and try department 20. That department should be named JDeveloper and be found in Redwood Shores.
log file after installing schema
9.
Close the simulator. You are now finished with this tutorial.
