Wicket ListMultipleChoice and ajax - wicket

I have a question about the ListMultipleChoice, is there anyway to get the selected items before the submit by an ajax link for example because i wouldn't refresh my page every time.
Thanks!
// Liste des partenaires de l'offre.
final ListMultipleChoice partenairesSelec =
new ListMultipleChoice("partenairesSelec", new Model((Serializable) partenairesSelected), new PropertyModel(
offre,
"partenaires"), renderer);
// Liste des domaines.
final DropDownChoice makes = new DropDownChoice("domaines", new PropertyModel(this, "selectedMake"), makeChoices) {
#Override
protected CharSequence getDefaultChoice(Object selected) {
return new ArrayList<String>(modelsMap.keySet()).get(0);
}
};
// Liste des partenaires disponibles.
final ListMultipleChoice partenairesChoice =
new ListMultipleChoice("partenaires", new Model((Serializable) partenairesSelection), modelChoices, renderer);
// Action associƩ au changement du domaine.
makes.add(new AjaxFormComponentUpdatingBehavior("onchange") {
#Override
protected void onUpdate(AjaxRequestTarget target) {
target.addComponent(partenairesChoice);
}
});
// Bouton ajouter.
Button ajout = new Button("ajout") {
#Override
public void onSubmit() {
if (partenairesSelection.size() != 0) {
for (Partenaire p : partenairesSelection) {
if (!partenairesSelected.contains(p)) {
offre.getPartenaires().add(p);
modelsMap.get(selectedMake).remove(p);
}
}
offre.setPartenaires(sortPartenaireList(offre.getPartenaires()));
}
}
};
// Bouton supprimer.
Button suppr = new Button("suppr") {
#Override
public void onSubmit() {
List<Partenaire> tmp = new ArrayList<Partenaire>();
if (partenairesSelected.size() != 0) {
for (Partenaire p : partenairesSelected) {
if (!partenairesSelection.contains(p)) {
Long id = p.getPartnerDomainId();
tmp.add(p);
for (String key : modelsMap.keySet()) {
if (modelsMap.get(key).size() > 0 && modelsMap.get(key).get(0).getPartnerDomainId() == id) {
modelsMap.get(key).add(p);
}
}
}
}
for (Partenaire p : tmp) {
offre.getPartenaires().remove(p);
}
offre.setPartenaires(sortPartenaireList(offre.getPartenaires()));
}
}
};

AjaxFormChoiceComponentUpdatingBehavior is the class designed to do just that. Attach it to your component and you'll get AJAX updates wherever the selection changes.

AjaxFormChoiceComponentUpdatingBehavior does not work for ListMultipleChoice!
I also searched for a good working solution and after a while I found a really good tutorial facing exactly a situation with two ListMultipleChoice elements and add/remove buttons to exchange contents between the two multiple select boxes:
http://blog.xebia.com/2008/03/25/wicket-and-list-choice-transfers/
They use AjaxButtons for doing this without submitting the form.

Related

Select Children when selecting Parent checkbox

I am using a Grid where the first column is checkbox. Every row is a folder which can have many other elements to be selected. There could be another folder inside a folder.
Now, when I have to select a element I have to select it one by one. I am not able to understand that how could I make it possible that if I check a folder checkbox, It checks the all selectable elements inside this folder.
Please let me know if more info required.
RemoteSortTreeLoader<BasicModel> loader =
new BaseRemoteSortTreeLoader<BasicModel>(proxy, reader) {
public boolean hasChildren(BasicModel parent) {
//code;
}
};
TreeStore store = new TreeStore(loader);
List<ColumnConfig> columnList = new ArrayList<ColumnConfig>();
CheckBoxSelectionModel checkBoxSelectionModel =
new CheckBoxSelectionModel();
columnList.add(checkBoxSelectionModel.getColumn());
ColumnModel columns = new ColumnModel(columnList);
EditorTreeGrid grid = new EditorTreeGrid<BasicModel>(store,columns);
grid.getSelectionModel().setSelectionMode(SelectionMode.SIMPLE);
grid.getSelectionModel().addListener(Events.BeforeSelect,
new Listener<SelectionEvent<BasicModel>>() {
#Override
public void handleEvent(SelectionEvent<BasicModel> event) {
if (event.getModel() instanceof SDPTimelineCatalogModel) {
event.setCancelled(false);
}
} // handleEvent
}
);
grid.getSelectionModel().addSelectionChangedListener(
new SelectionChangedListener<BasicModel>() {
#Override
public void selectionChanged(SelectionChangedEvent<BasicModel> event) {
logger.info(" Inside addSelectionChangedListener ");
if (event.getSelection().size() == 0) {
disableNext();
} else {
enableNext();
}
} // selectionChanged
}
);
thanks

