Versions Compared

Old Version 37

changes.mady.by.user Bob Harner

Saved on

compared with

New Version 38

changes.mady.by.user Howard Ship

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

The template for the Login page contains a minimal amount of Tapestry instrumentation and references some of the Bootstrap CSS classes (Bootstrap is automatically integrated into each Tapestry page):

Code Block
languagexml
<html t:type="layout" title="newapp com.example"
      xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_04.xsd">

     <head><div class="row">
        <title>Login</title><div class="span4 offset3">
    </head>
    <body>
        <h1>Please Login</h1>

        <form t:type="form"<t:form t:id="loginForm">

            <t:errors/>

    <h2>Please     sign in</h2>
   <t:label for="userName"/>:
            <input<t:textfield t:typeid="TextFielduserName" t:idmixins="userNameformgroup" t:validate="required,minlength=3" size="30"/>
            <br/>
    <t:passwordfield t:id="password"       <t:label for="passwordvalue="password" t:mixins="formgroup" validate="required"/>:
            <input    t<t:typesubmit class="PasswordField" t:id="password" t:validate="required,minlength=3" size="30btn btn-large btn-primary" value="Sign in"/>
            <br</>t:form>
            <input type="submit" value="Login"/></div>
        </form>
    </body>div>

</html>

The Tapestry Form component is responsible for creating the necessary URL for the form submission (this is Tapestry's responsibility, not yours).

The Errors component must be placed inside a Form, it outputs all of the errors for all the fields within the Form as a single list. It uses some simple styling to make the result more presentable.

Each field component, such as the TextField, is paired with a Label component. The Label will render out a <label> element connected to the field. This is very important for usability, especially for users with visual disabilities. It also means you can click on the label text to move the cursor to the corresponding field.

The for parameter of the Label is the id of a component.

For the TextField, we provide a component id, userName. We could specify the value parameter, but the default is to match the TextField's id against a property of the container, the Login page, if such a property exists.

As a rule of thumb, you should always give your fields a specific id (this id will be used to generate the name and id attributes of the rendered tag). Being allowed to omit the value parameter helps to keep the template from getting too cluttered.

...