Styling option text in ListBox

[Eric B]

I'd like to be able to bold part of the text that displays when using
com.google.gwt.user.client.ui.ListBox. However, in searching online,
I've couldn't find anyone who could get this to work consitantly.

So, before I implement my own ListBox using divs, anyone know how to do
this using GWT's ListBox class?

Thanks,
Eric

[Vivian Li]

Hi eric,
  There is no builtin mechanism to do it, but you could extend ListBox and override insertItem to attach a CSS class to the inner OPTION elements. You can then style them with class selectors. You would probaby also want to override onBrowserEvent and setItemSelected/setSelectedIndex so that you could add a CSS class for the items that are "selected" as well and style them separately.

-Vivian

[Eric B]

Vivian,
Thanks for the reply, but, unfortunately, that design doesn't offer
fine enough granularity. I'm trying to mimic the behavior of
http://maps.google.com, where my past successfull searches are matched
against my current input (anywhere within the past searches) and the
matching text is bold. When I try to add bold tags to text in an
option tag, it gets printed.

This option:

<option value="1"><b>123</b> Fake St, Bellevue, WA</option>

displays as:

<b>123</b> Fake St, Bellevue, WA

not with "123" bolded.

So being able to add a CSS class to the entire option tag wouldn't
allow me the control I want. Plus I can get that with any code
modification using the ".gwt-ListBox>option" CSS declaration (or adding
my own class name using ListBox.addStyleName).

I'm in the process of implementing a list box using divs, so I should
be able to get the functionality I desire. However, I would be
interested in how the Google Maps page implements this feature.

Thanks,
Eric

[yi]

I meet the same problem, and I write a ListBox2 class which inherits
from ListBox. It has a insertHTMLItem method, which insert HTML,
instead of text to the element.
One problem I can't solve is that after you select an option, you can't
see the html. For example, if you have an option with HTML
"<b>hello</b> text" and if you select this option, you see "text", but
you don't see "<b>hello</b>". Anyone have idea about this?

Here is the ListBox2 class:

import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.ui.*;
import com.google.gwt.user.client.Element;

public class ListBox2 extends ListBox {

public void insertHTMLItem(String item, int idx) {
Element option = DOM.createElement("OPTION");
DOM.setInnerHTML(option, item);
DOM.insertChild(getElement(), option, idx);
}

public void insertHTMLItem(String item, String value, int
beforeIndex) {
insertHTMLItem(item, beforeIndex);
setValue(beforeIndex, value);
}

public void addHTMLItem(String item) {
insertHTMLItem(item, getItemCount());
}

}

[Eric B]

I believe the <b>help</b> part is "missing" because the browser strips
out all html tags and their content before displaying the content in a
text box.

I'm surprised that the bold tags worked within the option tags. I
tried basically the same thing you did, but it wouldn't work.

A work around would to be override the click action handler and strip
out all html tags. That way the entire text shows up in the text box.

Thanks,
Eric

[yi]

