Esercizio 1.5: Aggiunta di portlet che ricercano elementi del sito asta e forniscono dettagli sugli elementi
Prima di iniziare, è necessario completare l'Esercizio 1.4: Creazione di pagine per la creazione e l'aggiornamento delle informazioni utente.
In questo esercizio verranno creati nuovi portlet che forniranno la funzionalità cooperativa, utilizzando il meccanismo clic-per-azione per inviare dati da un portlet di origine a uno di destinazione. Il portlet di origine (ListingSearch) utilizza un bean di sessione per accedere ai dati degli elementi asta. Dopo aver individuato specifici elementi con il portlet ListingSearch, il portlet di destinazione ListingDetail visualizza informazioni dettagliate per gli elementi individuati durante la ricerca. In ciascun caso, occorre creare innanzitutto il portlet.
Creazione del portlet ListingSearch
Per creare il portlet ListingSearch, completare la seguente procedura:
- In Esplora progetti, espandere la cartella Progetto Web dinamico e individuare la cartella del progetto AuctionPortlet. Fare clic con il tasto destro del mouse sulla cartella del progetto e selezionare Nuovo > Portlet.
- Nella pagina iniziale della procedura guidata Nuovo portlet, modificare Prefisso nome predefinito in ListingSearch.
- Selezionare il pulsante di scelta Portlet Faces.
- Fare clic su Avanti.
- Selezionare AuctionPortlet application dall'elenco a discesa Nome applicazione.
- Immettere Listing Search nel campo Titolo portlet:.
- Fare clic su Fine.
Nel riquadro di modifica viene visualizzato il file ListingSearchView.jsp.
Aggiunta di una tabella dati alla pagina del portlet ListingSearch
Con il file ListingSearchView.jsp aperto in Page Designer, completare la procedura riportata di seguito per aggiungere dati di bean di sessione come origine dati per la pagina ListingSearch:
- Eliminare il testo predefinito Place content here .
- Trascinare l'oggetto Bean di sessione EJB dal cassetto Dati
dalla tavolozza al file.
- Quando la procedura guidata Bean di sessione viene visualizzata, fare clic sul pulsante Nuovo riferimento EJB.
- Espandere le cartelle AuctionPortletEAR e AuctionEJB50 e selezionare ListingFacade per creare il riferimento EJB. Fare clic su Fine.
- Fare clic su Avanti nella procedura Bean di sessione.
- Selezionare l'interfaccia findByTitle(String title), che verrà utilizzata per il campo di input nella pagina del portlet e fare clic su Avanti.
- Il campo title è selezionato. Fare clic su Opzioni.
- Immettere Find nel campo Etichetta. Fare clic su OK.
- Fare clic su Avanti per accedere alla pagina Modulo risultati della procedura guidata. In questa pagina, verrà definita la tabella dati che recupererà e visualizzerà i dati dal database.
- Fare clic su Nessuno per deselezionare tutte le colonne, in modo che sia possibile selezionare, organizzare e configurare individualmente le colonne appropriate per la tabella dati da utilizzare nella pagina del portlet. Successivamente, selezionare le caselle di controllo per le seguenti colonne:
- Utilizzando i pulsanti freccia su e giù, spostare le colonne di dati selezionate nell'ordine riportato nel precedente passaggio.
- Selezionare e modificare il valore Etichetta per la colonna itemid in Item ID.
- Fare clic su Fine per generare l'interfaccia utente predefinita per la pagina
UserAdminView.jsp. L'interfaccia utente sarà simile alla seguente:

