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
