2013-03-04 8 views
5

Questo è il mio modello:Come devo gestire l'output HTML generato nel mio Play 2 app helper di default o twitterBootstrap aiutante

@(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> 
    } 
} 

Quando si utilizza il normale @import helper._ il codice HTML generato nella mia app si presenta come il ad esempio nella documentazione di gioco 2.1:

<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> 

Se uso @import helper.twitterBootstrap._ assomiglia:

<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> 

non sono abituato al tipo dd HML di attuazione e il cinguettio roba bootstrap sembra più la struttura sono abituato a lavorare withm, ma io non sono interessato a implementare le js bootstrap e CSS. Quindi la mia domanda è: cosa ne pensi? Che cosa hai usato? Forse usi la tua implementazione per il rendering html?

risposta

1

Si consiglia di creare il proprio costruttore di campo per specificare lo stile di rendering per il proprio.

Guardate la documentazione ufficiale qui per la "Scrivere un proprio costruttore di" parte:

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

Pertanto, invece di importare la base helpers._ o il campo di bootstrap di default costruttore helper.twitterBootstrap._, si farebbe import MyOwnHelpers._ riferendosi a il tuo modello.

Il tutto è ben spiegato nel documento :)

Per ulteriori informazioni, ecco un esempio di un costruttore di campo che ho creato: Naturalmente, siete liberi di non utilizzare bootstrap, io preciso. Nel mio caso, l'ho fatto.

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> 

e la sua importazione nel mio preoccupato xx.scala.html di file:

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