Last Updated: February 25, 2016
·
2.112K
· motilio

Field constructor for Zurb Foundation on Play Framework 2

Following this post by @dommmel, we configured Play to use Compass. Additionaly we created a very simple config.rb file in the project root folder.

 httppath = "/"
 cssdir = "assets/css"
 sassdir = "assets/stylesheets"
 imagesdir = "assets/images"
 javascripts_dir = "assets/javascripts"
</code></pre>

Then we used the next files to style automatically @input helpers  

views.foundation.foundationFieldConstructor.scala.html

@* foundationFieldConstructor Template File *@
@(elements: views.html.helper.FieldElements)

@import play.api.i18n._
@import views.html.helper._

<div class="small-@elements.args.get('_size).getOrElse(12)">
    <div class="row">
        @if(elements.label != "") {
            <div class="small-3 columns">
            @if(elements.args.contains('_help)) {
                <span data-tooltip data-options="disable_for_touch:true" class="has-tip" title="@elements.args.get('_help)">
                    <label for="@elements.id" class="@elements.args.get('_align).getOrElse("right inline")">@elements.label(elements.lang)</label>
                </span>
            } else {
                <label for="@elements.id" class="@elements.args.get('_align).getOrElse("right inline")">@elements.label(elements.lang)</label>
            }
            </div>
            <div class="small-9 columns error">
                @elements.input         
                @if(elements.hasErrors) {
                    <small class="error">@elements.errors(elements.lang).mkString(", ")</small>
                }
            </div>
        } else {
            <div class="small-12 columns error">
                @elements.input         
                @if(elements.hasErrors) {
                    <small class="error">@elements.errors(elements.lang).mkString(", ")</small>
                }
            </div>

        }       
    </div>
</div>


views.foundation.Helpers.scala

package views.foundation

object Helpers {

  import views.html.helper.FieldConstructor
  implicit val foundationFields = FieldConstructor(views.html.foundation.foundationFieldConstructor.f)

}


then in any template file just import both files, e.g. (non working template)

@(param: Any)

@import foundation._ 
@import views.foundation.Helpers._ 
@import helper._ 

@inputText(dataForm("name"), '_label -> "Name", '_help -> "Place name")
@inputText(dataForm("country"), '_label -> "Country")
@inputText(dataForm("other"), '_label -> "Other", '_align -> "right")



The field constructor will override the default play @input helper, and use a Foundation based layout to render the final HTML. Additional we defined 2 parameters _help (as a tooltip) and _align

More information on field constructors can be found here

Will share full code on github, including examples and more helpers on few days