Create Web App con Bootstrap

Una web application è un programma eseguito all’interno di un web server, generalmente il programma è contenuto in un file WAR ed installato in un Servlet Container come Tomcat, JBoss, etc. Le web application generalmente si compongono di un back-end e di un front-end. Il primo è responsabile della implementazione della logica applicativa, mentre il secondo dell’interazione con l’utente finale. Il modo più semplice di implementare il back-end è attraverso l’uso delle Servlet a meno che non si utilizzino framework applicativi come struts, spring o JSF (che comunque utilizzano servlet specifiche per il loro funzionamento). Il front-end, invece, si realizza utilizzando linguaggi e tecnologie interpretate dai browser client quali: HTML, CSS e Javascript.

Tralasciamo gli aspetti di dettaglio per concentrarci invece sul nostro obiettivo, ovvero realizzare da zero una web application in java che utilizza Bootstrap, che è un framework per lo sviluppo di interfacce Web, mutuato da Twitter, diventato ormai uno standard de facto per la realizzazione di interfacce responsive.

Nel seguito del post  mostriamo i passi necessari per la realizzazione dell’applicazione che è comunque scaricabile interamente in fondo al post.

Configurazione del progetto

Il primo passo è il set-up  dell’applicazione. Per farlo utilizziamo Maven, nella versione 3 o superiore, quindi apriamo una shell di comando e posizioniamoci nella cartella in cui vogliamo creare il progetto. Quindi utilizziamo la seguente istruzione, valorizzando opportunamente artifactId e groupId:

Ad esempio:

Quando Maven ha terminato il suo lavoro, aprire Eclipse, dove sarà stato precedentemente configurato Maven, ed importare il progetto (File -> Import -> Maven-> Existing Maven Project). Noterete immediatamente che Maven ha generato un progetto del tipo Dynamic Web Module ma con la tipica struttura di un progetto Maven (conforme al suo Standard Directory Layout). Prima di procedere apriamo il file web.xml collocato nella cartella src/main/webapp/WEB-INF che dovrebbe apparire così:

Secondo la direttiva DOCTYPE il progetto creato è un Dynamic Web Module versione 2.3 e se non volete perdere ore cercando di comprendere perché le vostre JSP non interpretano le espressioni EL vi consiglio vivamente di aggiornare la versione almeno alla 2.5. In alternativa dovrete inserire in tutte le vostre JSP la direttiva:

In questo post abbiamo preferito la prima soluzione quindi il nostro file web.xml è diventato:

Completiamo la procedura aggiornando anche la versione nel Project Facets. Se Eclipse ve lo impedisce potete disabilitare la facet Dynamic Web Module e quindi eseguire Maven->Update Project e Maven provvederà a abilitare la facet nella versione corretta.

Aggiornamento del POM

Siamo finalmente pronti per configurare il nostro progetto attraverso l’aggiornamento del file POM di Maven collocato nella root del nostro progetto. In sintesi si tratta di è un file XML che contiene tutte le informazioni di configurazione del nostro progetto ed in particolare le sue dipendenze ed i dettagli per la compilazione e l’impacchettamento dello stesso. Apriamo quindi il pom.xml ed aggiungiamo le due dipendenze necessarie nella sezione dependencies:

Queste aggiungeranno al nostro progetto le librerie di Tomcat (versione 7.0.70) e le JSTL (versione 1.2). Quest’ultima è una libreria di tag basata su JSP (JSTL sta per JSP Standard Tag Library) che offre funzionalità per il controllo del flusso, la formattazione di date e numeri, l’internazionalizzazione e diverse funzioni EL di utilità.

Tornando al nostro POM inseriamo i plugin maven-compiler-plugin e tomcat7-maven-plugin, il primo per la compilazione del nostro codice, il secondo per il deploy a caldo su Tomcat 7. Inseriamo quindi nella sezione plugins il seguente XML:

Si noti che il plugin tomcat7-maven-plugin necessita di una ulteriore configurazione di Tomcat e Maven. Innanzitutto aprite il file tomcat-users.xml nella directory conf di Tomcat 7 e configurate un utente per eseguire script nella sua consolle come mostrato di seguito:

Quindi aprite il file settings.xml di Maven, presente nella cartella .m2 (quella dove sono presenti tutte le dipendenze scaricate dal framework) e definite il vostro server di deploy Tomcat, inserendo le credenziali definite sopra. Notate che il server id tomcat7 è lo stesso definito nel plugin del POM.

 Creazione della logica applicativa

Siamo finalmente pronti per implementare la logica applicativa del nostro progetto. Poiché non utilizziamo un database procediamo creando un model Employee, una EmployeeList che contiene la lista di tutti i dipendenti noti ed un servizio di ricerca EmployeeService. Nel codice riportato sono tralasciati i dettagli implementativi che comunque possono essere ricavati dal progetto che può essere scaricato in fondo alla pagina.

Implementazione della Servlet

Nel nostro semplice esempio il servizio (di ricerca) è esposto al front-end JSP attraverso l’utilizzo della seguente Servlet.

Per poterla utilizzare dobbiamo configurarla nel descrittore della nostra applicazione. Apriamo quindi il web.xml ed inseriamo il seguente xml:

Creazione dell’interfaccia utente

La maschera che abbiamo implementato per il nostro progetto è una semplice maschera di ricerca con un campo di testo per l’inserimento del nome del dipendente richiesto. Per fornire un po’ di “stile” alla nostra maschera andiamo finalmente ad inserire Bootstrap al nostro progetto. Andiamo quindi sul sito http://getbootstrap.com/ e scarichiamo la versione Compiled and minified che è versione compatta del framework e quindi più leggera da scaricare una volta inclusa nelle nostre applicazioni.

Aprire lo zip scaricato e copiare le directory js, css e fonts nella cartella webapp del progetto. Se volete potete anche cancellare le versioni non minified dei file css e js.

Creiamo quindi il file list-employees.jsp in una nuova cartella jsp sotto la cartella webapp. In particolare nella jsp dovranno essere inseriti i riferimenti ai file di Bootstrap attraverso i tag link e script nell’header. Il file risultante sarà:

Infine apriamo il file index.jsp generato da Maven, cancelliamone  il contenuto ed inseriamo il seguente forward:
La struttura complessiva del progetto dovrebbe quindi essere quella mostrata in figura.

Struttura

Deploy dell’applicazione

per eseguire l’applicazione è necessario innanzitutto avviare tomcat. Potete farlo sia da riga di comando che inserendo il server su Eclipse. In quest’ultimo caso ricordate di selezionare l’opzione “Use Tomcat installation” nel panel “Server Locations” della maschera delle proprietà di tomcat, come mostrato in figura.

tomcat location

Eseguiamo quindi la compilazione ed il deploy dell’applicazione utilizzando Maven ed i due plugin configurati precedentemente. Anche in questo caso potete farlo da riga di comando o da Eclipse selezionando Run As->Maven build ed eseguendo i goal:

Se tutto è andato correttamente aprendo il browser ed inserendo l’url http://localhost:8080/employees dovrebbe comparire la maschera di ricerca in figura. Provatela inserendo John nel campo di testo e cliccando sul pulsante di ricerca.

Mashera di ricerca con bootstrap

Download del progetto

Im progetto completo è scaricabile per intero al link Progetto Employees.

2 Comments

Comments are closed.