0

DialogBox を使用して「Are You Sure」タイプのダイアログを作成しようとしています。そのため、誰かがボタンをクリックすると、ユーザーがアクションを続行するかどうかを確認するための yes/no ボタンを含むポップアップが表示されます。

私はそのほとんどを理解しましたが、サーバーハンドラーにコールバックせずに表示する方法を理解できません。

クライアント ハンドラで show() コマンドを使用しようとしましたが、うまくいきません。setVisibility() も使用してみましたが、これも機能しませんでした。

明らかなユーザー エクスペリエンス上の理由から、ダイアログ ボックスを表示するためだけに往復する必要はありません。

誰か提案はありますか？

前もってありがとうクリス

4

1 に答える 1

0

これは、まさにこの理由で作成した小さなスニペットです。ただし、サーバーハンドラーを使用します...

function MsgBox(message, title, id, buttons, handler, modal, autoHide){
  this.message=message;
  this.title=title;
  this.id=id;
  this.buttons=buttons;
  this.handler=handler;
  this.modal=(modal)?true:false;//Default is false
  this.autoHide=(autoHide)?new Boolean(autoHide):true;//Default is true

  this.position={};
  this.position.top=100;
  this.position.left=550;
  this.position.width=400;

  this.button={};
  this.button.ok={name:"Ok",id:"OK_BTN"};
  this.button.yes={name:"Yes",id:"YES_BTN"};
  this.button.no={name:"No",id:"NO_BTN"};
  this.button.cancel={name:"Cancel",id:"CANCEL_BTN"};
  this.button.retry={name:"Retry",id:"RETRY_BTN"};

  this.addButton=function(btn){
    try{
      if(this.buttons==undefined){this.buttons=[];}
      if(typeof btn=="string"){btn=this.button[btn.toLowerCase()];}//If a string, convert to the intended object
      if(btn.name==undefined){return this;}//Check if we've actualy got one of the buttons by checking one of it's properties. Exit if not.
      this.buttons.push(btn);
    }catch(err){
      Logger.log(err.message);
    }
    return this;
  };

  this.show=function(e, app){
    if(app==undefined){app=UiApp.getActiveApplication();}
    if(this.buttons==undefined){this.buttons=[this.button.ok];}//The default is one 'Ok' button
    var dialog=app.createDialogBox(true,true).setId(this.id).setText(this.title);
    dialog.setPopupPosition(this.position.left,this.position.top);
    dialog.setGlassEnabled(this.modal);
    dialog.setAutoHideEnabled(this.autoHide);
    var basePanel=app.createVerticalPanel().setWidth(this.position.width+"");
    basePanel.add(app.createLabel(this.message).setWordWrap(true).setStyleAttribute("padding", "10px"));//Add message
    var buttonPanel=app.createHorizontalPanel().setId("ButtonPanel");
    basePanel.add(buttonPanel.setStyleAttribute("display", "block").setStyleAttribute("margin-left", "auto").setStyleAttribute("margin-right", "auto"));
    var btnHandler=app.createServerHandler("msgBox_close").addCallbackElement(buttonPanel);
    for(var i=0;i<this.buttons.length;i++){
      var btn=app.createButton(this.buttons[i].name, btnHandler).setId(this.buttons[i].id).setTag(this.id);
      if(this.handler!=undefined){btn.addClickHandler(this.handler);}
      buttonPanel.add(btn);
    }
    dialog.add(basePanel).show();
    return app;
  };
}

function msgBox_close(e, app){
  if(app==undefined){app=UiApp.getActiveApplication();}
  var dialogId=e.parameter[e.parameter.source+"_tag"];  
  app.getElementById(dialogId).hide();
  return app;
}

これを使用する方法の小さな例を次に示します。

var msgBox=new MsgBox("Testing 123...", "This is a test", "MyMsgBox");
msgBox.show(e, app);

「_tag」パラメーターを使用して独自の ID を参照することで、手間をかけずにクリーンなラウンドトリップを作成できます。

.addButton() 関数を呼び出して標準ボタンを追加できます。例：

msgBox.addButton("yes").addButton("no");

独自のハンドラを渡すことで、独自の関数を呼び出すことができます。例：

function myOwnHandler(e, app){
    if(app==undefined){app=UiApp.getActiveApplication();}
    if(e.parameter.source.indexOf("YES_BTN")!=-1){

    }
    return app;
}
于 2013-09-07T22:46:44.370 に答える