bloggers bloggers

La creazione dei layout di pagina in Liferay 7 è molto simile alla procedura della versione 6. 
Come esempio creeremo insieme il layout Home.

1. Creiamo sotto la cartella "src" (la vecchia "_diffs" di Liferay 6) la cartella "layouttpl" con all’interno la cartella "home" relativa al nuovo template.

src
__layouttpl
____home

2. Inseriamo all’interno il file home.tpl che, per facilitarci il lavoro, copieremo da un layout di pagina già presente sul portale.

<div class="columns-1-2-1" id="main-content" role="main">
    <div class="portlet-layout row">
        <div class="col-md-12 portlet-column portlet-column-only" id="column-1">
           $processor.processColumn("column-1", "portlet-column-content portlet-column-content-only")
        </div>
    </div>

    <div class="portlet-layout row">
        <div class="col-md-6 portlet-column portlet-column-first" id="column-2">
                $processor.processColumn("column-2", "portlet-column-content portlet-column-content-first")
        </div>

        <div class="col-md-6 portlet-column portlet-column-last" id="column-3">
           $processor.processColumn("column-3", "portlet-column-content portlet-column-content-last")
        </div>
    </div>

    <div class="portlet-layout row">
        <div class="col-md-12 portlet-column portlet-column-only" id="column-4">
           $processor.processColumn("column-4", "portlet-column-content portlet-column-content-only")
        </div>
    </div>
</div>

Su questa base, andiamo a modificare l’HTML in base alle nostre esigenze. Occorre però tenere a mente alcuni punti:

• Il div contenitore deve avere obbligatoriamente id="main-content" e role="main" mentre la classe è a nostra discrezione

  <div class="home" id="main-content" role="main">
      ...
  </div>
  

• Ogni row deve avere obbligatoriamente la classe "portlet-layout"

  <div class="portlet-layout row">
      ...
  </div>
  

• All’interno delle row, ogni colonna deve avere un id univoco (per convenzione si utilizza “column-”)

  <div class="col-md-6 portlet-column portlet-column-last" id="column-1">
      ...
  </div>
  

• All’interno di ogni colonna, il codice Velocity deve riportare l’id della colonna nella quale è contenuto

  $processor.processColumn("column-1", "portlet-column-content portlet-column-content-only")
  

3. Creiamo la thumbnail home.png che verrà mostrata nella configurazione di pagina (alcuni esempi possiamo trovarli nei sorgenti di portale)

4. Inseriamo il nostro layout nel look-and-feel.xml

<layout-templates>
   <custom>
      <layout-template id="home" name="Home Layout">
         <template-path>/layouttpl/home/home.tpl</template-path>
         <thumbnail-path>/layouttpl/home/home.png</thumbnail-path>
      </layout-template>
   </custom>
</layout-templates>

Et voilà, le jeux sont fait! Il layout è pronto!