ConfirmDialog: custom button order, or custom factory required?

Hi Sami,

Love the confirm dialog! Is there a way to set the button order for the ok and cancel buttons, or would that require a custom factory class? I was hoping that I could specify the OK button to be on the left of the Cancel button without having to copy the entire factory class, which would make it so I would not pick up future changes in that class when you release updates.

Thanks for any help!

David

Just out of curiosity, in locales such as Sweden, is it common for the Cancel button to be on the left side of a confirmation dialog? I have always seen them on the right side, such as below:

FWIW, I haven’t found any way to accomplish this myself. I tried making a copy of the default factory, but there are too many methods on ConfirmDialog that are not public to implement my own factory to create the dialog with the buttons reversed. Also, ConfirmDialog cannot be subclassed because almost all the methods are final.

In corporate environments, we tend to do them Windows-style (Ok left of Cancel) in Canada, in both French and English. Apple user interface guidelines puts Cancel to the left of Ok. I guess I can guess what type of computer the graphics designer uses :slight_smile:

Making them configurable would indeed be nice.

Hi ConfirmDialog users! :slight_smile:

The idea of the design was not to make the order of buttons changeable, and therefore I just picked some best practices and followed them. However, you are right that it can be changed with a custom factory. Here is an example:

ConfirmDialog.Factory df = new DefaultConfirmDialogFactory() {

    // We change the default order of the buttons
    @Override
    public ConfirmDialog create(String caption, String message,
            String okCaption, String cancelCaption) {
        ConfirmDialog  d = super.create(caption,message,
                okCaption,
                cancelCaption);

        // Change the order of buttons
        Button ok = d.getOkButton();
        HorizontalLayout buttons = (HorizontalLayout) ok.getParent();
        buttons.removeComponent(ok);
        buttons.addComponent(ok,1);
        buttons.setComponentAlignment(ok, Alignment.MIDDLE_RIGHT);

        return d;
    }

};
ConfirmDialog.setFactory(df);

Thanks, Sami! This workaround will take care of the issue. I would think you might want to support a customized button order in the future, since a high % of the computer world is still using Windows, and the best practice on that OS is to always have the Cancel button on the right.

I would also like to see it where the arrow key could be used to move back and forth between the buttons.

Also, I don’t know if this is a general Vaadin issue (6.5.4) or specific to the ConfirmDialog, but when I use single quotes in the dialog message in IE8, they show up as &apos. In Firefox and Chrome they correctly show up as single quotes.

If this is a general Vaadin issue, I’ll be happy to open a ticket in Trac.

This seem to be an issue in Vaadin, and it is reproducible even with the newest Vaadin 6.6.2. Please, make a new ticket for it, and thanks for finding it :smiley:


done
.

Here you go! :slight_smile: The latest versions (1.1.1 and 1.0.6) of the ConfirmDialog now support keyboard navigation between the buttons. You can use right/left arrows or tab and shift-tab to change the focus, enter and space to click the button.


vaadin.com/addon/confirmdialog

(Please make sure you take the right version for your Vaadin library.)

Creating a new factory I consider more or less the way to use the ConfirmDialog. I cannot anyhow know what way people want to configure the buttons or dialog look and feel. However, I think this might be a thing to add to the next version as well as the 3-state (yes,no,cancel) support. Expect some API changes at that point.

Thank you, Sami! The changes are great!

Hi, I created
a sample how to change the button order in your ConfirmDialog
.

Hi - I am using this addon. Including the order change of the yes and no button. its great addon. one this i want to do is i want to add a ListSelect box in the dialog and then have the user click on yes button. is it possible to add a ListSelect box to this Dialog. thank you

I confirm it works https://vaadin.com/forum/thread/531733/536509