Use case background

I have been asked on a number of occasions if our selectOneChoice component could allow random text to be entered, as well as having a list of selections available. Unfortunately, the selectOneChoice component only allows entry via the dropdown selection list and doesn't allow text entry. I was thinking of possible solutions and thought that this might make a good example for using a declarative component.

My initial idea

My first thought was to use an af:inputText to allow the text entry, and an af:selectOneChoice with mode="compact" for the selections. To get it to layout horizontally, we would want to use an af:panelGroupLayout with layout="horizontal". To get the label for this to line up correctly, we'll need to wrap the af:panelGroupLayout with an af:panelLabelAndMessage. This is the basic structure:

<af:panelLabelAndMessage>
  <af:panelGroupLayout layout="horizontal">
    <af:inputText/>
    <af:selectOneChoice mode="compact"/>
  </af:panelgroupLayout>
</af:panelLabelAndMessage>

Make it into a declarative component

One of the steps to making a declarative component is deciding what attributes we want to be able to specify. To keep this example simple, let's just have:

• 'label' (the label of our declarative component)
• 'value' (what we want to bind to the value of the input text)
• 'items' (the select items in our dropdown)

Here is the initial declarative component code (saved as file "inputTextWithChoice.jsff"):

<?xml version='1.0' encoding='UTF-8'?>
<!-- Copyright (c) 2008, Oracle and/or its affiliates. All rights reserved. -->
<jsp:root
  xmlns:jsp="http://java.sun.com/JSP/Page"
  version="2.1"
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
  <jsp:directive.page contentType="text/html;charset=utf-8"/>
  <af:componentDef
    var="attrs"
    componentVar="comp">
    <af:xmlContent>
      <component xmlns="http://xmlns.oracle.com/adf/faces/rich/component">
        <description>Input text with choice component.</description>
        <attribute>
          <description>Label</description>
          <attribute-name>label</attribute-name>
          <attribute-class>java.lang.String</attribute-class>
        </attribute>
        <attribute>
          <description>Value</description>
          <attribute-name>value</attribute-name>
          <attribute-class>java.lang.Object</attribute-class>
        </attribute>
        <attribute>
          <description>Choice Select Items Value</description>
          <attribute-name>items</attribute-name>
          <attribute-class>[[Ljavax.faces.model.SelectItem;</attribute-class>
        </attribute>
      </component>
    </af:xmlContent>

    <af:panelLabelAndMessage id="myPlm" label="#{attrs.label}" for="myIt">
      <af:panelGroupLayout id="myPgl" layout="horizontal">
        <af:inputText
            id="myIt"
            value="#{attrs.value}"
            partialTriggers="mySoc"
            label="myIt" simple="true" />
        <af:selectOneChoice 
            id="mySoc" 
            label="mySoc" simple="true" mode="compact" 
            value="#{attrs.value}" 
            autoSubmit="true">
          <f:selectItems id="mySIs" value="#{attrs.items}" />
        </af:selectOneChoice>
      </af:panelGroupLayout>
    </af:panelLabelAndMessage>
  </af:componentDef>
</jsp:root>

By having af:inputText and af:selectOneChoice both have the same value, then (assuming that this passed in as an EL expression) selecting something in the selectOneChoice will update the value in the af:inputText.

To use this declarative component in a jspx page:

<af:declarativeComponent
    id="myItwc" 
    viewId="inputTextWithChoice.jsff"
    label="InputText with Choice"
    value="#{demoInput.choiceValue}"
    items="#{demoInput.selectItems}" />

Some problems arise

At first glace, this seems to be functioning like we want it to. However, there is a side effect to having the af:inputText and af:selectOneChoice share a value, if one changes, so does the other. The problem here is that when we update the af:inputText to something that doesn't match one of the selections in the af:selectOneChoice, the af:selectOneChoice will set itself to null (since the value doesn't match one of the selections) and the next time the page is submitted, it will submit the null value and the af:inputText will be empty. Oops, we don't want that. Hmm, what to do.

Okay, how about if we make sure that the current value is always available in the selection list. But, lets not render it if the value is empty. We also need to add a partialTriggers attribute so that this gets updated when the af:inputText is changed. Plus, we really don't want to select this item so let's disable it.

<af:selectOneChoice 
    id="mySoc" 
    partialTriggers="myIt" 
    label="mySoc" simple="true" mode="compact" 
    value="#{attrs.value}" 
    autoSubmit="true">
  <af:selectItem id="mySI" label="Selected:#{attrs.value}" 
                 value="#{attrs.value}" disabled="true" 
                 rendered="#{!empty attrs.value}"/>
  <af:separator id="mySp" />
  <f:selectItems id="mySIs" value="#{attrs.items}" />
</af:selectOneChoice>

That seems to be working pretty good. One minor issue that we probably can't do anything about is that when you enter something in the inputText and then click on the selectOneChoice, the popup is displayed, but then goes away because it has been replaced via PPR because we told it to with the partialTriggers="myIt". This is not that big a deal, since if you are entering something manually, you probably don't want to select something from the list right afterwards.

Making it look like a single component.

Now, let's play around a bit with the contentStyle of the af:inputText and the af:selectOneChoice so that the compact icon will layout inside the af:inputText, making it look more like an af:selectManyChoice. We need to add some padding-right to the af;inputText so there is space for the icon. These adjustments were for the Fusion FX skin.

<af:inputText
    id="myIt"
    partialTriggers="mySoc"
    autoSubmit="true"
    contentStyle="padding-right: 15px;"
    value="#{attrs.value}"
    label="myIt" simple="true" />
<af:selectOneChoice 
    id="mySoc" 
    partialTriggers="myIt" 
    contentStyle="position: relative; top: -2px; left: -19px;"
    label="mySoc" simple="true" mode="compact" 
    value="#{attrs.value}" 
    autoSubmit="true">
  <af:selectItem id="mySI" label="Selected:#{attrs.value}" 
                 value="#{attrs.value}" disabled="true" 
                 rendered="#{!empty attrs.value}"/>
  <af:separator id="mySp" />
  <f:selectItems id="mySIs" value="#{attrs.items}" />
</af:selectOneChoice>

There you have it, a declarative component that allows for suggested selections, but also allows arbitrary text to be entered. This could be used for search field, where the 'items' attribute could be populated with popular searches. Lines of java code written: 0