The Author Online Book Forums are Moving

The Author Online Book Forums will soon redirect to Manning's liveBook and liveVideo. All book forum content will migrate to liveBook's discussion forum and all video forum content will migrate to liveVideo. Log in to liveBook or liveVideo with your Manning credentials to join the discussion!

Thank you for your engagement in the AoF over the years! We look forward to offering you a more enhanced forum experience.

arrival123 (1) [Avatar] Offline
#1
Hi, I'm a novice gwt user with a background in c# and .net framework. GWT is a great open-source product, and have picked up GWT in Action to build upon my coding knowledge. My question is how do you build a menu bar with two components; component one a hyperlink and component two a link to shows menu items.

MenuItems has the getHTML and setHTML methods that makes this rather simple for MenuItems:

From GWT in Action by Robert Hanson and Adam Tacy
package org.gwtbook.client.ui;

import com.google.gwt.user.client.Command;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.MenuItem;
import com.google.gwt.user.client.ui.SimplePanel;
import com.google.gwt.user.client.ui.Widget;

/**
* Class that extends the standard MenuItem widget to display
* some menu text as well as a 2nd component afte the text.
*
*/public class TwoComponentMenuItem extends MenuItem{


/**
* Use a HorizontalPanel to store the two components of the MenuItem
*/
private HorizontalPanel theMenuItem = new HorizontalPanel();

/**
* Sets the 2nd component of the TwoComponentMenuItem by removing the
* initial 2nd item from the HorizontalPanel and then placing the
* provided paramter as the new 2nd item.
*
* Then, we set the MenuItem text to be the HTML representation of the
* HorizontalPanel.
*
* @param newComponent The widget to be placed as the 2nd item in the MenuItem.
*/
public void setSecondComponent(Widget newComponent){
theMenuItem.remove(1);
theMenuItem.add(newComponent);
SimplePanel dummyContainer = new SimplePanel();
dummyContainer.add(theMenuItem);
String test = DOM.getInnerHTML(dummyContainer.getElement());
this.setHTML(test);
}

/**
* Sets the 1st component of the TwoComponentMenuItem by removing the
* initial 1st item from the HorizontalPanel and then placing the
* provided paramter as the text to a new Label Widget as the 1st item.
*
* Then, we set the MenuItem text to be the HTML representation of the
* HorizontalPanel.
*
* @param newComponent The widget to be placed as the 1st item in the MenuItem.
*/
public void setFirstComponent(String newComponent){
theMenuItem.remove(0);
theMenuItem.insert(new Label(newComponent), 0);
SimplePanel dummyContainer = new SimplePanel();
dummyContainer.add(theMenuItem);
String test = DOM.getInnerHTML(dummyContainer.getElement());
this.setHTML(test);
}

/**
* Constructor of the TwoComponentMenuItem - the result is a HTML MenuItem
* that can be treated as such.
*
* @param theText The text part of the menu item.
* @param secondComponent A widget which is placed to the right of the text.
* @param theCommand The GWT Command that will be executed when the menu item is selected.
*/
public TwoComponentMenuItem(String theText,
Widget secondComponent,
Command theCommand){
super(theText,false,theCommand);
theMenuItem.add(new Label(theText+" "));
theMenuItem.add(secondComponent);
setStyleName(theMenuItem.getWidget(0).getElement(), "gwt-MenuItem", true);
setStyleName(theMenuItem.getWidget(1).getElement(), "image", true);
setStyleName(theMenuItem.getElement(),"holder",true);
setSecondComponent(secondComponent);
}
}

Any suggestions would be appreciated.
adam.tacy (269) [Avatar] Offline
#2
Re: Having two components available in MenuBar
Hi,

TwoComponentMenuItem extends MenuItem so you have the getHTML() and setHTML() methods available, but because of the playing around done to get two components working, they will not work properly.

What you would need to do is override them; looking at the MenuItem class itself, setHTML() just sets the inner html of the single component in the normal MenuItem widget; you should be able to do something similar but on the first component, e.g.

public void setHTML(String html){
//Access the first component
Widget first = theMenuItem.get(0);
Element firstElement = first.getElement();
// Set the HTML
DOM.setInnerHTML(firstElement, html);

}

Not 100% sure using a hyperlink will work though as the MenuBar class will grab the mouseclick and determine which Menu Item was clicked on and then execute the Command associated with the MenuItem. I would try with a simple menu item first, if that works, then can't see why the above wouldn't work.

(You might also want to add a new constructor to set the HTML at that point rather than later)

Hope that heps!

//Adam