Javascript 带有用户数据的Google应用程序脚本事件处理程序

我正在使用GoogleApps脚本为Google电子表格创建一些自定义UI

我正在尝试创建一个抽象的“向导”UI，它有一个任意的面板数组，然后在底部有一个“后退”和“下一步”按钮，根据您所处的“页面”更改面板的可见性

我需要某种机制，这样当你从向导的一个页面移动到下一个页面时，我可以调用当前“页面”上的函数，说“我现在要离开你了，请保存你的状态”，类似于下一个“页面”说“设置好你自己，你将变得可见”（类似于onShow（），onHide（））

但是，我正在努力解决如何从事件处理程序中为“后退”和“下一步”按钮执行此操作。就我所见，访问UI元素或将字符串（通过“隐藏”UI元素）传递到事件处理程序中是非常容易的

这是我目前拥有的相关代码：

/*
*********************************************************************
*/
function createWizard(pages) {
  app = UiApp.getActiveApplication();

  var currIdx = app.createHidden("currentPanelIndex", 0).setId("CurrentPanelIndex");
  var minIdx = app.createHidden("minPanelIndex", 0);
  var maxIdx = app.createHidden("maxPanelIndex", pages.length);
  app.add(currIdx);
  app.add(minIdx);
  app.add(maxIdx);

  var buttPanel = app.createHorizontalPanel();
  var backButton = app.createButton("Back"); 
  var nextButton = app.createButton("Next"); 
  buttPanel.add(backButton).add(nextButton);

  var mainPanel = app.createVerticalPanel();

  for (var i = 0; i < pages.length; i++) {
    pages[i].setId("Panel"+i).setVisible(false);
    mainPanel.add(pages[i]);
  }

  mainPanel.add(buttPanel);
  mainPanel.setCellVerticalAlignment(buttPanel, UiApp.VerticalAlignment.BOTTOM);
  mainPanel.setCellHorizontalAlignment(buttPanel, UiApp.HorizontalAlignment.RIGHT);

  app.add(mainPanel);

  // create handler to respond to events
  var clickHandler = app.createServerClickHandler("doBack")
    .addCallbackElement(currIdx)
    .addCallbackElement(minIdx)
    .addCallbackElement(maxIdx);
  backButton.addClickHandler(clickHandler);  
  var clickHandler = app.createServerClickHandler("doNext")
    .addCallbackElement(currIdx)
    .addCallbackElement(minIdx)
    .addCallbackElement(maxIdx);
  nextButton.addClickHandler(clickHandler);

  updateVisibility(currIdx, minIdx, maxIdx)
}

/*
*********************************************************************
*/
function doBack(eventInfo) {
  app = UiApp.getActiveApplication();

  var parameter = eventInfo.parameter;
  var currentPanel = Math.round(Number(parameter.currentPanelIndex));
  var minPanel = Math.round(Number(parameter.minPanelIndex));
  var maxPanel = Math.round(Number(parameter.maxPanelIndex));

  if (currentPanel > minPanel) {
    currentPanel--;
    // Store the new value
    app.getElementById("CurrentPanelIndex").setValue(String(currentPanel));

    updateVisibility(currentPanel);
  }

  return app;
}

/*
*********************************************************************
*/
function doNext(eventInfo) {
  app = UiApp.getActiveApplication();

  var parameter = eventInfo.parameter;
  var currentPanel = parseInt(parameter.currentPanelIndex);
  var minPanel = Math.round(Number(parameter.minPanelIndex));
  var maxPanel = Math.round(Number(parameter.maxPanelIndex));
  Logger.log(currentPanel);

  if (currentPanel < maxPanel) {
    currentPanel++;
    // Store the new value
    app.getElementById("CurrentPanelIndex").setValue(String(currentPanel));

    updateVisibility(currentPanel, minPanel, maxPanel);
  }

  return app;
}

/*
*********************************************************************
*/
function updateVisibility(currentPanel, minPanel, maxPanel)
{
  for (var i = minPanel; i < maxPanel; i++) {
    if (i == currentPanel) {
      app.getElementById("Panel"+i).setVisible(true);
      // I want to do something like panel[i].onShow()
    }
    else {
      app.getElementById("Panel"+i).setVisible(false);
      // I want to do something like panel[i].onShow()
    }
  }  
}

/*
*********************************************************************
*/
函数创建向导（页）{
app=UiApp.getActiveApplication（）；
var currIdx=app.createHidden（“currentPanelIndex”，0）.setId（“currentPanelIndex”）；
var minIdx=app.createHidden（“minPanelIndex”，0）；
var maxIdx=app.createHidden（“maxPanelIndex”，pages.length）；
app.add（currIdx）；
app.add（minIdx）；
app.add（maxIdx）；
var buttPanel=app.createHorizontalPanel（）；
var backButton=app.createButton（“后退”）；
var nextButton=app.createButton（“下一步”）；
buttPanel.add（backButton.add（nextButton））；
var mainPanel=app.createVerticalPanel（）；
对于（变量i=0；iminPanel）{
当前面板--；
//存储新值
app.getElementById（“CurrentPanelIndex”）.setValue（字符串（currentPanel））；
可更新性（currentPanel）；
}
返回应用程序；
}
/*
*********************************************************************
*/
函数doNext（eventInfo）{
app=UiApp.getActiveApplication（）；
var参数=eventInfo.parameter；
var currentPanel=parseInt（参数.currentPanelIndex）；
var minPanel=Math.round（Number（parameter.minPanelIndex））；
var maxPanel=Math.round（Number（parameter.maxPanelIndex））；
Logger.log（currentPanel）；
如果（currentPanel

请注意，我不认为我可以扩展UI元素来拥有“onShow”或“onHide”回调。我也看不出如何将回调作为字符串传递

如果需要的话，我可以发布更多的代码，但是如果我用错误的方法来处理这个问题，我很乐意从头开始，所以我当前的实现细节相对来说并不重要

---

免责声明，我在C++、C、Lua等方面都很好，但在JavaScript中几乎是新手，所以我可能会错过一些非常明显的东西！p> 我觉得你的方法可能太复杂了。。。您在用户界面中创建的所有小部件都可以从一开始就在不同的面板中创建，然后您的处理程序功能只需“播放”它们的可见性。从用户角度看，UI完全不同，但您有一个唯一的callback元素，其中包含所有小部件。 这是我很久以前提出的一个基于相同原理模拟选项卡面板的方法

这4个面板位于一个单独的垂直面板中，因此每个面板都位于完全相同的位置，使人产生内容正在更改的错觉

我没有时间建议完整的演示代码，但请告诉我这种方法是否适合您的需要

---

根据您的评论编辑：

既然你已经有了处理程序来处理两个按钮上的

previous/next

，那么我要做的就是在每个“页面”上复制两个相同的按钮，它们都有相同的两个处理程序，但ID不同。这样布局将保持不变，但您可以知道哪个“页面”使用

e.parameter[source]

启动了处理程序函数。如果你知道这个页面，如果你所有的小部件都有一个连贯的索引，那么你可以采取的具体行动是没有限制的。 例如，从第3页切换到第4页将被识别，因为