bloggers bloggers

Marco Napolitano
Messaggi: 68
Stelle: 0
Data: 15/11/17
Jader Jed Francia
Messaggi: 50
Stelle: 0
Data: 22/09/17
Ezio Lombardi
Messaggi: 9
Stelle: 0
Data: 23/06/17
Chiara Mambretti
Messaggi: 25
Stelle: 0
Data: 27/02/17
Serena Traversi
Messaggi: 3
Stelle: 0
Data: 21/07/16
Francesco Falanga
Messaggi: 8
Stelle: 0
Data: 14/06/16
Antonio Musarra
Messaggi: 2
Stelle: 0
Data: 18/11/13
Simone Celli Marchi
Messaggi: 6
Stelle: 0
Data: 09/07/13
marcello marangio
Messaggi: 4
Stelle: 0
Data: 05/07/13
Marco Mancini
Messaggi: 1
Stelle: 0
Data: 05/06/13
Indietro

Liferay 7 e la creazione dei layout di pagina

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!

Commenti
Nessun commento. Vuoi essere il primo.