How should I handle the html output generated in my Play 2 app by default helper or twitterBootstrap helper

Question

This is my template:

@(smsReviewForm: Form[SmsReview], grades: Seq[Grade])

@styles = {

}

@scripts = {

}
@import mobile.mobileMain
@import helper._
@mobileMain(Messages("reco.index.title"), styles, scripts) {
    <div id="header">
        <p class="floatleft"><img src="@routes.Assets.at("images/mobile/general/reco.png")" alt="Reco" /></p>
        <div class="clear"></div>
    </div>

    @helper.form(routes.Sms.submit) {

        @helper.inputText(
            smsReviewForm("lastname"),
            '_label -> "Label",
            '_id -> "lastname"
        )

        <div class="actions">
            <input type="submit" class="btn primary" value="Submit">
        </div>
    }
}

When using the regular @import helper._ the html generated in my app looks like the example in the play 2.1 documentation:

<dl class=" " id="lastname_field">
    <dt><label for="lastname">Label</label></dt>
    <dd>
    <input type="text" id="lastname" name="lastname" value="">
</dd>
        <dd class="info">Required</dd>    
</dl>

If I use @import helper.twitterBootstrap._ it looks like:

<div class="clearfix  " id="lastname_field">
<label for="lastname">Label</label>
<div class="input">

<input type="text" id="lastname" name="lastname" value="">
    <span class="help-inline"></span>
    <span class="help-block">Required</span> 
</div>

I'm not used the dd hml type of implementation and the twitter bootstrap stuff looks more like the structure I'm used to work withm but I'm not interested in implementing the bootstrap js and css. So my question is what is your thoughts on this. What have you used? Maybe you use your own implementation for the html rendering?

Answer 1

You should create your own field constructor in order to specify your rendering style.

Look at the official documentation here for the "Writing your own constructor" part:

http://www.playframework.com/documentation/2.1.0/ScalaFormHelpers

Therefore, instead of importing the basic helpers._ or the default bootstrap field constructor helper.twitterBootstrap._, you would import MyOwnHelpers._ refering to your template.

The whole is well explains in the doc :)

For more information, here an example of one field constructor I've created: Of course, you are free to not use boostrap, I precise. In my case, I did.

twitterBootstrapInput.scala.html

<div class="control-group @if(elements.hasErrors) {error}">
    <label class="control-label" for="@elements.id">@elements.label</label>
    <div class="controls">
    @if(elements.args.contains(Symbol("data-schedule"))){
          <div class="schedulepicker input-append">
              @elements.input
            <span class="add-on">
              <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
            </span>
          </div>
    } else {
        @elements.input
    }
        <span class="help-inline">@elements.errors.mkString(", ")</span>
    </div>
</div>

and its import within my concerned xx.scala.html file:

@implicitFieldConstructor = @{ FieldConstructor(twitterBoostrapInput.f) }