Gwt Suggest box – Gmail

In this blog we will work on implementating a Suggest box which can work similarly as Gmail “To” field where it takes a multiple string by using a de-limiter “,” .

You can see the “,” element which divides the suggest items.this cannot be done by the normal gwt suggest box . lets see how we can make a suggest box like above,

From the java docs we can see a suggest box contains a constructor with suggest oracle and a TextboxBase as arguments. We will use this constructor in implementing the above thing .

public class SuggestTextBox extends TextBoxBase {

protected SuggestTextBox(Element elem) {

super(elem);

}

public SuggestTextBox() {

this(Document.get().createTextInputElement(), "gwt-TextBox");

}

public SuggestTextBox(Element elem,String styleName) {

super(elem);

if (styleName != null) {

setStyleName(styleName);

}

}

public String getText() {

String totalString=super.getText();

String newString=totalString;

if(totalString!=null && !totalString.trim().equals("")){

int lastComma=totalString.indexOf(",");

if(lastComma>0){

newString=totalString.trim().substring(lastComma+1);

}

}

return newString;

}//close of getText

public void setText(String text) {

String totalString=super.getText();

if(text!=null && text.equals("")){

super.setText(text);

}else {

if(totalString!=null){

int lastComma=totalString.trim().indexOf(",");

if(lastComma>0){

totalString=totalString.trim().substring(0, lastComma);

}else {

totalString="";

}

if (!totalString.trim().endsWith(",")

&& !totalString.trim().equals("")) {

totalString = totalString + ", ";

}

totalString = totalString + text + ", ";

super.setText(totalString);

}

}//close of if loop

}//Close of Set Text

}

Now in the onModuleLoad() , we will write the code as

SuggestionOracle oracle=new SuggestionOracle();

SuggestBox box=new SuggestBox(oracle,new SuggestTextBox());

box.setWidth("300px");

HorizontalPanel hPanel=new HorizontalPanel();

hPanel.add(new Label("Suggest Box"));

hPanel.add(box);

RootPanel.get().add(hPanel);

Read More

Suggest Box Css

In this blog we will look at some of the inner css structure of the Suggest box .as from the java doc we can see many css rules for the suggest box. Now we will have a deep look at them .

Generally a suggest box contains a TextBox and popup panel for displaying the suggestions.generally a menu bar is available in the suggest box for selection of suggestions and displaying of suggestion in a suggest box widget. Generally this suggestion menu is provides more benefits than a normall menu bar . this contains only vertical orientation and no sub menu . this allows us to programatically select the items . this also provides some more methods for getting the index , total count e.t.c.

Generally the Suggest box contains the Textbox with the css class “gwt-suggestbox” and a suggest box panel . the outer most is the “div” element with gwt-SuggestBoxPopup class.the green line is the “div” element.the next 2 lines [ dashes] are 2 more div with noe classes. The next 2 lines are a table and a Tbody with classes assigned to them.

Inside the Tbody , there contains 2 tr [table row ] elements . these 3 tr elements are assosiated with the classes suggestPopupTop, suggestPopupMiddle, and suggestPopupBottom respectively from top.the 3 tr elements contains another 3 tr elements which are assosiated with classes accroding to top class. That is if we need to refer the first Table row element then we can access by using top classs like suggestPopupTopRight . now this inner table row elements contain “div” elements which can be accessed by adding a Inner to their top classes like suggestPopupTopRightInner. The div in the very center has a class of suggestPopupContent in addition to suggestPopupMiddleCenterInner.

.gwt-SuggestBoxPopup .suggestPopupTopLeft {

background: transparent url(tl.gif) no-repeat;

width: 11px; height: 11px;

}

.gwt-SuggestBoxPopup .suggestPopupTopCenter {

background: transparent url(tc.gif) repeat-x;

height: 11px;

}

.gwt-SuggestBoxPopup .suggestPopupTopRight {

background: transparent url(tr.gif) no-repeat;

width: 11px; height: 11px;

}

By applying the above css ,we can a style with rounded corners.

The final inner element contains a “div” inside which is shown by green dashes.inside this div tag we have a table and Tbody elements. Inside this we have table row with a table Data for each item . we have a css class assosiated with the table data containing the item . Two classes are used item is applied to all the suggestions and in addition item-selected is applied to the selected item.

Read More