bloggers bloggers

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!