Question

我有一个包含3个面板的堆叠面板。用户单击第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');
}

在这个例子中，我想在启动时显示面板二，点击按钮后我想显示面板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

不幸的是，这已成为enhancement request相当长一段时间（2012年12月）的主题，但我担心谷歌不会做任何事情，因为他们停止了UiApp开发（他们建议切换）到HTMLService）。

您最终可以使用tabPanel，而这个具有所有必要的功能。

Test here

以下代码：

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

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

1 个答案: