Esercizio 1.2: Preparazione per lo sviluppo dei portlet e definizione del flusso dell'applicazione

Prima di iniziare, completare l'Esercizio 1.1: Impostazione.

Nel precedente esercizio, è stato creato il progetto AuctionPortlet che contiene i portlet che verranno sviluppati in questa esercitazione. Per prepararsi alla creazione dell'interfaccia utente e all'aggiunta di dati a specifici portlet Faces, occorre definire il flusso dell'applicazione utilizzando l'editor Diagramma Web. Un diagramma Web è l'unico metodo per definire il flusso dell'applicazione, ma è particolarmente adatto per lo sviluppo visivo di applicazioni di portlet basati su componenti Faces.

Creazione di un diagramma Web per realizzare il flusso dell'applicazione

Un diagramma Web è un file che consente di visualizzare e di modificare il flusso di un'applicazione Web come, ad esempio, un'applicazione portlet basata su Faces o su Struts. L'editor diagramma Web è un editor visivo che consente la modifica dei diagrammi Web. Quando si aggiungono nodi, connessioni e altri componenti a un diagramma Web, questa operazione viene definita genericamente disegno del diagramma.

Un diagramma Web è formato da nodi e connessioni tra nodi. Un nodo è un'icona che rappresenta una risorsa come una pagina JSP del portlet oppure un bean JavaTM. Se la risorsa esiste, il nodo viene definito realizzato; se la risorsa non esiste, il nodo viene definito non realizzato. I nodi realizzati vengono visualizzati con un colore e con i nomi in grassetto. I nodi non realizzati vengono visualizzati come icone di colore grigio.

Verranno aggiunti tre nodi JSP al diagramma Web. Uno nodo sarà quello principale, che consentirà la navigazione ai due nodi dettagli collegati.

  1. Al momento della creazione del progetto portlet Auction, la procedura guidata ha creato automaticamente un file diagramma Web predefinito chiamato diagram.gph. Nella vista Esplora progetti, espandere le cartelle Progetti Web dinamici e AuctionPortlet, quindi fare doppio clic su Diagramma Web.

    Il file si aprirà nel riquadro di modifica con alcune istruzioni sull'utilizzo dell'editor Diagramma Web.
    Nuovo diagramma Web

  2. La vista attiva sul lato destro dello spazio di lavoro è una tavolozza, che contiene numerosi cassetti contenenti oggetti che è possibile trascinare e rilasciare nel diagramma Web. Dalla tavolozza, verranno aggiunti oggetti pagina Web nel file UserAdmin.gph. Quando si fa clic su un oggetto contenuto nella tavolozza, non è necessario tenere premuto il tasto del mouse durante l'operazione di trascinamento. È sufficiente spostare il cursore nel diagramma Web e fare di nuovo clic per rilasciare l'oggetto.

    Per creare il primo nodo, è possibile trascinare UserAdminView.jsp, la pagina della vista iniziale JSP creata con il progetto AuctionPortlet da Esplora progetti all'editor. Dal momento che questo file è stato già creato, viene visualizzato come oggetto creato.

  3. Trascinare e rilasciare un oggetto pagina Web all'editor. Modificare il nome della pagina Web in UserAdminCreate.jsp.
  4. Ripetere il passaggio precedente per creare una pagina Web chiamata UserAdminUpdate.jsp.

    Nota: è possibile trascinare i nodi per riposizionarli.

  5. Successivamente, verranno create connessioni tra i nodi pagina Web per specificare il flusso di dati nei portlet:
    1. Selezionare Connessione dal menu a comparsa di UserAdminView.jsp. Da UserAdminView.jsp, trascinare la connessione sul nodo UserAdminCreate.jsp.
    2. Selezionare Collegamento alla pagina Web dalla finestra di dialogo Scelta di una connessione e fare clic su OK.
    3. Selezionare Connessione dal menu a comparsa del nodo UserAdminCreate.jsp e trascinare di nuovo la connessione nel nodo UserAdminView.jsp.
    4. Selezionare Risultato Faces dalla finestra di dialogo Scelta di una connessione e fare clic su OK.
    5. Sovrascrivere view sulla voce <new> evidenziata per denominare la nuova connessione.
    6. Selezionare Connessione dal menu a comparsa di UserAdminView.jsp. Da UserAdminView.jsp, trascinare la connessione al nodo UserAdminUpdate.jsp.
    7. Selezionare Risultato Faces dalla finestra di dialogo Scelta di una connessione e fare clic su OK.
    8. Sovrascrivere update sulla voce <new> evidenziata per denominare la nuova connessione.
    9. Selezionare Connessione dal menu a comparsa del nodo UserAdminUpdate.jsp e trascinare la la connessione di nuovo sul nodo UserAdminView.jsp.
    10. Selezionare Risultato Faces dalla finestra di dialogo Scelta di una connessione e fare clic su OK.
    11. Sovrascrivere view sulla voce <new> evidenziata per denominare la nuova connessione.
    12. Salvare il diagramma Web.
    Il diagramma dovrebbe essere simile a quello riportato di seguito:
    Struttura del diagramma Web

I collegamenti che sono stati definiti forniranno alle pagine del portlet i collegamenti per consentire il flusso corretto dei dati inizializzati dall'utente attraverso l'applicazione. Quando la pagina UserAdminView richiede un'azione di aggiornamento o di creazione utente, si apre il modulo appropriato. Dopo l'inoltro delle informazioni necessarie da parte di questi moduli, le nuove informazioni utente diventano disponibili nella funzione di query del portlet UserAdmin.

A questo punto, è possibile iniziare l'Esercizio 1.3: Sviluppo della pagina UserAdmin.

Termini di utilizzo | Feedback
(C) Copyright IBM Corporation 2000, 2005. Tutti i diritti riservati.