Esercizio 2.2: Personalizzazione sito portale

Prima di iniziare, è necessario completare l'Esercizio 2.1: 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:

  1. Selezionare File > Nuovo > Tema dalla barra dei menu.
  2. Immettere Auction nel campo Titolo.
  3. 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.
  4. Fare clic su Avanti.
  5. 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.

  6. Fare clic su Fine.
  7. Espandere Elementi > Temi nella vista Struttura e selezionare Auction.
  8. 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:
    File di configurazione del portale con un nuovo tema

  9. 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:

  1. Come prima cosa, occorre importare una nuova immagine di banner nel progetto:
    1. Dalla barra dei menu, selezionare File > Importa. Viene visualizzata la finestra di dialogo Importazione.
    2. In Selezione di un'origine di importazione, fare clic su File System.
    3. Fare clic su Avanti.
    4. Poiché i diversi prodotti Rational utilizzano percorsi di destinazione dell'installazione differenti, è necessario fare in modo che l'interfaccia utente del prodotto individui il plug-in che contiene la nuova immagine del banner. Utilizzare uno strumento di ricerca file per individuare la cartella del plug-in com.ibm.etools.portal.examples.application_6.0.0.1 nel percorso di installazione nel filesystem locale.
    5. Ritornare alla procedura guidata Importazione e fare clic su Sfoglia accanto al campo Dalla directory. Passare alla seguente directory:
      x:\com.ibm.etools.portal.examples.application_6.0.0.1\samples
      dove x: è il percorso che contiene il plug-in com.ibm.etools.portal.examples.application_6.0.0.1 sul computer in uso.
    6. Selezionare auction.gif come destinazione dell'importazione e fare clic su OK.
    7. Fare clic su Sfoglia accanto al campo Nella cartella e specificare AuctionPortal/PortalContent/themes/html/Auction.
    8. Fare clic su Fine.

      La procedura guidata importa il file nello spazio di lavoro.

  2. 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.

  3. Scorrere e selezionare l'icona Sfondo del banner nella vista Anteprima.
  4. Selezionare Modifica regola di stile [.wpsToolbarBannerBackground] dal menu a comparsa.
  5. Fare clic sulla proprietà Sfondo sulla sinistra della finestra di dialogo Impostazione proprietà stile.
  6. Immettere ../../auction.gif nel campo Immagine.
    Finestra di dialogo Impostazione proprietà stile
  7. Fare clic su OK.
  8. Salvare il file CSS e chiudere CSS Designer. La nuova immagine del banner viene applicata alla pagina aperta in Portal Designer.

    Nuovo banner

  9. Salvare e chiudere il file di configurazione del portale.

Utilizzando Page Designer, è possibile apportare a un tema diverse modifiche quali, ad esempio, il layout di una barra degli strumenti nell'area di intestazione. È 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.

A questo punto, è possibile iniziare l'Esercizio 2.3: Esecuzione dell'applicazione portale nell'ambiente di test di WebSphere Portal.

Feedback
(C) Copyright IBM Corporation 2000, 2005. Tutti i diritti riservati.