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
Written by motilio
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Scala
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#