Tips & Tricks: come gestire il dettaglio con Bootstrap

by Diego Pierangeli on 31 gennaio 2017

Da quando è stato rilasciato il tema Bootstrap molte delle domande che mi sono state rivolte riguardano la gestione del dettaglio dei pannelli, in particolare su come disegnare i campi all’interno dell’IDE in modo da ottenere un layout finale il più fedele possibile a quello desiderato.

Anche sul forum ci sono stati alcuni thread molto interessanti, tra cui uno in particolare che ha dato origine ad una call con gli operatori di Pro Gamma lo scorso 18 gennaio. Durante questa call uno degli aspetti più interessanti da trattare è stato l’algoritmo con cui Instant Developer suddivide i campi a video nelle 12 colonne di Bootstrap. In seguito a quella call abbiamo deciso di scrivere un articolo per spiegare a tutti le regole usate dall’IDE per la suddivisione e come sfruttarle al meglio.

Chi non ha ancora avuto modo di affrontare questo framework di rendering deve sapere che gli oggetti mostrati all’utente vengono disposti in una griglia a 12 colonne. Ogni campo può occupare una sola cella oppure espandersi orizzontalmente occupando le celle di fianco. L’altezza della riga è data dall’altezza del suo contenuto. Ma come viene fatta la suddivisione in rige e colonne da parte di Instant Developer?

Vediamolo insieme cominciando con un layout semplice:

Per prima cosa il framework divide la videata in bande orizzontali, facendo in modo di non mettere nessun campo a cavallo di due righe. Ognuna di esse viene poi divisa in bande verticali, usando lo stesso criterio. Il procedimento prosegue ricorsivamente per ogni cella così ottenuta, suddividendola ulteriormente in righe e colonne fino a che non si ottiene una cella per ogni campo.

Il layout qui sopra è il più semplice possibile e il risultato finale è rappresentato da una banda orizzontale per ogni campo, ognuna con un’unica banda verticale larga 12 colonne. Così:

Naturalmente le videate hanno quasi sempre layout più complessi, ma la logica dell’algoritmo rimane la stessa. Prendiamo ad esempio il layout seguente:

In questo caso la prima banda orizzontale, evidenziata nell’immagine, viene suddivisa verticalmente in due: a destra il campo Photo e a sinistra tutti gli altri campi. Il procedimento continua dividendo la parte sinistra in 4 bande orizzontali, le prime 3 delle quali vengono divise verticalmente in due mentre la terza non ha più bisogno di essere divisa dato che contiene un solo campo.

Ma quanto sono larghi i campi? Come fare a controllarne la dimensione a design time?

La larghezza minima di una banda verticale è sempre 1/12 della larghezza del pannello, questo perché 12 è il numero di colonne gestite da Bootstrap. Ogni banda verticale occupa da 1 a 12 colonne in proporzione al layout di design time.

Quando si lavora con Bootstrap è importante poter decidere quante colonne occupa ogni banda verticale. L’ultimo passaggio che resta da chiarire è come fare ad avere questo controllo tramite l’IDE di Instant Developer. Per poter rispondere alla domanda Quante colonne occuperà il mio campo? è sufficiente sapere quanto è larga una colonna (cioè 1/12 della videata).

Guardate la tabella qui sotto. Basta impostare la videata ad una delle larghezze specificate nella prima colonna per sapere quanto deve essere largo un campo a seconda del numero di colonne che deve occupare.

Il pannello mostrato in precedenza è largo 1032 px per cui il campo Photo è stato fatto largo 344, così come i campi EmployeeId e Title. In questo modo si è ottenuto un layout in cui i campi occupano 4 colonne ciascuno. Usando questo metodo e decidendo in anticipo il layout Bootstrap che si vuole ottenere si può riuscire in maniera più facile ad allineare quello che si vede nel designer dell’IDE con il risultato a run-time.

Da parte nostra, posso anticipare che stiamo già pensando a come aiutare lo sviluppatore in questo lavoro di suddivisione, potreste vedere qualcosa già dalla prossima versione.

Spero che questo articolo vi sia stato utile, quali altri approfondimenti vi interesserebbero riguardo a Bootstrap?

Leave a Comment

Previous post:

Next post: