Refresh part of the page periodically using poll component

Environment (JDeveloper 11.1.1.3.0, ADF BC, HR schema)

This example shows how we can use af:poll component to refresh part of the user interface (UI) in our page periodically. The poll component delivers PollEvents to the server at fixed intervals. This can be used either for steady updates (i.e.  check if  your data base has been changed by other users and reflect these changes on your page ), or to deliver a heartbeat to keep a user logged in.  Poll component is useful for dashboard type applications where the use are interesting in periodic updates of the graph in the page.

This example is based on employees table in HR schema, where we want to display the employees table in our page as a read only table, and the table will be refreshed periodically to reflect the data base changes without any user interference. The steps to do this are:

  1. Build you business component from HR schema, you need to have Employees view object either read only view object or based on entity object, and an application module containing an instance from previously mentioned view object.
  2. Create your page, then drag and drop EmployeesView from your data control as a read only table. here you can keep the columns you need and delete those that you don’t need.
  3. From the component palette, choose ADF Faces, then open Operation section and choose poll component as shown in figure below. drag the component on any place in your page.

    Drag and drop af:poll component

  4. To refresh our table we need to re execute our query, to do this firstly we need to go to the page definition of our page, from the binding section click the green + sign as shown in figure below.

    add action binding

    Then select the actionitem and press OK as shown below

    select action item

    After that select your view instance and from the operation select list choose execute and press OK as shown below.

    add execute action binding

  5. From the structure window select the poll component, and from the property inspector change the Interval value as you need. this value is in millisecond and used to raise poll events when our time interval elapsed, once our time period elapsed it recalculates for another time interval and so on. The default is 5000, if the value is set to less than zero, polling will be disabled. In our example we will keep the default value.

  6. Again from the structure window select the poll component, and from the property inspector select PollListenerto add a method binding in your backing been. This method is executed at the end of our previously configured time interval. In this method we need to re execute our query as shown in the method below:
    public void refreshEmployeestable(PollEvent pollEvent)    {
            // Add event code here…
            BindingContainer bindings =   BindingContext.getCurrent().getCurrentBindingsEntry();
            OperationBinding operationBinding = bindings.getOperationBinding(“Execute”);
            Object result = operationBinding.execute();
        }
  7. Finally we need to set the partial trigger for our table to the ID value of our poll component. To do this, select your table and from the property inspector choose the partial trigger property, click the small down arrow near the input text of the partial trigger property and choose edit to open the Edit property: partial trigger window as shown below.

    Add partial trigger to employees table

  8. Select your Poll component from the available window and shuttle it to the selected window and press OK.
  9. Run your page. Try to modify some records in your table by writing simple SQL update statement and commit the changes, you will see that your table in your page is periodically refresh itself without any user interference every 5 seconds.
Advertisements

2 Comments

Filed under ADF

2 responses to “Refresh part of the page periodically using poll component

  1. Lamya Omar

    very interesting, this make life simpler,
    Thank you for this article.

  2. very very good article thnx Mohammed

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s