Implementiamo Bootstrap in Java EE: Bootstrap è uno dei più famosi ed utilizzati framework CSS e Javascript, esso ci mette a disposizione gli strumenti per realizzare siti e applicazioni web. In questa lezione implementerò Bootstrap all’interno di un’applicazione Java EE. Il procedimento è comunque ripetibile in maniera analoga su un sito PHP.
- Implementare Bootstrap da CDN
- Implementare Bootstrap sul server
- Setup della pagina con Bootstrap
- Link utili
Vantaggi di Bootstrap
Bootstrap è stato rilasciato da Twitter nel 2011 come open source, la sua repository GitHub è stata una delle più apprezzate, tantissimi sviluppatori hanno contribuito alla crescita di questo strumento semplice e potente, arrivato oggi alla versione 4.
Uno dei vantaggi di cui non possiamo assolutamente fare a meno il responsive web design ovvero che il layout delle pagine si adatta dinamicamente in base al device dell’utente: tablet, PC, smartphone.
Bootstrap oltre a fornirci un insieme di classi CSS facilmente utilizzabili ci mette a disposizione snippet di codice che rappresentano vari oggetti nel D.O.M. come navbar, modal, carousel etc.
Nello screenshot qui in alto puoi vedere come è organizzata la documentazione, è davvero intuitiva e riuscirai ad utilizzare i componenti in modo molto veloce.
Sono presenti anche classi helper, strumenti per l’accessibilità e molto altro ma preferisco mostrarteli in azione attraverso le varie lezioni che pubblicherò qui su Space Coding. Ora passiamo all’azione!
Implementare Bootstrap da CDN
Innanzitutto se non sai cosa è una CDN te lo spiego subito, CDN ovvero Content Delivery Network è semplicemente una rete per la consegna di contenuti ovvero un insieme di server distribuiti che collaborano per la trasmissione rapida di contenuti.
Utilizzando questa metodologia possiamo implementare Bootstrap semplicemente aggiungendo all’interno delle nostre pagine JSP pochissimo codice. Di seguito la pagina index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<nav class="navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="#">
Navbar
</a>
</div>
</nav>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
Ho già aggiunto un componente ovvero la Navbar , puoi già notare che il nome delle classi CSS è molto semplice ed intuitivo, la documentazione inoltre fornisce tantissimi templates per ogni componente, li puoi copiare ed incollare e con qualche modifica riuscirai a progettare il tuo sito molto velocemente.
In pochissimi minuti abbiamo implementato Bootstrap nella nostra pagina JSP e abbiamo aggiunto un componente
Prima di passare al setup della pagina con i vari componenti vediamo come implementare Bootstrap sul nostro server
Implementare Bootstrap sul server
Per avere sul nostro server il framework dobbiamo scaricarlo dal sito ufficiale di Bootstrap : Download
Scarichiamo la versione compilata ready-to-use
Dopo il download e l’estrazione dall’archivio zip ci ritroveremo due cartelle css e js, le copiamo all’interno della cartella webapp del nostro Dynamic Web Project
Se Eclipse ti dà un errore copia una cartella alla volta.
Ora dobbiamo modificare il codice specificando che sono risorse interne
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<nav class="navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="#">
Navbar
</a>
</div>
</nav>
<h1>Hello, world!</h1>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
Ispezioniamo la pagina per assicurarci che non ci siano dipendenze mancanti e quindi possibili futuri bug nella nostra applicazione web
Non ci sono errori così possiamo procedere con la nostra pagina vera e propria nella sua prima versione
Setup della pagina con Bootstrap
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>To Do app</title>
<link href="css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<nav class="navbar bg-light">
<div class="container-fluid">
<a class="navbar-brand">ToDo UP :-) </a>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search Tasks" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav>
<div class="container-lg">
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">Nome Progetto</label>
<input type="text" class="form-control" id="exampleFormControlInput1" placeholder="Scrivere articolo Blog">
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Primo Task
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
<label class="form-check-label" for="flexCheckChecked">
Secondo Task
</label>
</div>
</div>
<div class="d-grid gap-2">
<button class="btn btn-primary" type="button">Salva</button>
<button class="btn btn-danger" type="button">Reset</button>
</div>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
