You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 2 Next »

  • head tag
    ============

xhtml

xhtml comes configured as the default theme for Webwork. It extends the simple theme providing built in functionality for error reporting, table positioning, and labeling. Lets look at one of the most common UI tags used, textfield, and show the proper way to write your views with the xhtml theme.

As you may already know, the default UI template used for the textfield tag is text.vm located under the directory /template/xhtml.

#*
   -- text.vm
*#
## notice the re-use of the simple theme template text.vm
#parse("/template/xhtml/controlheader.vm")
#parse("/template/simple/text.vm")
#parse("/template/xhtml/controlfooter.vm")

When this template is loaded, it will first parse and render the /template/xhtml/controlheader.vm. Within controlheader.vm you will notice functionlity for error reporting, labeling and table positioning. If ActionSupport is returning with some errors, they are rendered into html using this this template. Also you will notice how it grabs the parameter.label value and positions it with the textfield using the table elements tr and td.

#*
   -- controlheader.vm
*#
## Only show message if errors are available.
## This will be done if ActionSupport is used.

#if( $fieldErrors.get($parameters.name) )
  #set ($hasFieldErrors = $fieldErrors.get($parameters.name))
  #foreach ($error in $fieldErrors.get($parameters.name))
    <tr>
        #if ($parameters.labelposition == 'top')
            <td align="left" valign="top" colspan="2">
        #else
            <td align="center" valign="top" colspan="2">
        #end
            <span class="errorMessage">$!webwork.htmlEncode($error)</span>
            </td>
    </tr>
  #end
#end

## Provides alignment behavior with table tags
## if the label position is top,
## then give the label it's own row in the table
## otherwise, display the label to the left on same row

<tr>
    #if ($parameters.labelposition == 'top')
        <td align="left" valign="top" colspan="2">
    #else
        <td align="right" valign="top">
    #end

        #if ($hasFieldErrors)
            <span class="errorLabel">
        #else
            <span class="label">
        #end

## If you want to mark required form fields with an asterisk, 
## you can set the required attribute
## Ex. <ui:textfield label="'mylabel'" name="'myname'" required="'true'" /> 
        #if ($parameters.label)
            #if ($parameters.required) <span class="required">*</span> #end 
               $!webwork.htmlEncode($parameters.label):
        #end
            </span>
        </td>

## add the extra row
#if ($parameters.labelposition == 'top')
</tr>
<tr>
#end
    <td>

The next template being parsed in /template/xhtml/text.vm is /template/simple/text.vm. Here you see the actual html input text tag being rendered and how the parameters are passed in.

#*
  -- text.vm
  --
  -- Required Parameters:
  --   * label      - The description that will be used to identfy the control.
  --   * name       - The name of the attribute to put and pull the result from.
  --                  Equates to the NAME parameter of the HTML INPUT tag.
  --
  -- Optional Parameters:
  --   * labelposition   - determines were the label will be place in relation
  --                       to the control.  Default is to the left of the control.
  --   * size       - SIZE parameter of the HTML INPUT tag.
  --   * maxlength  - MAXLENGTH parameter of the HTML INPUT tag.
  --   * disabled   - DISABLED parameter of the HTML INPUT tag.
  --   * readonly   - READONLY parameter of the HTML INPUT tag.
  --   * onkeyup    - onkeyup parameter of the HTML INPUT tag.
  --   * tabindex  - tabindex parameter of the HTML INPUT tag.
  --   * onchange  - onkeyup parameter of the HTML INPUT tag.
  --
    *#
<input type="text"
                                   name="$!webwork.htmlEncode($parameters.name)"
#if ($parameters.size)             size="$!webwork.htmlEncode($parameters.size)"            #end
#if ($parameters.maxlength)        maxlength="$!webwork.htmlEncode($parameters.maxlength)"  #end
#if ($parameters.nameValue)        value="$!webwork.htmlEncode($parameters.nameValue)"      #end
#if ($parameters.disabled == true) disabled="disabled"                                      #end
#if ($parameters.readonly)         readonly="readonly"                                      #end
#if ($parameters.onkeyup)          onkeyup="$!webwork.htmlEncode($parameters.onkeyup)"      #end
#if ($parameters.tabindex)         tabindex="$!webwork.htmlEncode($parameters.tabindex)"    #end
#if ($parameters.onchange)         onchange="$!webwork.htmlEncode($parameters.onchange)"    #end
#if ($parameters.id)               id="$!webwork.htmlEncode($parameters.id)"                #end
#if ($parameters.cssClass)         class="$!webwork.htmlEncode($parameters.cssClass)"       #end
#if ($parameters.cssStyle)         style="$!webwork.htmlEncode($parameters.cssStyle)"       #end
/>

And finally, the controlfooter.vm is parsed to close up the td and tr tags that were previously opened in controlheader.vm

#*
   -- controlheader.vm
*#

  </td>
</tr>

In our view, since the tr and td elements are already created for us, we can simply wrap them with table elements. For the sake of learning, we will just use normal html table objects, but feel free to look into how the table.vm tag gets rendered and possibly use that.

<%@ taglib uri="webwork" prefix="ui" %>
<link rel ="stylesheet" type="text/css" href="template/xhtml/styles.css" title="Style">
<html>
<head><title>JSP PAGE</title></head>
<body>
<form>
  <table>
	<!-- we can set the required attribute to true if we want to 
	     display and asterisk next to required form fields
	 -->

	<ui:textfield label="'Username'" required="'true'" name="'user'" /> 
	<ui:textfield label="'Email'" name="'email'"/> 
  </table>
</form>
</body>
</html>

<link rel ="stylesheet" type="text/css" href="template/xhtml/styles.css" title="Style">
<html>
<head><title>VM PAGE</title></head>
<body>
<form>
  <table>
    #tag( TextField "label='Username'" "name='user'" )<br>
    #tag( TextField "label='Email'" "name='email'" )<br>
  </table>
</form>
</body>
</html>
  • No labels