Using NetUI to Display Liquid Data Results

WebLogic Workshop includes NetUI, which allows you to rapidly assemble applications that display data returned from Liquid Data queries.

When you create a Liquid Data control, an XMLBean is generated for the target schema of each stored query included as a method in the control. The following sections represent the basic steps for using NetUI to display results from a Liquid Data Control:

Generating a Page Flow From a Control

You can generate a page flow from a Liquid Data Control (.jcx) file. When you generate the page flow, Workshop creates the page flow, a start page (index.jsp), and a JSP file for each method you specify in the Page Flow wizard.

To Generate a Page Flow From a Control

Perform the following steps to generate a page flow from a Liquid Data control.

  1. Select a Liquid Data Control (.jcx) file from the application file browser, right-click, and select Generate Page Flow.
  2. In the Page Flow Wizard, enter a name for your Page Flow and click Next.

Figure 1-13 Enter a Name for the Page Flow

image

  1. On the Page Flow Wizard - Select Actions screen, check the methods for which you want a new page created. The wizard has a check box for each method in the control.

Figure 1-14 Choose Liquid Data Methods for the Page Flow

image

  1. Click Create.
  2. Workshop generates the .jpf Java Page Flow file, a start page (index.jsp), and a JSP file for each method you specify in the Page Flow wizard.

  3. Add and initialize the variables to the .jpf file for the XMLBeans. For details, see Adding XMLBean Variables to the Page Flow.
  4. Drag and drop the XMLBean variables to your JSPs to bind the data from Liquid Data to your page layout. For details, see Dragging XMLBean Variables to a JSP File.
  5. Build and test the application in WebLogic Workshop.

Adding a Liquid Data Control to an Existing Page Flow

You can add a Liquid Data Control to an existing Page Flow .jpf file. The procedure is the same as adding a Liquid Data Control to a Web Service, described in To Add a Liquid Data Control to an Existing Web Service File, except instead of opening the Web Service in Design View, you open the Page Flow .jpf file in Action View.

You can also add a control to an existing page flow from the Page Flow Data Palette (available in Flow View and Action View of a Page Flow), as shown in Figure 1-15.

Figure 1-15 Adding a Control to a Page Flow from the Data Palette

image

Adding XMLBean Variables to the Page Flow

***THIS SHOULD CHANGE FOR SP2***

In order to use the NetUI features to drag and drop data from an XMLBean into a JSP, you must first create variables in the page flow .jpf file. NetUI can traverse the XMLBean data structure until it encounters an array. When you create the Liquid Data control and the XMLBeans are generated, the XMLBean generation defines an array for each element in the schema that is repeatable. When there is an array (corresponding to a repeatable element), you need to define a new variable to access the data in the array. You therefore need one variable from each repeatable parent node of the XML data represented in the XMLBean. Define each variable with a type corresponding to the XMLBean object of the parent node.

Define the variables in the class that extend the PageFlowController class. For example, consider the case where you are trying to display XML data of the following form:

<CUSTOMER>data</CUSTOMER>
......<PROMOTION>promotion data</PROMOTION>
...... 

You can add the following code snippet, which shows two variables (shown in bold type) added to the page flow:

public class myPageFlowController extends PageFlowController
{
/**
     * This is the control used to generate this pageflow
     *  @common:control
     */
    private aLDControl myControl;

   // add Variables with XMLBeam types from the generated XMLBeans
   public transient com.mycorp.crm.CUSTDocument aVar;
   public transient com.mycorp.crm.CUSTDocument.PROFILE.CUST.PROMOTION[] bVar; 

This code snippet declares two variables in the page flow, aVar and bVar, and these variables will display in the IDE to allow for drag-and-drop operations onto JSP files.

Figure 1-16 Page Flow Variables for XMLBean Objects

image

When you drag-and-drop an array onto a JSP file, the NetUI Repeater Wizard appears and guides you through selecting the data you want to display.

To Add Variables to a Page Flow

Perform the following steps to add variables of XMLBean types for your query.

  1. Open your Page Flow (.jpf) file in Workshop.
  2. In the variable declarations of your Page Flow class, enter variables with XMLBean types corresponding to the schema elements you want to display. Depending on your schema, what you want to display, and how many queries you are using, you might need to add several variables.
  3. To determine the XMLBean type for the variables, perform the following:
    1. In your Liquid Data control, examine the method signature for each method that corresponds to a query. The return type is the root level of the XMLBean. Create a variable of that type. For example, if the signature for a control method is as follows:
    2. mySchema.CUSTOMERPROFILEDocument myQuery(java.lang.String custid); 
      

      create a variable as follows:

      public transient mySchema.CUSTOMERPROFILEDocument myCustomerVar; 
      
    3. If the schema has complex types and you want to display data in the complex types, examine the schema to determine the name of the complex type element and create a variable with a type corresponding to the schema element. For example, if the schema contains a complex type named CASE, create a variable as follows:
    4. public transient CASES customerCases; 
      
    5. Workshop might display a message asking if the type is from a particular XMLBean, as follows:

Figure 1-17 Workshop Prompting for Type Clarification

image

    1. Type Alt+Enter to verify the type.
    2. Continue this process until you have declared the variables you need.
  1. After you create your variables, initialize them as described in To Initialize the Variable in the Page Flow.

To Initialize the Variable in the Page Flow

You must initialize your XMLBean variables in the Page Flow. Initializing the variables ensures that the data bindings to the variables work correctly and that there are no tag exceptions when the JSP displays the results the first time.

Perform the following steps to initialize the XMLBean variables in the Page Flow:

