The GWT.create 2014 conference – Day 1 : CSS3 meets GWT with GSS

The GWT Open Source project : when CSS3 meets GWT with GSS
Daniel Kurka (Google) and Julien Dramaix (ArcBees) gave us an introduction of a very exiting feature, the Closure-stylesheets. Daniel Kurka is a member of the GWT Steering committee and the creator of MGWT, a library for mobile aps and websites development in GWT from one code base. Julien Dramaix is a Software Engeneer.

Closure-stylesheet
Daniel began the talk with an introduction of Closure-stylesheet. According to him, CSS is a great tool, but it’s also “dry”. The code of CSS could really be a mess. And if we want to have something more adapted to each case, it may be hard to describe. CSS is missing things : Closure-stylesheets resolve that. Closure-stylesheet (usually called Google style sheet) is an extension to CSS who adds variables, conditionals and mixing to the standard CSS system. It can support minification, linting, RTL, renaming as well. Closure-stylesheet needs a Java environment : basically we write in GSS, and these files are compiled to CSS files later. Daniel gave an example for all features.

Variables
Closure-Stylesheets uses the keyword @def to declare a variable:

@def BG_COLOR    rgb(235, 239, 249);
@def DIALOG_BORDER_COLOR   rgb(107, 144, 218);

One variable can be assigned to another variable as well:

@def DIALOG_BG_COLOR  BG_COLOR ;
Usage of variable in normal CSS format:
body {
background-color: BG_COLOR;
}
.dialog {
background-color: DIALOG_BG_COLOR;
border: 1px solid DIALOG_BORDER_COLOR;
}

The compiled CSS is like this:

body {
background-color: #ebeff9;
}
.dialog {
background-color: #ebeff9;
border: 1px solid #6b90da;
}

Functions
Closure-Stylesheets supports several arithmetic functions such as add, sub, mult, divide, min, max. These functions could have a variable number of arguments. The restrictions on the arguments make it not as flexible as CSS cals, but they are much more maintainable by making sense of fields’ names. For example:

@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 */
}

The compiled CSS will be:

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

selectFrom function allows to handle a condition:

@def MYDEF selectFrom(FOO, BAR, BAZ);
This line equals to MYDEF = FOO ? BAR : BAZ; in JAVA.

Closure-Stylesheets support customer functions as well by implementing GSS Function Map Provider interface in Java.

Mixins
Mixins allows to reuse a list of parameterized declarations. Mixins uses @defmixin to define a list of declarations, and @mixin to use the list anywhere to replace a declaration. The most irresistible thing of mixins is to use it for a cross-browser behavior, such as gradient. You will find bellow an example to define a mixin for gradient:

@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+ */
/* @alternate */ background-image: -moz-linear-gradient(POS, hsl(HSL1, HSL2, HSL3), COLOR); /* FF3.6+ */
/* @alternate */ background-image: -ms-linear-gradient(POS, hsl(HSL1, HSL2, HSL3), COLOR);  /* IE10 */
/* @alternate */ background-image: -o-linear-gradient(POS, hsl(HSL1, HSL2, HSL3), COLOR);   /* Opera 11.10+ */
}

And all the places where you want to write this:

.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);
}

This could be replaced by only one line:

.header {
@mixin gradient(top, 0%, 50%, 70%, #cc0000, #f07575);
}

And this is really great!

Conditionals
Closure-Stylesheets support conditionals using the keywords @if, @else and @elseif. A very practical usage of conditional is to define cross-browser behavior. Instead of having 4 or 5 lines to fit all the browsers, GSS can compile one browser specific code in one permutation to avoid unused codes.

Linting
Closure-Stylesheets can check CSS errors, unrecognized and duplicate style declarations.

RTL Flipping
Closure-Stylesheets support left-to-right as well as right-to-left. The special @noflip annotation makes property keep its original state.

GSS
Julien Dramaix presented GSS in more detail. GSS is the implementation of Closure-stylesheets for GWT that makes GWT be able to benefit the all the exciting new CSS3 features. The usage of GSS Resource interface in GWT is very similar with the CSS Resource. Julien gave an example:

We got the following CSS file application.gss
@def PADDING_RIGHT 50px;
@def PADDING_LEFT 50px;
!
@defmixin size(WIDTH, HEIGHT) {
width: WIDTH;
height: HEIGHT;
}
.header, span[data-role^="header"] {
display: block;
@mixin size(150px, 50px);
}
.header-with-padding {
@mixin size(add(PADDING_RIGHT, 150px, PADDING_LEFT), 50px);
padding-right: PADDING_RIGHT;
}

In Java, we need to create an interface extends GSS Resource:

public interface ApplicationResources extends ClientBundle {
public interface ApplicationGss extends GssResource {
int paddingRight();
String header();
@ClassName("header-with-padding")
String headerWithPadding();
}
@Source("application.gss")
public ApplicationGss style();
}
And now GSS is ready to be used like:
ApplicationResources resources = GWT.create(ApplicationResources.class);
ApplicationGss style = resources.style();
style.ensureInjected();
// ...
myWidget.addStyleName(style.header());

GSS Resource can support the full CSS tree, and all the awesome features in Closure-sytlesheets. Thus CSS Resource still have some features that Closure-stylesheet does not have such as sprite image, eval and function value. These features are supported in GSS Resource as well, but with a slightly different way. That means that GSS Resource is not backward compatible with CSS Resource. In another word, CSS Resource cannot just be replaced by a GSS Resource extension. However, GSS will provide a convertor that can convert CSS file to GSS file which is compatible with GSS Resource. Julien gave at the same time some examples of how to use the sprite image, eval and function value in GSS. The missing thing in GSS is the conditional styles based on permutations. Julien mentioned that he is actually working on this issue now. GSS is in a beta version and ready to use. And the missing user agent conditional is expected to be implemented in Q1 2014. Julien invited us to test and report issues right now at https:// github.com/jDramaix/gss.gwt/issues. And as planned, GSS will be available with GWT 3.0.

Demo
Julien gave us two demos. During the first one, Julien showed us a 3D cube built and animate by CSS3 functions. The second one was a cell list taken from GWT showcase. He showed us the different effects of the list which occur when the CSS style was changed.

Summary
Daniel finished the session by giving a summary of Closure-stylesheets and GSS. And he would like to move mgwt to GSS.

Conclusion
It is very glad to hear that GWT will support CSS3, even though it took a little moment. This will for sure simplify a lot GWT templating, which is for now a week point of GWT, comparing with other web framework. View the presentation slides here : http://daniel-kurka.de/talks/gwtcreate/gss.pdf

 

Share
Zhe SUN
Zhe SUN

1789

Leave a Reply

Your email address will not be published. Required fields are marked *