listbox that contains widgets instead of just text..

[Jaimon]

hi,

i have need to create a listbox/drop down that create something other
then just plain text,
can some one show me how to do it? or tell me if it is possible to do
it?

regards
Me

[Miroslav Genov]

Hello,
You could use MVP to make things much easier and to make client code to
use only objects instead of primitive widgets such as listbox.

Here is some example that could make things more clear:

// this class should be used by your code
class CustomerListBox {
interface Display {
void addListBoxItem(String item);
void removeListBoxItem(Integer index);
//.....
Integer getSelectedItemIndex();
}

private final Display display;
private final List<Customer> customers = new ArrayList<Customer>();

public CustomerListBox(Display display) {
this.display = display;
}

public void addCustomer(Customer customer) {
display.addListBoxItem(customer.getCustomerName());
customers.add(customer);
}

public Customer getSelectedCustomer() {
return customer.get(display.getSelectedItemIndex());
}

public void go(HasWidgets parent) {
parent.add((Widget)display);
}
}

class CustomerListBoxDisplay extends Composite implements
CustomerListBox.Display {
private ListBox listBox = new ListBox();

public CustomerListBoxDisplay() {
initWidget(listBox);
}

public Integer getSelectedItemIndex() {
return listBox.getSelectedIndex();
}
// and etc

}

CustomerListBox customerListBox = new CustomerListBox(new
CustomerListBoxDisplay());

customerListBox.addCustomer(new Customer("1"));
customerListBox.addCustomer(new Customer("2"));

Customer selectedCustomer = customerListBox.getSelectedCustomer();
and etc

Hope this would help.

Regards,
Miroslav

> --
>
> You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
> To post to this group, send email to google-we...@googlegroups.com.
> To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=.
>
>

[Jaimon]

hi, thanks for the help :-) really learned something.
but my problem is more UI related, i would like to have something that
looks like dropdown and inside there are widgets.
sorry if my question was not clear..

me

[Miroslav Genov]

Ops. My mistake, wrong answer of the right question :).
Sorry about that.

So I think that you could define your own custom widget that is using
several existing widgets that are looking similar to that you wanna
build.
You could extend the Composite widget and to combine other several
widgets together on it. Here is some example that would make the things
more clear (note that code is not compiled and may contains some
mistakes):

public class MyListBox extends Composite {
private Button showListButton = new Button("");
private MyListBoxListItemsView items = new MyListBoxListItemsView();

private HorizontalPanel container = new HorizontalPanel();

public MyListBox(MyObject[] items) {
initWidget(container);
showListButton.setStyleName("myListBoxButton"); // set background
image and etc
this.items.addAll(items);

showListButton.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent e) {
if (!items.showed()) {
items.showList();
} else {
items.hideList(); // second button click have to hide list
items
}

}
})
container.add(items);
container.add(showListButton);
}
}
and so on.

Hope this will help you to solve your issue.

Also You can look at the showcase example:
http://gwt.google.com/samples/Showcase/Showcase.html
You could use Basic Popup for showing and hiding list items to the
user.(i.e in my example:showListButton could show and hide the Basic
Popup widget with rendered items)

Another option would be using of existing js widget and binding them
through JSNI, but I think that it's a little bit harder then using GWT's
widget library.



Regards,
Miroslav

> For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
>
>

[Joe]

Hi Jaimon,

There's a widget i have created long time ago, it's a listbox
functionality,
but where i have control on all css and styles and design of it. As
you know, the normal listbox of gwt depends on your browser look and
feel.

But the idea is simple: You need to have a textbox with image(drop
down arrow).

Then, when you click on the image, a popup will appear below it.

The popup can contain a scrollpanel with a vertical panel.

The vertical panel can conatin any widget you want, a label, an
image,
a textbox, etc ...

Hope this will be helpful, let me know if you need any help.

Good luck,

Joe