在GUI Builder谷歌应用程序中复制选项卡面板 [英] Replicate tab Panel in GUI Builder google apps

问题描述

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

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

有人可以慢跑吗？

谢谢...

解决方案

也许您提到的帖子是这一个？无论如何，不​​管你有多少面板有，你可以在GUI中设计它们，一个在另一个之上（或者更简单地）在一个父垂直面板中彼此相连，并与客户端处理程序一起显示/隐藏你需要的一个。
我有一个示例这里有2个面板在用户界面中，用户界面是用脚本设计的，但这并不重要，请查看客户端处理程序以了解其工作原理。

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

编辑：这里是测试示例（独立版）或中 rel = nofollow noreferrer>脚本链接（复制并编辑）

请注意，在GUI构建器中，您必须'玩'与visibi我使用了一块足够大的主面板，可以将2块面板放在一起，这样您就可以更好地了解面板之间的和谐（这不属于我的测试范围; - ））

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

 函数doGet（）{
 var app = UiApp .createApplication（）; 
 $ b $ 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 ）
 $ b $ 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，pa nel1，panel4）.setVisible（false）
 Button3.addClickHandler（pHandler3）
 
 var pHandler4 = app.createClientHandler（）
 .forTargets（panel4）.setVisible（true）。 forTargets（panel2，panel3，panel1）.setVisible（false）
 Button4.addClickHandler（pHandler4）
 $ b app.add（UI）
 return app; 
} 
  

I think I've seen this answer, but I can't remember where for certain.

I'm trying to to create a tabbed panel interface using the GUI Builder, but don't see that option. The part I seem to recall is someone having an approach to replicate that in the GUI Builder. I just can't seem to find that information in my brain, the old google groups or here.

Can someone jog my memory?

Thank you...

解决方案

Maybe the post you were referring to was this one ? Anyway, no matter how much panels you have, yo could design them in the GUI, one on top of the other or (more simply) one under each other in a 'parent' vertical panel and play with client handlers to show/hide the one you need. I have an example here with 2 panels in an UI, the UI is designed with script but that is not important, look at the client handlers to see how it works.

If I have some free time tonight I'll make a demo script for 4 panels in GUI ;-).

EDIT : here is a test example (standalone) or embedded in a Google site + link to the script (make a copy to edit)

Note that in the GUI builder you'l have to 'play' with visibility of each panel to work on it, I used a main panel large enough to hold 2 panels together so you can have a better vision of "harmony" between panels (which is not the case in my test;-))

and the code (very simple basic example 4 panels with each of them a textBox & a Label, just to test the handlers on the buttons):

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;
}

这篇关于在GUI Builder谷歌应用程序中复制选项卡面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！