Using the Processing Component

Tip: Set the messageType attribute on the pageLayout element to processing if you want the to display the processing icon in the page title.

To insert a processing component:

In the Design Structure Window of the desired file, locate the node in which you wish to insert a processing component.
In the Component Palette, select Miscellaneous Components from the dropdown list, and then drag and drop the processing component to the parent node of your choice.
The processing node is inserted and highlighted under the expanded parent node.
In the Property Inspector, set the following attributes for the processing component:
- timeInterval - Enter the time between refresh events in milliseconds. Default is 5000.
- percentComplete - Enter an integer between 0 and 100 (inclusive) to specify the percent complete. Default is the string "unknown".
- destination - Enter the base URL to use when firing the refresh event if a form is not used.

Note: To use data binding, see Data Binding a Component Attribute.

To add indexed children to display the process status description:

In the Design Structure Window, right-click the processing node and choose Insert inside processing to add the appropriate indexed child, e.g. styledText.
In the Property Inspector, set the attributes for the indexed child component, e.g. text and styleClass attributes of a styledText child.

Note: The UIX XML for implementing processing in a full page refresh and partial page rendering mode is the same. Only the parameters sent to the server are different.

Examples (UIX XML)


...
<processing id="processing-widget" 
            percentComplete="75" 
            timeInterval="2000">
  <contents>
    <styledText styleClass="OraProcessingStatusVariable" 
                text="75%"/>
    <styledText styleClass="OraProcessingStatusFixed" 
                text=" of the baking is done." />
  </contents>
</processing>
...
<processing id="processing-widget" 
            percentComplete="unknown" 
            timeInterval="2000">
  <contents>
    <styledText styleClass="OraProcessingStatusFixed" 
                text="The cake is baking." />
  </contents>
</processing>
...
<!-- known percent complete -->
<processing id="processing-widget"
            timeInterval="1000"
            percentComplete="${demo:data().percentComplete.percent}">
  <contents>
    <styledText styleClass="OraProcessingStatusVariable"
                text="${demo:data().percentComplete.percent}"/>
    <styledText styleClass="OraProcessingStatusVariable"
                text="% "/>
    <styledText styleClass="OraProcessingStatusFixed"
                text="of the cake has baked."/>
  </contents>
</processing>
...
<!-- checklist example -->
<processing id="processing-widget"
            timeInterval="1000" 
            percentComplete="${demo:data().percentComplete.percent}">
  <contents>
    <tableLayout>
      <!-- show all the steps, but only show the completed checkmark as the process steps complete -->
      <contents childData="${demo:data().allSteps.allStepsData}">
        <rowLayout>
          <contents>
            <cellFormat vAlign="top">
              <contents>
                <!-- rendered is a key into the childData stepsData@demo:allSteps" -->
                <image source="images/processCheck.gif"
                       rendered="${uix.current.rendered}"/>
              </contents>
            </cellFormat>
            <spacer width="5"/>
            <cellFormat vAlign="top">
              <contents>
                <!-- stepsKey is a key into the childData stepsData@demo:allSteps" -->
                <styledText styleClass="OraFieldText"
                            text="${uix.current.processStep}"/>
              </contents>
            </cellFormat>
          </contents>
        </rowLayout>
      </contents>
    </tableLayout>
  </contents>
</processing>
...
<!-- growing list example -->
<processing id="processing-widget"
            timeInterval="1000" 
            percentComplete="${demo:data().percentComplete.percent}">
  <contents>
    <tableLayout>
      <!-- show all the completed steps, but databind the rendered piece -->
      <contents childData="${demo:data().allSteps.allStepsData}">
        <rowLayout>
          <contents>
            <cellFormat vAlign="top">
              <contents>
                <styledText styleClass="OraProcessingStatusVariable"
                            rendered="${uix.current.rendered}"
                            text="${uix.current.stepNumber}"/>
                <styledText styleClass="OraProcessingStatusVariable"
                            text=". " 
                            rendered="${uix.current.rendered}"/>
                <styledText styleClass="OraProcessingStatusFixed"
                            rendered="${uix.current.rendered}" 
                            text="${uix.current.processStep}"/>
              </contents>
            </cellFormat>
          </contents>
        </rowLayout>
      </contents>
    </tableLayout>
  </contents>
</processing>
...

You must handle the refresh event on your own.

Example (UIX XML)


...
<provider>
  <data name="demo:percentComplete">
    <method class="oracle.cabo.servlet.demo.ProcessingTestUtils"
            method="getPercentCompleteData"/>
  </data>
  <data name="demo:allSteps">
    <method class="oracle.cabo.servlet.demo.ProcessingTestUtils"
            method="getAllSteps"/>
  </data>
</provider>
...
...
<handlers>
  <!-- this is the event that the processing element calls -->
  <!-- you must handle this event by figuring out the state of the process -->
  <!-- e.g., is it done -->
  <event name="refresh">
    <method class="oracle.cabo.servlet.demo.ProcessingTestUtils"
            method="getProcessState"/>
  </event>
  <event name="cancel">
    <method class="oracle.cabo.servlet.demo.ProcessingTestUtils"
            method="cancelProcess"/>
  </event>
</handlers>
...