ADF Faces: The InputTextHyperlink Component

Many pages developed with ADF Faces will contain items that represent hyperlinks. The user can enter a URL in such items and submit the value. However, the contents of such an item is not just text: it is potentially a hyperlink. Now would it not be user friendly to allow the user to not only enter the url, but also navigate to it – in a new window to be precise.

For example my demo-page show below allows users to enter requests for books to be ordered for our in-house library. To support their request, they can enter the URL of the Book’s Homepage. I have slightly changed the ADF Faces layout from what normal drag & drop created for the URL field: I have added a little icon (objectImage) that allows navigation to the URL that is in the field itself.

I will demonstrate very briefly what the code is required for this change: 

<af:panelLabelAndMessage label="Url">
  <af:panelHorizontal>
    <af:inputText autoSubmit="true"
                  id="NieuweBoekAanvraagUrl"
                  value="#{bindings.NieuweBoekAanvraagUrl.inputValue}"
                  required="#{bindings.NieuweBoekAanvraagUrl.mandatory}"
                  rows="#{bindings.NieuweBoekAanvraagUrl.displayHeight}"
                  columns="40" maximumLength="250"
                  readOnly="#{!(createModes.CreateNieuweBoekAanvraag)}" />
    <af:goLink targetFrame="_blank"
               partialTriggers="NieuweBoekAanvraagUrl"
               destination="#{bindings.NieuweBoekAanvraagUrl.inputValue}">
      <af:objectImage source="/jheadstart/images/hyperlink.jpg"/>
    </af:goLink>
  </af:panelHorizontal>
</af:panelLabelAndMessage> 

First of all, my field are all laid out inside a panelForm with two columns. That makes the fields align by prompt (label) and by field. To add a cluster of components (in my case an inputText and a goLink with nested objectImage) and make the cluster align just as nicely, I need to use a panelLabelAndMessage. That element renders a label – aligned with the other labels in the panelForm – and its contents – the panelHorizontal with one or more child components – as the left-aligned field.

The inputText is similar to the one created through drag & drop. Only the autoSubmit property has been set to true. This will cause any change to the URL field to be posted to the server when it occurs. We will see in just a moment how that allows us to have the hyperlink navigate to the correct URL, even if that one has just been typed in by the user.

The objectImage is inside a goLink – which turns the image into a hyperlink. The image itself is something I Googled from the internet. The goLink sends the user to a _blank target-frame, meaning a newly opened (popup) window. The destination attribute of the goLink is set to the value of the URL field – so that is where the new window should lead the user.

Now in order to make sure that the when the user clicks on the hyperlink the navigation is always to the latest value typed in, not just the value retrieved from the database, we have set autoSubmit on the url field to true – to have it posted to the server when it is changed (AJAX style). We also need to instruct the goLink to refresh itself – AJAX style – when the URL has been changed. We do this last bit by adding the Url field’s ID (NieuweBoekAanvraagUrl) to the partialTriggers attribute of the goLink.

Read Only Items

This same page can be rendered in read-only mode. If that is the case, we want to display the URL field in a slightly different way:

Here we do not show the actual URL value. Instead, we have an hyperlink that shows the title of the book and links to the location specified by the contents of the Url item. Again we have used the panelLabelAndMessage to lay out the items.

<af:panelLabelAndMessage label="Url"                         
                         rendered="#{!(bindings.NieuweBoekAanvraagUrl.inputValue == null)">
  <af:panelHorizontal>
    <h:outputLink styleClass="xa"    
                  target="_blank" 
                  value="#{bindings.NieuweBoekAanvraagUrl.inputValue}" >
      <h:outputText value="#{bindings.NieuweBoekAanvraagTitel}"  /> 
    </h:outputLink>
  </af:panelHorizontal>
</af:panelLabelAndMessage>
 

There is no real reason for using the h:outputLink here instead of the goLink. Previously I needed the goLink as it supports the AJAX style partial page refresh – the partialTriggers attribute – but since this page is read only, I do not need that facility and may use the simple outputLink.