Visitatori: 5764
Questo tutorial mostra come realizzare un sistema di navigazione tra le pagine di una semplice applicazione Web composta da due pagine utilizzando NetBeans IDE 6.0 (l'articolo precedente, raggiungibile a questo link JSF e NETBEANS) spiega come e dove scaricare l'ide di sviluppo.
In breve, realizzeremo una web application contenente 2 pagine. Nella prima pagina collocheremo un pulsante che ci permette di raggiungere la seconda pagina che contiene unicamente un messaggio di benvenuto per l'utente. L'utilità di questo articolo è mostrare il concetto di "gestione del flusso di navigazione nelle web application" in netbeans che rappresenta un concetto fondamentale di questo IDE.
Per creare una nuova Web Application, dal menu fle, selezioniamo New Projet...Apparirà la seguente schermata:
A sinistra sono visualizzati gli step da seguire. Lo step 1 prevede la selezione del tipo di progetto. Scegliamo Web Application e clicchiamo su avanti (next).
lo step 2 prevede la scelta di un nome per il progetto (lasciamo WebApplication1), lasciamo inalterate le cartelle del progetto e selezioniamo come server "GlassFish V2", infine clicchiamo su avanti.
il terzo e anche ultimo step prevede la scelta del framework da utilizzare. Se avete letto l'articolo precedente conoscete già JSF. selezioniamo quindi "Visual Web JavaServer Face" e clicchiamo su avanti. Il nostro progetto è stato creato. Noterete che Netbeans crea in automatico la prima pagina della Web Application, denominata page1. Questa sarà la nostra prima pagina.
Per adesso salviamo la page1 senza fare modifiche e creaiamo la seconda pagina (che ci servirà in seguito). Dall'albero di Progetto (a sinistra) andiamo al nodo WebPage della nostra WebApllication1 e col tasto destro del mouse selezioniamo New > Visual JavaServer Face come mostra la figura seguente:
Netbeans ci propone come nome page2, lasciamolo inalterato e proseguiamo.
Ora torniamo alla page1 e apriamolo in modalità design (sono presenti tre tab "design" "JSP" e "JAVA" sotto il nome della pagina che abilitano le diverse viste per la pagina selezionata). A sinistra è visibile la "palette" ovvero la paletta dei componenti.
Da qui è possibile trascinare gli elementi che ci servono sulle nostre pagine web. Trasciniamo un "Button" sulla page1 e settiamo la sua proprietà "text" a "Vai alla pagina 2" come mostra la figura seguente. Le proprietà dei componenti sono esattamente sotto la palette a destra in basso nello schermo.
A questo punto andiamo nella page2 e trasciniamo quindi uno "static text" che corrisponde ad una label degli altri IDe come borland studio e Visual Studio (ovvero un'etichetta che in genere si associta a caselle di testo). Settiamo la propietà text a "Benvenuto nella pagina 2 del Sito!!!"
Fin ora abbiamo solo creato due semplici pagine che contengono l'una un pulsante, l'altra un messaggio di benvenuto. Adesso passiamo alla realizzazione del flusso di navigazione.
Netbeans consente di gestire il flusso di navigazione di una Web Application tramite uno strumento molto potente denominato "page navigation".
Andiamo nella page1 in modalità design e facendo click col tasto destro del mouse in un'area bianca della pagina, selezioniamo "page navigation". Verrà visualizzata la seguente schermata
Vengono visualizzate le due pagine schematizzate tramite due blocchi di cui uno, corrispondente alla page1, contiene il button che abbiamo creato.
Per realizzare la navigazione dalla page1 alla page2 trasciniamo il mouse dal bottone della page1 alla page2 in modo da stabilire un collegamento:
Netbeans da automaticamente un nome al collegamento (case1), rinominiamolo in "Page1toPage2" cliccando col tasto destro del mouse sulla linea di collegamento e selezionado "rename".
A questo punto se torniamo alla page1 in modalità design e facciamo doppio click sul pulsante vediamo che è stato creato il seguente evnto:
Cioè la pressione del pulsante richiama proprio la navigazione che abbiamo creato in modo visuale ovevro "Page1toPage2".
Adesso mandiamo in esecuzione l'applicazione tramite il pulsante run 
. In automatico Netbeans avvierà il browser:
Premiamo il pulsante e vediamo che succede:
Nel prossimo articolo vedremo come realizzare un'applicazione che consente all'utente di scegliere quale pagina del sito visualizzare tramite una casella di scelta.
|