- Salvare il file.
Aggiunta di codice per pagine Java alla pagina UserAdmin
Verrà aggiunto codice per pagine Java per poter effettuare le seguenti azioni:
Memorizzare il parametro title nell'ambito della sessione, in modo che possa essere riutilizzato per qualunque aggiornamento futuro del contenuto del portlet.
Inizializzare il parametro da visualizzare nel campo di input Title con quello memorizzato nell'ambito della sessione.
Inizializzare i dati dei risultati utilizzando il parametro title archiviato nell'ambito della sessione.
Completando la procedura riportata di seguito, è possibile aggiungere il codice e la logica di riferimento EJB per associare richiamo e risultati all'interfaccia utente:
- Selezionare Modifica codice pagina dal menu a comparsa in Page Designer.
- Immettere il seguente codice in grassetto in doListingFacadeLocalFindByTitleAction():
public String doListingFacadeLocalFindByTitleAction() {
String title = getListingFacadeLocalFindByTitleParamBean().getTitle();
getSessionScope().put("title", title);
try {
listingFacadeLocalFindByTitleResultBean =
getListingFacadeLocal().findByTitle(title);
} catch (Exception e) {
logException(e);
}
return null;
}
- Immettere il seguente codice in grassetto in getListingFacadeLocalFindByTitleParamBean():
public ListingFacadeLocalFindByTitleParamBean
getListingFacadeLocalFindByTitleParamBean() {
if (listingFacadeLocalFindByTitleParamBean == null) {
listingFacadeLocalFindByTitleParamBean =
new ListingFacadeLocalFindByTitleParamBean();
String title = (String)getSessionScope().get("title");
listingFacadeLocalFindByTitleParamBean.setTitle(title);
}
return listingFacadeLocalFindByTitleParamBean;
}
- Immettere il seguente codice in grassetto in getListingFacadeLocalFindByTitleResultBean():
public ItemData[] getListingFacadeLocalFindByTitleResultBean() {
if (listingFacadeLocalFindByTitleResultBean == null) {
String title = (String)getSessionScope().get("title");
if (title != null) {
try {
listingFacadeLocalFindByTitleResultBean =
getListingFacadeLocal().findByTitle(title);
} catch (Exception e) {
logException(e);
}
}
}
return listingFacadeLocalFindByTitleResultBean;
}
- Salvare ListingSearchView.java.
Creazione del portlet ListingDetail
Per creare il portlet ListingDetail, completare la seguente procedura:
- In Esplora progetti, espandere la cartella Progetto Web dinamico e individuare la cartella del progetto AuctionPortlet. Fare clic con il tasto destro del mouse sulla cartella del progetto e selezionare Nuovo > Portlet.
- Nella pagina iniziale della procedura guidata Nuovo portlet, modificare Prefisso nome predefinito in ListingDetail.
- Selezionare il pulsante di scelta Portlet Faces.
- Fare clic su Avanti.
- Selezionare AuctionPortlet application dall'elenco a discesa Nome applicazione.
- Immettere Listing Detail nel campo Titolo portlet:.
- Fare clic su Fine.
Nel riquadro di modifica viene visualizzato il file ListingDetailView.jsp.
Aggiunta di un modulo dati alla pagina del portlet ListingDetail
Con il file ListingDetailView.jsp aperto in Page Designer, completare la procedura riportata di seguito per aggiungere dati di bean di sessione come origine dati per la pagina ListingDetail:
- Eliminare il testo predefinito Place content here .
- Trascinare l'oggetto Bean di sessione EJB dal cassetto Dati
dalla tavolozza al file.
- Quando la procedura guidata Bean di sessione viene visualizzata, selezionare ejb/ListingFacade e fare clic su Avanti.
- Selezionare l'interfaccia findById(Integer itemid), che verrà utilizzata per il campo di input nella pagina del portlet.
- Fare clic su Avanti.
- Il campo itemid è selezionato. Selezionare e modificare il valore Etichetta per il campo itemid in Item ID:.
- Fare clic su Opzioni.
- Immettere Find nel campo Etichetta. Fare clic su OK.
- Fare clic su Avanti per accedere alla pagina Modulo risultati della procedura guidata. In questa pagina verrà definito il modulo dei dati che recupererà e visualizzerà i dati dal database.
- Fare clic su Nessuno per deselezionare tutti i campi, in modo che sia possibile selezionare, organizzare e configurare individualmente i campi appropriati per la tabella dati da utilizzare nella pagina del portlet. Successivamente, selezionare le caselle di controllo per i seguenti campi:
- Utilizzando i pulsanti freccia su e giù, spostare i campi di dati selezionati nell'ordine riportato nel precedente passaggio.
- Fare clic su Fine per generare l'interfaccia per la pagina
ListingDetailView.jsp. L'interfaccia utente sarà simile alla seguente:

