ListBox: Drop-Down Images using CSS?

[Kevin]

Hi,

I hope your day's going well.

In my GWT client code, I have a ListBox that has text representing
cars. If you pick "Sedan," it should bring up a picture of a sedan. If
you select "SUV," it should bring up a picture of an SUV.

I know that you can't add images as inputs to a GWT ListBox, however I
know that you can add background-images in a CSS.
<-------------------------------------------------------------------------------
>
Consider my "client code":

ListBox lb = new ListBox(); // you need to instantiate a ListBox so
you can use it

lb.addItem("Sedan"); // you need to populate
lb.addItem("SUV"); // the ListBox options

if ( item.selected == 0 )
lb.setStyleName("sedan");
else
lb.setStyleName("SUV");
<-------------------------------------------------------------------------------
>
<-------------------------------------------------------------------------------
>
Now look at my "HTML code"

<style type = "text/css">

.Sedan { background-image: URL(.../images/Sedan.jpg) }
.SUV{ background-image: URL(.../images/SUV.jpg) }

</style>
<-------------------------------------------------------------------------------
>

After, when I select a ListBox option, only text appears - no image.

My ultimate goal is to have a ListBox with images that when you select
one, its picture becomes the selected, i.e. only visible, image.

Thanks,
Kevin

[Isaac Truett]

Kevin,

There's a DropDownListBox widget in the Incubator that might be more
in line with what you're trying to achieve here. It uses a PushButton
and a PopupPanel to simulate the behavior of a standard <select>
element. The use of widgets gives you a lot more control over
appearance and function.

- Isaac

[Kevin]

Hi Isaac,

Thanks for the tip.

I'm guessing that I just download the JAR for this type of ListBox,
then deploy it to my WEB-INF/lib folder when deploying?

On Oct 2, 7:51 am, "Isaac Truett" <itru...@gmail.com> wrote:
> Kevin,
>
> There's a DropDownListBox widget in the Incubator that might be more
> in line with what you're trying to achieve here. It uses a PushButton
> and a PopupPanel to simulate the behavior of a standard <select>
> element. The use of widgets gives you a lot more control over
> appearance and function.
>
> - Isaac
>
>
>
> On Wed, Oct 1, 2008 at 3:58 PM, Kevin <Kevin.M.Mered...@gmail.com> wrote:
>
> > Hi,
>
> > I hope your day's going well.
>
> > In my GWT client code, I have a ListBox that has text representing
> > cars. If you pick "Sedan," it should bring up a picture of a sedan. If
> > you select "SUV," it should bring up a picture of an SUV.
>
> > I know that you can't add images as inputs to a GWT ListBox, however I
> > know that you can add background-images in a CSS.

> > <--------------------------------------------------------------------------­-----

>
> > Consider my "client code":
>
> > ListBox lb = new ListBox(); // you need to instantiate a ListBox so
> > you can use it
>
> > lb.addItem("Sedan"); // you need to populate
> > lb.addItem("SUV");   // the ListBox options
>
> > if ( item.selected == 0 )
> >    lb.setStyleName("sedan");
> > else
> >    lb.setStyleName("SUV");

> > <--------------------------------------------------------------------------­-----
>
> > <--------------------------------------------------------------------------­-----

>
> > Now look at my "HTML code"
>
> > <style type = "text/css">
>
> > .Sedan { background-image: URL(.../images/Sedan.jpg) }
> > .SUV{ background-image: URL(.../images/SUV.jpg) }
>
> > </style>

> > <--------------------------------------------------------------------------­-----

>
> > After, when I select a ListBox option, only text appears - no image.
>
> > My ultimate goal is to have a ListBox with images that when you select
> > one, its picture becomes the selected, i.e. only visible, image.
>
> > Thanks,

> > Kevin- Hide quoted text -
>
> - Show quoted text -

[Isaac Truett]

Actually, no, you don't have to deploy it. Just add the jar to your classpath when compiling or starting hosted mode. Also be sure to have your module <inherit> the Incubator module that you want to use (com.google.gwt.gen2.selection.Selection in this case).

[Kevin]

Thanks again, Isaac!

By the way, could you please show me where to find example code to use
this custom widget in Incubator?

Thanks,
Kevin

> > > - Show quoted text -- Hide quoted text -

[Isaac Truett]

You can find a complete example in the Incubator project source here.

In brief:

1. Add this to your module definition:

<inherits name='com.google.gwt.gen2.selection.Selection' />

2. Enjoy:

DropDownListBox<String> listBox = new DropDownListBox<String>("Fruit");

// Add an item

