JQuery Mobile Form helpers using the Play Framework

Question

I am trying to integrate this play-authenticate module with the mobile side of my application. I want to use JQuery mobile for each of the pages instead of Twitter Bootstrap. So I've created a separate view and I've just set up a basic index and I am trying to get the login page to work first. The login page takes a form as its arguement and I'm just wondering if there is a way to use the scala form helpers in play 2.0.* with JQuery Mobile.

My basic login page so far:

@(loginForm: Form[_])

@import helper._

@main(Messages("playauthenticate.login.title"),"login") {
            <div data-role="content">
                <div data-role="fieldcontain">
                    <label for="textinput1">
                        Your Email
                    </label>
                    <input name="" id="textinput1" placeholder="" value="" type="email" />
                </div>
                <div data-role="fieldcontain">
                    <label for="textinput2">
                        Your Password
                    </label>
                    <input name="" id="textinput2" placeholder="" value="" type="password" />
                </div>
                <a data-role="button" href="#page1">
                    Login Now
                </a>
                <h4>
                    Or login with a different service:
                </h4>
                      @* Display list of available providers *@
                      @_providerPartial(skipCurrent=false)
                <a data-role="button" data-transition="slidedown" href="routes.Application.index()">
                    Home
                </a>
            </div>
}

This is how it looks using Twitter Bootstrap.

score 2 · Answer 1 · answered Apr 17 '13 at 19:29

Yes and... no.

As you showed us jQueryMobile has its specific markup for form, so built-in helpers of Play doesn't fit it in any way...

You have two solutions and choice between this you want to use belongs to you:

If you have just few forms, write them with common HTML according to JQM's specification.
Otherwise, if you plan to use lot of forms in many places you'll do better if you'll... write own field constructors.

Of course if you'll decide to go with second approach it will be great if you'll decide to share it with others :)

JQuery Mobile Form helpers using the Play Framework

1 Answers1