Communardo Software GmbH, Kleiststraße 10 a, D-01129 Dresden

Liferay IDE

Die mit Liferay 6 ein­ge­führte IDE als Eclipse Plug-in (für Helios oder Galileo) möchte ich im fol­gen­den Beitrag vor­stel­len. In der aktu­el­len Version 1.1 ist sie um inter­es­sante Features, wie ein Layout Plug-in oder Theme Plug-in, erwei­tert worden.

Die Installation erfolgt am ein­fachs­ten über die von Eclipse zur Verfügung gestellte Installationsfunktion "Install New Software".

Das Layout Plug-in

Mit dem Layout Plug-in kön­nen Layout-Templates erstellt wer­den, die als Platzhalter für die Portlets auf dem Dashboard die­nen. Dafür steht ein neuer Visual-Editor zur Verfügung, der einem das Erzeugen neuer Layout-Templates per Drag & Drop vereinfacht.

Liferay Plug-in

Beim Erzeugen eines neuen Layouts wird ein neues Layout-Projekt im Eclipse mit allen nöti­gen Bestandteilen ange­legt. Neben dem Standard-Layout wird auch eines für mobile Endgeräte erzeugt und kann über den Visual-Editor bear­bei­tet wer­den. Der Visual-Editor bie­tet eine gra­fi­sche Oberfläche, auf der das Design des Layouts zusam­men­ge­stellt wer­den kann.

Struktur Layout Projekt

liferay-layout.templates.xml beschreibt das erzeugte Layout-Template. Es beinhal­tet eine Unique ID, den Namen, den Ort des Templates, den Ort des wap Templates und den Ort des Bildes für die Vorschau.

liferay-plugin-package.xml beschreibt das erzeugte Layout Plug-in. Darin ist der Name, eine Unique ID, der Plug-in Typ, eine Kurzbeschreibung und wei­tere Informationen wie der Name des Autors enthalten.

MyNewLayout.png ist das Vorschaubild, das im Liferay-Administrationsbereich ange­zeigt wird.

MyNewLayout.tpl ist das eigent­li­che Layout-Template.

MyNewLayout.wap.tpl ist das Layout in einer für mobile Endgeräte ange­pass­ten Form.

Visual Editor

Als Ergebnis ist ein ein­fa­ches Layout-Template mit defi­nier­ten CSS-Klassen und der Angabe für den TemplateProcessor ent­stan­den. Eine Übersicht aller Velocity-Variablen, die für ein Layout-Template zur Verfügung ste­hen, ist auf der Seite http://www.myoffice24x7.com/web/manual/howto/explore-velocity-variables zu finden.

<div class="MyNewayout" id="main-content" role="main">
    <div class="portlet-layout">
        <div class="aui-w50 portlet-column portlet-column-first" id="column-1">
            $processor.processColumn("column-1", "portlet-column-content portlet-column-content-first")
        </div>
        <div class="aui-w50 portlet-column portlet-column-last" id="column-2">
            $processor.processColumn("column-2", "portlet-column-content portlet-column-content-last")
        </div>
    </div>
    <div class="portlet-layout">
        <div class="portlet-column portlet-column-only" id="column-3">
            $processor.processColumn("column-3", "portlet-column-content portlet-column-content-only")
        </div>
    </div>
    <div class="portlet-layout">
        <div class="aui-w50 portlet-column portlet-column-first" id="column-4">
            $processor.processColumn("column-4", "portlet-column-content portlet-column-content-first")
        </div>
        <div class="aui-w50 portlet-column portlet-column-last" id="column-5">
            $processor.processColumn("column-5", "portlet-column-content portlet-column-content-last")
        </div>
    </div>
</div>

Related Posts

Pin It on Pinterest