Introduzione
L'ambiente di sviluppo Web in RAD 6.0 fornisce un completo insieme di tool per creare rapidamente interfacce utente
Web. Include Web Site Designer e Page Designer e numerose procedure guidate per semplificare la
creazione di pagine Web complesse. Questo documento fornisce le linee guida su come utilizzare efficacemente questi
tool per creare interfacce utente Web descrivendo un approccio di sviluppo, identificando i tipi di pagine supportate
ed evidenziando le caratteristiche che agevolano la creazione di una pagina Web.
Approccio di sviluppo
Sebbene si possa utilizzare immediatamente Page Designer per creare ogni singola pagina Web dell'interfaccia
utente, RAD 6.0 promuove un approccio di sviluppo top-down utilizzando Web Site Designer come punto di
partenza. Il relativo editor Navigation consente di:
-
Definire la struttura di navigazione del proprio sito Web:
Iniziare creando un diagramma gerarchico che rappresenta la struttura dei sito Web. Un disegnatore di
sito è disponibile nella vista Tavolozza per consentire di trascinare pagine e progetti nuovi
o esistenti nel diagramma e organizzarli in gruppi. L'editor consente facilmente di aggiungere, cancellare e
riorganizzare le pagine in modalità visuale. La creazione di un diagramma di navigazione consente a Web
Site Designer di identificare e mantenere traccia in modo automatico dei collegamenti di navigazione tra
le proprie pagine Web e di generare una mappa del sito. In seguito, durante la composizione di una singola
pagina utilizzando Page Designer, è possibile aggiungervi elementi di navigazione come una barra di
navigazione o menu che è possibile personalizzare per mostrare solo quei collegamenti ad essa appropriati
basati sulla struttura del sito (ad esempio, è possibile mostrare solo i collegamenti Top, Parent, Sibling e
First Child).
-
Applicare un modello di pagina:
Un modello di pagina definisce gli elementi visuali e il layout comuni a tutte le pagine e consente di
applicare un aspetto coerente al proprio sito Web. È possibile crearne uno utilizzando una procedura guidata
durante la creazione del progetto Web o separatamente in seguito. L'editor Navigation consente di
applicare facilmente un modello a tutte le pagine o a quelle selezionate nel proprio diagramma. Una buona
pratica suggerita è quella di includere i propri elementi di navigazione nel modello e applicare quest'ultimo a
tutte le pagine in modo da ottenere controlli di navigazione coerenti per l'intero sito Web.
-
Selezionare il tipo di pagina da utilizzare per ogni pagina Web:
Fare doppio clic su una pagina per lanciare la procedura guidata di creazione pagina. Sarà possibile
scegliere uno dei tipi di pagina supportati (consultare Selezione di tipo di pagina), specificare le proprietà
di pagina iniziali e aprirla nell'editor Page Designer. A questo punto è possibile comporre e
modificare il contenuto della pagina Web. Si noti che un disegnatore di Navigation di sito Web è
automaticamente disponibile nella vista Tavolozza per consentire di trascinare gli elementi di
navigazione sulla pagina.
Selezione di tipo di pagina
RAD 6.0 supporta la creazione di interfacce utente Web utilizzando le tecnologie HTML, JSP e Faces JSP. Ognuna
rappresenta una scelta di implementazione che indirizza i requisiti di diversi tipi di applicazioni Web. Ogni
tecnologia definisce anche un tipo di pagina che supporta differenti caratteristiche di interfaccia utente Web. Quando
si crea un'interfaccia utente Web, è importante, perciò, capire le caratteristiche che ogni tipo di pagina supporta e
conoscere se è adattabile per il tipo di applicazione Web in sviluppo. Le sezioni in basso identificano le
caratteristiche dell'interfaccia utente Web supportate dai diversi tipi di pagina in RAD 6.0 e specificano quali tipi
di pagine Web possono essere utilizzate in strutture statiche, dinamiche, Struts e JSF (JavaServer Faces) basate su
applicazioni Web.
Caratteristiche di interfaccia utente supportate
I tipi diversi di pagina offerti da RAD 6.0 per implementare le interfacce utente Web possono essere raggruppati in tre
categorie: HTML, JSP e Faces JSP. Inoltre, il tipo di pagina JSP distingue tra un semplice file JSP e una pagina JSP
Struts. Similmente, un tipo di pagina Faces JSP può essere una Faces JSP di base o una Faces JSP con memorizzazione in
cache lato client. I differenti tipi di pagina sono descritti in basso.
HTML
Questo tipo di pagina consente di creare una pagina HTML di base e supporta anche altri linguaggi di markup (consultare
la Tabella 1 - Caratteristiche di tipo di pagina). Sono supportate anche caratteristiche tipiche di HTML come frameset,
CSS (Cascading Style Sheet) e script in JavaScript. In aggiunta, il tool permette la definizione e l'utilizzo di
modelli di pagina per supportare la creazione di un aspetto coerente attraverso lo pagine Web.
JSP
Il tipo di pagina JSP è progettato per il supporto delle interfacce utente implementate utilizzando la tecnologia JSP
(RAD 6.0 supporta lo standard JSP 2.0). Tutte le caratteristiche della pagina HTML di base sono disponibili e
complementate dalla tecnologia di script JSP (Java Scriptlet) e di azioni (Custom Tag). Il tool consente la definizione
di un JSP Fragment per scomporre le parti comuni di una pagina in un file separato che può essere incluso, quando
appropriato, in altre pagine JSP. Inoltre, è supportato l'accesso di dati back-end tramite la tecnologia SDO (Service
Data Object) (consultare Concetto: strutture di applicazione Web per una descrizione degli SDO).
Struts JSP
Una pagina Struts JSP amplia una semplice JSP includendo automaticamente il supporto per elementi specifici per Struts
(consultare Concetto: strutture di applicazione Web per una descrizione di Struts). È progettata per essere utilizzata
per lo sviluppo di interfacce utente Web per applicazioni implementate utilizzando la struttura di Struts. In modo
specifico, include automaticamente l'accesso alle librerie di tag HTML (struts-html.tld) e Bean (struts-bean.tld) di
Struts e consente l'inclusione di campi da un bean ActionForm direttamente sulla pagina. Offre anche l'opzione di
aggiungere altre librerie di Struts.
Faces JSP
Il tipo di pagina Faces JSP è una pagina JSP progettata specificamente per le interfacce utente Web implementate
utilizzando la tecnologia JSF (consultare Concetto: strutture di applicazione Web per una descrizione di JSF). Fornisce accesso
alla libreria di tag principale di JSF e ai componenti di interfaccia utente predefiniti (Componenti Faces) che possono
essere trascinati sulla pagina. In aggiunta, una Faces JSP supporta gli script utilizzando frammenti di Java, ad
esempio, per specificare la gestione di eventi del componente interfaccia utente.
Faces JSP con memorizzazione in cache lato client
Questo tipo di pagina amplia la Faces JSP fornendo i componenti di interfaccia utente i cui dati possono essere
memorizzati in cache sul lato client. In modo specifico, la memorizzazione in cache lato client consente di collegare
un componente alle variabili JavaScript rispetto ai dati lato server. Ciò permette la creazione di pagine Web più
performanti poiché si riduce il numero di cicli di andata e ritorno tra il client e il server. I componenti del client
Faces forniti, comprendono:
-
Griglia di dati: visualizza i record di un'origine dati relazionale o gli elementi di una matrice di JavaBean in
una tabella.
-
Grafico: presenta i dati in un grafico a barre, in un grafico a forma di cerchio o in un grafico a linee. Per
utilizzare i grafici è necessaria l'installazione nel browser del plugin di Macromedia Flash.
-
Vista di struttura ad albero: visualizza i dati gerarchici in una struttura ad albero.
-
Servizio Web: permette alla pagina di Faces di recuperare i dati da un servizio Web esistente senza aggiornare la
pagina.
La tabella in basso riassume le caratteristiche supportate da ogni tipo di pagina e può essere utilizzata come guida
per determinare il tipo che soddisfa meglio i requisiti di interfaccia utente di un'applicazione Web.
Tipo di pagina
|
Linguaggio di markup
|
Supporto CSS
|
Supporto di modello di pagina
|
Sintassi di stile XML
|
Supporto script
|
Accesso dati SDO (*)
|
HTML
|
HTML 4.01
Frameset HTML 4.01
HTML 1.0 compatto
XHTML 1.0 o 1.1
Frameset XHTML 1.0
WML 1.3
|
Sì
Sì
No
Sì
Sì
No
|
Sì
No
No
Sì
No
No
|
N/D
|
JavaScript
|
N/D
|
JSP
|
HTML 4.01
Frameset HTML 4.01
HTML 1.0 compatto
XHTML 1.0 o 1.1
Frameset XHTML 1.0
WML 1.3
|
Sì
Sì
No
Sì
Sì
No
|
Sì
No
No
Sì
No
No
|
No
No
No
Sì
Sì
Sì
|
JavaScript
Java Scriptlet
Custom Tag
|
Sì
|
Struts JSP
|
HTML 4.01
Frameset HTML 4.01
XHTML 1.0 o 1.1
Frameset XHTML 1.0
|
Sì
Sì
Sì
Sì
|
Sì
No
Sì
No
|
No
No
Sì
Sì
|
JavaScript
Java Scriptlet
Custom Tag
|
Sì
|
Faces JSP
|
HTML 4.01
XHTML 1.0 o 1.1
|
Sì
Sì
|
Sì
Sì
|
No
Sì
|
JavaScript
Java Scriptlet
Custom Tag
Frammenti Java
|
Sì
|
Faces JSP con memorizzazione in cache lato client
|
HTML 4.01
XHTML 1.0 o 1.1
|
Sì
Sì
|
Sì
Sì
|
No
Sì
|
JavaScript
Java Scriptlet
Custom Tag
Frammenti Java
Macromedia Flash
|
Sì (con memorizzazione in cache lato client)
|
* L'accesso ai dati SDO richiede WAS v5.1 come destinazione di distribuzione
Tabella 1 - Caratteristiche di tipo di pagina
Applicabilità di applicazione Web
Il tipo di pagina da utilizzare nell'implementazione di un'interfaccia utente Web è influenzato principalmente dal
tipo di applicazione Web che viene sviluppata. Per le applicazioni Web statiche, la scelta è semplice poiché il tipo di
pagina HTML è la sola opzione. Per le applicazioni Web dinamiche, è possibile utilizzare sia pagine HTML che JSP. In
aggiunta, se si sviluppa un'applicazione Web dinamica utilizzando la struttura Struts o JSF, si avranno vantaggi
dall'utilizzo dei tipi di pagina di interfaccia utente specifici per queste tecnologie. Ciò consentirà di
avvantaggiarsi del supporto specializzato fornito dal tool e di costruire facilmente la propria interfaccia utente. La
tabella 2 mostra l'applicabilità di ogni tipo di pagina per le applicazioni Web statiche, quelle dinamiche e quelle che
utilizzano le strutture Struts e JSF.
Tipo di pagina
|
Applicazione Web statica
|
Applicazione Web dinamica (non basata su strutture)
|
Applicazione Web Struts
|
Applicazione Web JSF
|
HTML
|
Sì
|
Sì
|
Sì
|
Sì
|
JSP
|
No
|
Sì
|
Sì
|
Sì
|
Struts JSP
|
No
|
No
|
Sì (consigliato)
|
No
|
Faces JSP
|
No
|
No
|
Sì (con libreria di integrazione)
|
Sì (consigliato)
|
Faces JSP con memorizzazione in cache lato client
|
No
|
No
|
Sì (con libreria di integrazione)
|
Sì (consigliato)
|
Tabella 2 - Applicabilità di tipo di pagina
Modifica di pagina
Page Designer è il tool in RAD 6.0 utilizzato per modificare una pagina Web. Fornisce una vista di editor
centrale che consente di creare una pagina in modalità visuale WYSIWYG o con il codice sorgente testuale. Il tool
funziona insieme ad altre viste per supportare lo sviluppo di differenti tipi di pagine Web. In particolare, le
seguenti viste agevolano molto la modifica di una pagina:
Vista Tavolozza
La vista Tavolozza fornisce un vasto insieme di componenti UI pronti per l'uso, trascinabili su una pagina. Li
organizza nei disegnatori che raggruppano insieme i componenti correlati funzionalmente. Ad esempio, gli elementi di
forma HTML standard come pulsanti, campi di testo e caselle a discesa sono raggruppati in un disegnatore di Tag di
forma. L'elenco dei disegnatori visualizzati nella vista Tavolozza varia in base al tipo di pagina che viene
modificata. La tabella 3 elenca i disegnatori predefiniti mostrati per ogni tipo di pagina supportato. È possibile
personalizzare sia la Tavolozza che i principali disegnatori aggiungendo, cancellando, nascondendo o facendo comparire
rispettivamente i disegnatori e i componenti. Per una descrizione di ogni disegnatore e il relativo contenuto
predefinito, fare riferimento alla documentazione del prodotto.
Disegnatore di tavolozza
|
HTML
|
JSP
|
Struts JSP
|
Faces JSP
|
Faces JSP con memorizzazione in cache lato client
|
Tag HTML
|
X
|
X
|
X
|
X
|
X
|
Tag di forma
|
X
|
X
|
X
|
|
|
Modello di pagina
|
X
|
X
|
X
|
X
|
X
|
Navigazione sito Web
|
X
|
X
|
X
|
X
|
X
|
Portale
|
X
|
X
|
X
|
X
|
X
|
Tag JSP
|
|
X
|
X
|
X
|
X
|
Dati
|
|
X
|
X
|
X
|
X
|
Componenti Faces
|
|
|
|
X
|
X
|
Componenti client Faces
|
|
|
|
|
X
|
Tag HTML di Struts
|
|
|
X
|
|
|
Tag bean di Struts
|
|
|
X
|
|
|
Tag logici di Struts
|
|
|
X
|
|
|
Tag nidificati di Struts
|
|
|
nascosto
|
|
|
Tag a cascata di Struts
|
|
|
nascosto
|
|
|
Tabella 3 - Disegnatori di tavolozza predefiniti per tipo di pagina
Vista di modifica rapida
Questa vista consente di aggiungere rapidamente frammenti di codice JavaScript alla propria pagina. Quando si seleziona
un componente sulla pagina, viene visualizzato un elenco di possibili eventi ad esso appropriati nel pannello sinistro
della vista di modifica rapida. È possibile quindi selezionare un evento e aggiungervi uno script in uno dei seguenti
modi:
-
Immettere lo script direttamente nell'editor di script nel pannello destro.
-
Fare clic con il pulsante destro del mouse sull'editor di script, selezionare la voce di inserimento di
frammento e scegliere un frammento dall'elenco basato sul contesto fornito.
Risorse
Per informazioni dettagliate su Web Site Designer e Page Designer, fare riferimento alla
documentazione del prodotto:
-
Avviare Rational Application Developer v6.0.
-
Nella barra dei menu, selezionare Help (Guida) > Help Contents (Contenuto guida).
-
Espandere Developing Web Applications (Sviluppo applicazioni Web).
-
Esplorare Web Site Design o Web Page Design.
|