GWT.create 2015

CSS3 and GWT in perfect harmony JULIEN DRAMAIX

Julien Dramaix Software Engineer at Arcbees +JulienDramaix @jDramaix

What is this about?

What is this about ?

New syntax for CssResource based on GSS

Why?

Why ?

DRY principle is missing with CSS.

Why ?

Missing CSS3 support.

What is Closurestylesheets?

What is Closure-stylesheets?

It’s an extension to CSS

What is Closure-stylesheets?

It’s an extension to CSS

Write gss and compile to CSS

What is Closure-stylesheets?

Support variables, conditionals, mixing...

What is Closure-stylesheets?

Support minification, linting, RTL flipping, renaming

What is Closure-stylesheets?

Full CSS3 support!

What is Closure-stylesheets?

Open Source project written and maintained by Google!

Example: @def BG_COLOR rgb(235, 239, 249); @defmixin size(WIDTH, HEIGHT) { width: WIDTH; height: HEIGHT; } body { background-color: BG_COLOR; }

.logo { @mixin size(150px, 55px); background-image: url('http://www.google.com/images/logo_sm.gif'); }

Compile to: body { background-color: #ebeff9; } .logo { width: 150px; height: 55px; background-image: url('http://www.google. com/images/logo_sm.gif'); }

How to use it?

How to use it ?

1. Create a GSS file.

myFirstGss.gss: @def BG_COLOR rgb(235, 239, 249); @defmixin size(WIDTH, HEIGHT) { width: WIDTH; height: HEIGHT; } body { background-color: BG_COLOR; }

.logo { @mixin size(150px, 55px); background-image: url('http://www.google.com/images/logo_sm.gif'); }

How to use it ?

2. Create your CssResource interface as usual.

public interface MyFirstGss extends CssResource { String foo(); } public interface Resources extends ClientBundle { MyFirstGss myFirstGss(); }

public interface MyFirstGss extends CssResource { String foo(); } public interface Resources extends ClientBundle { @Source("myFirstGss.gss") MyFirstGss css(); }

How to use it ?

3. Enable GSS in your GWT module file.



How to use it ?

4. For UiBinder, use the attribute GSS in your inline style.

/* Constants*/ @def PADDING_RIGHT 50px; @def PADDING_LEFT 50px; /*mixin */ @defmixin size(WIDTH, HEIGHT) { width: WIDTH; height: HEIGHT; } /* … */

How to use it ?

GSS will be the default syntax in GWT 2.8.

Features and syntax.

Features and syntax

Constants.

@def BG_COLOR rgb(235, 239, 249); @def PADDING_RIGHT 15px; @def CONTAINER_COLOR BG_COLOR;

@def BG_COLOR rgb(235, 239, 249); @def PADDING_RIGHT 15px; @def CONTAINER_COLOR BG_COLOR;

Constant name in UPPERCASE !

Features and syntax

Runtime evaluation.

@def BLUE eval("com.foo.bar.client.resource.Colors.BLUE"); .red { color: eval("com.foo.bar.client.resource.Colors.RED"); }

@def BLUE eval("com.foo.bar.client.resource.Colors.BLUE"); .red { color: eval("com.foo.bar.client.resource.Colors.RED"); }

Any valid Java expression

Features and syntax

Functions.

.content { position: absolute; margin-left: add(LEFT_PADDING, /* padding left */ LEFT_HAND_NAV_WIDTH, RIGHT_PADDING); /* padding right */ }

FUNCTIONS

Built-in arithmetic functions

➔ ➔ ➔ ➔ ➔ ➔

add() sub() mult() divide() min() max()

FUNCTIONS

Built-in color manipulation function

➔ ➔ ➔ ➔ ➔ ➔

blendColorsHsb(startColor, endColor) blendColorsRgb(startColor, endColor) makeMutedColor(backgroundColor, foregroundColor [, saturationLoss]) addHsbToCssColor(baseColor, hueToAdd, saturationToAdd, brightnessToAdd) makeContrastingColor(color, similarityIndex) adjustBrightness(color, brightness)

FUNCTIONS

You can define your own function...

FUNCTIONS

… or not.

FUNCTIONS

Should be available in GWT 2.8 Stay tuned!

… or not.

Features and syntax

Mixins.

@defmixin size(WIDTH, HEIGHT) { width: WIDTH; height: HEIGHT; } .container { @mixin size(550px, 500px); }

Compile to: .container { width: 550px; height: 500px; }

@defmixin borderradius(TOP_RIGHT, BOTTOM_RIGHT, BOTTOM_LEFT, TOP_LEFT) { -webkit-border-top-right-radius: TOP_RIGHT; -webkit-border-bottom-right-radius: BOTTOM_RIGHT; -webkit-border-bottom-left-radius: BOTTOM_LEFT; -webkit-border-top-left-radius: TOP_LEFT; -moz-border-radius-topright: TOP_RIGHT; -moz-border-radius-bottomright: BOTTOM_RIGHT; -moz-border-radius-bottomleft: BOTTOM_LEFT; -moz-border-radius-topleft: TOP_LEFT; border-top-right-radius: TOP_RIGHT; border-bottom-right-radius: BOTTOM_RIGHT; border-bottom-left-radius: BOTTOM_LEFT; border-top-left-radius: TOP_LEFT; }

.foo { @mixin borderradius(5px, 0, 5px, 0) }

http://dev.arcbees.com/gsss/mixins/

Css animations done with GSSS: visit http://www.arcbees.com

Features and syntax

Conditional CSS.

CONDITIONAL CSS

Compile time conditional versus Runtime conditional.

CONDITIONAL CSS

Conditional evaluated at compile time.

CONDITIONAL CSS

Conditional evaluated at compile time.

Based on permutations or properties you define in your module file.

@if (is("ie8") || is("ie9") && !is("locale", "en")) { .foo{ /* … */ } } @elseif (is("safari")) { .foo{ /* … */ } } @elseif is("customProperty", "customValue") { .foo{ /* … */ } } @else { .foo{ /* … */ } }

CONDITIONAL CSS

Special case: single boolean value configuration property defined in uppercase.



@if (USE_EXTERNAL) { @external '*'; }

CONDITIONAL CSS

Conditional evaluated at runtime.

@if (eval("com.foo.Bar.FOO")) { /* ... */ } @elseif (eval('com.foo.Bar.foo("foo")')) { /* ... */ }

@if (eval("com.foo.Bar.FOO")) { /* ... */ } @elseif (eval('com.foo.Bar.foo("foo")')) { /* ... */ }

Any valid Java expression returning a boolean.

CONDITIONAL CSS

Differences between runtime and compile-time conditionals.

This is valid

@if (is("ie8") || is("ie9")) { @def PADDING 15px; } @else { @def PADDING 0; }

This is not

@if (eval("com.foo.Bar.useLargePadding()")) { @def PADDING 15px; } @else { @def PADDING 0; }

This is valid

@if (USE_EXTERNAL) { @external '*'; }

This is not

@if (eval("com.foo.Bar.useExternal()")) { @external '*';' }

CONDITIONAL CSS

Runtime conditionals can only contain CSS rules.

Features and syntax

Resources Url

public interface Resources extends ClientBundle { ImageResource iconPrintWhite(); ImageResource logout(); DataResource iconsEot(); // ... }

@def ICONS_EOT resourceUrl("iconsEot"); @def ICON_PRINT_WHITE resourceUrl("iconPrintWhite"); @font-face { font-family: 'icons'; src: ICONS_EOT; /* ... */ } .print { background-image: ICON_PRINT_WHITE; } .logout { background-image: resourceUrl("logout"); }

Features and syntax

/*@altenate*/

.logo { width: 150px; height: 55px; border-color: #DCDCDC; border-color: rgba(0, 0, 0, 0.1); }

.logo { width: 150px; height: 55px; border-color: #DCDCDC; border-color: rgba(0, 0, 0, 0.1); }

.logo { width: 150px; height: 55px; border-color: #DCDCDC; /* @alternate */ border-color: rgba(0, 0, 0, 0.1); }

Features and syntax

Disable RTL Flipping.

RTL: .logo { margin-right: 10px; border-left: 2px solid #ccc; padding: 0 4px 0 2px; }

LTR: .logo { margin-left: 10px; border-right: 2px solid #ccc; padding: 0 2px 0 4px; }

.logo { /* @noflip */ margin-right: 10px; border-left: 2px solid #ccc; padding: 0 4px 0 2px; }

Features and syntax

Sprite support.

.logout { gwt-sprite: "iconLogin"; display: block; cursor: pointer; }

Features and syntax

External classes

@external myLegacyClass 'gwt-*'

@external myLegacyClass 'gwt-*'

➔ Don’t use ‘.’ in front of your classes ➔ Use quotes if you use the star suffix

How to migrate

How to migrate

The converter: Css2Gss.java

Usage : java com.google.gwt.resources.converter.Css2Gss [Options] [file or directory] Options: ➔ -r > Recursively convert all css files on the given directory(leaves .css files in place) ➔

-condition list_of_condition > Specify a comma-separated list of variables that are used in conditionals and that will be mapped to configuration properties. The converter will not use the is() function when it will convert these conditions

➔

-scope list_of_files > Specify a comma-separated list of css files to be used in this conversion to determine all defined variables

THE CONVERTER

Single file conversion.

$ CONVERTER_CLASS_PATH="/path/to/gwt-user.jar:/path/to/gwtdev.jar" $ java -cp $CONVERTER_CLASS_PATH \ com.google.gwt.resources. converter.Css2Gss /path/to/cssFileToconvert.css

THE CONVERTER

Batch conversion.

$ CONVERTER_CLASS_PATH="/path/to/gwt-user.jar:/path/to/gwt-dev. jar" $ java -cp $CONVERTER_CLASS_PATH \ com.google.gwt.resources.converter.Css2Gss -r /path/to/project

THE CONVERTER

Converter Web Application: http://css2gss.appspot.com

How to migrate

Support of legacy?



SUPPORT OF LEGACY

Two conversion modes: strict or lenient

SUPPORT OF LEGACY

Two conversion mode: strict or lenient => Use strict only

How to migrate

Migration path.

MIGRATION PATH

➔ Enable GSS and the auto-conversion in strict mode. ➔ Fix issues. ➔ Use the converter and convert all your css files ➔ Set back auto-conversion to off.

Configuration

CONFIGURATION

CssResource.obfuscationPrefix



CssResource.obfuscationPrefix

Disable the obfuscation prefix if your page contains only one GWT application.



CONFIGURATION

CssResource.allowedAtRules





3MB Sizes 4 Downloads 119 Views
Report

Recommend Documents

gwt-tutorial-ru.pdf
1 На сайте http://gocha.org имеются дополнительные материалы связанные с новой версией GWT. Page 3 of 37. gwt-tutorial-ru.pdf. gwt-tutorial-ru.pdf.
PR Dolphin GWT final.pdf
industry's first IoT processor. Based on the open-source PULP project developed at the. University of Bologna and ETH Zurich, the GAP8 SoC is an ultra-low ...
UNIT 3: MELODy AND HARMONy
In music, a melody is a succession of sounds, normally with different pitches and durations, that express a musical idea. 3.1.1. Musical phrases. Melodies are ...
Harmony Search
Music-Inspired Optimization Algorithm. Harmony Search ... Good Harmony & Bad Harmony .... Web-Based Parameter Calibration ... 4. Business Opportunity ...
Best development practices for GWT web applications (2).pdf ...
There was a problem previewing this document. Retrying... Download ... Best development practices for GWT web applications (2).pdf. Best development ...
CSS3 Cheat Sheet - GitHub
Border Radius vendor prefix required for iOS
Risk-dominance and perfect foresight dynamics in ... - Semantic Scholar
Mar 12, 2005 - accessible) and absorbing when the degree of friction is sufficiently small? ... small degrees of friction if and only if it is u-dominant. Moreover ...
17 positron-annihilation-in-perfect-and-defective-zro2-monoclinic ...
This function is fitted in Chebyshev polynomial [11] as given by .... functions. r – RZr , r – RO1 and r – RO2 are respectively distances of ith electron to ... -with-single-particle-wave-function-slater-type-orbital-and-modified-jastrow-functi
btra harmony reigns.pdf
btra harmony reigns.pdf. btra harmony reigns.pdf. Open. Extract. Open with. Sign In. Main menu. Displaying btra harmony reigns.pdf.
Risk-dominance and perfect foresight dynamics in N ...
Available online 12 March 2005. Abstract ... [5], international finance [25], business cycles [4] and so forth. Game theoretic models of ... accessible) and absorbing when the degree of friction is sufficiently small? In the literature, several ... T