GWT vs CSS3

GWT versus CSS3
Luca Tozzi
l.tozzi@hr2o.it
it.linkedin.com/in/ltozzi/

Tozzi Luca
Software Engineer
Consulente/sviluppatore a livello Enterprise, fermo credente dell’importanza
d’innovare i processi di sviluppo nelle aziende.
Amante delle tecnologie Google, con particolare attenzione a :
- GWT
- Android
- AngularJS
(in ordine cronologico di innamoramento!!)
Da un anno alle prese di un'avventura imprenditoriale,
alla ricerca di dimostrare il suddetto assunto.
Fermo partecipante a tutti gli eventi del GDG Firenze
Presentazione
personale

Presentazione
aziendale
è una start-up nata dalla pluriennale esperienza nel settore HR
(anche detto Risorse Umane)
che si sposa con la continua ricerca delle migliori tecnologie disponibili nel
settore informatico per semplificarne l’utilizzo.
Esempio : gestione Ticketing (Timbrature) tramite SmartPhone/Tablet
Mai sazi di ricerca e sviluppo ..
mescoliamo Cloud e Mobile ..
HTML5 e nativo...
alla ricerca di software equilibrato e SEMPLICE...
... meglio se anche economico!!
Rimettiamo la nostra ricerca ai nostri clienti non solo in ambito sviluppo
software, ma anche consulenziale.

GWT versus CSS3
La prima impressione che spesso si ha aprocciando al GWT base è che i Widget abbiano
bisogno di essere graficamente aggiornati.
L’istinto di mettere mano ai fogli di stile forniti è forte.
Questo spesso è contrario all’approccio dello sviluppatore GWT che tipicamente ha scelto
il compilatore GWT in quanto lo astrae da una serie di problematiche : esempio cross-browser.
Purtroppo però il successo di un buon applicativo passa anche attraverso alla sua
semplicità di utilizzo e quindi attraverso la sua User Interface.
Possiamo e sino a che punto “svecchiare” i ns. widget grazie ai CSS?
Presentazione
talk

CSS (definizione da Wikipedia )
L'introduzione del CSS si è resa necessaria per separare i contenuti dalla formattazione e permettere una programmazione
più chiara e facile da utilizzare, sia per gli autori delle pagine HTML che per gli utenti, garantendo contemporaneamente
anche il riuso di codice ed una sua più facile manutenibilità.
CSS3
Ossia la specifica 3 dello standard continua a perseguire gli scopi del css rendendolo
ancora più veloce e più efficiente nel website designing.
Dando la possibilità di generare semplici UI con minor conoscenza ed allo stesso tempo
possibilità di migliorare le interfaccie più elaborate.
CSS3

Novità principale
la MODULARIZZAZIONE :
- sia a livello di oggetti
- sia a livello di standard
QUINDI NON ASPETTATEVI
un unica specifica W3C
PERCHE’ NON ESISTE
p.s. Css4 sarà il passaggio al
4°livello di ogni singolo modulo.
CSS3
Module Specification title Status, date
css3-background CSS Backgrounds and Borders Module Level 3 Candidate Recommendation, September 2014
css3-box CSS basic box model Working Draft, August 2007
css-cascade-3 CSS Cascading and Inheritance Level 3 Candidate Recommendation, October 2013
css3-color CSS Color Module Level 3 Recommendation, June 2011
css3-content CSS3 Generated and Replaced Content Module Working Draft, May 2003
css-fonts-3 CSS Fonts Module Level 3 Candidate Recommendation, October 2013
css3-gcpm CSS Generated Content for Paged Media Module Working Draft, May 2014
css3-layout CSS Template Layout Module Working Draft, November 2011
css3-marquee CSS Marquee Module Level 3 Candidate Recommendation, December 2008
css3-mediaqueries Media Queries Recommendation, June 2012
css3-page CSS Paged Media Module Level 3 Working Draft, March 2013
css3-selectors Selectors Level 3 Recommendation, September 2011
css3-ui CSS Basic User Interface Module Level 3 (CSS3 UI) Working Draft, January 2012

Novità CSS3
Colore (RGBa)
da #ffffff a rgba(255,255,255,1);
@font-face
la possibilità di usare caratteri tipografici non presenti sul computer dell’utente
@font-face {
font-family: Roboto Bold Condensed;
src: url(fonts/Roboto_Condensed/RobotoCondensed-Bold.ttf);
}
font-family:Roboto Bold Condensed;
Ombreggiatura sul testo
text-shadow: 2px 2px 2px #ddccb5;
Bordi e sfondi (Border-radius, Box-shadow)
/* border-radius */ border-radius: 20px;
/* box-shadow */ box-shadow: rgba(0,0,0,0.8) 0 0 10px;

