Build a Web Application with JDeveloper Using a Siebel Web Service

Purpose

In this tutorial, you use Oracle JDeveloper 10.1.3.2 and ADF (Application Development Framework) components to build a Web application with Siebel 8.0 Call Center. You use a Web service created from a Siebel Call Center application as a data control for your JSF pages. The goal is to demonstrate how to incorporate data from Siebel applications into custom-built user interfaces.

Time to Complete

20 minutes

Topics

The tutorial covers the following topics:

 Overview
 Scenario
 Prerequisites

Building the Data Model Based on a WSDL File

Creating a New Project for the User Interface

Creating the Page Flow

Creating the Query Page

Creating the Result Page

 Running the JSF Pages
 Summary
 Related Information

Viewing Screenshots

 Place the cursor over this icon to load and view all the screenshots for this tutorial. (Caution: This action loads all screenshots simultaneously, so response time may be slow depending on your Internet connection.)

Note: Alternatively, you can place the cursor over an individual icon in the following steps to load and view only the screenshot associated with that step. You can hide an individual screenshot by clicking it.

Overview

This application invokes a Siebel Web service. For this you will need a WSDL file created by Siebel. Please refer to the Prerequisites for details.

Files with the WSDL extension contain Web service interfaces expressed in the Web Service Description Language (WSDL). WSDL is a standard XML document type specified by the World Wide Web Consortium. WSDL files are used to communicate interface information between Web service producers and consumers. The WSDL file provides all the information a client application needs in order to use the Web service. A WSDL description allows a client to utilize a Web service’s capabilities without knowledge of the implementation details of the Web service.

A WSDL file contains all of the information necessary for a client to invoke the methods of a Web service:

  • The data types used as method parameters or return values
  • The individual methods names and signatures (WSDL refers to methods as operations)
  • The protocols and message formats allowed for each method
  • The URLs used to access the Web service

If you use Web services as your business service technology, model information will be exposed to the view and controller layers through ADF data control interfaces implemented by thin, Oracle-provided adapter classes.

Back to Topic List

Scenario

A Web service described in a WSDL file provides the operations that you use as data control for building your JSF pages. The WSDL file exposes three operations (Insert, QueryByExample, and QueryByID). You create the data control from this WSDL file and expose the QueryByID operation, which allows you to perform a query of a customer account in Siebel and expose the account details.

Then you create two JSF pages: a page that implements the QueryById operation from the available data control, and a second JSF page that returns details based on the ID provided in the query page.

Back to Topic List

Prerequisites

Before starting the tutorial, you should:

1.

Have access to or have installed Oracle JDeveloper 10.1.3.2. You can download it from Oracle Technology Network.

 

2.

Have access to SOA with the BPEL Web service deployed and running. To set up this mandatory prerequisite environment, you need to perform this required OBE: Create, Deploy, and Test a BPEL Process to Create a Customer in Siebel Application .

 

3.

Right click the following link and choose Save Target As.. from the context menu to download the CustomerAccount_80.wsdl file on a local directory of your choice.

 

4.

Start JDeveloper. Double-click the JDeveloper executable jdeveloper.exe found in the root directory ( <jdev_home> ) where you unzipped it.

If the Migrate User Settings dialog box opens, click NO.

Close the Tip of the Day window.

 

5.

The JDeveloper IDE should now be displayed.

6. Perform the steps provided in the tutorial Create an Inbound Web Service for Siebel Account Business Service

Back to Topic List

Building the Data Model Based on a WSDL File

The data model provides data access and validation for an application. The data is always validated by the model, regardless of the client implementation. This cleanly separates the validation and business rules from the user interface.

In the next few steps, you create an application in JDeveloper and create a data model for your application.

 Creating a New Application and Project
 Creating a WSDL-Based Data Control

Back to Topic List

Creating a New Application and Project

In JDeveloper, you always work with projects contained in an application. The application is the highest point in the control structure.

A JDeveloper project is an organization structure used to logically group related files. You can add multiple projects to your application to easily organize, access, modify, and reuse your source code. In the Applications Navigator, projects are displayed as the second level in the hierarchy, under the application.

It is considered best practice to use projects to separate the model code from the code written for the view. In this tutorial, you create one project for the data control, and later create a second project for the JSF views.

Before you create any component, you must first create the application and project. To do this, perform the following steps:

1.

Right click the Applications node in the Applications Navigator and select New Application from the context menu.

 

2.

In the Create Application dialog box, enter Siebel_WS_App for the Application Name. As you enter the application name, the directory name changes automatically.

Enter oracle as the Application Package Prefix.

Select No Template [All Technologies] from the Application Template drop-down list.

Click OK.

 

3.

In the Create Project dialog, set the Project Name to DataModel and click OK.

 

4.

The Applications Navigator should look like this:

Back to Topic