listBox.addItem("<i>Apple</i>", "apple");

// Add an item with a tooltip

listBox.addItem("<b>Banana</b>", "banana", "A yellow fruit");

[Kevin]

Hmm. I downloaded both JARs from "http://code.google.com/p/google-web-
toolkit-incubator/downloads/list" and checked the JAR using the
Project View in Eclipse, however I have not found the DropDownListBox.

What should I do?

Thanks,
Kevin

On Oct 6, 12:21 pm, "Isaac Truett" <itru...@gmail.com> wrote:
> You can find a complete example in the Incubator project source

> here<http://code.google.com/p/google-web-toolkit-incubator/source/browse/t...>
> .

[Isaac Truett]

Those downloads get built to provide baselines for compatibility with major GWT releases. Newer features, such as DropDownListBox, are available in SVN. You'll need to have a look at Making GWT Incubator Better for instructions on how to build an Incubator jar from trunk.

[Kevin]

Hi Isaac,

I went to this URL,
http://code.google.com/docreader/#p=google-web-toolkit-incubator&s=google-web-toolkit-incubator&t=MakingIncubatorBetter,
however I could not SVN to either http://google-web-toolkit.googlecode.com/svn/tools/
or http://google-web-toolkit-incubator.googlecode.com/svn/trunk/.

I've tried to SVN multiple times to no avail.

Any idea what I can do?

Thanks,
Kevin

On Oct 6, 5:08 pm, "Isaac Truett" <itru...@gmail.com> wrote:
> Those downloads get built to provide baselines for compatibility with major
> GWT releases. Newer features, such as DropDownListBox, are available in SVN.
> You'll need to have a look at Making GWT Incubator

> Better<http://code.google.com/docreader/#p=google-web-toolkit-incubator&s=go...>

> for
> instructions on how to build an Incubator jar from trunk.
>
>
>
> On Mon, Oct 6, 2008 at 4:52 PM, Kevin <Kevin.M.Mered...@gmail.com> wrote:
>
> > Hmm. I downloaded both JARs from "http://code.google.com/p/google-web-

> > toolkit-incubator/downloads/list<http://code.google.com/p/google-web-toolkit-incubator/downloads/list>"

[Isaac Truett]

What sort of error are you getting? Can you access any SVN repositories outside of your local network? It could be a firewall on your network that is preventing access.

[Kevin]

Hey Isaac!

It looks like it was a firewall error. You were spot on!

Anyway, I'm at home trying to make this JAR so I can ship it to work.
I tried to "import" using Tortoise SVN to "http://google-web-toolkit-
incubator.googlecode.com/svn/trunk/" but it was asking for a username
and password. I tried a few usual default passwords, but it didn't
work.

Then I tried "http://google-web-toolkit-incubator.googlecode.com/svn/
trunk/" in Mozilla Firefox and it worked without a password.

What do I do?

Thanks,
Kevin

On Oct 7, 1:51 pm, "Isaac Truett" <itru...@gmail.com> wrote:
> What sort of error are you getting? Can you access any SVN repositories
> outside of your local network? It could be a firewall on your network that
> is preventing access.
>

> On Tue, Oct 7, 2008 at 1:43 PM, Kevin <Kevin.M.Mered...@gmail.com> wrote:
>
> > Hi Isaac,
>
> > I went to this URL,
>

> >http://code.google.com/docreader/#p=google-web-toolkit-incubator&s=go...
> > ,

> > however I could not SVN to either
> >http://google-web-toolkit.googlecode.com/svn/tools/

> > orhttp://google-web-toolkit-incubator.googlecode.com/svn/trunk/.

[walden]

Kevin,

SVN import is used to commit something from your local filesystem into
the repository. Thank heavens thata didn't work!

You have the TortoiseSVN client? Then use it to do a 'checkout' of
that same URL.

Walden

[Kevin]

Thanks!

I finally checked the project out using "SmartSVN." Once I finished
the check-out, I zipped up the folders, then burned to a CD, unzipping
on my desktop at work.

Now, I'm ready to roll.

I noticed the first instruction, "Build and test with ant." It
mentions that I need to call ant on "ant -Dgwt.home=<path to your gwt
jar> test". Please point out what this <path to my gwt jar> should
be. I thought that my goal was to make a JAR?

Instead of using the cmd line, can I just import the project to
Eclipse? I see that there's a .project file in the /eclipse/
directory.

As always, I really am thankful for your help! :)

> > > > > GWT releases. Newer features, such asDropDownListBox, are available in

> > > > > > > > > > > There's aDropDownListBoxwidget in the Incubator that might