Implementing the UI

Creating the UI is simple: to add a text output to the page fragment which shows the current time, we simply drag&drop the currentTime attribute onto the page. JDeveloper then automatically asks which type of UI component to use, and we choose a simple ADF Output Text component:

This will automatically create the necessary bindings in the page definition file, and add the required markup to the page fragment:

<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="https://java.sun.com/JSP/Page" version="2.1" xmlns:af="https://xmlns.oracle.com/adf/faces/rich">
  <af:outputText value="#{bindings.currentTime.inputValue}" 
                 shortDesc="#{bindings.currentTime.hints.tooltip}" id="ot1"/>
</jsp:root>

Adding a list to choose the time zone is similarly easy: we drag&drop the collection from the data control onto the page and we choose “Single Selection” / “ADF Select One Choice” as the component:

In the next dialog, keep the defaults and press “Ok”:

The page fragment now renders as expected (note of course that the time is only updated when the page is refreshed!):

The next (and final) page shows how to finalize the UI logic so that the selected time zone is used when showing the current time: Finalizing the UI