Showlets in jAPS 2.0 entando mini-HOWTO

Do It The jAPS Way

Andrea Dessì

Stesura della bozza del documento 
AgileTec S.r.l.

Stefano Puddu

Aggiornamento alla versione 2.0.8 
AgileTec S.r.l.

Legal Notice

Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.3 or any later version published by the Free Software Foundation; with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. A copy of the license is included in the Appendix entitled "GNU Free Documentation License".

The copyright holders make no representation about the suitability of this Document for any purpose. It is provided “as is” without expressed or implied warranty. If you modify this Document in any way, identify your resulting Document as a variant of this Document.

2011-03-03

Revision History
Revision 0.32011-03-03MEM

Revisione per il rilascio di jAPS 2.2.0

Revision 0.22010-03-19MEM

Revisione per il rilascio di jAPS 2.0.10

Revision 0.12009-06-09AD

Rilascio prima bozza

Abstract

Le Showlet sono un elemento fondamentale nella creazione di portali con jAPS 2.0 entando.

In breve le Showlet costituiscono i blocchi dinamici del portale, tutti quegli elementi che ci si aspetta di voler spostare, modificare od adattare durante la gestione delle pagine.

In questo documento verrà spiegato velocemente come progettare ed implementare le Showlet.

Verranno inoltre illustrate le Showlet predefinite, le cosiddette Stock Showlets e la tag library di jAPS 2.0 entando tramite esempi.


Chapter 1. Scopo del documento

Introduzione

Lo scopo di questo documento è illustrare il funzionamento delle Showlet e spiegarne il processo di sviluppo con degli esempi.

A chi si rivolge

Questo documento è rivolto agli sviluppatori che intendono creare od ampliare un portale fatto con jAPS 2.0 entando.

Gli esempi ed i concetti riportati in questo manuale saranno utili agli sviluppatori come riferimento per la creazione di Showlet

Prerequisiti

Per poter utilizzare efficacemente le informazioni presenti in questo documento è necessario avere conoscenze di:

Ulteriori Riferimenti

Ulteriori informazioni possono essere richieste attraverso la mailing list ufficiale Google Group "japs-platform".

Per mandare un messaggio ai membri della lista, invia una mail a .

È inoltre possibile consultare la documentazione presente in:

jAPS 2.0 entando Project - Sito per gli sviluppatori

Chapter 2. Introduzione alle Showlet

Table of Contents

Introduzione alle Showlet

Introduzione alle Showlet

Le Showlet sono un elemento fondamentale nella creazione di portali con jAPS 2.0 entando.

In breve le Showlet costituiscono i "blocchi" dinamici del portale, tutti quegli elementi che ci si aspetta di voler spostare, modificare od adattare durante la gestione delle pagine.

Nell'architettura di jAPS tutte le informazioni che vengono erogate, quindi presenti nelle pagine, passano attraverso le Showlet. Che si tratti di Contenuti, di Menu o di una lista di Contenuti, lo strumento che eroga queste informazioni è la Showlet.

E' possibile creare Showlet a seconda delle informazioni da erogare. Non esiste un limite al numero di Showlet che si possono aggiungere al portale.

Le Internal Servlet sono delle particolari Showlet che consentono di erogare una Servlet all'interno del portale.

Di fatto le Showlet sono JSP che vengono eleborate e poi incluse nelle varie posizioni, Frame, delle pagine. jAPS si preoccupa di eseguire la richiesta, ottenere la JSP renderizzata e di posizionare l'output nei Frame.

Dal punto di vista del codice Html, le Showlet devono essere viste come porzioni di una intera pagina Html. Quindi il risultato della renderizzazione di una Showlet dovrà essere un frammento di codice Html in armonia con i Modelli di Pagina

Warning

E' assolutamente sbagliato includere una intera pagina Html nelle showlet

Una Showlet è formata da:

  • Un record sulla tabella showletcatalog nel db port
  • Un file jsp situato nella directory WebContent/WEB-INF/aps/jsp/showlets del progetto

