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

Application Decorators: le novità del look and feel delle portlet di Liferay 7

Ciao a tutti! Una novità di Liferay 7 che mi è saltata subito all’occhio è il look and feel delle portlet.
Se nelle versioni precedenti si poteva soltanto mostrare o nascondere i bordi delle portlet, oggi possiamo applicare gli Application Decorators.

Nel tema Classic, ad esempio, troviamo tre Application Decorators:

Decorate


Questo stile mostra il titolo, il contenuto e applica un bordo grigio al contenitore della portlet


Borderless


Questo stile mostra il titolo e il contenuto della portlet senza applicare un bordo al contenitore


Barebone


Questo stile mostra soltanto il contenuto della portlet senza contenitore

 

Se il nostro tema non possiede Application Decorators già configurati, sta a noi definirli. Occorre:

1. Configurare il liferay-look-and-feel.xml


   <portlet-decorator id="barebone" name="Barebone">
      <portlet-decorator-css-class>portlet-barebone</portlet-decorator-css-class>
   </portlet-decorator>
   <portlet-decorator id="borderless" name="Borderless">
      <portlet-decorator-css-class>portlet-borderless</portlet-decorator-css-class>
   </portlet-decorator>
   <portlet-decorator id="decorate" name="Decorate">
      <default-portlet-decorator>true</default-portlet-decorator>
      <portlet-decorator-css-class>portlet-decorate</portlet-decorator-css-class>
   </portlet-decorator>

Ogni <portelt-decorator> contiene le informazioni relative al singolo Application Decorators:

  • id: questo attributo deve essere univoco in quanto verrà utilizzato all’interno dei vari template del tema per richiamare lo specifico Application Decorator (vedi step 3)
  • name: attributo che identifica il singolo Application Decorator all’interno delle configurazioni di pagina
  • portelt-decorator-css-class: attributo che contiene la classe CSS che verrà aggiunta al contenitore portlet
  • default-portelt-decorator: attributo che identifica l’Application Decorator di default del tema

Seguendo questo schema possiamo definire tutti Application Decorators di cui il nostro tema ha bisogno.

 

2. Definire gli stili per gli Application Decorators creati

All’interno del file _portelt_decorator.scss vi sono le classi specifiche per gli Application Decorators ed è possibile modificarle e aggiungerne di nuove. L’importante è ricordarsi di importare questo css!
Se nel nostro tema gli Application Decorators erano definiti, l’inclusione si trova già nel _portlet.scss; se non erano definitivi, sta a noi aggiungere l'inclusione nel _custom.css

@import "portlet_decorator"

 

3. Definire la struttura della portlet in base all’Application Decorators settato 

All’interno del portlet.ftl del tema, possiamo decidere la struttura che la portlet avrà a seconda del Application Decorators configurato. Se, ad esempio, vogliamo che soltanto l’Application Decorators "Barebone" non mostri il titolo della portlet, questo è il codice da inserire:

<#if portlet_display.getPortletDecoratorId() != "barebone">
        <h2 class="portlet-title-text">${portlet_title}</h2>
</#if>

Il gioco è fatto! 

Commenti
Nessun commento. Vuoi essere il primo.