CSS3
Media Queries
La possibilità di servire fogli di stile ad hoc in base alle caratteristiche dei dispositivi RESPONSIVE!!!
@media screen and (min-width: 600px) and (max-width: 900px) {
background: #FFF;
}
Transizioni, trasformazioni, animazioni
div {
-webkit-transition-property: width; /* Safari */
transition-property: width;
}
Transform: (scale, rotate, skew)
div {
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);
}
Funzioni che aumentano performance applicative
e riescono spesso a sostituire alla grande jQuery per animazioni, rotazioni, ecc.

Preffissi Vendor CSS3
Prefissi Vendor
● -moz- : Firefox
● -webkit- : Webkit browsers such as Safari and Chrome
● -o- : Opera
● -ms- : Internet Explorer

I Pre-processori, estendono il linguaggio CSS
aggiungono features che permettano di generare un CSS pulito..
tramite un linguaggio di programmazione al posto di regole statiche.
I pre-processori più famosi sono Less e Sass.
Less nasce ispirandosi a Sass.
Less fornisce i seguenti meccanismi :
- variabili,
- operatori
- funzioni
- cicli
- mixins
Twitter Bootstrap è costruito in Less!!
Pre-Processori CSS3

Tra i pre-processori uno è sviluppato da Google in linguaggio java.
Closure Stylesheet
E’ disponibile il jar closure-stylesheets.jar per utilizzare il compilatore a riga di comando :
- legge GSS e compila CSS
- ottima compatibilità con il CSS3
- aggiunge variabili.. funzioni... condizioni e mixing
- supporto anche la minification, il Linting, RTL flipping ed il renaming
Nato nel 2011 internamente a Google Closure Stylesheets sono normalmente chiamati "Google Stylesheets"
da cui l’acronimo "GSS,"
I seguenti esempi sono stati generati tramite l’opzione --pretty-print
Closure Style Sheet

Le variabili possono essere definiti tramite l’istruzione @def seguito dal nome variabile e poi il valore.
Le variabili possono essere definite anche in termini di altre variabili.
@def BG_COLOR rgb(235, 239, 249);
@def DIALOG_BORDER_COLOR rgb(107, 144, 218);
@def DIALOG_BG_COLOR BG_COLOR;
body {
background-color: BG_COLOR;
}
.dialog {
background-color: DIALOG_BG_COLOR;
border: 1px solid DIALOG_BORDER_COLOR;
}
Variabili

Una volta compilato in ---pretty-print mode diventa :
body {
background-color: #ebeff9;
}
.dialog {
background-color: #ebeff9;
border: 1px solid #6b90da;
}
Variabili

