Tuesday, December 29, 2009

Rounded button, CSS3 and GWT2.0 ClientBundle

Introduction

CSS3 introduces new powerful capabilities for web designers. Instead of merging several sub-images to generate a rounded button, CSS3 allows to define this button with properties.

This tutorial will not only expose the CSS3 instructions to create the  button. The new GWT2.0 ClientBundle facility will be used to create a GWT RoundedButton.

The basic GWT Button will be used with a dedicated CSS3 style provided by a ClientBundle.

Let’s go !

ClientBundle introduction

GWT2.0 introduces this new  functionality bringing the power of combining and optimizing resources into one download for things like text files, CSS, and XML. This means fewer network roundtrips, which in turn can decrease application latency, especially on mobile applications.

More information regarding ClientBundle can be found here.

Step1: Creating the CSS clientBundle

The .iPush style is used to polish the button in the “normal state”. Basic attributes like color, font and positioning are described in this section. As CSS3 webkit implementation is used, you can notice that a \ is added in front of the webkit. without this \, GWT compile will fire an error during compilation.

The .iPush.IBClassic is used to add the rounded button properties. A “templated button image” is required to define the button properties. This image will automatically adapt is size regarding the text contained in the button or the button forced width.

image

@url annotation is used to define the “templated” image required to design the button(lines 182-183).

  • the @url annotation will produce the url CSS instruction
  • the imageUrl1 is the image referenced in the CSS instruction
  • the bigButtonWhite is a reference to a property defined in the ClientBundle java file in charge of locating the image (.png). This java file will be presented just after…

image

If we take a look at the generated CSS with the Chrome developer tools, we can see that the image has been base64 encoded during the GWT compilation !! no additional network access is used to download the image.

image

Step2: Creating the Java ClientBundle

The Resources interface is used to define all the resources (CSS files, images, JavaScript..) that are part of the bundle.

The previous CSS file is referenced by the @Source(“test.css”) annotation, the image location defined in the CSS file is defined in this interface as well.

image

An other interface (MyCssResource) returned by the previous Resources interface is used to access the styles defined in the CSS file.

image

Using the button in the application

GWT.create method retrieves the Resources interface (56).

The button is “styled” with the MyCssResources iPush and iBClassic methods. This 2 methods are related to the .iPush and .iPush.iBClassic defined in the CSS file.

image

Finally, the resource is injected to the component (60)

And the result is:

image

Conclusion

This tutorial was for me the occasion to test the ClientBundle provided by the new GWT2.0 framework. Using ClientBundle seems really a good way to reduce the network transfers and only use the “active” part of the CSS.

Special thanks to Thomas Broyer who provide me efficient support !

del.icio.us Tags: ,,

Monday, December 28, 2009

Activity indicator with WebKit CSS animation

Introduction

It is possible to create loading indicators with animated gif. A lot of sites are proposing this service like mentalized.net.

An other approach is to use a CSS animation provided by Safari WebKit. This solution will work for WebKit browsers (Chrome, Safari).

I will expose briefly how this animation is working.

Tutorial description

Objective of this tutorial is to create a loading indicator that is activated when the user click on a start button.

Starting the tutorial

Step1: The Activity indicator HTML code

2 divs are used for the indicator.

  • The fisrt div(activityIndicatorCont) is used to add extra parameters of the indicator like text or background color.
  • The second div is used to display the transparent load indicator image. This div will be used during the CSS animation (rotation).

image

Step2: The Activity indicator CSS animation code

The activityIndicatorCont is used to customize the loading indicator (background-color, rounded border…). As the animation is only visible when the user clicks on the start button, this div is hidden.

The activityIndicator defines the animation parameters and the image used for the indicator.

image

Step3: The CSS keyFrames animation description

The animation used to rotate the loading indicator image is described in this section. The activity-indicator name will be used to reference this keyframes animation (JavaScript part).

image

Step4: Starting the animation with JavaScript

When the user click the go Button, the Javascript function starts the animation. The components becomes visible (line 10) and the animation name is assigned (line 11).

image

You can try the animation here.

You can download the project (html + css + png) here.

Conclusion

CSS webKit animation provides powerful animation possibilities. Actually the CSS functions described in this tutorial are only available for webKit browser (-webkit).

More information regarding the functionalities are available on the Apple developer website available here.

del.icio.us Tags: ,,

Frederic shared items