- Salvare il file.
Aggiunta di codice per pagine Java alla pagina UserAdmin
Verrà aggiunto codice per pagine Java per poter effettuare le seguenti azioni:
Memorizzare il parametro itemid nell'ambito della sessione, in modo che possa essere riutilizzato per qualunque aggiornamento futuro del contenuto del portlet.
Inizializzare il parametro da visualizzare nel campo di input Item ID con quello memorizzato nell'ambito della sessione.
Inizializzare i dati del risultati utilizzando il parametro itemid archiviato nell'ambito della sessione.
Completando la procedura riportata di seguito, è possibile aggiungere il codice e la logica di riferimento EJB per associare richiamo e risultati all'interfaccia utente:
- Selezionare Modifica codice pagina dal menu a comparsa in Page Designer.
- Immettere il seguente codice in grassetto in doListingFacadeLocalFindByIdAction():
public String doListingFacadeLocalFindByIdAction() {
Integer itemid = getListingFacadeLocalFindByIdParamBean().getItemid();
getSessionScope().put("itemid", itemid);
try {
listingFacadeLocalFindByIdResultBean =
getListingFacadeLocal().findById(itemid);
} catch (Exception e) {
logException(e);
}
return null;
}
- Immettere il seguente codice in grassetto in getListingFacadeLocalFindByIdParamBean():
public ListingFacadeLocalFindByIdParamBean
getListingFacadeLocalFindByIdParamBean() {
if (listingFacadeLocalFindByIdParamBean == null) {
listingFacadeLocalFindByIdParamBean =
new ListingFacadeLocalFindByIdParamBean();
Integer itemid = (Integer)getSessionScope().get("itemid");
listingFacadeLocalFindByIdParamBean.setItemid(itemid);
}
return listingFacadeLocalFindByIdParamBean;
}
- Immettere il seguente codice in grassetto in getListingFacadeLocalFindByIdResultBean():
public ItemData getListingFacadeLocalFindByIdResultBean() {
if (listingFacadeLocalFindByIdResultBean == null) {
Integer itemid = (Integer)getSessionScope().get("itemid");
if (itemid != null) {
try {
listingFacadeLocalFindByIdResultBean =
getListingFacadeLocal().findById(itemid);
} catch (Exception e) {
logException(e);
}
}
}
return listingFacadeLocalFindByIdResultBean;
}
- Salvare ListingDetailView.java.
Aggiunta di collegamenti cooperativi al portlet ListingSearch
Il termine portlet cooperativi si riferisce alla capacità dei portlet in una pagina di interagire l'uno con l'altro attraverso la condivisione di informazioni. Uno o più portlet cooperativi in una pagina del portale possono rispondere automaticamente alle modifiche da un portlet di origine attivato da un'azione o da un evento nel portlet di origine. I portlet che sono destinazioni dell'evento possono rispondere in modo che agli utenti non venga richiesto di eseguire modifiche o azioni ripetitive in altri portlet nella pagina. Il meccanismo utilizzato per implementare il comportamento cooperativo viene chiamato evento clic-per-azione.
Gli eventi clic-per-azione vengono lanciati da un'icona nel portlet di origine. L'icona presenta un menu a comparsa contenente l'elenco delle destinazioni per l'azione. Dopo che l'utente ha selezionato una destinazione specifica, il broker property trasmette dati data alla destinazione nel modulo dell'azione del portlet corrispondente. Utilizzando il metodo di trasmissione clic-per-azione, gli utenti possono trasferire dati con un semplice clic da un portlet di origine a uno o più portlet di destinazione, facendo in modo che la destinazione risponda all'azione e visualizzi una nuova vista con i risultati.
Completare la procedura riportata di seguito per impostare un comportamento cooperativo tra i portlet ListingSearch e ListingDetail:
- Aprire ListingSearchView.jsp in Page Designer. In Esplora progetti, espandere le cartelle AuctionPortlet e WebContent e fare doppio clic sul file.
- Trascinare un oggetto Proprietà di output clic-per-azione dal cassetto della tavolozza Portlet e rilasciarlo nel campo di output nella tabella dati {itemid}.
Nota: assicurarsi di rilasciare l'oggetto Proprietà di output clic-per-azione nel campo di output, né prima né dopo. Il campo di output dovrebbe essere evidenziato in una casella rettangolare e dovrebbe essere simile a quella riportata di seguito:
.
È possibile che sia necessario spostare la finestra di dialogo per visualizzare la selezione del campo di output.
- Nella finestra di dialogo Inserimento proprietà di output clic-su-azione, fornire i seguenti valori:
- Immettere itemid nel campo Tipo di dati.
- Selezionare ListingSearch portlet dall'elenco a discesaPortlet di origine e fare clic su OK.
Salvare il file.
- Per verificare che sia stato aggiunto il codice Clic-per-azione appropriato, aprire la vista Origine e assicurarsi che nel file sia incluso il seguente codice:
<h:outputText id="text3"
value="#{varlistingFacadeLocalFindByTitleResultBean.itemid}"
styleClass="outputText">
<f:convertNumber />
</h:outputText>
<c2a:encodeProperty type="itemid"
namespace="http://auctionportlet" name="itemid"
value="#{varlistingFacadeLocalFindByTitleResultBean.itemid}">
</c2a:encodeProperty>
Notare l'attributo value evidenziato. Se Proprietà output non è stato aggiunto alla pagina correttamente, questo attributo non sarà presente.
Questa procedura consente di identificare ListingSearch come portlet di origine. Successivamente, occorre abilitare ListingDetail come portlet di destinazione:
- Espandere AuctionPortlet > Descrittore di distribuzione portlet in Esplora progetti. Selezionare Cooperativa > Abilita destinazione dal menu a comparsa del portlet ListingDetail.
- Nella finestra di dialogo Abilitazione portlet cooperativa, immettere itemid nel campo Tipo di dati.
- Fare clic sul pulsante Sfoglia accanto al campo Azione e selezionare /ListingDetailView.jsp > form1 > button1. Fare clic su OK.
- Nella finestra di dialogo Abilitazione portlet cooperativa, immettere Show Detail nel campo Etichetta. Fare clic su OK.
Per verificare che l'origine Clic-per-azione venga identificata correttamente, ritornare alla cartella Descrittore di distribuzione portlet in Esplora progetti. Le icone che rappresentano un portlet di origine (ListingSearch) e un portlet di destinazione (ListingDetails) dovrebbero essere simili a quelle riportate di seguito:

