Custom Dialog with StretchImgButton?

[fhisg]

After the upgrade to Smart GWT 3.1 we had to change all our Button instances to IButton in order to get consistent button styles across the application*.

The only place this is not easily possibly is with custom dialogs. While using the SC.xxx shortcut methods produces dialogs with stretch-img buttons I cannot create custom dialogs with IButtons. The dialog passed to

SC.ask(title,message, callback, dialog);

has a setButtons() method but it only accepts Buttons and not IButtons.

So, how do I create custom dialogs with stretch-img buttons?


* Reason: ButtonItem is a stretch-img button as is IButton but Button is a CSS3 button. If you have both ButtonItems and buttons outside forms those should be IButtons.

[Isomorphic]

Passing a Button to SC.ask() will still result in IButtons being used in actual rendering. The "Button" instances passed provide configuration information only, not an actual widget.

To create custom Dialogs, see the doc for Dialog. It has an example.

[fhisg]

Passing a Button to SC.ask() will still result in IButtons being used in actual rendering.

No, the following test case with v8.3p_2013-03-06/LGPL proves the opposite:

public class SmartGwt implements EntryPoint {

  public void onModuleLoad() {
    VLayout canvas = new VLayout();
    DynamicForm form = new DynamicForm();
    form.setFields(new ButtonItem("buttonItem", "Button Item"));

    IButton ibutton = new IButton("Button");
    ibutton.addClickHandler(createIButtonClickHandler());

    Button button = new Button("Button");
    button.addClickHandler(createButtonClickHandler());

    canvas.addMember(form);
    canvas.addMember(ibutton);
    canvas.addMember(button);

    canvas.draw();
  }

  private ClickHandler createIButtonClickHandler() {
    return new ClickHandler() {

      @Override
      public void onClick(ClickEvent event) {
        SC.ask("Do you feel lucky today?", new BooleanCallback() {

          @Override
          public void execute(Boolean value) {

          }
        });
      }
    };
  }

  private ClickHandler createButtonClickHandler() {
    return new ClickHandler() {

      @Override
      public void onClick(ClickEvent event) {
        final Dialog dialog = new Dialog();
        Button yesButton = new Button("Yes");
        Button noButton = new Button("No");
        dialog.addButtonClickHandler(new ButtonClickHandler() {

          @Override
          public void onButtonClick(ButtonClickEvent event) {
            if (event.getIndex() == 0) {
              dialog.yesClick();
            } else {
              dialog.noClick();
            }
          }
        });
        dialog.setButtons(yesButton, noButton);
        SC.ask("Custom title", "Custom message", new BooleanCallback() {

          @Override
          public void execute(Boolean confirmation) {

          }
        }, dialog);
        noButton.focus();
      }
    };
  }
}

Clicking the Button (not IButton) produces a custom dialog with CSS buttons. Appart from their lnf their behavior is different, too:

• focus cannot be switched between yes/no using the tab key
• not "clickable" using enter key
• not "clickable" using space key

Note, if I use

Button yesButton = Dialog.YES;
Button noButton = Dialog.NO;

the lnf and the behavior are correct (I suppose that's because of the code in Dialog.replaceButtonsWithDefault(Canvas...)). However, the focus is not on the no-button anymore as requested with noButton.focus();.

Btw, the only reason I create a custom dialog is because I want the focus to be on the no-button instead of the yes-button. If there's a better way pls let me know.

[Isomorphic]

Passing a Button to SC.ask() will still result in IButtons being used in actual rendering.

No, the following test case with v8.3p_2013-03-06/LGPL proves the opposite:

To clarify, passing button *constants* (like Dialog.YES) will still use the skin defaults (as you discovered).

You should not pass custom, hand-created buttons to SC.ask() at all. If you want a Dialog with behaviors that departs significantly from the defaults for SC.ask(), including a change in focus behavior, create a Dialog directly and do not pass it to SC.ask() at all, just draw() it.

[fhisg]

You should not pass custom, hand-created buttons to SC.ask() at all. If you want a Dialog with behaviors that departs significantly from the defaults for SC.ask(), including a change in focus behavior, create a Dialog directly and do not pass it to SC.ask() at all, just draw() it.

Ok, thanks for clarifying this.

Based on this insight my next attempt is this:

final Dialog dialog = new Dialog();
Button yesButton = Dialog.YES;
Button noButton = Dialog.NO;
noButton.focus();
dialog.addButtonClickHandler(new ButtonClickHandler() {

  @Override
  public void onButtonClick(ButtonClickEvent event) {
    if (event.getIndex() == 0) {
      dialog.yesClick();
    } else {
      dialog.noClick();
    }
  }
});
dialog.setButtons(yesButton, noButton);
dialog.setTitle("Custom title");
dialog.setMessage("Custom message");
dialog.setIcon("[SKIN]ask.png");
dialog.setAutoFocus(Boolean.FALSE);
dialog.draw();

Thanks to setAutoFocus(false) the yes-button is no longer focused but neither is the no-button, despite noButton.focus(). I seems irrelevant whether noButton.focus() is called before or after dialog.draw().

However, considering that in your first replay you stated

"Button" instances passed provide configuration information only, not an actual widget

I'm inclined to assume that "dynamic behavior" such as focus() cannot be applied via these configuration buttons at all?

[Isomorphic]

There's a few ways to do it, but one would be to add a DrawHandler to the specific button that should focus, and call focus() then.