Am I doing this the "Smart"GWT way? (inter widget hover dependencies and CSS styling)

[beckyo]

Hi Iso team,

I have created a "composite widget" consisting of a Canvas and a MenuButton in order to implement FontAwesome icons in a RibbonBar without losing the functionality that a MenuButton provides. The Canvas holds the Font Icon (via a simple CSS class set), and the MenuButton is simply text.

However, I need both widgets to look like they are one. So when you hover over one, it looks like you're hovering over both.

Because the Canvas object needs to always hold style "fa-xxx" for the FontAwesome icon, I can't use StatefulCanvas unless I muck with the FontAwesome CSS, which creates future compatibility issues with FontAwesome.

I also don't want to fire a MouseOver event on one while hovering over the other, and visa versa, because that would create a circular reference.

So I chose to update the styles upon MouseOver, letting the MenuButton, which is a type of StatefulCanvas self-manage whenever possible.

It's working well, but it does mean I'm self-managing CSS of the MenuButton whenever hovering over the Canvas/Icon. Tell me if you have a best practice or better way for getting this done?

import com.smartgwt.client.types.Alignment;
import com.smartgwt.client.types.Overflow;
import com.smartgwt.client.types.VerticalAlignment;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.events.HoverEvent;
import com.smartgwt.client.widgets.events.HoverHandler;
import com.smartgwt.client.widgets.events.MouseOutEvent;
import com.smartgwt.client.widgets.events.MouseOutHandler;
import com.smartgwt.client.widgets.events.MouseOverEvent;
import com.smartgwt.client.widgets.events.MouseOverHandler;
import com.smartgwt.client.widgets.layout.VLayout;
import com.smartgwt.client.widgets.menu.Menu;
import com.smartgwt.client.widgets.menu.MenuButton;


/**
 * Special Layout that combines a FontAwesome icon, optional title/text, and is capable of opening a Menu
 *
 */
public class RibbonButton extends VLayout
{
  private Canvas icon;
  private final String iconCSSName;
  private MenuButton menuButton;
  private Menu menu;
  
  private final String CSS_NAME = "ribbonMenuButton";
  private final String CSS_HOVER_NAME = CSS_NAME + "Over";
  
  
  public RibbonButton(final String iconCSSName, int iconWidth)
  {
    this(iconCSSName, iconWidth, null, null);
  }
  
  public RibbonButton(final String iconCSSName, int iconWidth, String menuTitle)
  {
    this(iconCSSName, iconWidth, menuTitle, null);
  }
  
  public RibbonButton(final String iconCSSName, int iconWidth, String menuTitle, Menu menu)
  {
    super();
    
    this.iconCSSName = iconCSSName;
    init(menuTitle, menu);
    arrangeComponents(iconWidth);
  }
  
  
  private void init(String menuTitle, Menu menu)
  {
    icon = new Canvas();
    menuButton = new MenuButton();

    setMenuTitle(menuTitle);
    setMenu(menu);
  }
  
  
  private void arrangeComponents(int iconWidth)
  {
    setStyleName("ribbonButtonWrapper");
    setWidth(48);
    setHeight(42); //6px higher than icon + menuButton because of 6px top margin in cv_etl.scss
    setAlign(Alignment.CENTER);
    setLayoutAlign(Alignment.CENTER);
    
    icon.setWidth(iconWidth);  //for Font icons has to be done before attaching - also closely aligned to the font-size of the icon in cv_etl.scss
    icon.setHeight(20);
    icon.setOverflow(Overflow.HIDDEN);
    icon.setLayoutAlign(Alignment.CENTER);
    icon.setLayoutAlign(VerticalAlignment.CENTER);
    icon.setAlign(Alignment.CENTER);
    icon.setStyleName(iconCSSName);
    icon.setCanHover(true); //default Canvas objects do not have this set (aka null/false)
    
    icon.addMouseOverHandler(new MouseOverHandler()
    {
      @Override
      public void onMouseOver(MouseOverEvent event)
      {
        icon.setStyleName(iconCSSName + " " + CSS_HOVER_NAME);
        menuButton.setStyleName(CSS_HOVER_NAME);  //momentarily override base style
      }
    });
    
    icon.addMouseOutHandler(new MouseOutHandler()
    {
      @Override
      public void onMouseOut(MouseOutEvent event)
      {
        icon.setStyleName(iconCSSName);
        menuButton.setStyleName(CSS_NAME); //back to "base style" so its own hover works
      }
    });
    
    menuButton.setBaseStyle(CSS_NAME);
    menuButton.setWidth(48);
    menuButton.setHeight(16);
    menuButton.setLayoutAlign(Alignment.CENTER);
    menuButton.setLayoutAlign(VerticalAlignment.CENTER);
    menuButton.setAlign(Alignment.CENTER);
    
    menuButton.addMouseOverHandler(new MouseOverHandler()
    {
      @Override
      public void onMouseOver(MouseOverEvent event)
      {
        //menu button handles hover automatically - only apply hover style to custom icon here
        icon.setStyleName(iconCSSName + " " + CSS_HOVER_NAME);
      }
    });
    
    menuButton.addMouseOutHandler(new MouseOutHandler()
    {
      @Override
      public void onMouseOut(MouseOutEvent event)
      {
        //menu button handles hover automatically - only apply hover style to custom icon here
        icon.setStyleName(iconCSSName);
      }
    });
    
    addMember(icon);
    addMember(menuButton);
  }
  
  public void setMenuTitle(String menuTitle)
  {
    menuButton.setTitle(menuTitle);
  }

  public void setMenu(Menu menu)
  {
    menuButton.setMenu(menu);
  }
  
}

Thanks!
-Becky

[beckyo]

Found something Smarter!

menuButton.setState(State.STATE_OVER);

and

menuButton.setState(State.STATE_UP);

So I don't have to muck with the CSS!