jAPS 2.0 entando - Modelli di Pagina

Do It The jAPS Way

Daniela Nieddu

Prima bozza 
AgileTec s.r.l.

Copyright © 2011 Tzente 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-18MEM

Revisione per il rilascio di jAPS 2.0.10

Revision 0.12009-04-21DN

Prima Bozza

Abstract

Questo documento mostra come creare dei Modelli di Pagina per un Portale istanziato da jAPS 2.0 entando.

Table of Contents

1. Scopo del documento
Introduzione
A chi si rivolge
Prerequisiti
Risorse
2. Cos'è e come si crea un Modello di Pagina
Cos'è e come si crea un Modello di Pagina
Le due anime di un Modello di Pagina - parte I: XML
Le due anime di un Modello di Pagina - parte II: Markup
3. Due esempi concreti
Homepage
Pagina Interna

List of Examples

2.1. Nomi significativi ai Codici dei Modelli di Pagina.
2.2. Nomi significativi alle Descrizioni dei Modelli di Pagina.
2.3. Configurazione dell'XML del Modello di Pagina.
2.4. Configurazione Showlet di Default.
2.5. Nomi significativi alle JSP dei Modelli di Pagina.
3.1. XML: Esempio di Pagina Iniziale con tre colonne.
3.2. Markup: Esempio di Pagina Iniziale con tre colonne.
3.3. XML: Esempio di Pagina Interna con due colonne.
3.4. Markup: Esempio di Pagina Interna con due colonne.

Chapter 1. Scopo del documento

Table of Contents

Introduzione
A chi si rivolge
Prerequisiti
Risorse

Introduzione

Questo documento mostra come creare Modelli di Pagina per un Portale istanziato da jAPS2.0.

A chi si rivolge

Questo documento è rivolto a chi si appresta a sviluppare un nuovo portale utilizzando jAPS 2.0 entando. Per cui i destinatari sono esperti in interfacce grafiche per il Web e sviluppatori Java di media esperienza.

Prerequisiti

Al fine di trarre il massimo vantaggio da questo documento, è necessario avere le conoscenze di base di: (X)HTML, CSS e XML, oltre quelle per utilizzare l'ambiente di sviluppo, come spiegato nelle altre guide.

Risorse

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. Cos'è e come si crea un Modello di Pagina

Table of Contents

Cos'è e come si crea un Modello di Pagina
Le due anime di un Modello di Pagina - parte I: XML
Le due anime di un Modello di Pagina - parte II: Markup

Cos'è e come si crea un Modello di Pagina

Un Modello di Pagina è la sintesi delle caratteristiche di una Pagina.

Quando si crea una Pagina le si associa un Modello, poi si personalizzano le proprietà e si configurano le Showlet peculiari della Pagina.

Le due anime di un Modello di Pagina sono l'XML e il Markup. La configurazione dell'XML definisce le posizioni delle Showlet che d'ora in poi chiameremo Frame, il Markup nella jsp l'aspetto grafico.

Si possono creare vari Modelli di Pagina, ad esempio uno per l'Homepage e uno per le Pagine Interne del Portale.

Le due anime di un Modello di Pagina - parte I: XML

Come prima cosa dobbiamo decidere la struttura della nostra Pagina; Questo significa stabilire le posizioni delle Showlet di default e prevedere delle posizioni vuote per altre Showlet.

Se ipotizziamo di aver chiamato il nostro portale mioportale, avremo il Database mioportalePort. Dobbiamo configurare i Modelli di Pagina nella tabella pagemodels inserendo:

Codice, colonna code

deve coincidere con il nome che si darà alla jsp corrispondente.

Example 2.1. Nomi significativi ai Codici dei Modelli di Pagina.

home, internal_2columns.


Descrizione, colonna descr

deve essere significativa per rendere immediata la comprensione in fase di creazione della Pagina.

Example 2.2. Nomi significativi alle Descrizioni dei Modelli di Pagina.

Homepage, Interna 2 Colonne.


Configurazione, colonna frames

XML con l'elenco dei Frame numerati. La numerazione delle posizioni deve partire dallo 0 e proseguire ordinatamente.

Ricordarsi di indicare il main="true"

Importante nei Modelli di Pagina non destinati alla Homepage, ricordarsi di segnare uno dei Frame con l'attributo main="true". Ciò permette di individuare la posizione preferita nella Pagina in cui pubblicare un contenuto e risulterà utile per altre cose non coperte da questa guida.

Example 2.3. Configurazione dell'XML del Modello di Pagina.


<frames>
	<frame pos="0">
	    <descr>Lingua</descr>
	    <defaultShowlet code="lang"/>
	</frame>
	<frame pos="1">
	    <descr>Ricerca</descr>
	    <defaultShowlet code="search_form"/>
	</frame>
	<frame pos="2">
	    <descr>Briciole di Pane</descr>
	    <defaultShowlet code="breadcrumbs"/>
	</frame>
	<frame pos="3">
		<descr>Box Sinistro 1</descr>
	</frame>
	<frame pos="4" main="true">
		<descr>Box Centrale 1</descr>
	</frame>
	
	..........
	
	<frame pos="11">
		<descr>Footer</descr>
	</frame>
