Editable Listbox..or editable table?

[dablackgoku]

Hi there,

I am looking for a plug and play widget or tool for Java that would
allow the following:

I would like to display a list of transactions, like a transaction
history for a customer. The info that would be displayed are the
date, description, dollar amount etc.. The tricky part is making the
text editable and use AJAX to send the data back to the db. Is there
something like this out there, or do I need to make one from scratch?

If I need to make one from scratch, any suggestions on where to start?

Thanks

[rakesh wagh]

You are better off writing your own widget for this purpose. I say
this because, you will have to spend some amount of time customizing
the ready made components. What you are trying here is pretty straight
fwd and can be achieved with basic gwt components...

My suggestion:
- Use grid(if you know the number of rows and col) or FlexTable to
display the transactions and various fields related to a transaction.

- Making the fields editable:
Write a composite Widget(extends Composite) that will display label by
default, and convert this label into textbox on click(or whatever
event you want to handle.). Tip: In your Composite Widget, use a label
and textbox. Add them in the DeckPanel. Now do the flip based on user
event. as simple as that. Further, you can make use of CSS to span the
textbox/label content all over the Grid cell. Tip: You can use
deckpanel inside a FocusPanel if you want your grid cell to be
focusable(tab click to navigate)!

- Finally synchronizing the data with the server:
GWT rocks when it comes to RPC. You have to decide your synch policy
first. idea1: Save the content on user event, eg. onLostFocus! idea2:
Provide a save button. idea3: On time out run a loop to see the
changed content and save the delta. Whatever idea you choose, make
sure you have a nice looking Value Object. Then create a RPC
interface, which the UI can invoke to send either a single object or
an arraylist!!! Needless to say, you will have to handle the data on
server.

This is really as simple as it sounds. The only tricky part is to
write a nice Widget that will serve as a grid cell. As I explained,
this widget is not more then few lines of code if designed properly.

best of luck, and let us know how you are doing with it.

Rakesh Wagh

[Sandy McArthur]

Rakesh is spot on. My only suggestion on top of what he says is to may
use GWT-Stuff's ObjectListTable and EventList for the table.

EventList is an observable List implementation so changes to the List
of transactions get sent to any observers such as the ObjectListTable.
A number of EventList implementations are provided to do things like
sorting, filtering, pagination.

ObjectListTable is a table that is backed by a EventList of Objects.
Sorting or filtering of the table happens automatically depending on
which EventList implementation(s) you choose to use. You provide it a
Renderer that tells the table how to create table rows from one
object, in your case a transaction object.

You'll still need to write the edit widgets and logic to send updates
back to the server but it's not so bad.

Note: GWT-Stuff is one of my open source projects. Also, if you do use
it, check back in a week or so for a new release as I have a lot of
bug fixes in SVN and a few more to make this weekend and then I'll cut
a new release.

GWT-Stuff:
http://code.google.com/p/gwt-stuff/

An old ObjectListTable demo:
http://sandy.mcarthur.org/gwt-stuff/org.mcarthur.sandy.gwt.table.olt.TestObjectListTable/TestObjectListTable.html
Try sorting by name and then editing the names and watch the table
re-order automatically. That is the SortedEventList at work. :-)

--
Sandy McArthur

"He who dares not offend cannot be honest."
- Thomas Paine

[dablackgoku]

Thanks for the replies guys. Trying it out right now...however I'm
hitting a brick wall on the FocusListener:

public EditableLabel(String caption) {
// Place the check above the text box using a vertical panel.
VerticalPanel panel = new VerticalPanel();
panel.add(label);
panel.add(textBox);

//FocusListener listener = new FocusListener();

// Set the check box's caption, and check it by default.
label.setText(caption);
label.addClickListener(this);
textBox.addFocusListener(new FocusListener());

label.setVisible(true);
textBox.setVisible(false);

// All composites must call setWidget() in their constructors.
initWidget(panel);

// Give the overall composite a style name.
//setStyleName("example-OptionalCheckBox");
}

I'm getting a "Cannot instantiate the type FocusListener" error on
"new FocusListener()". I tried looking for possible solutions in this
group, and I haven't been able to find anything yet. Any suggestions?

[rakesh wagh]

Following line is unnecesasry:
textBox.addFocusListener(new FocusListener());

Remove it, or provide a more meaningful focuslistener instance.

Rakesh Wagh.

[dablackgoku]

ahh, got it working now. Was missing an implementation..

private static class EditableLabel extends Composite implements
ClickListener, FocusListener
{
}

Thanks

> > group, and I haven't been able to find anything yet. Any suggestions?- Hide quoted text -
>
> - Show quoted text -

[Reinier Zwitserloot]

dablackgoku: Just as a general point of information, it is generally
speaking wiser to do this:

someLabel.addFocusListener(new FocusListener() {
public void onFocus(Widget sender) {
}

public void onFocusLost(Widget sender) {
}
};

instead of letting your main class 'implement' each relevant listener.

There are also ListenerAdapters (such as FocusListenerAdapter) which
are empty abstract class implementations of the interface. The upshot
is simply this: If you don't need a function (e.g. you don't care
about onFocusLost, just onFocus), you don't have to write it. single-
method listeners (like ClickListener) obviously don't have Adapters,
as they wouldn't serve any purpose).

It also means code is where it should go, and you can write one method
for each widget instead of if/elseif/elseif/elseing on 'sender', which
is ugly and error prone.

[rakesh wagh]

+1

On Apr 9, 6:45 pm, "Reinier Zwitserloot" <reini...@gmail.com> wrote:
> dablackgoku: Just as a general point of information, it is generally
> speaking wiser to do this:
>
> someLabel.addFocusListener(new FocusListener() {
> public void onFocus(Widget sender) {
> }
>
> public void onFocusLost(Widget sender) {
> }
>
> };
>
> instead of letting your main class 'implement' each relevant listener.
>
> There are also ListenerAdapters (such as FocusListenerAdapter) which
> are empty abstract class implementations of the interface. The upshot
> is simply this: If you don't need a function (e.g. you don't care
> about onFocusLost, just onFocus), you don't have to write it. single-
> method listeners (like ClickListener) obviously don't have Adapters,
> as they wouldn't serve any purpose).
>
> It also means code is where it should go, and you can write one method
> for each widget instead of if/elseif/elseif/elseing on 'sender', which
> is ugly and error prone.
>
> On Apr 9, 7:53 pm, "dablackgoku" <johnj...@gmail.com> wrote:
>
> > ahh, got it working now. Was missing an implementation..
>
> > private static class EditableLabel extends Composite implements
> > ClickListener, FocusListener
> > {
>
> > }
>
> > Thanks
>