1. Home
Feedback
 

Products

  1. webMethods CAF 7.1.1
  2. BPM Designer 7.0
  3. BPM Designer 7.1
  4. MWS 7.0
  5. MWS 7.1

Article Types

  1. Sample Applications
  2. Core Concepts
  3. External References
  4. Webinars

Key Subjects

  1. Web Services
  2. Database
  3. JavaScript
  4. JSF Controls
  5. Task Development
  6. Task Inbox
  7. Task Assignments
  8. Task Events
  9. Debugging
  10. Web Application
 
MOST POPULAR
  1. CAF JavaDocs
  2. Designer Online Help
  3. CAF Java(Script)Docs
  4. Confirmation Dialog Tutorial
  5. CAF Samples for webMethods 7.1...
  6. CAF and JSF
  7. JSF Binding Expressions
  8. Dynamic Panel Switch Applicati...
WHATS NEW
  1. Session State Mgmt
  2. Print Table
  3. Popup Dialog

Use web service to write/update data

This samples demonstrate how to use web service to get,update and add new data.
Create the View to Obtain and Update Data Using a Web Service

Create the View to Obtain and Update Data Using a Web Service
This view uses a Web service to obtain information about a customer to display in the view. The user can edit the information. The application obtains the information that the user supplies and uses a Web service to update the customer data.
Basic Steps
*
Add the updateCustomerwithWS view to the project.
*
Generate a Web Service Connector from the Web Service Descriptor of the service that gets information about a customer.
The Web Service Descriptor resides in the IS_Package_CAFDemo package, which you should already have installed in the Integration Server that you use with Designer.
*
Drag the Web Service Connector onto the design canvas to have Designer generate user interface controls for the Web service.
*
Update the user interface controls that Designer generated to meet your needs.
*
Generate another Web Service Connector from the same Web service as before; however, for this Web Service Connector select the operation that updates customer information.
*
Add Input Text controls to the view that a user can use to supply updated customer information. Add these Input Text controls by dragging selected properties that Designer generated for the Web Service Connector into the view.
*
Add a Boolean page bean property named isEditable. Bind this property to the Rendered property of Text controls in the view to define when the application is to display the controls.
*
Add actions to the view that all the user to edit customer data (onEdit action), update customer data (onUpdateCustomer action), and cancel changes (onCancel action). Add the actions to the view to create Async Command Button controls that a user clicks to perform the associated action.
Detailed Step-By-Step Instructions
1
Add a new view named updateCustomerwithWS.
a
From the Project Explorer view, right click Project > WebContent > webServiceViews and select New > Other.
b
In the Select a Wizard window, select Web Application View and click Next.
c
In the JSF Web Application View File window in the File Name field, type updateCustomerwithWS.view.
d
Click Finish.
2
From the Palette view, drag a Form control (Control > Command > Form) into the View Root of the new view.
3
Generate a Web Service Connector in Designer for the GetCustomerInfo operation of the Integration Server Web Service Descriptor, caf.northwind:getnUpdateCustomerWS, which is in the IS_Package_CAFDemo package.
a
From the IS Browser view, browse to and right click IS_Package_CAFDemo > caf > northwind > getnUpdateCustomerWS and select Generate Web Service Connector.
b
On the Project Selection window, ensure your project is selected in the Project field and click Next.
c
On the Select WSDL Location window, update the WSDL field, if necessary, then click Next.
d
On the Select Operation window, select GetCustomerInfo and click Finish.
Designer creates a Get Customer Info node in the Bindings view.
4
From the Bindings view, drag the Get Customer Info node into the Form control on the design canvas.
Designer creates a user interface for the Web service.
5
Make changes to the user interface controls that Designer generated to meet your needs. For the sample that illustrates this use case, make the following changes:
a
On the design canvas, drag the Refresh button that Designer generated and move it next to the Customer ID text box.
b
With the Refresh button selected on the design canvas, in the Properties view select the Value tab and set the Value property to Get Details.
c
Move the “Get Customer Info Input” property group outside of the “Input Parameters” property group; then delete the “Input Parameters” property group.
d
Move the “Customer Info” property group outside the “Output Results” property group; then delete the “Output Results” property group.
e
Re-arrange the controls to match the screen shot below:
6
Generate a Web Service Connector in Designer for the UpdateCustomer operation of the Integration Server Web Service Descriptor, caf.northwind:getnUpdateCustomerWS, which is in the IS_Package_CAFDemo package.
a
From the IS Browser view, browse to and right click IS_Package_CAFDemo > caf > northwind > getnUpdateCustomerWS and select Generate Web Service Connector.
b
On the Project Selection window, ensure your project is selected in the Project field and click Next.
c
On the Select WSDL Location window, update the WSDL field, if necessary, then click Next.
d
On the Select Operation window, select UpdateCustomer and click Finish.
Designer creates a Update Customer node in the Bindings view.
7
In the Bindings view, add the input parameter fields for the updateCustomer operation to the corresponding Property Line controls already in the view.
a
In the Bindings view, expand the Update Customer > Input Parameters > Update Customer node.
b
Drag each input parameter (e.g., Customer ID) into the corresponding Property Line control (e.g., the Customer ID property line).
The final view should look similar to the following:
8
Add a page bean property named isEditable. The application will use this Boolean property to control whether a user is able to edit fields in the user interface.
a
In the Bindings view, right click the page bean and select Add > Data.
b
In the Add New Property window, specify the following:
 
