Input Fields

With input components, a text or a date can be entered. Input components should always use the label attribute.

Input

<tc:in label="Input" value="Some Text"/>

Suggest

<tc:in label="Language">
  <tc:suggest query="#{suggestController.query}">
    <tc:selectItems value="#{suggestController.solarObjects}" var="name" itemValue="#{name}"/>
  </tc:suggest>
</tc:in>

Text Area

<tc:textarea label="Text Area" value="Some Text"/>

Date

<tc:date label="Date" value="2015-12-21"/>

5 Star Rating

<?xml version="1.0" encoding="UTF-8"?> <!-- * Licensed to the Apache Software Foundation (ASF) under one or more * contributor license agreements. See the NOTICE file distributed with * this work for additional information regarding copyright ownership. * The ASF licenses this file to You under the Apache License, Version 2.0 * (the "License"); you may not use this file except in compliance with * the License. You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. --> <ui:composition template="/main.xhtml" xmlns="http://www.w3.org/1999/xhtml" xmlns:tc="http://myfaces.apache.org/tobago/component" xmlns:ui="http://java.sun.com/jsf/facelets"> <ui:param name="title" value="#{demoBundle.input}"/> <p>With input components, a text or a date can be entered. Input components should always use the <code>label</code> attribute.</p> <tc:section label="#{demoBundle.in}"> <pre><code class="language-markup">&lt;tc:in label="Input" value="Some Text"/></code></pre> <tc:in id="i1" label="Input" value="Some Text"/> </tc:section> <tc:section label="#{demoBundle.suggest}"> <pre><code class="language-markup">&lt;tc:in label="Language"> &lt;tc:suggest query="\#{suggestController.query}"> &lt;tc:selectItems value="\#{suggestController.solarObjects}" var="name" itemValue="\#{name}"/> &lt;/tc:suggest> &lt;/tc:in></code></pre> <tc:in id="i2" label="Language"> <tc:suggest query="#{suggestController.query}"> <tc:selectItems value="#{suggestController.solarObjects}" var="name" itemValue="#{name}"/> </tc:suggest> </tc:in> </tc:section> <tc:section label="#{demoBundle.textarea}"> <pre><code class="language-markup">&lt;tc:textarea label="Text Area" value="Some Text"/></code></pre> <tc:textarea id="t1" label="Text Area" value="Some Text"/> </tc:section> <tc:section label="#{demoBundle.date}"> <pre><code class="language-markup">&lt;tc:date label="Date" value="2015-12-21"/></code></pre> <tc:date id="d1" label="Date" value="2015-12-21"/> </tc:section> <tc:section label="#{demoBundle.stars}"> <tc:stars label="Stars" value="4"/> </tc:section> </ui:composition>