GUI Builder 谷歌应用程序中的复制选项卡面板答案

【问题标题】：Replicate tab Panel in GUI Builder google appsGUI Builder 谷歌应用程序中的复制选项卡面板
【发布时间】：2012-08-19 23:36:07
【问题描述】：

我想我已经看到了这个答案，但我不记得在哪里确定了。

我正在尝试使用 GUI Builder 创建一个选项卡式面板界面，但没有看到该选项。我似乎记得的部分是有人有一种方法可以在 GUI Builder 中复制它。我似乎无法在我的大脑、旧的谷歌群组或这里找到这些信息。

有人可以唤醒我的记忆吗？

谢谢...

【问题讨论】：

您能否详细说明您正在寻找的最终功能？有一篇文章被问到如何在同一个 UI 中拥有 2 个 UI，以及如何在它们之间切换“就像标签一样”......这就是你想要的吗？
又一次 Serge，你已经读懂了我的想法 :) 在阅读了你的信息后，我发现了这个 link。你指的是那个吗？
理想情况下，我将从 4 个面板开始。 1-登录 2-从外部系统导入 3-导出到 csv 4-用户选项。
搞笑，我在回答的时候没看到你的链接！！！确实是同一个帖子；-D
嗨，Joe，测试脚本已上线并在 EDIT 中，作为起点...

标签： google-apps-script

【解决方案1】：

也许您所指的帖子是this one ? 无论如何，无论您有多少面板，您都可以在 GUI 中设计它们，一个在另一个之上，或者（更简单地）一个在另一个之下父母的垂直面板并使用客户端处理程序来显示/隐藏您需要的。我有一个例子here with 2 panels in an UI，UI 是用脚本设计的，但这并不重要，看看客户端处理程序看看它是如何工作的。

如果我今晚有空闲时间，我会在 GUI 中为 4 个面板制作一个演示脚本 ;-)。

编辑：这里是a test example（独立）或embedded in a Google site + link to the script（复制编辑）

请注意，在 GUI 构建器中，您必须“玩”每个面板的可见性才能处理它，我使用了一个足够大的主面板来将 2 个面板放在一起，这样您就可以更好地了解面板之间的“和谐”（在我的测试中不是这种情况；-)）

和代码（非常简单的基本示例 4 个面板，每个面板都有一个文本框和一个标签，只是为了测试按钮上的处理程序）：

function doGet() {
  var app = UiApp.createApplication();

  var UI=app.loadComponent('multiUi')

  var panel1 = app.getElementById('panel1')
  var panel2 = app.getElementById('panel2')
  var panel3 = app.getElementById('panel3')
  var panel4 = app.getElementById('panel4')

  var Button1 = app.getElementById('Button1')
  var Button2 = app.getElementById('Button2')
  var Button3 = app.getElementById('Button3')
  var Button4 = app.getElementById('Button4')

  var pHandler1 = app.createClientHandler()
  .forTargets(panel1).setVisible(true).forTargets(panel2,panel3,panel4).setVisible(false)
  Button1.addClickHandler(pHandler1)

  var pHandler2 = app.createClientHandler()
  .forTargets(panel2).setVisible(true).forTargets(panel1,panel3,panel4).setVisible(false)
  Button2.addClickHandler(pHandler2)

  var pHandler3 = app.createClientHandler()
  .forTargets(panel3).setVisible(true).forTargets(panel2,panel1,panel4).setVisible(false)
  Button3.addClickHandler(pHandler3)

  var pHandler4 = app.createClientHandler()
  .forTargets(panel4).setVisible(true).forTargets(panel2,panel3,panel1).setVisible(false)
  Button4.addClickHandler(pHandler4)

  app.add(UI)
  return app;
}

【讨论】：

那是很棒的东西！面板“位于”垂直面板中，当面板可见时如何“上升”到顶部？我的应用程序非常简单，但我希望做得更多。你的帮助（像往常一样）太棒了！
Serge，我以你的例子为例，对它进行了一些调整，作为一些人的 POC。我们的最终目标是在 Google 网站页面中嵌入类似的内容。（这就是我的记忆再次失败的地方）。我在这里查看 [链接] stackoverflow.com/questions/11436448/… 并看到尝试嵌入时可能会出现一些问题。您可以将您的嵌入到 GSite 中吗？或者我是否需要使用超链接（如您上面的帖子）进行交付？
如果你想在 iframe 中插入一个独立的脚本，你必须像 https://sites.google.com/macros/exec?service=key... 这样重新设计 url，从你在浏览器窗口中使用的“普通”url 中获取密钥.我在我的网站上对其进行了测试，它按预期工作。 PS：很高兴听到它对您有用 ;-) 垂直面板确实有助于保持一切到位。
例如on this link，我还用颜色修改了一些UI元素并删除了一些边框......至少现在更有趣了;-)
我不得不感谢你提出这个想法！我将在我现在正在开发的 webbapp 中使用它，这个“标签”技巧真的很好看。如果你觉得giving it a peek...（工作正在进行中，只有一个面板准备好了，其他的仍然是空的，但时间不长;-)

【解决方案2】：

以下代码根据您输入的数组动态生成选项卡：

function doGet() {
    // create application
    var app = UiApp.createApplication();

    // set array
    var aTabs = ['donald','katrijn','dagobert'];                                                         

    // create tab panel
    var pTab = app.createTabPanel();                                                

    // add tabs to panel
    for(var k=0; k<pTabs.length; k++) {
      pTab.add(app.createLabel("This tab is reserved for " +  aTabs[k]), aTabs[k]);
    } 

    // add panel to application 
    app.add(pTab); 

    // set focus to first tab                                                                                     
    pTab.selectTab(0);                                                                                   

    // return to application
    return app;
}

请参阅link 以获取 tabPanel 参考。

将您的脚本发布为网络应用程序，允许您将脚本插入谷歌网站。

【讨论】：