GWT – Indicator/Gauge widget

In this latest post, we will create an indicator widget using just raw GWT. Avoiding any external third-party libraries comes in handy when you need to tweak the functionality to suit your specific needs and who doesn’t want to keep their project slim by avoiding the extra baggage ūüôā

At the time of writing, there is no indicator widget available in GWT by default. So, we will create our own using two images, one representing the indicator scale and other, the sliding knob. The completed widget should look like:

 

Step 1: Create a ClientBundle for images

We need to use the images for our widget, so, first of all we will create a ClientBundle for the images. I have copied both the images in the same package as the¬†IndicatorResourceBundle.java. A better and more professional approach is to copy them in your resource folder. If you do that, make sure to update the relative path in @Source(…).

Images: dragKnob.png, indicatorScale.png

Step2: Create the UI template

First of all we need to create a background image using the indicatorScale.png on which we will slide our indicator knob to create an Indicator widget.

In GWT, @sprite declaration is used to compose the background sprite.

Rest of the UI template code should be self-explanatory.

 

 Step 3:  Create the owner java file

 

Step 4: Update the entry point

 

Step 5: Run the application

Now, you run can the application, as usual and you should see the the working indicator as we saw in the image at the beginning of the post.
You can also try using different values in the entry point class:

 

For further reading:
http://www.gwtproject.org/doc/latest/DevGuideClientBundle.html