The <tc:in/>
tag may be extended with the facet tags
<f:facet name="before">
and <f:facet name="after">
.
With these, you can add text and dropdown menus to an input field.
The following example show how to add a text-label inside an input field.
<tc:in>
<f:facet name="before">https://example.com/</f:facet>
</tc:in>
<tc:in label="Price">
<f:facet name="after">.00 €</f:facet>
</tc:in>
Press the 'Send'-Button to add your message to the chat.
<tc:in value="\#{groupController.newMessage}">
...
<f:facet name="after">
<tc:button label="Send" action="\#{groupController.sendChat}">
<f:ajax execute="inewmessage" render="tachatlog"/>
</tc:button>
</f:facet>
</tc:in>
The following two examples show an input field with a dropdown element in front of.
Pressing the "SendTo"-Button will display a selectable list.
This list is different in the examples.
Notice that the omit
attribute is set for <tc:link/>
.
<tc:in placeholder="type a message">
<f:facet name="before">
<tc:button id="lsendtoc" label="\#{groupController.sendTo}" omit="true">
<tc:command label="SendTo: Peter">
<f:ajax render="isendtoc" execute="isendtoc" listener="\#{groupController.sendToListener}"/>
</tc:command>
...
</tc:button>
</f:facet>
</tc:in>
<tc:in id="isendtorb" placeholder="type a message">
<f:facet name="after">
<tc:button id="lsendtorb" label="\#{groupController.sendTo}" omit="true">
<tc:selectOneRadio value="\#{groupController.sendTo}">
<tc:selectItem itemValue="SendTo: Peter"/>
...
<f:ajax render="isendtorb"/>
</tc:selectOneRadio>
</tc:button>
</f:facet>
</tc:in>