Back to Topic List

 

Creating a WSDL-Based Data Control

In this section of the tutorial, you create a data control based on a Web service. This Web service was created from a Siebel Application, but you could just as easily use a Web service created by other applications such as BPEL, JD Edwards, PeopleSoft, and so on.

To create the data control, perform the following steps:

1.

In the Applications Navigator, right-click the DataModel node and select New from the context menu.

 

2.

In the New Gallery, select Business Tier | Web Services as the category and double click the Web Service Data Control item.

 

3.

In the Create Web Service Data Control wizard, click Next to skip the Welcome page.

 

4.

In Step 1, type Siebel_WS_CustomerAccount as the Name for this data control, then click the Browse button next to the URL field.

In the Select WebService Description, locate the directory that contains SiebelCustomerAccount_80.wsdl file. Note: This is the WSDL that you creating when performing the prerequisite OBE. Refer to the Prerequisites for details.

Click Open.

In the wizard, notice the URL generated in the Service field.

Click Next.

 

5.

Step 2 shows all the operations available from this Web service. For this OBE, you will use a single operation. Select AccountQueryById and using the Add button, shuttle the selection in the Selected pane.

Click Next.

 

6.

Click Next on step 3, and 4, and click Finish on step 5.

 

7.

In the Applications Navigator, expand the nodes that now exist and review the new entries that have been created. The Applications Navigator should look like this:

 

8.

Click the save all  icon to save your work.

 

Back to Topic

Back to Topic List

Because it is considered best practice to use different projects to separate the model from the UI, you now create a second project for the JSF views.

To do this, perform the following steps:

1.

In the Applications Navigator, right-click the Siebel_WS_App node and select New Project from the context menu.

 

2.

In the New Gallery, select the Empty Project item.

Click OK.

 

3.

In the Create Project dialog, set the Project Name to UserInterface and click OK.

 

4.

In the Applications Navigator, right-click the UserInterface node and select New from the context menu.

 

5.

In the New Gallery, expand the Web Tier node and select JSF. In the Items pane, select JSF Page Flow & Configuration (faces-config.xml).

Click OK.

 

6.

In the Create JSF Configuration File, click OK to accept the default values.

 

7.

An empty page flow diagram opens. Notice the Component Palette and the Data Control Palette to the right of the diagram editor. You use this to create components for the JSF Navigation Model.

Click the save all  icon to save your work.

 

8.

The Applications Navigator should now look like this:

 

Back to Topic List

Creating the Page Flow

In this section, you use JDeveloper's JSF Navigation Modeler to diagrammatically create your application's pages and the navigation between them.

1.

In the JSF Navigation Diagram library of the Component Palette, select JSF Page  , and click where you want the page to appear on the diagram.

Rename the page QueryByID.

 

2.

From the Component Palette, drag and drop another JSF Page next to the previous one. Rename the page ShowResult.


3.

Select JSF Navigation Case  in the Component Palette. Click the icon for the source JSF page ( QueryByID), and then click the icon for the destination JSF page ( ShowResult) for the navigation case.

 

4.

Modify the default label ( success) by clicking it and typing toResult over it.

 

5.

JDeveloper gives you three views of the faces-config.xml file. We used the diagram view, but the same information is also accessible through a declarative dialog and also directly from the source.

Click the Overview tab at the bottom of the screen. Click Navigation Rules in the left-hand table. Notice that the rule you just created in the diagram is listed in the table.

Click the Source tab at the bottom of the screen. The <from-view-id> tag identifies the source page, and the <to-view-id> tag identifies the destination page.


6.

Switch back to the diagram view, and select JSF Navigation Case in the Component Palette. Click the icon for the source JSF page ( ShowResult), and then click the icon for the destination JSF page ( QueryByID) for the navigation case.

 

7.

Modify the default label ( success) by clicking it and typing toQuery over it.

 

8.

Your diagram should now look something like the image below.

 

9.

Click the save all  icon to save the diagram.

 

Back to Topic List

 

Creating the Query Page

In the next few steps, you use ADF Faces to create the QueryById page.

1.

On the Page Flow diagram, double-click the QueryById icon to launch the Create JSF JSP wizard.

 

2.

Click Next to skip the Welcome page of the Create JSF JSP wizard.

 

3.

In Step 1 of the wizard, select the JSP Document (*.jspx) option.

Click Next.

 

4.

In Step 2 make sure Do Not Automatically Expose UI Components in a Managed Bean is selected.

Click Next.

 

5.

In Step 3, make sure the following libraries are selected:

ADF Faces Components 10_1_3_2_0
ADF Faces HTML 10_1_3_2_0
JSF Core 1.0

Click Next, then Next again, and then click Finish to create the page.

 

6.

An empty JSF page opens up in the Design tab of the editor.

 

7.

From the Component palette, for the ADF Faces Core library, drag a Panel Page component onto the page.


