Creating a New BPEL Project
Creating a new synchronous BPEL project is easily done using JDeveloper's BPEL project wizard. Once the project is created, a set of initial files are generated that include a starter ".bpel" file, which is the XML source of the orchestration, and a ".wsdl" file, which is the Web Services Descriptor document for the BPEL process. This is needed since the BPEL process flow, when deployed, is accessible as a Web Service.

Once the starter BPEL project is generated, the initial (starter) orchestration will appear in the BPEL visual designer. The next step is to create Partner Links that the BPEL process will call (or invoke) the loan rate Web Services (Figure 4).

Creating Partner Links and Defining Variables
Creating Partner Links to our loan rate Web Services is done by dragging and dropping a Partner Link component onto the right side of the BPEL diagram and providing the WSDL URL to the dialog (Figure 5).

Once the EzLoan and CheapLoans Partner Links have been created, they'll be "invokable" in the BPEL process flow. We'll return to these shortly.

Since our JSF application will be supplying a Social Security number, we'll declare a global "soc_security" variable in the BPEL flow. This is done by clicking on the variables icon on the upper left of the flow and declaring a new global variable in the dialog (Figure 6).

Building the Flow
Now that we have our Partner Links and a soc_security global variable, we can build our BPEL process flow. We start by dragging and dropping an "Assign" element to just below the ReceiveInput node. After the element is dropped, we double-click on it to set its properties. In the dialog we name it "assign_soc_sec" and create a Copy Rule and assign the incoming (Input) value to the soc_security global variable. Later in the flow we'll use the soc_security variable as an argument to the loan rate Web Services.

The next step in building our BPEL process flow is to insert a scope element just below the soc_security assign element. The scope element allows for a collapsible sub-region of the overall flow. Our new scope element will contain our loan comparison process flow so we can name it "compareloans." (Figure 7)

In the BPEL Designer, open the new scope region by clicking on its "+" sign. The scope element will expand into an empty box with a "Drop activity here" text message inside of it. Next we'll drag and drop a "Flow" element inside the scope region. The Flow element lets our application invoke more than one Partner Link (Web Services) at the same time.

After the Flow box is added, we open it to reveal empty activity boxes. Here is where we add the invoke elements from the palette to invoke the services provided by the Partner Links (Figure 8). After dragging an Invoke element into one of the empty flow activity boxes, we double-click it to edit its properties. This Invoke element will call the EzLoans Partner Link so we set the "Partner Link" property with EzLoan. Once selected, we can then select the getDailyRate Operation of the service. For the Input variable we select the soc_security global variable and the output of the invoked service is stored in a newly created global variable called "EzLoanOut."

A separate Invoke method is then dropped into the alternate flow activity box and its properties are set in a similar manner except it will call the CheapLoans Partner Link and the global output variable for it will be "CheapLoansOut."

After adding the invoke methods, the next step is to insert a "Switch" element that will let the BPEL process compare the different rates returned. In the BPEL Design we drag a Switch element and drop it just below the Flow element (Figure 9).

The BPEL Switch element works by having both a condition expression and two possible operations, based on the evaluation of the condition expression. We'll edit the condition to compare the two loan rates returned from the Partner Link invoked. Editing the Switch condition is done by clicking on the small edit icon at the top of the Switch element to invoke an expression builder dialog that lets us build a logical expression to compare the values of the different loan rate amounts (Figure 10).

By selecting from both the variables tree on the left and the functions window on the right, one can easily build an expression from which to determine which activity to proceed with.

For our application, if the value from the EzLoan rate is less (<) than the CheapLoans Value, then we'll proceed with the activity on the left side (which we'll place in an Assign element). The actual expression used is:

bpws:getVariableData
('EzLoanOut','parameters','/ns4:getDailyrateResponseElement/ns4:result')
<bpws:getVariableData('CheapLoansOut','parameters','
/ns5:getLoanrateResponseElement/ns5:result')

If the expression evaluates to true the application has to return the EzLoan value to the end user since it's the lower value, otherwise it should return the CheapLoans value. Returning the loan rate values is done by using Assign elements (Figure 11).

Inside each Assign element a Copy rule is created to place the value of either the global variable EzLoanOut or CheapLoansOut into the global outputVariable of the overall BPEL process (Figure 12).

Once the Assign elements have their respective Copy Rules inserted, the overall BPEL process flow is complete. At this point the BPEL project can be compiled and deployed to the Process Manager server.

Once deployed to the server, the BPEL process becomes active and can be called as a Web Service. It can also be tested and fully managed from the Process Manager though its Web management console (Figure 13).

In the Console we can also see the final URL of the deployed BPEL process first by clicking on the LoanCompare BPEL process and then clicking on the WSDL tab. The URL for our application is: http://localhost:9700/orabpel/default/ LoanCompare/1.0/LoanCompare?wsdl. This is the URL which will be called from the JSF Web application.

Building a JSF Web Application to Call Our LoanCompare Process
This simple JSF example application will contain a form page, which lets the user enter a Social Security number and get the lowest loan rate result returned from the BPEL process (Figure 14).

Building a JSF Loan Application
To build our JSF loan application, we'll again use Oracle JDeveloper 10g (10.1.3).

To get started, we create an empty project named FacesLoanApp.jpr. (File->New..->Empty Project) Once the project is created, we create a JSF-enabled JSP page, form.jsp, using the JSF JSP wizard. (File->New -> Web -Tier -> JSF -> JSF JSP) As the wizard starts, we enter the name of the page "form.jsp" and click Next to continue.

On the Component Binding page of the wizard, we select the option to Autobind the page. The autobinding feature in JDeveloper creates bound declarations of JSF user interface components as we drag and drop them onto JSF pages. For example, if a button is dropped on a page, it will have a corresponding declaration of a Faces button component created in a registered backing bean for the page.

The term "backing bean" refers to a special type of JSF managed bean that is created as a code-behind Java class, which is used to hold declarations of the JSF UI components as well as other page-based event logic. JSF managed beans are simply Java classes that are registered in the faces-config.xml file that are then usable in the Faces application.

Once the form.jsp page is generated, the visual editor appears. At this point we can add a simple banner "JSF Loan Form" at the top of the page using simple HTML <h2> formatting.

Below the banner, we'll add a simple form that accepts a Social Security entry along with a button to submit the form. For this we'll add JSF UI components to the page by dragging and dropping them from the Component Palette on the right.

The first UI component to drop on to the page is a Panel-grid component. After dropping the component, a wizard appears. In the wizard choose the "Create Empty Panel Grid" option and specify that it will contain two columns. Click Finish to insert the empty panelgrid into the page and it will be visible as an empty dotted blue-lined box. This box will contain our form items.

Drag and drop an OutPut Label component followed by an Input Text component. To complete the example form, drag and drop a Command Button from the palette as well.

Now that the components have been added to the page, the label and the button can have their value properties edited with values "Social Security" and "Submit" respectively. You'll see the value changes in the visual editor once they are made.

The final edit to our page is to add a bit of text below the form, "The lowest rate found was:" along with an Output Text UI component that will be used to display the returned results from the BPEL Web Service. Once added, the final page looks like Figure 15.

Creating a JSF Action Method to Call the BPEL Web Service
Now our application will be updated so that when the button is clicked, it will call the LoanCompare BPEL Web Service with the value supplied in the Social Security input field. This is easily done by double-clicking on the submit button. This will autogenerate a Faces action method and opens the code editor. At this point we can edit the code that executes as the button is clicked. The code generated is:

      public String commandButton1_action() {
         // Add event code here...
         return null;
      }