Aspect Faces identifies UI widget templates as one of many aspects. Thus you need to define generic templates parametrized by current context and rendered instance. The templates are declared as valid JSF code and may use JSF composition. You may use tag ui:decorate, if you want. Another important thing Aspect Faces provides is custom expression language (EL). By default it is opened and closed by $ but you can change it in aspectfaces.properties. This EL is evaluated in Aspect Faces context thus all variables are evaluated to this context.

Simple widget may look as this (feel free to make your own):

UI widget for input text

#!xml


<ui:fragment
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets">
    <ui:param name="id"        value="#{prefix}$fieldName$"/>
    <ui:param name="label"     value="#{text['$className$.$fieldName$']}"/>
    <ui:param name="maxlength" value="$maxLength$"/>
    <ui:param name="rendered"  value="#{empty render$FieldName$ ? 'true' : render$FieldName$}"/>
    <ui:param name="required"  value="#{empty required$FieldName$ ? '$required$' : required$FieldName$}"/>
    <ui:param name="value"     value="#{$ClassName$.$fieldName$}"/>

    <!-- editable mode -->
    <ui:fragment rendered="#{empty edit ? false : edit}">
        <!-- render form field label -->
        <h:outputLabel value="#{label}:" for="#{id}">
            <h:panelGroup
                layout="span"
                rendered="#{required or forceRequired}"
                styleClass="required"
            >*</h:panelGroup>          
        </h:outputLabel>
        <!-- render form field input component -->
        <h:inputText
            id="#{id}"
            maxlength="#{maxlength}"
            rendered="#{rendered}"
            required="#{required}"
            title="#{label}"
            value="#{value}"
        />
        <!-- render form field error handler -->
        <h:message for="#{id}"/>
    </ui:fragment>

    <!-- read-only mode -->
    <ui:fragment rendered="#{empty edit ? true : not edit}">
        <!-- render form field label -->
        <h:outputLabel value="#{label}:" for="#{prefix}#{id}Output"/>
        <!-- render form field read-only component -->
        <h:outputText value="#{value}"/>
    </ui:fragment>
</ui:fragment>

The previous example uses standard JSF code. But for some examples, you may need to use pure HTML or non-composition tags of JSF. Both are allowed. Another example is for read-only fields inside the table thus they need to begin with h:column.

Widget for table layout

#!xml


<h:column xmlns="http://www.w3.org/1999/xhtml"
          xmlns:h="http://java.sun.com/jsf/html"
          xmlns:f="http://java.sun.com/jsf/core"
          rendered="#{empty render$FieldName$ ? 'true' : render$FieldName$}">

    <f:facet name="header">#{text['$className$.$fieldName$']}</f:facet>
    <h:outputText value="#{$ClassName$.$fieldName$}"/>
</h:column>

Variables available in Aspect Faces Context

Variable name	Description
fieldName	Current field name starting with lower first letter.
FieldName	Current field name starting with upper first letter.
className	Current class name starting with lower first letter.
ClassName	Current class name starting with upper first letter.
fullClassName	Full class name starting with lower letter.
FullClassName	Full class name starting with upper letter.
value	Short cut for $Instance$.$fieldName$, current field's value.
dataType	Data type of current field.
DataType	Data type of current field with upper first letter.
label	Human readable property name (the first field name upper letter, next upper letters separated with space)
instance	instanceVariablePrefix (default 'i') and entity name

There are also another variables accessible in usual JavaServer Faces context

Variable name	Description
edit	Whether the component should be editable.
prefix	View id prefix.
render$FieldName$	Whether to render field with this name.
required$FieldName$	Whether the field is required.

See all the options at 7.Model Annotations

Default widget set

You can download our default widget set as an inspiration for creating your own.

Wiki

AspectFaces / 5.UI-Widgets

Variables available in Aspect Faces Context

Default widget set