</frames>

Come vediamo nell'esempio, per ogni Frame possiamo configurare:

  • Posizione: a partire dallo zero.
  • Descrizione: buona norma assegnare dei nomi significativi che renderanno più semplice la configurazione delle Pagina nell'interfaccia di amministrazione.

  • Showlet di Default: nei casi in cui ci siano Showlet che si ripetono nella stessa posizione in tutte le pagine a cui è applicato questo modello. Per alcune Showlet può essere prevista una configurazione, per cui è necessario elencare le property.

    Example 2.4. Configurazione Showlet di Default.

    per creare un menù con tutte le pagine figlie della Homepage, settiamo il navSpec in questo modo:

    			
	<properties>
		<property key="navSpec">code(homepage).children</property>
	</properties>

Le due anime di un Modello di Pagina - parte II: Markup

Una volta stabilito cosa vogliamo visualizzare nella Pagina e in che ordine, dobbiamo decidere come renderlo nel linguaggio di Markup preferito.

Nella cartella WEB-INF/aps/jsp/models creiamo la jsp col nome del Codice dato nell'XML,

Example 2.5. Nomi significativi alle JSP dei Modelli di Pagina.

home.jsp, internal_2columns.jsp.


Per definire l'inclusione di una Showlet nella jsp usiamo il tag: <wp:show frame="0">

Per l'aspetto grafico avremo bisogno di creare dei file .css nella cartella resources/static/css. In genere è buona abitudine creare almeno due Fogli di Stile, uno per le definizioni del Layout, che chiameremo general.css e metteremo dentro una cartella pagemodels e uno per lo stile generale che chiameremo mioportale.css.

Chapter 3. Due esempi concreti

Table of Contents

Homepage
Pagina Interna

Vediamo un esempio completo di Homepage e uno di Pagina Interna

Homepage

Example 3.1.  XML: Esempio di Pagina Iniziale con tre colonne. 


<frames>
	<frame pos="0">
		<descr>Ricerca</descr>
		<defaultShowlet code="search_form" />
	</frame>
	<frame pos="1">
		<descr>Briciole di Pane</descr>
		<defaultShowlet code="navigation_breadcrumbs" />
	</frame>
	<frame pos="2">
		<descr>Colonna 1, Box 1</descr>
		<defaultShowlet code="navigation_menu">
			<properties>
				<property key="navSpec">code(homepage).children</property>
			</properties>
		</defaultShowlet>
	</frame>
	<frame pos="3">
		<descr>Colonna 1, Box 2</descr>
	</frame>
	<frame pos="4">
		<descr>Colonna 1, Box 3</descr>
	</frame>
	<frame pos="5">
		<descr>Colonna 1, Box 4</descr>
	</frame>
	<frame pos="6">
		<descr>Centrale, Box 1</descr>
		<defaultShowlet code="news_latest" />
	</frame>
	<frame pos="7">
		<descr>Centrale, Box 2</descr>
		<defaultShowlet code="events_latest" />
	</frame>
	<frame pos="8">
		<descr>Centrale, Box 3</descr>
	</frame>	
	<frame pos="9">
		<descr>Centrale, Box 4</descr>
	</frame>
	<frame pos="10">
		<descr>Centrale, Box 5</descr>
	</frame>
	<frame pos="11">
		<descr>Colonna 3, Box 1</descr>
	</frame>
	<frame pos="12">
		<descr>Colonna 3, Box 2</descr>
	</frame>
	<frame pos="13">
		<descr>Colonna 3, Box 3</descr>
	</frame>
	<frame pos="14">
		<descr>Footer</descr>
		<defaultShowlet code="navigation_menu">
			<properties>
				<property key="navSpec">code(mappa_del_sito)+code(contattaci)</property>
			</properties>
		</defaultShowlet>
	</frame>
</frames>

In questo esempio vediamo una Homepage composta da 15 posizioni, dalla numero 0 alla numero 14. Abbiamo alcune Showlet di default: il form di ricerca, le briciole di pane, due menù, le ultime notizie e gli ultimi eventi mentre tutte le altre posizioni sono lasciate libere. In particolare vediamo che il menù posizionato nella prima colonna nel primo box, è stato configurato in modo da visualizzare tutte le pagine figlie della Homepage, il menù posizionato nel footer è configurato in modo da visualizzare la Pagina con la mappa del sito e la Pagina dei contatti.

Example 3.2. Markup: Esempio di Pagina Iniziale con tre colonne.


<%@ taglib prefix="wp" uri="aps-core.tld"%>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>mioportale| <wp:currentPage param="title" /></title>
<link rel="stylesheet" type="text/css" href="<wp:cssURL />mioportale.css" />
<link rel="stylesheet" type="text/css" href="<wp:cssURL />pagemodels/general.css" />
<wp:outputHeadInfo type="CSS"> 
	<link rel="stylesheet" type="text/css" href="<wp:cssURL /><wp:printHeadInfo />" />