  1. Open your Page Flow (.jpf) file in Workshop.
  2. In the action for the page in which you are going to display the data, add some code to initialize the variables used in the query displayed in that action.

The following sample code shows an example of initializing a variable on the Page Flow. The code (and comments) in bold is what was added. The rest of the code was generated when the Page Flow was generated from the Liquid Data control (see Generating a Page Flow From a Control).

/**
     * Action encapsulating the control method :RTLCustomerProfile
     * @jpf:action
     * @jpf:forward name="success" path="index.jsp"
     * @jpf:catch method="exceptionHandler" type="Exception"
     */
    public Forward RTLCustomerProfile( RTLCustomerProfileForm aForm )
        throws Exception
    {
        schemasBeaComLdCustview.PROFILEVIEWDocument var =
                     myControl.RTLCustomerProfile( aForm.custid );
        getRequest().setAttribute( "results", var );
        
        //initialize the profile variable to var from the above statement

        profile=var;
        
        // test to see if there is no data returned to handle cases where 
        // the query returns successfully but has no results (when custid 
        // does not exist, for example)

  if (var !=null && var.getPROFILEVIEW().getCUSTOMERPROFILEArray().length > 0)
        customerProfile=var.getPROFILEVIEW().getCUSTOMERPROFILEArray(0);

        return new Forward( "success" );
    } 

Dragging XMLBean Variables to a JSP File

Once you create and initialize your variables in the Page Flow, you can drag and drop the variables onto a JSP file. When you drag and drop an XMLBean variable onto a JSP File, Workshop displays a wizard to guide you through the process of selecting the data you want to display.

To Add a Repeater to a JSP File

Perform the following to add a NetUI repeater tag (used to display the data from a Liquid Data query) to a JSP file.

  1. Open a JSP file in your Page Flow project where you want to display data.
  2. In the Data Palette —> Page Flow Properties, locate the variable containing the data you want to display.
  3. Expand the nodes of the variable to expose the node that contains the data you want to display. If the variable does not traverse deep enough into your schema, you will have to create another variable to expose the part of your schema you require. For details, see To Initialize the Variable in the Page Flow.
  4. Select the node you want and drag and drop it onto the location of your JSP file in which you want to display the data. You can do this either in Design View or Source View.

Note: You can only drag and drop leaf nodes from the Page Flow Properties.

  1. Workshop displays the repeater wizard.

Figure 1-18 Repeater Wizard

image

  1. In the repeater wizard, navigate to the data you want to display and uncheck any fields that you do not want to display. There might be multiple levels in the repeater tag, depending on your schema.

Note: The repeater wizard displays everything contained in the XMLBean, which includes more than the data fields from your schema. Be sure to uncheck the fields you do not need (for example, nilSTATUSDATE).

  1. Click Next. The Select Format screen appears.

Figure 1-19 Repeater Wizard Select Format Screen

image

  1. Choose the format to display your data in and click Create.
  2. Workshop generates the layout for your data.

  3. Click the test button to see your data display.

To Add a Nested Level to an Existing Repeater

You can create repeater tags inside of other repeater tags. You can display nested repeaters on the same page (in nested tables, for example) or you can set up Page Flow actions to display the nested level on another page (with a link, for example).

Perform the following steps to create a nested repeater tag.

  1. Add a repeater tag as described in To Add a Repeater to a JSP File.
  2. Add a column to the table where you want to add the nested level.
  3. Drag and drop the array from your variable corresponding to your nested level into the data cell you created in the table.
  4. In the repeater wizard, select the items you want to display.
  5. Click the test button to test the application.

To Add Code to Handle Null Values

Perform the following steps to add code in your JSP file to handle null values for your data. It is a common JSP design pattern to add conditional code to handle null values. If you do not handle null values, your page will display errors for parameterized queries until values are entered for the parameters.

  1. Add a repeater tag as described in To Add a Repeater to a JSP File.
  2. Open the JSP file in source view.
  3. Find the netui-data:repeater tag in the JSP file.
  4. Add code before and after the tag to test for null values. The following is sample code. The code in bold is added, the rest is generated by the repeater wizard. This code uses the profile variable initialized in To Initialize the Variable in the Page Flow.
<%                                         
PageFlowController pageFlow = PageFlowUtils.getCurrentPageFlow(request);
if ( ((pF2Controller)pageFlow).profile == null
        || ((pF2Controller)pageFlow).profile.getPROFILEVIEW().getCUSTOMERPROFILEArray() == null
        || ((pF2Controller)pageFlow).profile.getPROFILEVIEW().getCUSTOMERPROFILEArray().length == 0){
      %>
         <p>No data</p>
         <% } else {%>
<netui-data:repeater dataSource=
        "{pageFlow.profile.PROFILEVIEW.CUSTOMERPROFILEArray}">
        <netui-data:repeaterHeader>
            <table cellpadding="2" border="1" class="tablebody" >
            <tr>
<!- the rest of the table and NetUI code goes here -->
<td><netui:label value
      ="{container.item.PROFILE.DEFAULTSHIPMETHOD}"></netui:label></td>
            </tr>
        </netui-data:repeaterItem>
        <netui-data:repeaterFooter></table></netui-data:repeaterFooter>
    </netui-data:repeater>
         <% }%> 
  1. Test the application.