There is a huge collection of icon sets floating on the web that we can take advantage of, especially in making our UI look radically different. Some popular ones include Silk, Tango, Fugue, and SweetiePlus.
The Icons interface that we currently have is not so flexible. If we want to combine icons from the Silk and Tango sets, then we must dump all the image files in that same package folder, risking over-writing some. Also, if we want to use only the Tango icons, we will have problems since there's no namespace structure.
To make it easy to use all these icons and others yet to be discovered, in an intuitive way, we'll re-factor the Icons interface to serve as a factory while the ClientBundleinterface will be extended to provide, say a SilkIcons interface for the Silk collection, and a FugueIcons interface for the Fugue icons set.
// The Icons "factory"
package com.example.client.icons;
public interface Icons {
SilkIcons Silk = GWT.create(SilkIcons.class);
FugueIcons Fugue = GWT.create(FugueIcons.class);
}
// Silk icons set
package com.example.client.icons.silk;
public interface SilkIcons extends ClientBundle{
ImageResource accept();
}
// Fugue icons set
package com.example.client.icons.fugue;
public interface FugueIcons extends ClientBundle {
FugueX32 x32 = GWT.create(FugueX32.class);
ImageResource acorn();
}
// Fugue 32x32icons set
public interface FugueX32 extends ClientBundle {
ImageResource folder();
ImageResource document();
}
This makes for a fluid interface from the client code perspective, such as Icons.Fugue.x32.document(). Our earlier example will now be as follows:
TabItem homeTab = new TabItem("Terms");
homeTab.setIcon(AbstractImagePrototype.create(Icons.Silk.accept()));
Button btn = new Button("Document");
btn.setScale(ButtonScale.LARGE);
btn.setIconAlign(IconAlign.TOP);
btn.setIcon(AbstractImagePrototype.create((Icons.Fugue.x32.document()));