I'm writing a messaging application in GWT, and have a fairly difficult problem to find a solution for. I'm working with a GWT CellList. In my cell list I'm displaying all the recent contacts a user has had recent communication with. But lets say that a user is writing a message to a person not on that list. I temporarily add them to the recentContacts list, and update the CellList so that it shows..
But then let's say that they end up not sending the message. I need to be able to detect that, and remove them from the list. The obvious place to do that is in the selection change handler. It actually turns out though that within a selection change handler, if can modify the list of data objects that represent the cell list, but when you actually push them to the cell list, I get an index out of bounds error.
I've verified that this is the issue. So basically I'm stuck. The obvious place to check this is when your selecting a different contact to view. I can then check if any messages were sent to this other contact, and if not, get rid of the contact, but I need to somehow not do it in the selectionChangeHandler. Does anyone have any solution/ideas? I tried a mouse up event, but that ends up happening before the selection event takes place.
Thanks for any help in advance :-)
selectionModel.addSelectionChangeHandler(new SelectionChangeEvent.Handler() {
public void onSelectionChange(SelectionChangeEvent event) {
ContactDO selectedContact = selectionModel.getSelectedObject();
//Check if we want to remove a contact from the list
if ( we want to remove a contact in the list that is not the currently selected contact. ) {
//remove contact
recentContacts.remove(contactThatisNotSelected);
//Refresh the contact cell list
contactCellList.setVisibleRange(0, recentContacts.size());
contactCellList.setRowCount(recentContacts.size(), true);
contactCellList.setRowData(0, recentContacts);
}
}
});
The solution that I implemented was just to use a Timer, and then do the work about 100ms later. Not really a fan of this solution. I'm still looking for another.
Related
I am using ag-grid/ag-grid-angular to provide an editable grid of data backed by a database. When a user edits a cell I want to be able to post the update to the backend service and if the request is successful update the grid and if not undo the user's changes and show an error.
I have approached this problem from a couple different angles but have yet to find the solution that meets all my requirements and am also curious about what the best practice would be to implement this kind of functionality.
My first thought was to leverage the cellValueChanged event. With this approach I can see the old and new values and then make a call to my service to update the database. If the request is successful then everything is great and works as expected. However, if the request fails for some reason then I need to be able to undo the user's changes. Since I have access to the old value I can easily do something like event.node.setDataValue(event.column, event.oldValue) to revert the user's changes. However, since I am updating the grid again this actually triggers the cellValueChanged event a second time. I have no way of knowing that this is the result of undoing the user's changes so I unnecessarily make a call to my service again to update the data even though the original request was never successful in updating the data.
I have also tried using a custom cell editor to get in between when the user is finished editing a cell and when the grid is actually updated. However, it appears that there is no way to integrate an async method in any of these classes to be able to wait for a response from the server to decide whether or not to actually apply the user's changes. E.g.
isCancelBeforeStart(): boolean {
this.service.updateData(event.data).subscribe(() => {
return false;
}, error => {
return true;
});
}
does not work because this method is synchronous and I need to be able to wait for a response from my service before deciding whether to cancel the edit or not.
Is there something I am missing or not taking in to account? Or another way to approach this problem to get my intended functionality? I realize this could be handled much easier with dedicated edit/save buttons but I am ideally looking for an interactive grid that is saving the changes to the backend as the user is making changes and providing feedback in cases where something went wrong.
Any help/feedback is greatly appreciated!
I understand what you are trying to do, and I think that the best approach is going to be to use a "valueSetter" function on each of your editable columns.
With a valueSetter, the grid's value will not be directly updated - you will have to update your bound data to have it reflected in the grid.
When the valueSetter is called by the grid at the end of the edit, you'll probably want to record the original value somehow, update your bound data (so that the grid will reflect the change), and then kick off the back-end save, and return immediately from the valueSetter function.
(It's important to return immediately from the valueSetter function to keep the grid responsive. Since the valueSetter call from the grid is synchronous, if you try to wait for the server response, you're going to lock up the grid while you're waiting.)
Then, if the back-end update succeeds, there's nothing to do, and if it fails, you can update your bound data to reflect the original value.
With this method, you won't have the problem of listening for the cellValueChanged event.
The one issue that you might have to deal with is what to do if the user changes the cell value, and then changes it again before the first back-end save returns.
onCellValueChanged: (event) => {
if (event.oldValue === event.newValue) {
return;
}
try {
// apiUpdate(event.data)
}
catch {
event.node.data[event.colDef.Field] = event.oldValue;
event.node.setDataValue(event.column, event.oldValue);
}
}
By changing the value back on node.data first, when setDataValue() triggers the change event again, oldValue and newValue are actually the same now and the function returns, avoiding the rather slow infinite loop.
I think it's because you change the data behind the scenes directly without agGrid noticing with node.data = , then make a change that agGrid recognises and rerenders the cell by calling setDataValue. Thereby tricking agGrid into behaving.
I would suggest a slightly better approach than StangerString, but to credit him the idea came from his approach. Rather than using a test of the oldValue/newValue and allowing the event to be called twice, you can go around the change detection by doing the following.
event.node.data[event.colDef.field] = event.oldValue;
event.api.refreshCells({ rowNodes: [event.node], columns: [event.column.colId] });
What that does is sets the data directly in the data store used by aggrid, then you tell it to refresh that grid. That will prevent the onCellValueChanged event from having to be called again.
(if you arent using colIds you can use the field or pass the whole column, I think any of them work)
The below portion of my code caused recursive call on onEditorExit method. If I remove setData call, then no recursion occur.
What can be the workaround?
myGrid.addEditorExitHandler(new EditorExitHandler() {
public void onEditorExit(EditorExitEvent event) {
GWT.log("Hello");
myGrid.setData(new ListGridRecord());
}
});
Now check the console output -
Console Screenshot
It won't work because each time you call setData() the editor will fire an editorExit event in an infinite loop (not recursively). By the way, calling setData() in the way you are doing will replace all your records in the ListGrid with one new empty record. This seems like a disconcerting user experience.
It looks like you want to create and start editing a new record when you tab out of the last one. In order to do that in a ListGrid, you use:
grid.setListEndEditAction(RowEndEditAction.NEXT);
That's all you need to do in order to get it working.
Given the following code:
TextBox tb = new TextBox();
tb.addValueChangeHandler(new ValueChangeHandler<String>() {
#Override
public void onValueChange(ValueChangeEvent<String> event) {
Window.alert(event.getValue());
}
});
onValueChange will be called if the TextBox loses focus. I am trying to have it called whenever the input value changes. The solutions I have read all involve handling the keyup and paste events such as in this answer. How to build a Facebook-style input box in GWT Hasn't this been addresses in GWT 2.5.1? Is there a way to bind to the native input change method? Another widget or using the UI framework would be acceptable if they have this functionality
The only way in GWT is to bind to the key down/key up and paste events.
Please send a patch to add support for the input event (using addBitlessDomHandler): http://www.gwtproject.org/makinggwtbetter.html, it should be rather easy (add a acase in DOMImpl) and has good chances to make it in (and if sent early enough, would have good chances to ship in GWT 2.6)
The solution is use the right event and that is the input event, so look how to hook on it, there are many ways to do it. Because I work with elements and not with Widgets this the code that I use it:
Element input = Document.get().getElementById("my-input");
DOM.sinkBitlessEvent(input, "input");
DOM.setEventListener(input, event -> GWT.log("Event!"));
You can just use addChangeHandler() and onChange, tb.getValue().
I used the following to detect when the value of a textbox changes. Just bare in mind this only detects if the text box goes from empty to full or full to empty. This was done to try reduce async calls to the server to validate the input
#UiHandler("notes")
#SuppressWarnings("unused")
public void notes(KeyUpEvent event) {
if (!areNotesCaptured && !notes.getText().isEmpty()){
fireLeaveSelectionUpdatedEvent();
areNotesCaptured = true;
} else if (areNotesCaptured && notes.getText().isEmpty()){
fireLeaveSelectionUpdatedEvent();
areNotesCaptured = false;
}
}
I recently tried to follow the Large scale application development and MVP tutorial. The tutorial was great but I am having a hard time with a few things.
If you try and add a contact to the list, the contact is created. If you try and add another contact, you are taken to the edit screen of the last contact you created. No more contacts can be added once you add your first contact. What needs to be changed so you can add more than one contact.
Changes I have made to try and get it to work:
Create a new editContactsView each time the add button is pressed. This brings up a blank edit screen, but the new contact still overwrites the previous addition.
Changed contacts.size() to contacts.size()+1 when determining the ID of the new contact.
Actually, there are a couple of problems (from what I can see):
like Lumpy already mentioned, the new Contact created via EditContactPresenter doesn't get an id assigned (it's null). This is because EditContactPresenter uses the default Contact() constructor which doesn't set the id. There are many possible solutions to this: add setting the id in the default constructor (so that you don't have to keep track of the ids somewhere else in the app), delegate that function to your server (for example, make your DB generate the next available id and send it back) or just add a contact.setId(whatever); in the appropriate place in EditContactsPresenter
AppController.java:134 - this example reuses the view (which is a good idea), but it doesn't clear it if you use it for creating a new Contact. Solution: either disable view reusing (just make a new EditContactsView every time) or add a clear() or sth similar to your Views and make the Presenters call it when they want to create a new entry, instead of editing an exisiting one (in which case, the values from the current entry overwrite the old values, so it's ok).
It's weird that this sample was left with such bugs - although I understand that it's main purpose was to show how MVP and GWT go together, but still :/
When a new contact is added it's id is never set. Because the id field is a string it is stored as "". That is how the first contact is added. Now every time you create a new contact you overwrite the contact with key "". To fix this you need to set the value of the id. I did this by changing the doSave method in EditContactsPresenter.
private void doSave() {
contact.setFirstName(display.getFirstName().getValue());
contact.setLastName(display.getLastName().getValue());
contact.setEmailAddress(display.getEmailAddress().getValue());
if(History.getToken.equals("add")
rpcService.updateContact(contact, new AsyncCallback<Contact>() {
public void onSuccess(Contact result) {
eventBus.fireEvent(new ContactUpdatedEvent(result));
}
public void onFailure(Throwable caught) {
Window.alert("Error updating contact");
}
});
else
rpcService.updateContact(contact, new AsyncCallback<Contact>() {
public void onSuccess(Contact result) {
eventBus.fireEvent(new ContactUpdatedEvent(result));
}
public void onFailure(Throwable caught) {
Window.alert("Error updating contact");
}
});
}
It's been a while since I used GTK+, and the last time I did was in C, not using gtkmm and C++ as I am now. Anyway, I have what I think should be an easy problem to solve:
I have a pop-up menu consisting of a list of radio buttons, and when I click one of them I want some action to occur. The code goes like this:
Gtk::RadioMenuItem::Group group;
for ( size_t i = 1; i < LH_MAX; ++i )
{
Gtk::RadioMenuItem* pItem = new Gtk::RadioMenuItem( group, names[i], names[i] );
pItem->set_name( names[i] );
pItem->signal_activate().connect( sigc::mem_fun(*this, &MyClass::on_item_activated) );
pItem->show();
m_Menu.append( *Gtk::manage(pItem) );
}
The only problem I see is that MyClass::on_item_activated gets called twice when a previously-unselected radio button is chosen from the menu. It's called only once when the already-selected radio button is clicked.
I'm guessing that the first firing is to say "something is no longer activate," and the second is for the new radio button activation. Whether I'm right or wrong, the question is the same: how best can I have my handler only take action once per click? Either I need the handler to get called only once, or I need something to check from inside it to know if the callback is a "duplicate" or not.
You could use sigc::bind to supply the item as a argument to the callback function.
pItem->signal_activate().sigc::bind(sigc::mem_fun(*this,&MyClass::on_item_activated),pItem));
Then you can use item->get_active() in the callback to respond to activations only.
void MyClass::on_item_activated(Gtk::RadioMenuItem* item) {
if (item->get_active()) {
// Do some stuff
}
}
That's what I do too, connect to signal_toggled() and check if get_active() is true.
I don't know exactly what you're trying to accomplish (or what MyClass is and what base classes it inherits from), but connecting to signal_toggled() might be more useful than signal_activate()
/Agree with Johannes. Check if the item is activated when receiving the signal.