CssBoundLiftScreen example

object RegisterScreen extends TpmScreen {
  private val passwordMin = User.password.minLength
  private val passwordMax = User.password.maxLength

  val usernameField = field(User.username, NoTabIndex, HighlightErrors)
  val passwordField = password(User.password.displayName, "",
    trim,
    valMinLen(passwordMin, "Password must be at least "+passwordMin+" characters"),
    valMaxLen(passwordMax, "Password must be "+passwordMax+" characters or less"),
    NoTabIndex,
    HighlightErrors
  )
  val confirmPasswordField = password("Confirm Password", "",
    trim,
    mustEqualField(passwordField, "Passwords don't match"),
    NoTabIndex,
    HighlightErrors
  )
  val emailField = field(User.email, NoTabIndex, HighlightErrors)

  override def finish() {
    // register the user
  }
}

CssBoundLiftScreen wizard-all

<div class="wizard-form">
  <div data-lift="Msgs"></div>
  <div class="screenInfo">
    Page <span class="screenNumber"></span> of <span class="totalScreens"></span>
  </div>
  <div class="wizardTop"></div>
  <div class="screenTop"></div>
  <div class="globalErrors">
    <div class="error"></div>
  </div>
  <div class="fields">
    <fieldset class="fieldContainer control-group">
      <label class="label"></label>
      <span class="help-block help"></span>
      <br>
      <span class="value"></span>
      <span class="errors">
        <div class="error alert alert-error alert-field"></div>
      </span>
    </fieldset>
  </div>
  <div>
    <table>
      <tr>
        <td><button class="btn prev"></button></td>
        <td><button class="btn cancel btn-danger"></button></td>
        <td><button class="btn next btn-primary"></button></td>
      </tr>
    </table>
  </div>
  <div class="screenBottom"></div>
  <div class="wizardBottom"></div>
</div>

CssBoundLiftScreen-derived trait

trait TpmScreen extends CssBoundLiftScreen {
  def isCentered = false

  override def formName = ""
  override def defaultToAjax_? = true

  override def allTemplate = isCentered match {
    case false => super.allTemplate
    case true => <div style="text-align: center">{super.allTemplate}</div>
  }

  lazy val HighlightErrors = FieldTransform((bf) => {
    import net.liftweb.util.Helpers._
    import net.liftweb.http._

    if (S.getAllNotices.find({
      case (_,_,fieldId) if fieldId == bf.uniqueFieldId => true
      case _ => false
    }).isDefined)
      "fieldset [class+]" #> "error"
    else
      PassThru
  })
  
  lazy val NoTabIndex =
    ("tabIndex" -> "1")
}