8.

In the Property Inspector pane, change the Title from Title 1 to Query By Id.

 

9.

From the Component palette, drag a Panel Border component just after the title you just changed.

 

10.

Open the Data Controls palette and expand the Siebel_WS_CustomerAccount node. Drag and drop the AccountQueryById(String) node onto the start facet on the page.

In the popup menu, select Create | Parameters | ADF Parameter Form.

 

11.

In the Edit Form Fields, click OK.

 

12.

Select the AccountQueryById button generated in the page and in the Property Inspector pane, change the following properties:

Text Submit
Action toResult

 

13

Select the input field corresponding to the input value, and in the Property Inspector, change the Label property to Account Id:

 

14.

The page should now look like this:


15. Click the save all  icon to save your work.

Back to Topic List

 

Creating the Result Page

In the next few steps, you use ADF Faces to build the displayResult page.

1.

Return to the Page Flow diagram (click the faces-config.xml tab), and double-click the ShowResult icon to launch the page wizard.

 

2.

Click Next to skip the Welcome page, and in Step 1 of the wizard, select the JSP Document (*.jspx) option.

Click Next.

 

3.

In Step 2, make sure Do Not Automatically Expose UI Components in a Managed Bean is selected.

Click Next.

 

4.

In Step 3, the following libraries should be selected:

ADF Faces Components 10_1_3_2_0
ADF Faces HTML 10_1_3_2_0
JSF Core 1.0

Click Next, then click Next again, and click Finish to create the page.

 

5.

A new empty page opens up on the Design tab of the editor.

 

6.

From the Component palette, for the ADF Faces Core library, drag a Panel Page component onto the page.


7.

In the Property Inspector pane, change the Title from Title 1 to Details for the ID.

 

8.

From the Component palette, drag a Panel Border component just after the title you just changed.

 

9.

In the Data Controls palette, expand AccountQueryById | Return | SiebelMessage | ListofAccountInterface and select the Account node. Drop it on the page onto the start facet.

From the popup menu, select Create | Parameters | ADF Parameter Form.

 

10.

In the Edit Form Fields, using the Delete button, restrict the proposed fields to the following list:

AccountID
AccountStatus
NumberOfEmployees
CurrencyCode
Location
MainPhoneNumber
Name
Type

Check the Include Submit Button checkbox.

Click OK.

 

11.

Select the Submit button and in the Property Inspector, change the title to Back to Query, and in the Action field select toQuery from the list.

.

12.

The design view of the query page should look like this:

 

13.

Click the save all  icon to save your work.

 

Back to Topic List

 

Running the JSF Pages

Now that you have built your application, you need to test it. JDeveloper makes it easy to test JSF pages through a built-in application server. The server is automatically launched when you test a page from within JDeveloper.

 Querying for Siebel Account Values
 Testing the JSF Pages

Back to Topic List

Querying for Siebel Account Values

Before you can query a Siebel Account using ID, you need to determine the IDs that are available in your Siebel instance. To perform this section, you need to have access to Siebel Call Center (refer to the prerequisite section if necessary).

1.

Log into Siebel Call Center, providing the relevant User ID / Password combination.

 

2.

Navigate to the Accounts List using Site Map

 

3.

Click the Accounts link.

 

4.

Click the Accounts List link.

 

5.

From the returned list, highlight the account you want to query.

 

6.

From top menus go to Help | About Record.

 

7.

Find the ID value in the Row # field.

Take note of the value returned.

 

Back to Topic

Back to Topic List

Testing the JSF Page

1.

To test the pages, return to the page flow diagram. Right click the QueryById page icon and select Run from the context menu.


2.

Your page is loaded in your default browser and should look like the following:


3.

In the ID field, enter the value you previously noted in the ROW # field (in this example, 1-1PQ9)

Click Submit.

 

4.

The Details page displays the detail information for the corresponding account.

Click Back to Query to enter a new query on the previous page.

 

5.

You can test another value.

 

6.

You have successfully completed this OBE. You can close the browser window.

 

Back to Topic

Back to Topic List

Summary

In this tutorial, you created an end-to-end application by using a WSDL file as data control and creating JSF pages that use operations provided by the Web service. You learned how to:

 Build the Data Model Based on a WSDL File
 Create the Page Flow
 Create a Query Page
 Create a Result Page
 Run the JSF Pages

Back to Topic List

Related Information

To learn more about Oracle ADF and JDeveloper, you can refer to:

The Oracle Application Developer Framework home page on the OTN Web site.
ADF is a rich framework to create user interfaces.

The JDeveloper home page on the OTN Web site.
Oracle JDeveloper is a free integrated development environment with end-to-end support for modeling, developing, debugging, optimizing, and deploying Java applications and Web services.

 

 Place the cursor over this icon to hide all screenshots.