Verifica della funzionalità cooperativa nei portlet Listing
Per verificare che i portlet ListingSearch e ListingDetail funzionino come previsto,
è necessario eseguirli nell'ambiente di test.
Per eseguire i portlet, effettuare le seguenti operazioni:
- Selezionare il progetto AuctionPortlet in Esplora progetti e selezionare Esegui > Esegui su server dal menu a comparsa.
- Dal momento che WebSphere Portal v5.1 Test Environment è stato già definito, selezionarlo e fare clic su Fine nella procedura guidata Selezione server.
- I portlet verranno visualizzati nel browser. Qui è possibile vedere i campi di input,
i pulsanti e il layout che l'utente visualizza su un sito portale.
- Nel portlet ListingSearch, immettere il carattere jolly di ricerca % per visualizzare tutti gli elementi e fare clic sul pulsante Trova. La tabella sotto il pulsante di inoltro visualizzerà gli elementi dell'asta che corrispondono alla stringa di ricerca.
- Fare clic sull'azione Clic-per-azione
nella colonna dell'ID elemento per inviare l'ID elemento al portlet ListingDetail. Il portlet ListingDetail visualizza informazioni dettagliate sull'elemento individuato dalla ricerca.
Prima di passare all'esercizio successivo, è consigliabile arrestare il server dell'ambiente di verifica. Per arrestare questo server, è sufficiente selezionarlo e nella vista Server e fare clic sul pulsante Arresta il server sulla barra degli strumenti
.
A questo punto, è possibile iniziare l'Esercizio 2.1: Creazione di un nuovo portale per visualizzare l'applicazione portlet.