</wp:outputHeadInfo>
</head>
<body>

<div id="header-up">
	<wp:show frame="0" />
</div>
<div id="header-down">
	<wp:show frame="1" />
</div>
<div id="colonna1">
	<wp:show frame="2" />
	<wp:show frame="3" />
	<wp:show frame="4" />
	<wp:show frame="5" />
</div>
<div id="colonna2">	
	<wp:show frame="6" />
	<wp:show frame="7" />
	<wp:show frame="8" />
	<wp:show frame="9" />
	<wp:show frame="10" />
</div>
<div id="colonna3">
	<wp:show frame="11" />
	<wp:show frame="12" />
	<wp:show frame="13" />	
</div>
<div id="footer">
	<wp:show frame="14" />
</div>

</body>
</html>

In questo esempio vediamo come includere le Showlet nel markup. In ordine: il form di ricerca e le briciole di pane che sono state incluse dentro dei div, rispettando il posizionamento dato nell'XML, nei Frame 0 e 1. A seguire tre div per identificare tre colonne, in cui si è deciso di includere quattro posizioni nella prima colonna, cinque nella seconda e tre nella terza. Infine un div per il footer in cui è incluso l'ultimo Frame numero 14.

Pagina Interna

Example 3.3.  XML: Esempio di Pagina Interna con due colonne. 


<frames>
	<frame pos="0">
		<descr>Ricerca</descr>
		<defaultShowlet code="search_form" />
	</frame>
	<frame pos="1">
		<descr>Briciole di Pane</descr>
		<defaultShowlet code="navigation_breadcrumbs" />
	</frame>
	<frame pos="2">
		<descr>Colonna 1, Box 1</descr>
		<defaultShowlet code="navigation_menu">
			<properties>
				<property key="navSpec">code(homepage).children</property>
			</properties>		
		</defaultShowlet>
	</frame>
	<frame pos="3">
		<descr>Colonna 1, Box 2</descr>
	</frame>
	<frame pos="4">
		<descr>Colonna 1, Box 3</descr>
	</frame>
		<frame pos="5">
		<descr>Colonna 1, Box 4</descr>
	</frame>
	<frame pos="6" main="true">
		<descr>Centrale, Box 1</descr>
	</frame>
	<frame pos="7">
		<descr>Centrale, Box 2</descr>
	</frame>
	<frame pos="8">
		<descr>Centrale, Box 3</descr>
	</frame>
	<frame pos="9">
		<descr>Centrale, Box 4</descr>
	</frame>	
	<frame pos="10">
		<descr>Centrale, Box 5</descr>
	</frame>
	<frame pos="11">
		<descr>Footer</descr>
		<defaultShowlet code="navigation_menu">
			<properties>
				<property key="navSpec">code(mappa_del_sito)+code(contattaci)</property>
			</properties>		
		</defaultShowlet>		
	</frame>	
</frames>

In questo esempio vediamo una Pagina Interna composta da 12 posizioni, dalla numero 0 alla numero 11. Abbiamo alcune Showlet di default: il form di ricerca, le briciole di pane e due menù, mentre tutte le altre posizioni sono lasciate libere. In particolare vediamo che il menù posizionato nella prima colonna nel primo box, è stato configurato in modo da visualizzare tutte le pagine figlie della Homepage, il menù posizionato nel footer è configurato in modo da visualizzare la Pagina con la mappa del sito e la Pagina dei contatti.

Example 3.4. Markup: Esempio di Pagina Interna con due colonne.


<%@ taglib prefix="wp" uri="aps-core.tld"%>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>mioportale| <wp:currentPage param="title" /></title>
<link rel="stylesheet" type="text/css" href="<wp:cssURL />mioportale.css" />
<link rel="stylesheet" type="text/css" href="<wp:cssURL />pagemodels/general.css" />
<wp:outputHeadInfo type="CSS"> 
	<link rel="stylesheet" type="text/css" href="<wp:cssURL /><wp:printHeadInfo />" />
</wp:outputHeadInfo>
</head>
<body>
<div id="header-up">
	<wp:show frame="0" />
</div>
<div id="header-down">
	<wp:show frame="1" />
</div>
<div id="colonna1">	
	<wp:show frame="2" />
	<wp:show frame="3" />
	<wp:show frame="4" />
	<wp:show frame="5" />
</div>
<div id="colonna2">
	<wp:show frame="6" />
	<wp:show frame="7" />
	<wp:show frame="8" />
	<wp:show frame="9" />
	<wp:show frame="10" />				
</div>
<div id="footer">
	<wp:show frame="11" />
</div>

</body>
</html>

In questo esempio vediamo come includere le Showlet nel markup. In ordine: il form di ricerca e le briciole di pane che sono state incluse dentro dei div, rispettando il posizionamento dato nell'XML, nei Frame 0 e 1. A seguire due div per identificare due colonne, in cui si è deciso di includere quattro posizioni nella prima e cinque nella seconda. Infine un div per il footer in cui è incluso l'ultimo Frame numero 11.