No Image on button

[bartolomiew]

Hi all,

I'm evaluating GWT Designer 7.2.0 + GWT 1.7.1 + GXT 2.0.1, I'm not new to GWT.
I've successfully build a basic UI with only a toolbar and GXT button with GWT Designer, buttons are rendered with GXT css but images on buttons aren't rendered in designer while they are in hosted mode.
There is no magic on my projet, it is already configured to use GXT and GWT Designer, GXT component are displayed on the palette, war/images contains images, war/myprojet.css contains something like that :

Code: Select all

.audemat-iconsave32 {
  background-image: url(/images/32x32/filesave.png) !important;
}


and images exists, the main class is :

Code: Select all

package audemat.test.client;

import com.extjs.gxt.ui.client.Style.ButtonScale;

/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class GWTDesigner implements EntryPoint {

   private Button btnSave;
   private Button btnConfiguration;
   private Button btnMonitoring;
   private Button btnAbout;
   private Button btnSystem;
   private Button btnWarning;
   private ButtonBar toolsBar;
   
   public void onModuleLoad() {
      toolsBar = new ButtonBar();
      btnSave = new Button("Save", new SelectionListener<ButtonEvent>() {
         @Override
         public void componentSelected(ButtonEvent ce) {
         }
      });
      btnSave.setEnabled(false);
      btnSave.setScale(ButtonScale.LARGE);
      btnSave.setIcon(IconHelper.create("audemat-iconsave32",32,32));
      btnSave.setIconAlign(IconAlign.BOTTOM);
      btnSave.setToolTip("Save configuration changes");
      
      btnConfiguration = new Button("Conf.", new SelectionListener<ButtonEvent>() {
         @Override
         public void componentSelected(ButtonEvent ce) {
         }
      });
      btnConfiguration.setScale(ButtonScale.LARGE);
      btnConfiguration.setIcon(IconHelper.create("audemat-iconconfiguration32",32,32));
      btnConfiguration.setIconAlign(IconAlign.BOTTOM);
      btnConfiguration.setToolTip("Monitoring configuration");
      btnConfiguration.setEnabled(true);
      
      btnMonitoring = new Button("Monitor", new SelectionListener<ButtonEvent>() {
         @Override
         public void componentSelected(ButtonEvent ce) {
         }
      });
      btnMonitoring.setScale(ButtonScale.LARGE);
      btnMonitoring.setIcon(IconHelper.create("audemat-iconoptions32",32,32));
      btnMonitoring.setIconAlign(IconAlign.BOTTOM);
      btnMonitoring.setToolTip("Monitoring display");
      btnMonitoring.setEnabled(true);
      
      btnSystem = new Button("System", new SelectionListener<ButtonEvent>() {
         @Override
         public void componentSelected(ButtonEvent ce) {
         }
      });
      btnSystem.setScale(ButtonScale.LARGE);
      btnSystem.setIcon(IconHelper.create("audemat-iconsystem32",32,32));
      btnSystem.setIconAlign(IconAlign.BOTTOM);
      btnSystem.setToolTip("System configuration");
      btnSystem.setEnabled(true);
      
      btnWarning = new Button("Events", new SelectionListener<ButtonEvent>() {
         @Override
         public void componentSelected(ButtonEvent ce) {
         }
      });
      btnWarning.setScale(ButtonScale.LARGE);
      btnWarning.setIcon(IconHelper.create("audemat-iconwarning32",32,32));
      btnWarning.setIconAlign(IconAlign.BOTTOM);
      btnWarning.setToolTip("Alarms display");
      btnWarning.setEnabled(true);
      
      btnAbout = new Button("About", new SelectionListener<ButtonEvent>() {
         @Override
         public void componentSelected(ButtonEvent ce) {
         }
      });
      btnAbout.setScale(ButtonScale.LARGE);
      btnAbout.setIcon(IconHelper.create("audemat-iconhelp32",32,32));
      btnAbout.setIconAlign(IconAlign.BOTTOM);
      btnAbout.setToolTip("About this application");
      btnAbout.setEnabled(true);
      
      toolsBar.add(btnSave);
      toolsBar.add(btnConfiguration);
      toolsBar.add(btnMonitoring);
      toolsBar.add(btnSystem);
      toolsBar.add(btnWarning);
      toolsBar.add(btnAbout);
      
      RootPanel.get().add(toolsBar);
   }
}


[gaspo]

Try using ImageBundle. It works with buttons at design time:

Code: Select all

public interface AppIcons extends ImageBundle
{
  @Resource("cog_edit32.png")
  AbstractImagePrototype cogEdit();
}
....
    public static final AppIcons ICONS = GWT.create(AppIcons.class);
....
    Button b = new Button("");
    b.setScale(ButtonScale.LARGE);
    b.setIcon(ICONS.cogEdit());
    b.setToolTip("Edit Configuration");
    b.addSelectionListener(new SelectionListener<ButtonEvent>() {
      @Override
      public void componentSelected(ButtonEvent ce)
      {
         ....
      }
    });
    panel.add(b);



[bartolomiew]

Thanks gaspo for your workaround but the idea behind my post is more in the way to know if I misused GWT Designer or if it's a bug

[Eric Clayberg]

Please give your original code a try using the latest GWT Designer v7.2 build.

GXT IconHelper needed some special support.