GWT Cell Table Clicking on a new row gives value of Previously selected row

In GWT 2.6 CellTable, I'm writing a single click event to perform some operation. I can not get the correct Row Index while clicking on the CellTable Row; only a double click event returns the row correctly.
final SingleSelectionModel<PatientDTO> selectionModel =
new SingleSelectionModel<PatientDTO>();
patientsTable.setSelectionModel(selectionModel);
patientsTable.addDomHandler(new ClickHandler()
{
#Override
public void onClick(ClickEvent event)
{
PatientDTO selected = selectionModel.getSelectedObject();
if (selected != null)
{
RootLayoutPanel.get().clear();
RootLayoutPanel.get().add(new PatientPanel(selected));
}
}
}, ClickEvent.getType());
Either use SingleSelectionModel or MultiSelectionModel and add SelectionChangeHandler on it that will be fired when selection is changed in the CellTable
Sample code:
final SingleSelectionModel<Contact> selectionModel = new SingleSelectionModel<Contact>();
//final MultiSelectionModel<Contact> selectionModel = new MultiSelectionModel<Contact>();
selectionModel.addSelectionChangeHandler(new SelectionChangeEvent.Handler() {
#Override
public void onSelectionChange(SelectionChangeEvent event) {
Set<Contact> selected = selectionModel.getSelectedSet();
if (selected != null) {
for (Contact contact : selected) {
System.out.println("You selected: " + contact.name);
}
}
}
});
OR alternatively try with CellPreviewHandler
table.addCellPreviewHandler(new Handler<Contact>() {
#Override
public void onCellPreview(CellPreviewEvent<Contact> event) {
int row = event.getIndex();
int column = event.getColumn();
if ("focus".equals(event.getNativeEvent().getType())) {
//..
}
if ("blur".equals(event.getNativeEvent().getType())) {
//...
}
if ("mousedown".equals(event.getNativeEvent().getType())) {
//..
}
if ("mouseover".equals(event.getNativeEvent().getType())) {
//..
}
}
});

Give the delete button a confirmation prompt

Is there a way to give the user a prompt window popup when clicking the remove field button?
enabling the remove button :
setCanRemoveRecords(true);
When I click the red remove button, I want a confirmation box ask me if I want to delete it, yes or no. What should I use to bring that up?
Should I be adding something into
#Override
public void removeData(Record group)
{
...
}
Here are the options:
Use addCellClickHandler on ListGrid and perform operation based on cell no
Add addRecordClickHandler on ListGridField itself that is used for delete icon
I prefer last option.
Sample code:
final ListGrid countryGrid = new ListGrid();
...
countryGrid.setWarnOnRemoval(true);
countryGrid.setCanRemoveRecords(true);
ListGridField ls = new ListGridField();
countryGrid.setRemoveFieldProperties(ls);
ls.setHoverCustomizer(new HoverCustomizer() {
#Override
public String hoverHTML(Object value, ListGridRecord record, int rowNum, int colNum) {
// System.out.println(colNum);
return "click here to delete this record";
}
});
ls.addRecordClickHandler(new RecordClickHandler() {
#Override
public void onRecordClick(final RecordClickEvent event) {
SC.confirm("Are you sure?", new BooleanCallback() {
#Override
public void execute(Boolean value) {
if (value == null || !value) {
event.cancel();
}
}
});
}
});
/*countryGrid.addCellClickHandler(new CellClickHandler() {
#Override
public void onCellClick(final CellClickEvent event) {
// column number having delete icon
// System.out.println(event.getColNum());
if (event.getColNum() == 3) {
SC.confirm("Are you sure", new BooleanCallback() {
#Override
public void execute(Boolean value) {
if (value == null || !value) {
event.cancel();
}
}
});
}
}
});*/
You can use the following methods:
ListGrid#setWarnOnRemoval for showing the warning message and
ListGrid#setWarnOnRemovalMessage for setting a customized message.
Refer documentation.

