Css3 and gwt in perfect harmony
-
Upload
arcbees -
Category
Technology
-
view
564 -
download
0
Transcript of Css3 and gwt in perfect harmony
Julien DramaixSoftware Engineer
at Arcbees
+JulienDramaix@jDramaix
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');}
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');}
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();}
<ui:style gss="true">/* Constants*/@def PADDING_RIGHT 50px;@def PADDING_LEFT 50px;
/*mixin */@defmixin size(WIDTH, HEIGHT) { width: WIDTH; height: HEIGHT;}/* … */
</ui:style>
@def BG_COLOR rgb(235, 239, 249);@def PADDING_RIGHT 15px;@def CONTAINER_COLOR BG_COLOR;
Constant name in UPPERCASE !
@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
.content { position: absolute; margin-left: add(LEFT_PADDING, /* padding left */ LEFT_HAND_NAV_WIDTH, RIGHT_PADDING); /* padding right */}
➔ blendColorsHsb(startColor, endColor)➔ blendColorsRgb(startColor, endColor)➔ makeMutedColor(backgroundColor,
foregroundColor [, saturationLoss])➔ addHsbToCssColor(baseColor, hueToAdd,
saturationToAdd, brightnessToAdd)➔ makeContrastingColor(color,
similarityIndex)➔ adjustBrightness(color, brightness)
FUNCTIONS
Built-in color manipulation function
@defmixin size(WIDTH, HEIGHT) { width: WIDTH; height: HEIGHT;}
.container { @mixin size(550px, 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/
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{ /* … */ }}
<define-configuration-property name="USE_EXTERNAL" is-multi-valued="false"/><set-configuration-property name="USE_EXTERNAL" value="false" />
@if (eval("com.foo.Bar.FOO")) { /* ... */}@elseif (eval('com.foo.Bar.foo("foo")')) { /* ... */}
Any valid Java expression returning a boolean.
This is not
@if (eval("com.foo.Bar.useLargePadding()")) { @def PADDING 15px;}@else { @def PADDING 0;}
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");}
.logo { width: 150px; height: 55px; border-color: #DCDCDC; /* @alternate */ border-color: rgba(0, 0, 0, 0.1);}
➔ Don’t use ‘.’ in front of your classes➔ Use quotes if you use the star suffix
@external myLegacyClass 'gwt-*'
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
$ CONVERTER_CLASS_PATH="/path/to/gwt-user.jar:/path/to/gwt-dev.jar"
$ java -cp $CONVERTER_CLASS_PATH com.google.gwt.resources.converter.Css2Gss /path/to/cssFileToconvert.css
$ 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
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.
<define-configuration-property name="CssResource.obfuscationPrefix" is-multi-valued="false" /><set-configuration-property name="CssResource.obfuscationPrefix" value="default" />
CssResource.obfuscationPrefix
Disable the obfuscation prefix if your page contains only one GWT application.
<!-- A multi-valued configuration property that defines the list of allowed non standard --><!-- at-rules in the css files -->
<define-configuration-property name="CssResource.allowedAtRules" is-multi-valued="true" />
<!-- A multi-valued configuration property that defines the list of allowed non standard --><!-- at-rules in the css files →
<define-configuration-property name="CssResource.allowedAtRules" is-multi-valued="true" /><extend-configuration-property name="CssResource.allowedAtRules" value="-moz-document" /><extend-configuration-property name="CssResource.allowedAtRules" value="supports" />
<!-- A multi-valued configuration property that defines the list of allowed non standard --><!-- functions in the css files →
<define-configuration-property name="CssResource.allowedFunctions" is-multi-valued="true" />
<extend-configuration-property name="CssResource.allowedFunctions" value="-webkit-sin" /><extend-configuration-property name="CssResource.allowedFunctions" value="-webkit-cos" />
THANK YOU
please rate this presentation at gwtcreate.com/agenda
Julien DramaixSoftware Engineer
at Arcbees
+JulienDramaix@jDramaix