Esercizio 1.7: Personalizzazione del sito portale
Prima di iniziare, è necessario completare l'Esercizio 1.6: Creazione di un nuovo portale per visualizzare l'applicazione portlet.
Creazione di un nuovo tema
Durante il processo di creazione di un'applicazione portale, è possibile scegliere di creare un tema del tutto nuovo in Portal Designer. I temi forniscono l'aspetto globale dell'applicazione portale e incorporano molti elementi della struttura del portale, tra cui immagini, navigazione, barre degli strumenti ed effetti visivi a livello di pagina. Per creare un nuovo tema per il sito portale appena sviluppato nel corso di questa esercitazione, completare la seguente procedura:
- Selezionare File > Nuovo > Tema dalla barra dei menu.
- Immettere Auction nel campo Titolo.
- Scorrere e selezionare il tema Corporate affinché venga adottato come tema di origine. È molto più semplice creare un nuovo tema sulla base di uno esistente; in tal modo, non occorre creare da capo tutti gli elementi tema necessari.
- Fare clic su Avanti.
- Selezionare l'interfaccia Shadow dall'elenco delle interfacce disponibili e fare clic su Imposta come interfaccia predefinita per rendere Shadow l'interfaccia predefinita per il nuovo tema di Auction.
Un'interfaccia è il bordo attorno a ciascun portlet all'interno di una pagina portale. A differenza dei temi che si applicano all'aspetto globale del portale, le interfacce riguardano solo l'aspetto di ciascun portlet inserito nell'applicazione portale. Per impostazione predefinita, per ciascun tema è disponibile solo una selezione limitata di interfacce.
- Fare clic su Fine.
- Espandere Elementi > Temi nella vista Struttura e selezionare Auction.
- Nella vista Proprietà, selezionare la casella di controllo Predefinito per applicare il nuovo tema all'applicazione portale.
La modifica verrà applicata immediatamente al file di configurazione del portale.
- Salvare il file di configurazione del portale.
Questa parte dell'esercizio sarà dedicata all'aggiornamento degli stili, dei temi, delle interfacce nell'applicazione portale Auction attraverso l'uso di CSS Designer e Page Designer.
Modifica dell'immagine del banner del tema corrente
Per sostituire l'immagine del banner del tema predefinito del portale Auction, completare la seguente procedura:
- Come prima cosa, occorre importare una nuova immagine di banner nel progetto:
- Dalla barra dei menu, selezionare File > Importa. Viene visualizzata la finestra di dialogo Importazione.
- In Selezione di un'origine di importazione, fare clic su File System.
- Fare clic su Avanti.
- Fare clic su Sfoglia accanto al campo Dalla directory e passare alla seguente directory: <dirinstall>/portal/eclipse/plugins/com.ibm.etools.portal.examples.application_numeroversione/samples, dove <dirinstall> è la directory di installazione di Rational Developer.
- Selezionare auction.gif come destinazione dell'importazione.
- Fare clic su Sfoglia accanto al campo Nella cartella e specificare AuctionPortal/PortalContent/themes/html/Auction.
- Fare clic su Fine.
La procedura guidata importa il file nello spazio di lavoro.
- Con il file di configurazione del portale per il progetto AuctionPortal aperto, selezionare Modifica stile dal menu a comparsa di Portal Designer. In tal modo, il file Styles.css si aprirà in CSS Designer. Styles.css è il foglio di stile predefinito per il tema predefinito nell'applicazione.
CSS Designer fornisce due viste degli stili definiti per i file CSS: Anteprima (sulla sinistra), nella quale sono riportati esempi visivi di regole di stile così come vengono visualizzate nel rendering del browser di una risorsa Web, quindi la vista Origine (sulla destra), nella quale viene visualizzata una versione di testo del file CSS. È possibile modificare gli stili utilizzando una di queste due viste.
- Scorrere e selezionare l'icona Sfondo del banner nella vista Anteprima.
- Selezionare Modifica regola di stile [.wpsToolbarBannerBackground] dal menu a comparsa.
- Fare clic sulla proprietà Sfondo sulla sinistra della finestra di dialogo Impostazione proprietà stile.
- Immettere ../../auction.gif nel campo Immagine.

- Fare clic su OK.
- Salvare il file CSS e chiudere CSS Designer. La nuova immagine del banner viene applicata alla pagina aperta in Portal Designer.
Modifica del layout di una barra degli strumenti nell'area intestazione
È possibile apportare modifiche a un tema, come il layout di una barra degli strumenti nell'area di intestazione utilizzando Page Designer. È possibile modificare il layout (e lo stile) di un tema e delle interfacce associate. Le modifiche vengono memorizzate nel file default.jsp del tema, nei file control.jsp delle interfacce associate e in altri file JSP correlati, tra cui PageBarInclude.jsp, ad esempio. Inoltre, alcune delle modifiche che è possibile apportare nell'editor verranno applicate a tutti gli usi di questo tema all'interno dell'applicazione portale.
- Con il file di configurazione del portale per il progetto AuctionPortal aperto, selezionare Modifica tema dal menu a comparsa di Portal Designer. In tal modo, il file Default.jsp si aprirà in Page Designer.
Page Designer fornisce una rappresentazione visiva del tema e delle interfacce associate.
- Selezionare l'area della barra degli strumenti, come mostrato nella seguente immagine:
La scheda Anteprima in Page Designer non è supportata per il rendering del tema del portale.
- Nella vista Proprietà sarà possibile notare che il valore di jsp:directive.include è ./ToolBarInclude.jsp. Per modificare il codice della barra degli strumenti, fare clic sull'icona Sfoglia ed espandere le cartelle PortalContent > themes > html, quindi selezionare un'altra cartella di temi come, ad esempio, la cartella Engineering e scegliere il file ToolBarInclude.jsp contenuto in questa directory. Dopo aver fatto clic su OK, verrà visualizzata la nuova barra degli strumenti nella pagina Progettazione.
In alcuni casi, quando è difficile selezionare i singoli elementi del tema, utilizzare la vista Struttura per individuare gli elementi specifici che si desidera aggiornare. Se si seleziona un nodo nella vista Struttura, la selezione viene sincronizzata sia nell'editor che nella vista Proprietà.
- Salvare il file JSP e chiudere Page Designer.
A questo punto, è possibile iniziare il Modulo 2: Ulteriori informazioni sull'applicazione portale.