Linea guida: Creazione di interfacce utente Web
In questa linea guida viene descritto come creare interfacce utente Web utilizzando l'ambiente di modellazione RAD6.0.
Relazioni
Descrizione principale

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

No

No

No

No

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

No

No

No

No

No

No

No

No

No

JavaScript

Java Scriptlet

Custom Tag

Struts JSP

HTML 4.01

Frameset HTML 4.01

XHTML 1.0 o 1.1

Frameset XHTML 1.0

No

No

No

No

JavaScript

Java Scriptlet

Custom Tag

Faces JSP

HTML 4.01

XHTML 1.0 o 1.1

No

JavaScript

Java Scriptlet

Custom Tag

Frammenti Java

Faces JSP con memorizzazione in cache lato client

HTML 4.01

XHTML 1.0 o 1.1

No

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
JSP No
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:

  1. Avviare Rational Application Developer v6.0.
  2. Nella barra dei menu, selezionare Help (Guida) > Help Contents (Contenuto guida).
  3. Espandere Developing Web Applications (Sviluppo applicazioni Web).
  4. Esplorare Web Site Design o Web Page Design.