Create the Default View

The Default view has tabs that allow users to access the three different views in the application. When the user clicks a tab, the application uses an Import View control to display the appropriate view. The views available from the tabs in the Default view are:

Add Customer tab to display the addCustomer view on which a user supplies data to add a customer. The application invokes a Web service to add the customer, using the data the user supplies as input to the Web service.

Update Using WSD tab to display the updateCustomerwithWS view on which a user can update the information for a customer. The user provides a customer ID and clicks a button. In turn, the application invokes a Web service to display the current information for the customer with the specified customer ID. After the user provides updated information and clicks another button, the application invokes another Web service to update the customer information.

Update Customer tab to display the updateCustomer view, which is another view on which a user can update the information for a customer. Although the updateCustomer view is included in the sample, this article does not describe how to create this view. This view uses a deprecated technique; that is, using a flow service on the Integration Server to generate a Web Service Connector rather than generating the Web service connector from a Web Service Descriptor (WSD).

 

Note: The Default view does not use a Web service.

Basic Steps

Add page bean properties to:

Specify the list of tabs (tabList)

Hold the tab the user clicks (selectedTab)

Hold the identification of the view to display for the selected tab (importView)

Add a Toggle Tabs control to add the tabs to the view.

To specify the names the application is to display on the tabs, you associate the tabList property with the Choices property of the Toggle Tabs control.

To hold the tab the user selects, you bind the Value property of the Toggle Tabs to the selectedTab property.

Add an Import View control that will hold the view that corresponds to the tab that the user selects.

To identify the view to import into the Import View control, bind the Value property of the Import View control to the importView property.

Detailed Step-By-Step Instructions

1	Open the Default view.

From the Project Explorer view, open Project > WebContent > default.view, where Project is the name of the project you created for this application.

2	Add a page bean property named tabList. The getter method for this property provides the names for the tabs.

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	tabList
Property Type	java.lang.String

c	Select Read-only Array.

d	Click Finish.

e	Open the page source and update the logic for the getTabList method to match the following:

 

oublic java.lang.String[] getTabList() { if (tabList == null0 { tabList = new String[] {“Add Customer”, “Update Customer”, “Update using WSD”}; }   resolveDataBinding(TABLIST_PROPERTY_BINDINGS, tabList, “tabList”, false, false); return tabList; }

3	Add a page bean property named selectedTab. This property will hold the tab that the user selects. The application uses it to determine the view to display.

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	selectedTab
Property Type	java.lang.String

c	Click Finish.

4	From the Palette view, drag a Toggle Tabs control (Control > Toggle > Toggle Tabs) inside the Form control in the Default view.

5	From the Bindings view, drag the Tab List property onto the Toggle Tabs control in the Default view.

Designer updates the Choices property of the Toggle Tabs control. It adds an Option Group to the Choices property and binds the Value property of the Option Group to the Tab List property.

6	From the Bindings view, drag the Selected Tab property onto the Toggle Tabs control in the default view.

Designer binds the Value property of the Toggle Tabs control to the Selected Tab property.

7	Add a page bean property named importView. The getter method for this property identifies the name of the view that the application is to display based on the selected tab.

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	importView
Property Type	java.lang.String

c	Click Finish.

d	Open the page source and update the logic for the getImportView method to match the following:

 

oublic java.lang.String getImportView() throws Exception { String selectedTab = getSelectedTab(); if (getTabList()[1].equals(selectedTab)) return “/webServiceViews/updateCustomerwithWS.view”; else if (getTablList()[2].equals(selectedTab)) return “/webServiceViews/udpateCustomer.view”;   return “/webServiceViews/addCustomer.view”; }

8	From the Palette view, drag a Block Panel control (Control > Panel > Block Panel) into the View Root.

9	From the Palette view, drag an Import View control (Control > Logic > Import View) into the Block Panel control.

10	Bind the Import View control to the Import View property so that the application imports the view based on the setting of the Import View property.

a	With the Import View control selected on the design canvas, in the Properties view select the Value tab.

b	Set the Value tab to the following:

#{DefaultView.importView}

Related Topics 

Use Web Services in Views

Prerequisite Setup

Create the View to Add Data Using a Web Service

Create the View to Obtain and Update Data Using a Web Service

View the Live Sample