I just notice that it works in FF, but not in IE. :(

Yi

[Eric B]

Yea, that's the conclusion that I came to when I tried extending the
ListBox class. Here's my unfinished code for implementing this
behavior manually. I'm having issues getting the event handlers to
work.

Thanks,
Eric

/**
* Created on Oct 5, 2006
*/
package com.ebessette.maps.biodiesel.client.widgets;

import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.Event;
import com.google.gwt.user.client.ui.ChangeListener;
import com.google.gwt.user.client.ui.ChangeListenerCollection;
import com.google.gwt.user.client.ui.FocusWidget;
import com.google.gwt.user.client.ui.HasName;
import com.google.gwt.user.client.ui.SourcesChangeEvents;

/**
* This class allows HTML to be displayed in a list box.<br>
* <br>
* Here is the CSS class for the entire list and the default
recommendation to
* match a select box.<br>
* <code>.eb-HTMLListBox {
* border: thin inset black;
* }</code><br>
* Here is the CSS declaration to style every item in the list.<br>
* <code>.eb-HTMLListBox > div {
* }</code><br>
* Here is the CSS class for the item that is currently selected and
the default
* recommendation to match a select box.<br>
* <code>eb-HTMLListBox-selected {
* background-color: blue;
* }</code><br>
* @author Eric Bessette
*/
public class HTMLListBox extends FocusWidget implements
SourcesChangeEvents, HasName {

// TODO implement so it will scroll over a set amount of items

/**
* Contains the objects listening for changes on this list box
*/
private ChangeListenerCollection changeListeners;

/**
* The current selected index. Negative if none selected.
*/
private int selectedIndex;

/**
* Creates an empty list box.
*/
public HTMLListBox() {

super( DOM.createDiv() );
sinkEvents( Event.ONCHANGE );
setStyleName( "eb-HTMLListBox" );
}

/*
* (non-Javadoc)
* @see
com.google.gwt.user.client.ui.SourcesChangeEvents#addChangeListener(com.google.gwt.user.client.ui.ChangeListener)
*/
public void addChangeListener( ChangeListener listener ) {

if ( changeListeners == null ) {
changeListeners = new ChangeListenerCollection();
}
changeListeners.add( listener );
}

/**
* Adds an item to the list box.
* @param item the text of the item to be added
*/
public void addItem( String item ) {

insertItem( item, getItemCount() );
}

/**
* Removes all items from the list box.
*/
public void clear() {

this.selectedIndex = -1;

Element h = getElement();
while ( DOM.getChildCount( h ) > 0 ) {
DOM.removeChild( h, DOM.getChild( h, 0 ) );
}
}

/**
* Gets the number of items present in the list box.
* @return the number of items
*/
public int getItemCount() {

return DOM.getChildCount( getElement() );
}

/**
* Gets the html associated with the item at the specified index.
* @param index the index of the item whose html is to be retrieved
* @return the html associated with the item
*/
public String getItemHTML( int index ) {

Element child = DOM.getChild( getElement(), index );
return DOM.getInnerText( child );
}

/**
* Gets the text associated with the item at the specified index.
* @param index the index of the item whose text is to be retrieved
* @return the text associated with the item
*/
public String getItemText( int index ) {

if ( index < 0 || index >= getItemCount() ) {
return "";
}

Element child = DOM.getChild( getElement(), index );
String html = DOM.getInnerText( child );

// Remove all html tags
String text = html.replaceAll( "<[^>]+>", "" );

return text;
}

/*
* (non-Javadoc)
* @see com.google.gwt.user.client.ui.HasName#getName()
*/
public String getName() {

return DOM.getAttribute( getElement(), "name" );
}

/**
* Gets the currently-selected item. If multiple items are selected,
this
* method will return the first selected item ({@link
#isItemSelected(int)}
* can be used to query individual items).
* @return the selected index, or <code>-1</code> if none is selected
*/
public int getSelectedIndex() {

return this.selectedIndex;
}

/**
* Inserts an item into the list box.
* @param item the text of the item to be inserted
* @param idx the index at which to insert it
*/
public void insertItem( String item, int idx ) {

Element option = DOM.createDiv();
DOM.setInnerHTML( option, item );
DOM.sinkEvents( option, Event.MOUSEEVENTS );
DOM.insertChild( getElement(), option, idx );

// DEBUG output
System.out.println( getElement().toString() );
}

/**
* Determines whether an individual list item is selected.
* @param index the index of the item to be tested
* @return <code>true</code> if the item is selected
*/
public boolean isItemSelected( int index ) {

checkIndex( index );

return ( this.selectedIndex == index );
}

/*
* (non-Javadoc)
* @see
com.google.gwt.user.client.ui.FocusWidget#onBrowserEvent(com.google.gwt.user.client.Event)
*/
public void onBrowserEvent( Event event ) {

switch ( DOM.eventGetType( event ) ) {
case Event.ONCHANGE:
if ( changeListeners != null ) {
changeListeners.fireChange( this );
}
break;
case Event.ONCLICK:
// DEBUG output
System.out.println( "onclick" );
break;
case Event.ONFOCUS:
// DEBUG output
System.out.println( "onfocus" );
break;
}
}

/*
* (non-Javadoc)
* @see
com.google.gwt.user.client.ui.SourcesChangeEvents#removeChangeListener(com.google.gwt.user.client.ui.ChangeListener)
*/
public void removeChangeListener( ChangeListener listener ) {

if ( changeListeners != null ) {
changeListeners.remove( listener );
}
}

/**
* Removes the item at the specified index.
* @param idx the index of the item to be removed
*/
public void removeItem( int idx ) {

checkIndex( idx );

Element child = DOM.getChild( getElement(), idx );
DOM.removeChild( getElement(), child );
}

/*
* (non-Javadoc)
* @see
com.google.gwt.user.client.ui.HasName#setName(java.lang.String)
*/
public void setName( String name ) {

DOM.setAttribute( getElement(), "name", name );
}

/**
* Sets the currently selected index.
* @param index the index of the item to be selected
*/
public void setSelectedIndex( int index ) {

checkIndex( index );

if ( this.selectedIndex == index ) {
return;
}

// Unselect
if ( this.selectedIndex >= 0 ) {
Element child = DOM.getChild( getElement(), this.selectedIndex );
DOM.setAttribute( child, "style", "" );
}

this.selectedIndex = index;

Element child = DOM.getChild( getElement(), this.selectedIndex );
DOM.setAttribute( child, "class", "eb-HTMLListBox-selected" );
}

/**
* Make sure the index is valid
* @param index The index
*/
private void checkIndex( int index ) {

Element elem = getElement();
if ( ( index < 0 ) || ( index >= DOM.getChildCount( elem ) ) )
throw new IndexOutOfBoundsException();
}
}

[yi]

This might be a little off topic. But in my case, actually I need a
color selector. Finally I wrote a popup panel to do that.
Just a reminder that there might be some alternative ways to listBox.

Good luck,

Yi

[Eric B]

Paul,
I don't really understand what you're saying here. Can you please
rewrite your post or something? Also, please post to the group not to
me individually.

Thanks,
Eric

On Oct 26, 5:54 am, "Paul" <capt...zo@gmail.com> wrote:
> How did you manage to pull this off? And yep, I do mean the auto-complete.
> They will save your searches and reshow addresses to you later, especially
> if they are labelled.
>
> Thanks,
> Paul Thompson
>
> On Oct 5, 11:22 am, "Eric B" <ebesse...@gmail.com> wrote:
> > Are you talking about the text box auto complete? Yes, I do this, but
> > with GWT, not pure JavaScript. I'm sure there are tons of JavaScript
> > autocomplete implementions out there. However, I hadn't seen that the
> > one on Google Maps bolds the part that matches. That is SWEET! I'm
> > definitely going to implement that in mine.
> >
> > Thanks,
> > Eric