GWT Drag and Drop File Upload not working

So I have implemented a very simple drag and drop file upload widget. Basically my widget is a vertical panel with a couple of labels and a button inside. The user can either drag file into vertical panel or click button and browse for file.
My problem is that when I drag a file into the vertical panel it fires the DragLeaveEvent every time I drag the item over the space that the labels or button occupies. I want it to know that the item is in the vertical panel even when it is on top of the label or button. Im sure I am missing something simple. I provide the drag functionality by adding these dom handlers to the vertical panel:
addDomHandler(new DragEnterHandler() {
#Override
public void onDragEnter(DragEnterEvent event) {
System.out.println("drag enter");
highlight(true);
}
}, DragEnterEvent.getType());
addDomHandler(new DragLeaveHandler() {
#Override
public void onDragLeave(DragLeaveEvent event) {
System.out.println("drag leave");
highlight(false);
}
}, DragLeaveEvent.getType());
addDomHandler(new DragOverHandler() {
#Override
public void onDragOver(DragOverEvent event) {
}
}, DragOverEvent.getType());
addDomHandler(new DropHandler() {
#Override
public void onDrop(DropEvent event) {
System.out.println("drop");
// stop default behaviour
event.preventDefault();
event.stopPropagation();
// starts the fetching, reading and callbacks
if (fileUploadHandler != null) {
handleFiles(event.getDataTransfer(), fileUploadHandler);
}
highlight(false);
}
}, DropEvent.getType());
Check that the event target is a child (or grand child) of your panel, or in this case maybe rather whether the event target is exactly your panel's element:
if (verticalPanel.getElement().isOrHasChild(Node.as(event.getNativeEvent().getEventTarget()))) {
// within the panel (possibly on a child)
}
if (verticalPanel.getElement() == Node.as(event.getNativeEvent().getEventTarget())) {
// targetting exactly the panel (e.g. leaving the panel, not one of its children)
}
Through lots of research I have come to the only solution I could find. I set highlight to true in the dragover handler instead of drag enter.
panel.addDomHandler(new DragEnterHandler() {
#Override
public void onDragEnter(DragEnterEvent event) {
}
}, DragEnterEvent.getType());
panel.addDomHandler(new DragLeaveHandler() {
#Override
public void onDragLeave(DragLeaveEvent event) {
highlight(false);
}
}, DragLeaveEvent.getType());
panel.addDomHandler(new DragOverHandler() {
#Override
public void onDragOver(DragOverEvent event) {
highlight(true);
}
}, DragOverEvent.getType());
panel.addDomHandler(new DropHandler() {
#Override
public void onDrop(DropEvent event) {
// stop default behaviour
event.preventDefault();
event.stopPropagation();
// starts the fetching, reading and callbacks
handleFiles(event.getDataTransfer());
highlight(false);
}
}, DropEvent.getType());
I copy pasted your code, but also added a:
RootPanel.get().addHandler(dropHandler, DropEvent.getType());
My drophandler looks like this:
DropHandler dropHandler = new DropHandler() {
#Override
public void onDrop(DropEvent event) {
handleFiles(event.getDataTransfer(), new FileUploadHandler() {
#Override
public TYPE specifyFileType() {
return TYPE.BINARY;
}
#Override
public void handleFileContent(String fileName, String fileContent) {
// do stuff with filename and content
}
#Override
public boolean checkFileName(String fileName) {
return true;
}
});
event.preventDefault();
event.stopPropagation();
}
};
and the file-upload interface:
public interface FileUploadHandler {
static public enum TYPE {
TEXT, BINARY, DATAURL
};
// check the filename and extension and return true if you are happy with
// proceeding
// returnning false will prevent the file from being read
boolean checkFileName(String fileName);
// tell the method to use to read this file
TYPE specifyFileType();
// do your stuff here, eg upload to a server
void handleFileContent(String fileName, String fileContent);
}
and the handle files func: (note you will have to change classpath to the FileUploadHandler-interface)
// native method to make use of the HTML5 file API functionality
private final native void handleFiles(JavaScriptObject dataTransfer, FileUploadHandler fileUploadHandler) /*-{
var files = dataTransfer.files;
var i;
var file;
var reader = new FileReader();
for (i = 0; i < files.length; i++) {
file = files[i];
if (fileUploadHandler.#<classpath_to>.FileUploadHandler::checkFileName(Ljava/lang/String;)(file.name)) {
var type = fileUploadHandler.#<classpath_to>.FileUploadHandler::specifyFileType()();
reader.onload = function(e) {
fileUploadHandler.#<classpath_to>.FileUploadHandler::handleFileContent(Ljava/lang/String;Ljava/lang/String;)(file.name, e.target.result);
}
if (type == "TEXT") {
reader.readAsText(file);
} else if (type == "BINARY") {
reader.readAsBinaryString(file);
} else if (type == "DATAURL") {
reader.readAsDataURL(file);
// not supported
} else if (type == "ARRAYBUFFER") {
reader.readAsArrayBuffer(file);
} else {
}
}
}
}-*/;