In this field...
Specify...
Property Name
isEditable
Property Type
java.lang.Boolean
c
Click Finish.
9
Bind the Rendered property of each Output Text control in the “Customer Info” property group to the isEditable property. You want the application to display the Output Text controls when the value of the isEditable Boolean page bean property is false. To achieve this, proceed the property name identifier with an “!”, which is the Java negative test symbol.
Select each of the Output Text controls. While the Output Text control is selected, in the Properties view select the General tab and set the Rendered property to the following:
#{!WebServiceViewsudpateCustomerwithWSView.editable}
10
Bind the Rendered property of each Input Text control in the “Customer Info” property group to the isEditable property. You want the application to display the Input Text controls when the value of the isEditable Boolean page bean property is true.
Select each of the Input Text controls. While the Input Text control is selected, in the Properties view select the General tab and set the Rendered property to the following:
#{WebServiceViewsudpateCustomerwithWSView.editable}
11
Add an action to the page bean named onEdit.
This action invokes the Web service to get the information to display in the Input Text controls. It then sets the isEditable property to true so that the application displays the Input Text controls so that the user can edit the information.
a
In the Bindings view, right click the page bean and select Add > Action.
b
In the Add New Action Method window in the Action Name field, type onEdit.
c
Click Finish.
d
Open the page source and update the logic for the onEdit action to match the following:
 
public String onEdit() {
this.getUpdateCustomerWS().getParameters().getUpdateCustomer().setAddress(this.getGetCustomerInfoWS().getResult().getCustomerInfo().getAddress());
 
this.getUpdateCustomerWS().getParameters().getUpdateCustomer().setCity(this.getGetCustomerInfoWS().getResult().getCustomerInfo().getCity());
 
this.getUpdateCustomerWS().getParameters().getUpdateCustomer().setCompanyName(this.getGetCustomerInfoWS().getResult().getCustomerInfo().getCompanyName());
 
this.getUpdateCustomerWS().getParameters().getUpdateCustomer().setContactName(this.getGetCustomerInfoWS().getResult().getCustomerInfo().getContactName());
 
this.getUpdateCustomerWS().getParameters().getUpdateCustomer().setContactTitle(this.getGetCustomerInfoWS().getResult().getCustomerInfo().getContactTitle());
 
this.getUpdateCustomerWS().getParameters().getUpdateCustomer().setCountry(this.getGetCustomerInfoWS().getResult().getCustomerInfo().getCountry());
 
this.getUpdateCustomerWS().getParameters().getUpdateCustomer().setCustomerID(this.getGetCustomerInfoWS().getResult().getCustomerInfo().getCustomerID());
 
this.getUpdateCustomerWS().getParameters().getUpdateCustomer().setFax(this.getGetCustomerInfoWS().getResult().getCustomerInfo().getFax());
 
this.getUpdateCustomerWS().getParameters().getUpdateCustomer().setPhone(this.getGetCustomerInfoWS().getResult().getCustomerInfo().getPhone());
 
this.getUpdateCustomerWS().getParameters().getUpdateCustomer().setRegion(this.getGetCustomerInfoWS().getResult().getCustomerInfo().getRegion());
setEditable(true);
return OUTCOME_OK;
}
12
Add an action to the page bean named onUpdateCustomer.
This action invokes the Web service to update the customer information using the data the user supplied in the Input Text controls. It sets the isEditable property to false so that the application no longer displays the Input Text controls. It then refreshes the Output Text controls with the updated information by invoking the GetCustomerInfo of the Web service.
a
In the Bindings view, right click the page bean and select Add > Action.
b
In the Add New Action Method window in the Action Name field, type onUpdateCustomer.
c
Click Finish.
d
Open the page source and update the logic for the onUpdateCustomer action to match the following:
 
public String onUpdateCustomer() {
String customerId = this.getUpdateCustomerWS().getParameters().getUpdateCustomer().getCustomerID();
 
this.getUpdateCustomerWS().refresh();
setEditable(false);
//call getcustomerInfo service to get the updated Customer information.
 
this.getCustomerInfoWS.getParameters().getGetCustomerInfoInput().setCustomerID(customerId);
this.getCustomerInfoWS.refresh();
 
return OUTCOME_OK;
 
}
13
Add an action to the page bean named onCancel.
The application uses this action to cancel any changes that a user made to customer information. The action sets the isEditable property to false so that the application does not display the Input Text controls.
a
In the Bindings view, right click the page bean and select Add > Action.
b
In the Add New Action Method window in the Action Name field, type onCancel.
c
Click Finish.
d
Open the page source and update the logic for the onCancel action to match the following:
 
public String onCancel() {
setEditable(false);
return OUTCOME_OK;
}
14
From the Palette view, drag a Static Row control (Control > Panel > Static Row) into the Form control.
15
With the Static Row control selected on the design canvas, in the Property view select the Display tab and set the Width property to 100%.