Chapter 4. Menu

This Chapter covers design of Menu system used by Fins. Menu contains three widgets

1. MenuItem

2. MenuHeader

3. MenuBar

Figure 4.1. Menu parts

MenuHeader is a stylish header that display menu categories. MenuItem is GWT Anchor widget and the user clicks them to invoke menu options. MenuBar is a StackLayoutPanel with MenuHeader as header and MenuItem as content.

4.1. ClientBundle

MenuBar, MenuHeader and MenuItem widgets use icons for a stylish look. GWT streamlines the image management through GWT ClientBundle, which provides an unified way to create and manage the icons. Let’s create FinsResources, a ClientBundle, to manage image resources used in the application.

FinsResources

FinsResources is an interface that extends ClientBundle and define methods to access images as ImageResource. Client code access individual images through methods defined in the interface. With ClientBundle, GWT packages many images as a single large image file for download, instead of multiple smaller ones. This will improve the application performance by reducing the number of round trip to server to fetch images. Among other things, this feature makes Fins extremely light on network.

To place all images, create a new package

Select package in.fins.client and choose File → New → Client Bundle and in Client Bundle window, enter Name as FinsResources. Then in Bundled Resources click Add Multiples and select required images from in.fins.client.images package. This adds access methods for selected images, and you may use edit option to modify the auto generated method names.

Add following lines to FinsResources.java to make it a singleton.

in.fins.client/FinsResources.java

....

public static final FinsResources INSTANCE = GWT.create(FinsResources.class);

....

static final INSTANCE makes FinsResources as singleton to ensure that only one instance of FinsResources exists. For any new images, edit FinsResources directly and add access methods.

When GWT compiles the project, it packages all the images into a single large file for transmission to client. This file is hash based and it will not be downloaded again until hash is changed due addition or deletion of images.

Access images with the interface methods. For example, if FinsResources has following method

@Source("in/fins/client/images/coffee.png")
ImageResource coffee();

Access coffee.png as

// in java classes

FinsResources.INSTANCE.coffee();

// in ui.xml

<ui:with type="in.fins.client.FinsResources" field="resource" />

<g:Image imageResource="{resource.coffee}" />