One of the UIX view layer niceties is that you can setup your web pages to use popular AJAX-style events almost effortlessly. And you don’t have to write a single line of JavaScript. This is because most of the common web page components; buttons, links, text input boxes, check and radio buttons, and drop-down lists are enabled to send asynchronous events to your controller class and have just about any part of the current page redrawn/updated. You don’t implement any special or extraordinary code to handle the asynchronous event; actually, it can be totally transparent to your server code. Combining this with the ADF active data model, you can really polish your Oracle web application to have that thick-client feel. Oracle calls this asynchronous event handling Partial Page Rendering, or PPR.
For example, you want to have a table of data where each row has a “Delete” button that removes the row from the screen, as well as from the database and does some other back-end processing. And you want this row to be removed without reloading the entire web page, which repositions the scroll bars.
You could have the data table on your page backed by an ADF View Object (VO) and create the page binding context by using the drag-and-drop function in JDeveloper so that the page is connected to the ADF active data model as mentioned above. Now any changes you make in the model-layer code, such as removing the row from the backing VO, will be automatically noticed by the web page. Finally, have the delete button call a method that removes the VO row and set only the table portion of the web page to be reloaded.
Disregarding the details of the server-side code, suppose you have the event handler method onDeleteRow implemented in an oracle . adf . controller . struts . actions DataForwardAction class. Here is how the UIX page may look before using PPR.
<formValue name="event" value=""/>
<table model="${bindings.MyTableViewObject1}" id="MyTableViewObject1" partialRenderMode="multiple" partialTargets="_uixState">
<contents>
<column>
<contents>
<button onClick="document.myform.myDeleteRowIdentifier.value=${uix.current.RowKeyValue}; document.myform.event.value='deleteRow'; document.myform.submit();" text="Delete">
</contents>
</column>
<column>
. . . more UIX code
The code above works however the entire page will be reloaded since the button uses the standard JavaScript form submit method. Here is how you would convert the UIX code to take advantage of built-in AJAX-style events. You don’t have to modify anything in your server-side code.
<!-- formValue name="myDeleteRowIdentifier" value=""/ -->
<!-- formValue name="event" value=""/ -->
<table model="${bindings.MyTableViewObject1}" id="MyTableViewObject1" partialRenderMode="multiple" partialTargets="_uixState">
<contents>
<column>
<contents>
<submitButton text="Delete">
<primaryClientAction>
<firePartialAction event="deleteRow" targets="_uixState MyTableViewObject1">
<parameters>
<parameter key="myDeleteRowIdentifier" value="${uix.current.RowKeyValue}"/>
</parameters>
</firePartialAction>
</primaryClientAction>
</submitButton>
</contents>
</column>
<column>
. . . more UIX code
The button is changed to a submitButton where primaryClientAction and firePartialAction tags, which distinguishes using PPR opposed to full-page reloading, were added. This could be hand-coded or done using JDeveloper’s properties editor for the submitButton. PrimaryClientAction can be added to numerous components and the firePartialAction tag’s target list can reference any other UIX element(s) within the body tag that is marked with an id. The element(s) specified and any of its child elements are redrawn with AJAX-style grace. Each desired target id to redraw can be listed or a parent-level element such as a stackLayout that contains several updated components can be specified.
For a more comprehensive explanation of using PPR in UIX pages, read JDeveloper help files for “About Partial Page Rendering” and “About Client Actions.”
Comments
Post new comment