GXT: LayoutContainer does not respond to ESC Key or "X" button to close

I have a GXT 2.x application with a Menubar Item that renders a separate LayoutContainer.
Here's the hierarchy
MainUI.java -> MenuBar.java -> ReservationPopUp.java
I have replaced my contents of ReservationPopUp.java with KNOWN working examples of LayoutContainer implementations and they respond to the ESC key and "X" button.
Here's how the MenuItem renders the ReservationPopUp.java
MenuItem mntmReserve = new MenuItem("Reserve");
mntmReserve.addSelectionListener(new SelectionListener<MenuEvent>() {
public void componentSelected(MenuEvent ce) {
RootPanel.get().add(new ReservationPopUp());
}
Here's a slimmed down version of my ReservationPopUp.java
public class ReservationPopUp extends LayoutContainer {
public ReservationPopUp() {
}
#Override
protected void onRender(Element parent, int pos) {
super.onRender(parent, pos);
setSize("1024", "809");
final Window window = new Window();
window.setDraggable(false);
window.setSize(537, 399);
window.setPlain(true);
window.setModal(true);
window.setBlinkModal(true);
window.setHeading("Reserve A Server");
window.setClosable(true);
window.setOnEsc(true);
window.setSize("465", "345");
window.setLayout(new AbsoluteLayout());
LabelField lblfldUsers = new LabelField("Users");
window.add(lblfldUsers, new AbsoluteData(43, 218));
final ComboBox<AsyncUser> userList = new ComboBox<AsyncUser>();
window.add(userList, new AbsoluteData(81, 218));
userList.setEmptyText("Select a User...");
userList.setSize("347px", "24px");
LabelField labelServers = new LabelField("Servers");
window.add(labelServers, new AbsoluteData(32, 6));
final DualListField<AsyncServer> serverList = new DualListField<AsyncServer>();
....
window.add(serverList, new AbsoluteData(81, 6));
serverList.setSize("347px", "206px");
window.addButton(new Button("Cancel", new SelectionListener<ButtonEvent>() {
#Override
public void componentSelected(ButtonEvent ce) {
ReservationPopUp.this.hide();
}
}));
window.addButton(new Button("Reserve", new SelectionListener<ButtonEvent>() {
#Override
public void componentSelected(ButtonEvent ce) {
if (serverList.getToList().getListView().getItemCount() == 0 ) {
MessageBox.alert("Invalid Selection","No Server(s) Selected", null);
} else if ( userList.getValue() == null) {
} else {
// DO some stuff
ReservationPopUp.this.hide();
}
}
}));
window.addWindowListener(new WindowListener() {
#Override
public void windowHide(WindowEvent we) {
ReservationPopUp.this.hide();
}
});
window.setFocusWidget(window.getButtonBar().getItem(0));
add(window);
}
}
Window is a popup, it doesn't need to be (and shouldn't be) added to anything. Extend the Window class instead of the LayoutContainer, and instead of adding the ReservationPopup to the page, just call Window.show().