Using a generic JHeadstart Custom Template to support the inputTextHyperlink display type

Being able to generate our ADF Web Applications is a fine thing. JHeadstart can really get us a long way with our application. However, in most situations, JHeadstart will not get us all the way. It does not generate everything our end users have come up with. There are several strategies with this situation where the generator is not able to deliver exactly what was requested:

• Change the functional specifications to what the generator can generate
• Go in after the generator has run to make post generation manual changes (and devise a strategy for either not generating again or reapplying those manual changes again)
• Change the generator to make it generate what you want to have.

None of these seem particularly wonderful. However, with a smart combination of the second and third option, we pretty much can make everybody happy:

JHeadstart has the concept of custom (generator) templates. By specifying such a template, we influence the behavior of the generator, in a very specific way. This allows us to modify the generator, for the entire application or for every specific elements in it. Creating a Custom Template is a simple task – usually done by copying and modifying an existing one, usually from the  manual post-generation change. Configuring the generator for using a custom template is also very simple.

Let’s go and do it then!

We have an application called the AMIS Library System. We use it to mainain our Library of Books, or at least the information about the books in the library. It contains for example pages to browse through books, authors and publishers.

Books have a property called Homepage, Publishers one called website. Both properties contain URLs to websites. JHeadstart does not support a Display Type called hyperlink or something like that. However, it would be very convenient if the user could navigate to these websites – opening the site in a new window – from the application.

Let’s first make the manual change required for that functionality.

Open the PublisherAdministrationTable.jspx page. Locate the PublisherAdministrationWebsite inputText component. Replace it with the following snippet:

<af:panelGroup layout="horizontal">
  <af:inputText id="PublisherAdministrationWebsite"
                value="#{row.Website}"
                required="#{(bindings.PublisherAdministrationWebsite.mandatory) and (!PublisherAdministrationCollectionModel.newRow)}"
                rows="#{bindings.PublisherAdministrationWebsite.displayHeight}"
                columns="30" maximumLength="50"/>
  <af:goLink targetFrame="_blank" destination="#{row.Website}"
             rendered="#{not empty row.Website}">
    <h:graphicImage height="20" width="20"
                    url="../jheadstart/images/internetLink.png"/>
  </af:goLink>
</af:panelGroup>

Run the page to check whether we got what we wanted:

 
Click on one of the Hyperlink Icons to see whether a new window appears with the promised homepage.

Note: perhaps a JavaScript based approach would have been slightly better – an onClick event handler on the image – as we could then navigate to the latest value entered by the user; this solution will navigate to the value that was in the website item when the page was rendered. By using AutoSubmit on the Website item we should be able to improve this solution to that effect. A JavaScript solution could also cope with URLs with or without http:// prefix – this solution currently cannot.

Creating the JHeadstart Custom Template

 

It seems to be working, so let’s turn it into a Custom Template. Again, the default/item/table/tableTextInput.vm is our starting point. Save it, this time as mytemplates/GenericTableTextInputHyperlink.vm.

Surround the af:inputText element with

  <af:panelGroup layout="horizontal"> 

above and

    <af:goLink targetFrame="_blank" destination="#{row.$JHS.current.item.name}"
               rendered="#{not empty row.$JHS.current.item.name}">
       <h:graphicImage height="20" width="20"
                       url="../jheadstart/images/internetLink.png"/>
    </af:goLink>
  </af:panelGroup>

below.

Save the changes.

Locate the Website item in the PublisherAdministration Group. On the Templates Tab set the TABLE_TEXT_INPUT property to mytemplates/GenericTableTextInputHyperlink.vm.

 

Generate the application and run the PublisherAdminstrationTable page. Do we still have the hyperlink?

Now that we have this generic template, we should be able to apply it to other items that contain a hyperlink – but only in a table layout for now!