Closure Stylesheets fornisce le seguenti funzioni aritmetiche :
● add()
● sub()
● mult()
● divide()
● min()
● max()
Attenzione :
- i parametri possono essere puri numerici o unità di dimensione in formato CSS (Es: 180px)
- solo moltiplicazione e divisione possono avere le unità CSS come primo parametro
- il numero dei parametri è libero
- i parametri in forma di unità di misura Css devono essere tutti nella stessa forma
(Esempio ok per add(3px, 5px) ma errore in caso di add(3px, 5ex)
Funzioni

SOURCE
@def LEFT_HAND_NAV_WIDTH 180px;
@def LEFT_HAND_NAV_PADDING 3px;
.left_hand_nav {
position: absolute;
width: LEFT_HAND_NAV_WIDTH;
padding: LEFT_HAND_NAV_PADDING;
}
.content {
position: absolute;
margin-left: add(LEFT_HAND_NAV_PADDING, /* padding left */
LEFT_HAND_NAV_WIDTH,
LEFT_HAND_NAV_PADDING); /* padding right */
}
Funzioni

RISULTATO
.left_hand_nav {
position: absolute;
width: 180px;
padding: 3px;
}
.content {
position: absolute;
margin-left: 186px;
}
Funzioni

Inoltre vi sono una serie di funzioni fisse inerenti l’elaborazione dei colori
blendColorsHsb(startColor, endColor)
blendColorsRgb(startColor, endColor)
makeMutedColor(backgroundColor, foregroundColor [, saturationLoss])
addHsbToCssColor(baseColor, hueToAdd, saturationToAdd, brightnessToAdd)
makeContrastingColor(color, similarityIndex)
adjustBrightness(color, brightness)
Oltre alla funzione selectFrom() che funziona come una condizione
/* Implies MYDEF = FOO ? BAR : BAZ; */
@def MYDEF selectFrom(FOO, BAR, BAZ);
con risultato
@def FOO true; ha come effetto @def MYDEF = BAR
Funzioni Fisse

Funzioni Personalizzate
E’ possibile personalizzare delle funzioni GSS implementando l’interfaccia GssFunctionMapProvider e passare la classe
generata al compilatore tramite l’opzione “--gss-function-map-provider com.example.class”
public interface GssFunctionMapProvider {
/**
* Gets the map of custom GSS functions for the given class.
*
* @param <F> the interface implemented by the GSS functions
* @param gssFunctionClass the class of {@code F}
* @return a map from each custom function name to its implementation
*/
<F> Map<String, F> get(Class<F> gssFunctionClass);
}
Oppure utilizzare la classe DefaultGssFunctionMapProvider in modo di fornire le funzioni personalizzate
in aggiunta a quelle standard.

Il compilatore permette di utilizzare delle condizioni tramite l’uso di @if, @else ed @elseif.
@if (BROWSER_IE) {
@if (BROWSER_IE6) {
@def GOOG_INLINE_BLOCK_DISPLAY inline;
} @elseif (BROWSER_IE7) {
@def GOOG_INLINE_BLOCK_DISPLAY inline;
} @else {
@def GOOG_INLINE_BLOCK_DISPLAY inline-block;
}
} @elseif (BROWSER_FF2) {
@def GOOG_INLINE_BLOCK_DISPLAY -moz-inline-box;
} @else {
@def GOOG_INLINE_BLOCK_DISPLAY -inline-block;
}
.goog-inline-block {
position: relative;
display: GOOG_INLINE_BLOCK_DISPLAY;
}
I valori condizionali inerenti al browser dovranno essere passati tramite il flag --define (Es. --define BROWSER_FF2)
Condizioni

Tramite la funzione @mixin è possibile utilizzare una lista di valori definiti tramite la funzione @defmixin.
@defmixin size(WIDTH, HEIGHT) {
width: WIDTH;
height: HEIGHT;
}
.logo {
@mixin size(150px, 55px);
background-image: url('http://www.google.com/images/logo_sm.gif');
}
RISULTATO
.logo {
width: 150px;
height: 55px;
background-image: url('http://www.google.com/images/logo_sm.gif');
}
Gli argomenti in @defmixin devono essere in formato MAIUSCOLO
Variabili definire con @def possono essere utilizzati come valori
Mixins

Diventa interessante per astrarsi dalle formule cross-browser
@defmixin gradient(POS, HSL1, HSL2, HSL3, COLOR, FALLBACK_COLOR) {
background-color: FALLBACK_COLOR; /* fallback color if gradients are not supported */
background-image: -webkit-linear-gradient(POS, hsl(HSL1, HSL2, HSL3), COLOR); /* Chrome 10+,Safari 5.1+ */
background-image: -moz-linear-gradient(POS, hsl(HSL1, HSL2, HSL3), COLOR); /* FF3.6+ */
background-image: -ms-linear-gradient(POS, hsl(HSL1, HSL2, HSL3), COLOR); /* IE10 */
background-image: -o-linear-gradient(POS, hsl(HSL1, HSL2, HSL3), COLOR); /* Opera 11.10+ */
}
.header {
@mixin gradient(top, 0%, 50%, 70%, #cc0000, #f07575);
}
RISULTATO
.header {
background-color: #f07575;
background-image: -webkit-linear-gradient(top,hsl(0%,50%,70%) ,#cc0000);
background-image: -moz-linear-gradient(top,hsl(0%,50%,70%) ,#cc0000);
background-image: -ms-linear-gradient(top,hsl(0%,50%,70%) ,#cc0000);
background-image: -o-linear-gradient(top,hsl(0%,50%,70%) ,#cc0000);
}
Mixins - per specifiche
Browser

Closure-Stylesheet supporta i comandi left-to-right, come i right-to-left.
L’annotazione @noflip permette alla proprietà di mantenere la forma originale
.logo {
margin-left: 10px;
}
.shortcut_accelerator {
/* Keyboard shortcuts are untranslated; always left-to-right. */
/* @noflip */ direction: ltr;
border-right: 2px solid #ccc;
padding: 0 2px 0 4px;
}
Comando : java -jar closure-stylesheets.jar --pretty-print --output-orientation RTL rtl-example.gss,
RISULTATO
.logo {
margin-right: 10px;
}
.shortcut_accelerator {
direction: ltr;
border-left: 2px solid #ccc;
padding: 0 4px 0 2px;
}
RTL Flipping

Closure-Stylesheets in fase di compilazione controlla :
- errori di sintassi
- funzioni inesistenti
- doppie dichiarazioni di stile
.logo {
width: 150px;
height: 55px;
background-image: urel('http://www.google.com/images/logo_sm.gif');
border-color: #DCDCDC;
border-color: rgba(0, 0, 0, 0.1);
}
In caso di errore di parsing stampa l’errore e ritorna un exit code 1
Unknown function "urel" in linting-example.gss at line 4 column 21:
background-image: urel('http://www.google.com/images/logo_sm.gif');
^
Detected multiple identical, non-alternate declarations in the same ruleset.
If this is intentional please use the /* @alternate */ annotation.
border-color:[rgba(0,0,0,0.1)] in linting-example.gss at line 7 column 1:
}
^
2 error(s)
Linting

Integrazione Closure-Stylesheet con GWT
=
GSS
Closure-StyleSheet e GWT

Perchè utilizzarli?
- Closure StyleSheet è un precompilatore
- E’ più facile mantenere il CSS
- perché GWT necessità di un supporto CSS3 migliore!!
Closure-StyleSheet e GWT

Aggiunta dei CSS in GWT!!
● Using a <link> tag in the host HTML page.
DEPRECATED
● Using the <stylesheet> element in the module XML file.
DEPRECATED
● .getElement().getStyle().setProperty("background", "green");
ESTREMO
● Using a CssResource contained within a ClientBundle.
● Using an inline <ui:style> element in a UiBinder template
CSS e GWT

Installazione GSS on GWT
GSS può essere installato solo in GWT 2.6.1 o superiori
GSS Aggiungere al modulo *.gwt.xml la seguente Inherits
<inherits name="com.google.gwt.resources.GssResource"/>
Grazie a Julien Dramaix è possibile fare una conversione manuale http://css2gss.appspot.com/
2.6.1
Maven
<repositories>

<repository>
<id>sonatype.snapshots</id>
<name>Sonatype snapshot repository</name>
<url>https://oss.sonatype.org/content/repositories/snapshots/</url>
<snapshots>
<enabled>true</enabled>
</snapshots>
</repository>
</repositories>
<dependencies>

<dependency>
<groupId>com.github.jdramaix</groupId>
<artifactId>gssresource</artifactId>
<version>1.0-SNAPSHOT</version>
<scope>provided</scope>
</dependency>
</dependencies>
Manual installation
Download the following jar files and put them in your
compilation classpath :
● The latests snapshot of gssresource.jar
● closure-stylesheet.jar
● guava 12+

Definizione GSS on GWT
Definire un foglio di style in formato Closure-Stylesheet con estensione gss oppure css
(meglio gss... come vedremo più avanti )
/* Constants*/
@def MY_GRAY #555;
@def PADDING_RIGHT 50px;
@def PADDING_LEFT 50px;
/*mixin */
@defmixin size(WIDTH, HEIGHT) {
width: WIDTH;
height: HEIGHT;
}
@defmixin gradient(START_COLOR, END_COLOR) {
background-color: START_COLOR; /* fallback color if gradients are not supported */
/* @alternate */ background-image: -moz-linear-gradient(left, START_COLOR 0%, END_COLOR 100%);
/* @alternate */ background-image: -webkit-linear-gradient(left, START_COLOR 0%, END_COLOR 100%);
/* @alternate */ background-image: -o-linear-gradient(left, START_COLOR 0%, END_COLOR 100%);
/* @alternate */ background-image: -ms-linear-gradient(left, START_COLOR 0%, END_COLOR 100%);
background-image: linear-gradient(left, START_COLOR 0%, END_COLOR 100%);
}
2.6.1

Come per i CssResource definire un’interfaccia che estende com.google.gwt.resources.client.GssResource
public interface ApplicationStyle extends GssResource {
String MY_GRAY();
String PADDING_RIGHT();
int PADDING_LEFT();
@ClassName("class-name")
String className();
String animate();
}
Ed includerla in un ClientBundle
public interface ApplicationResources extends ClientBundle {
@Source("application.gss")
public ApplicationStyle style();
}
GSS on GWT 2.6.1

Et Voilà!
A questo punto non ci resta che usare la risorsa style.
ApplicationResources applicationResources = GWT.create(ApplicationResources.class);
ApplicationStyle style = applicationResources.style();
style.ensureInjected();
// ...
Label l = new Label("My animated label");
l.addStyleName(style.animate());}
GSS on GWT 2.6.1

GssResource estende CssResource..
.. per questo può essere usata negli UiBinders
Per abilitare GssResource in UiBinder è sucfficiente definire :
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>
<ui:style type="com.google.gwt.resources.client.GssResource">

..
</ui:style>
UiBinder GSS on GWT 2.6.1

Installazione GSS on GWT
GSS è Incluso in GWT 2.7
- Per abilitarli è sufficiente impostare una configuration property
<set-configuration-property name="CssResource.enableGss" value="true" />
- Può essere usato come CssResource.. è sufficiente che il file sia con estensione .gss
- Una volta abilitato le interfacce CssResource vengono generate tramite il nuovo GssResourceGenerator
- E’ addirittura possibile fare in modo che avvenga una conversione automatica tramite una configuration property
<set-configuration-property name="CssResource.legacy" value="true" />
- Il parser 2.7 è più rigido della versione precedente, nel caso di errore in fase di conversione automatica, si può abilitare
l’opzione per una conversione più indulgente tramite
<set-configuration-property name="CssResource.conversionMode" value="lenient" />
- Una volta abilitato il GSS per utilizzarlo negli <ui:style> dell’Uibinder è sufficiente impostare l’attributo gss="true"
2.7.0

public interface ApplicationStyle extends CssResource {
String MY_GRAY();
int PADDING_LEFT();
String className();
String animate();
}
@Source("application.gss")
}
GSS on GWT 2.7.0

public interface ApplicationStyle extends CssResource {
String MY_GRAY();
int PADDING_LEFT();
String className();
String animate();
}
@Source({“common..gss”, "application.gss"})
}
GSS on GWT 2.7.0

Anche per l’UiBinder la semplificazione è evidente
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>
<ui:style gss="true">

..
</ui:style>
UiBinder GSS on GWT 2.7.0

@Sprite (Image sprite)
.addIcon {
gwt-sprite: 'addIcon';
}
@Eval ( Sostituzione valore a Run-Time)
@def BLACK eval(‘mypackage.GssSampleApplication.black()’);
.black {
color: eval('mypackage.GssSampleApplication.black()');
}
Value Function
@def ICON_WIDTH value('addIcon.getWidth', 'px');
Funzioni aggiuntive

Istruzioni condizionali in base alla permutazione
@if user.agent safari {
/* ... */
}
@if locale en {
/* ... */
}
Funzioni PERSE

Istruzioni condizionali in base alla permutazione
@if (is(“user.agent”, “safari”) {
/* ... */
}
@if(is(“local”, “en”) {
/* ... */
}
NON PIU Funzioni PERSE

Anche per i GssResource vale l’annotazione @external, per bloccarne l’offuscamento in fase di
compilazione e permetterne l’accesso anche fonti esterne a GWT.
Al riguardo valgono le stesse regole dei CssResource :
● non immettere un punto come prefisso di classe
● utilizzare gli apici nel caso di utilizzo della wildcard *
/* Don't obfuscate muLegacyClass and all classes starting with gwt- */
@external myLegacyClass 'gwt-*';
GSS richiamo classi Esterne

Entrambi i pre compilatori si assomigliano ..... ma ?!?!?
- Commenti GSS non accetta // ed usa al posto /* commento */
- Definizione variabili GSS utilizza @def variable value
mentre LESS dichiara le variabili direttamente @variable: value
- Utilizzo delle variabili GSS
- Operazioni : GSS usa le funzioni (ossia sum(a,b)) mentre less le usa nativamente (ossia a+b)
- La forma delle gestione delle sottoclassi è diversa ..
- ....
Conversione Less to GSS

Siamo alla ricerca di collaborazioni
cv@hr2o.it
oppure
hiring@hr2o.it
Hiring

GWT vs CSS3

More Related Content

Viewers also liked

Similar to GWT vs CSS3

More from GWTcon

GWT vs CSS3