Chapter 3. Inserire le Showlet in jAPS

Per inserire una Showlet in jAPS è necessario eseguire i seguenti passi

  1. Creare un file jsp all'interno del progetto nella directory WebContent/WEB-INF/aps/jsp/showlets

  2. Inserire un nuovo record nel db port nella tabella showletcatalog indicando i campi

    code
    Il nome del file della jsp creata precedentemente (senza l'estensione .jsp)
    titles
    Properties in formato Xml contenente una descrizione multilingua della Showlet.
    parameters
    Xml che definisce le azioni per la configurazione della Showlet da backend
    plugincode

    Indica il codice del plugin a cui è associata la Showlet. A meno che non si stia lavorando con un plugin è da lasciare vuoto.

    Nel caso in cui si stia lavorando ad un plugin, il file jsp della Showlet deve essere posizionato all'interno della directory /aps/jsp/showlets/ del plugin. Per maggiori dettagli fare riferimento alla documentazione relativa al jAPS Plugin Pattern.

    parenttypecode
    Se presente, significa che questa Showlet è una specializzazione di un'altra Showlet. Questo parametro indica il codice della Showlet che si desidera estendere. La configurazione di questa Showlet va specificata nel paramentro defaultconfig.
    defaultconfig
    Questo campo è utilizzato solo nel caso in cui il valore del campo parenttypecode sia valorizzato. Contiene in formato Xml i paramentri di configurazione della Showlet corrente. Il risultato sarà quindi una Showlet di tipo parenttypecode avente come configurazione quella specificata in questo campo.
  3. Ricaricare la configurazione di sistema. Dal menu del CMS: Varie, Ricarica, Ricarica la configurazione.

  4. Procedere con la creazione della Showlet inserendo il codice Html nel file jsp creato, importare le tag library necessarie e creare i file css.

    Importare inoltre le eventuali immagini all'interno del progetto nella directory WebContent/resources/static/img/showlets/ e i file JavaScript in WebContent/resources/static/img/showlets/.

  5. Associare la Showlet ai Frame delle Pagine.

Chapter 4. Convenzioni

Table of Contents

Convenzioni

Convenzioni

I nomi dei file delle jsp, i codici, i nomi dei CSS e delle directory utilizzate per le Showlet seguono la formula: nomeservizio_nomecomponente_variante

Ad esempio la jsp del form della ricerca si chiamerà search_form.jsp e la jsp della Showlet che ne stampa i risultati sarà search_results.jsp.

Example 4.1. Esempio dei nomi dei file delle jsp Briciole di Pane e Menu di Navigazione

Showlet Briciole di Pane: navigation_breadcrumbs.jsp

Showlet Menu di Navigazione: navigation_menu.jsp


Chapter 5. CSS e Javascript

Css e Javascript

Solitamente è una delle prime domande che gli sviluppatori si fanno, ovvero: dove mettere i CSS e come collegarli con il resto del portale?

stato dedicato un intero capitolo per l'inclusione dei file CSS e dei file JavaScript all'interno delle Showlet per mettere in evidenza la procedura e per dare una rapida risposta ad una delle domande ricorrenti che gli sviluppatori si pongono.

Includere file CSS

necessario utilizzare il tag headInfo presente nella TLD aps-core.tld.

Sostanzialmente il tag headInfo dice al modello di pagina di stampare una informazione. Tale informazione viene recepita dal tag outputHeadInfo presente nel Modello di Pagina.

Il necessario di cui avete bisogno per poter effettuare correttamente l'inclusione di CSS è:

Un tag outputHeadInfo nel Modello di Pagina

Un tag headInfo nella Showlet

headInfo è il trasmettitore e outputHeadInfo è il ricevitore. Ovviamente devono essere dello stesso tipo, per questo entrambi hanno un attributo type. Type è una semplice stringa, che potete utilizzare a vostro piacimento tranne che per i CSS. Infatti il type="CSS" è utilizzato in tutto il sistema come riferimento per l'inclusione di file CSS (anche i modelli di contenuto se ne servono).

Includere file Javascript

Il concetto risulta essere lo stesso presente per l'inclusione dei file CSS. Si necessita sempre di un tag outputHeadInfo nel Modello di Pagina e di un tag headInfo nella Showlet.

In questo caso però i due tag saranno allineati su un tipo "type" JS.

Note

Con lo stesso principio utilizzato per includere i file CSS e JS è possibile includere CSS per Internet Explorer semplicemente utilizzando un type apposito (es. CSS_IE7) e circondarlo dai commenti condizionali.

Chapter 6. Stock Showlets, Custom Showlets e Plugin Showlets a confronto

Stock Showlets e Showlets Custom a confronto

jAPS viene rilasciato con alcune Showlet predefinite, o Stock Showlet, che consentono il corretto funzionamento delle funzionalità base.

Senza le Stock Showlet sarebbe impossibile usufruire ad esempio delle Internal Servlet o della Showlet di Login.

Le Custom Showlet invece sono create dagli sviluppatori per soddisfare delle esigenze specifiche, le quali possono essere di natura prettamente grafica o più complessa nel caso di funzionalità personalizzate.

Le Plugin Showlet sono le showlet incluse all'interno dei plugin di jAPS con lo scopo di erogare le funzioni specifiche di ogni plugin.

Per esempio il plugin java Agile CMS, attualmente distribuito con jAPS 2.0.8, comprende le showlet necessarie alla pubblicazione e alla ricerca dei Contenuti.

Chapter 7. Alcuni Custom Tag di jAPS 2.0 entando

Alcuni Custom Tag di jAPS 2.0 entando

Url Tag (wp:url)

è il tag preposto alla renderizzazione degli URL all'interno del portale quindi lo si deve usare per scrivere i link all'interno portale.

Ha due attributi: page e lang.

L'attributo page, non è obbligatorio, quando specificato restituisce l'URL di una pagina. Quando non è specificato il tag restituirà l'URL della pagina corrente.

L'attributo lang, come è possibile intuire, restituisce la pagina desiderata nella lingua specificata. Quando lang non è presente la lingua della pagina è la lingua corrente.

Example 7.1. Tag wp:url

Se volessi scrivere un link alla pagina con codice "homepage" in lingua inglese scriverei

<a href="<wp:url page="homepage" lang="en" />">
	Homepage in English
</a>

Il risultato sarebbe:

<a href="http://applicationBaseUrl/en/homepage.wp">
	Homepage in English
</a>
				

NavigatorTag (wp:nav)

Il tag wp:nav si utilizza per la creazione di liste di link. in grado di iterare sull'albero delle pagine secondo la regola di navigazione fornita.

L'attributo spec deve contenere una espressione che indica un sottoinsieme di pagine (vedere la documentazione di INavigatorParser.java). Se spec non viene specificato verrà ricercato nella request.

Per ogni pagina ricavata dall'espressione presente in spec verrà eseguito il body del tag valorizzando con la pagina corrente la variabile indicata nell'attributo var.

Example 7.2. Tag wp:nav, lista di tutte le pagine figlie di una pagina

Assumiamo come pagina madre una pagina con codice homepage, vogliamo stampare la lista di tutte le sue figlie.

Nella showlet scriveremo:

<%@ taglib prefix="wp" uri="aps-core.tld" %>
<%@ taglib prefix="c" uri="c.tld" %>
 <wp:nav 
   spec="code(homepage).subtree(1000)" 
   var="currentPage">
    <c:out value="${currentPage.title}" /> -
</wp:nav>
				

Il risultato sarà simile a:

Homepage - Pagina 1 - Pagina 1 1 - Pagina 1 2 - (....)

Example 7.3. Tag wp:nav, lista di link dei figli di una pagina

Per creare una lista Html con i link a tutti i figli della pagina con codice homepage scriverò

<%@ taglib prefix="wp" uri="aps-core.tld" %>
<%@ taglib prefix="c" uri="c.tld" %>
<ul>
<wp:nav 
  spec="code(homepage).subtree(1000)" 
  var="currentPage">
 <li>
  <a href="<wp:url page="${currentPage.code}" />">
   <c:out value="${currentPage.title}" />
  </a>
 </li>
</wp:nav>
				

Il risultato sarà simile a:

<ul>
<li>
 <a href="http://applicationBaseUrl/currentLang/homepage.wp>
  Pagina Iniziale
 </a>
</li>
<li>
 <a href="http://applicationBaseUrl/currentLang/pagina1.wp>
  Pagina 1
 </a>
</li>
<li>
 <a href="http://applicationBaseUrl/currentLang/pagina11.wp>
  Pagina 1 1
 </a>
</li>
<li>
 <a href="http://applicationBaseUrl/currentLang/pagina12.wp>
  Pagina 1 2
 </a>
</li>
(...)
</ul>

I18n Tag (wp:i18n)

In jAPS la renderizzazione delle etichette multilingua è affidata al tag wp:i18n, che dato un codice di un'etichetta ne recupera il valore.

Ha tre attributi: key, lang e var.

L'attributo key è obbligatorio e deve indicare un codice di un'etichetta esistente.

L'attributo lang se specificato restituisce il valore dell'etichetta nella lingua specificata. Quando non viene indicato l'etichetta renderizzata è nella lingua corrente dell'utente.

Infine è possibile salvare il valore restituito del tag in una variabile specificata nell'attributo var, altrimenti se non specificato, il tag stamperà direttamente l'etichetta.

Example 7.4. Tag wp:i18n, Stampa di un'etichetta

Assumendo di aver creato dal CMS l'etichetta con codice WELCOME e che nel portale esistano due lingue disponibili, italino ed inglese.

Il valore dell'etichetta WELCOME in italiano è Benvenuto in jAPS e in inglese Welcome to jAPS. Nella Showlet voglio stamparne il valore nella lingua visualizzata dall'utente.

Scriverò:

<%@ taglib prefix="wp" uri="aps-core.tld" %>
<%@ taglib prefix="c" uri="c.tld" %>
<wp:i18n key="WELCOME" />
				
				

Note

I codici (key) delle etichette vengono scritti tutti maiuscoli. Se sono necessari degli spazi si utilizzano gli underscore(_)

ResourceURL, cssURL, imgURL Tag

Questi tre tag vengono utilizzati quando è necessario riferirsi a risorse statiche, utilizzato principalmente per l'inclusione di immagini e css.

Il tag wp:resourceURL restituisce di default il path completo sino alla directory resources/static/.

Gli altri due tag, wp:cssURL e wp:imgURL sono un'estensione di wp:resourceURL. Restituiscono rispettivamente il path della directory resources/static/css e resources/static/img.

Example 7.5. Tag wp:resourceURL, utilizzo

Nella directory del progetto WebContent/resources/static/js posiziono un file chiamato test.js. Per includerlo nel mio modello scrivo:

<%@ taglib prefix="wp" uri="aps-core.tld" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<script 
 type="text/javascript" 
 src="<wp:resourceURL/>js/test.js">
</script>
</head>
[...]

				

Mi assicuro di aver incluso la TLD aps-core.tld e dopodichè utilizzo il tag wp:resourceURL nell'attributo src dello script. In output troveremo l'elemento script così modificato

[...]
 <script 
  type="text/javascript" 
  src="http://applicationbaseurl/resources/static/js/test.js">
 </script>
[...]
				

ContentList e ContentListFilter Tag

Questi tags fanno parte del plugin jacms che è in bundle con jAPS 2.0.8

ContentList Tag

Si utilizza quando si vuole stampare una lista di contenuti che possono essere visualizzati nel portale. Il suo funzionamento prevede che restituisca una lista di identificativi che dovranno poi essere renderizzati tramite il tag jacms:content.

è composto dagli attributi:

listName
è obbligatorio, è il nome della variabile, nel contesto di pagina, che verrà valorizzata con la lista degli identificativi dei contenuti.
contentType
Se specificato la lista conterrà solo identificati di contenuti di quel tipo. Deve essere uno dei codici dei Tipi di Contenuto configurati nel sistema.
category
è il codice di una categoria. Se specificato, verranno inseriti nella lista solo gli identificativi dei contenuti che appartengono alla categoria indicata.
cacheable
Può assumere i valori true oppure false, di default ha valore true. Determina se la lista debba essere generata utilizzando la cache di sistema. Quando è impostato a false non verrà utilizzata la cache di sistema per generare la lista.

ContentListFilter Tag

Insieme al tag contentList è fornito il sottotag contentListFilter. ContentListFilter, lo dice il nome stesso, imposta un filtro sulla lista dei contenuti. All'interno del tag contentList è possibile inserire più di un filtro tramite contentListFilter, ciascun filtro verrà processato nell'ordine di posizione.

Ecco gli attributi di contentListFilter

key

il codice di un metadato oppure il nome un attributo (compatibile con il tipo specificato in contentType del tag contentList).

Il filtro sarà applicato sulla base del metadato o dell'attributo indicato.

I metadati disponibili sono: la data di creazione del contenuto (codicecreated) e la data dell'ultima modifica (codice modified).

Quando il valore di key si riferisce al nome di un attributo del Tipo di Contenuto è necessario impostare attributeFilter a true

attributeFilter
Può assumere i valori true o false ed indica se il filtro debba essere applicato sugli attributi del contenuto oppure sui metadati.
value

il valore atteso. Si utilizza quando si vuole raggiungere un gruppo di contenuti con proprietà di pari valore. Ad esempio tutti i contenuti con data 22/01/2001.

Non è obbligatorio. Viene considerato alternativo a start e end

start

è il valore di partenza del metadato o dell'attributo specificato per cui applicare il filtro. Si utilizza per creare filtri su un dato intervallo. Ad esempio tutti i contenuti creati dal 22/01/2001

Non è obbligatorio. considerato alternativo a value ed utilizzato in coppia con end per la definizione di intervalli.

end

è il valore finale del metadato o dell'attributo specificato per il quale applicare il filtro. Si utilizza per creare filtri con range di valori. Ad esempio tutti i contenuti creati prima del 19/06/2005

Non è obbligatorio. considerato alternativo a value e generalmente utilizzato in coppia start per la definizione di intervalli.

order

Non è obbligatorio e può assumere i valori ASC e DESC, non ha un valore predefinito.

Specifica come debbano essere ordinati i risultati del filtro, quando assume il valore ASC i risultati saranno ordinati in modo crescente, quando specificato DESC in modo decrescente.

likeOption

Può assumere i valori true o false ed è applicabile ai soli metadati e attributi del contenuto di tipo testo. Di default il suo valore è false.

Quando impostato a true il comportamento del filtro verrà modificato in modo tale da includere nella lista quei contenuti (gli identificativi) che esprimono somiglianza per il metadato o attributo fornito.

Example 7.6. Tag jacms:contentList, una lista di news

Con il codice seguente si vogliono stampare gli ultimi cinque contenuti di tipo News che fanno parte della categoria con codice sport.

<%@ taglib prefix="jacms" uri="/WEB-INF/plugins/jacms/aps/tld/jacms-aps-core.tld" %>
<%@ taglib prefix="wp" uri="aps-core.tld" %>
<%@ taglib prefix="c" uri="c.tld" %>
<wp:i18n key="LATEST_SPORT" />
<hr />
<jacms:contentList listName="listaNews" contentType="NEW" category="sport">
<jacms:contentListFilter key="Data" attributeFilter="true" order="DESC"/>
<jacms:contentListFilter key="Titolo" attributeFilter="true" order="ASC"/>
</jacms:contentList>

<c:forEach var="contentId" items="${listaNews}" begin="0" end="4">
<jacms:content contentId="${contentId}" modelId="default" />
<hr />
</c:forEach>

				

Chapter 8. Esempi

Esempi

Stock Showlets

Invocazione di una Servlet Interna

Permette di invocare una action interna al backend.

<%@ taglib prefix="wp" uri="aps-core.tld" %>
<wp:externalFramework />

				

Custom Showlets

Form della Ricerca

Form della Ricerca che punta ad una pagina dei risultati search_results

<%@ taglib prefix="wp" uri="aps-core.tld" %>
<form id="searchForm" method="get" action="<wp:url page="search_results" />">
 <input type="text" name="search" />
 <input type="submit" value="Cerca" />
</form>

Ultime Notizie

Ultime 4 notizie con categoria homepage

<%@ taglib prefix="jacms" uri="/WEB-INF/plugins/jacms/aps/tld/jacms-aps-core.tld" %>
<%@ taglib prefix="wp" uri="aps-core.tld" %>
<%@ taglib prefix="c" uri="c.tld" %>

<jacms:contentList listName="contentList" contentType="NEW" category="homepage">
	<jacms:contentListFilter key="Data" attributeFilter="true" order="DESC" />
</jacms:contentList>
<ul>
	<c:forEach var="content" items="${contentList}" begin="0" end="3">
			<li><jacms:content contentId="${content}" modelId="list" /></li>
	</c:forEach>
</ul>
				

Plugin Showlets

Content Viewer

Sfrutta il solo tag jacms:content il resto lo fa la configurazione

<%@ taglib prefix="jacms" uri="aps-core.tld" %>
<jacms:content />

				

Content List

Eroga una lista di contenuti configurata dal CMS

<%@ taglib prefix="jacms" uri="/WEB-INF/plugins/jacms/aps/tld/jacms-aps-core.tld" %>
<%@ taglib prefix="wp" uri="aps-core.tld" %>
<%@ taglib prefix="c" uri="c.tld" %>
<%
/*  
	Author: William Ghelfi <william.ghelfi@elicriso.biz> - 2005/05/23
	Author: Eugenio Santoboni <eugeniosant@tiscali.it>
	
	Erogatore automatico di contenuti.
*/
%>

<jacms:contentList listName="contentList" />

<c:if test="${contentList != null}">

	<wp:pager listName="contentList" objectName="groupContent" pagerIdFromFrame="true" >
		<ul>
		<c:forEach var="contentId" items="${contentList}" begin="${groupContent.begin}" end="${groupContent.end}">
			<li><jacms:content contentId="${contentId}" /></li>
		</c:forEach>
		</ul>
		<c:if test="${groupContent.size > groupContent.max}">
			<p class="paginazione">
				<c:choose>
				<c:when test="${'1' == groupContent.currItem}">&lt;&lt; <wp:i18n key="PREV" /></c:when>
				<c:otherwise><a href="<wp:url paramRepeat="true" ><wp:urlPar name="${groupContent.paramItemName}" ><c:out value="${groupContent.prevItem}"/></wp:urlPar></wp:url>">&lt;&lt; <wp:i18n key="PREV" /></a></c:otherwise>					
				</c:choose>
				<c:forEach var="item" items="${groupContent.items}">
					<c:choose>
					<c:when test="${item == groupContent.currItem}">&#32;[<c:out value="${item}"/>]&#32;</c:when>
					<c:otherwise>&#32;<a href="<wp:url paramRepeat="true" ><wp:urlPar name="${groupContent.paramItemName}" ><c:out value="${item}"/></wp:urlPar></wp:url>"><c:out value="${item}"/></a>&#32;</c:otherwise>
					</c:choose>
				</c:forEach>
				<c:choose>
				<c:when test="${groupContent.maxItem == groupContent.currItem}"><wp:i18n key="NEXT" /> &gt;&gt;</c:when>
				<c:otherwise><a href="<wp:url paramRepeat="true" ><wp:urlPar name="${groupContent.paramItemName}" ><c:out value="${groupContent.nextItem}"/></wp:urlPar></wp:url>"><wp:i18n key="NEXT" /> &gt;&gt;</a></c:otherwise>					
				</c:choose>
			</p>
		</c:if>
		
	</wp:pager>
	
</c:if>