如何使用GAS在StackPanel中的面板之间更改焦点

Question

我有一个包含3个面板的Stackpanel。 用户单击页面1上的按钮后，我希望页面2变得可见。 我该如何实现？

编辑1

因为我认为我提出的问题确实是一个普遍的问题，所以我没有提供代码。 但是Serge insas和Zig Mandell要求提供代码，就在这里。

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

  var stackPanel = app.createStackPanel().setSize('100%', '100%'); //Create stack panel

  var onClick =  app.createServerHandler('onClick');
  var button = app.createButton('Button on second panel...').setId('btnPageTwo').addClickHandler(onClick);

  //add widgets to each stack panel, and name the stacked panels
  stackPanel.add(app.createLabel('Text on first panel...'), 'One');
  stackPanel.add(button, 'Two');
  stackPanel.add(app.createLabel('Text on third Panel...'), 'Three');

  app.add(stackPanel); //Add the panel to the application
  return app;
}

function onClick(e)
{
   Logger.log('In onClick --> show stackPanel "Three" now');
}  

在此示例中，我想在启动时显示面板2，单击按钮后，我想显示面板3。

我尝试使用focusPanels，但这没有帮助

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

  var stackPanel = app.createStackPanel().setSize('100%', '100%'); //Create stack panel


  // FocusPanels are limited to contain ONE widget
  var focusOne   = app.createFocusPanel().setId('focusOne');
  var focusTwo   = app.createFocusPanel().setId('focusTwo');
  var focusThree = app.createFocusPanel().setId('focusThree');

  // Create panels to overcome the one-widget-limitation of focuspanels
  var ver = app.createVerticalPanel().setId('ver');
  var hor = app.createHorizontalPanel().setId('hor');
  var tab = app.createTabPanel().setId('tab');
  var tabOne = app.createVerticalPanel().setId('tabOne');
  var tabTwo = app.createHorizontalPanel().setId('tabTwo');
  tab.add(tabOne, 'One').add(tabTwo, 'Two');
  focusOne.add(ver);
  focusTwo.add(hor);
  focusThree.add(tab);

  var labOne = app.createLabel('Text on first panel...');
  var labThree = app.createLabel('Text on second tab of third panel...');
  var onClick = app.createServerHandler('onClick');
  var button = app.createButton('Button on second panel...').setId('btnPageTwo').addClickHandler(onClick);

  ver.add(labOne);
  hor.add(button);
  tabTwo.add(labThree);
  tab.selectTab(1); // Select second tab

  //add widgets to each stack panel, and name the stack panel
  stackPanel.add(focusOne, 'stackOne').add(focusTwo, 'stackTwo').add(focusThree, 'stackThree');

  app.add(stackPanel); //Add the panel to the application
  return app;
}

function onClick(e)
{
   Logger.log('In onClick --> show focusPanel "Three" now');
   var app   = UiApp.getActiveApplication();
   var focusThree  = app.getElementById('focusThree');
   focusThree.setFocus(true);
   return app;
}  

Answer 1

不幸的是，这已经是增强请求的主题了一段时间（2012年12月），但是恐怕Google自从他们停止UiApp开发以来就不会做任何事情（他们建议改用HTMLService）。

您最终可以使用tabPanel代替，它具有所有必需的功能。

在这里测试

下面的代码：

function doGet() {
  var app = UiApp.createApplication();
  var tabPanel = app.createTabPanel().setSize('100%', '100%').setId('tabP'); //Create tab panel
  var onClick =  app.createServerHandler('onClick');
  var button = app.createButton('Button on second panel...').setId('btnPageTwo').addClickHandler(onClick);
  //add widgets to each tab panel, and name the tabed panels
  tabPanel.add(app.createLabel('Text on first panel...'), 'One');
  tabPanel.add(button, 'Two');
  tabPanel.add(app.createLabel('Text on third Panel...'), 'Three');
  app.add(tabPanel); //Add the panel to the application
  tabPanel.selectTab(1);  
  return app;
}

function onClick(e){
  var app = UiApp.getActiveApplication();
  var tabP = app.getElementById('tabP').selectTab(2);  
  return app;
}