How can I change focus between panels in a StackPanel using GAS

Question

I have a stackpanel containing 3 panels. After the user clicks a button on page-1, I want page-2 to become visible. How can I achieve this?

Edit-1

As I thought the question I asked really is a general one, I did not provide code. But Serge insas and Zig Mandell asked for code, so here it is.

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

In this example I would like to show panel Two at startup and after clicking the button I would like to show panel 3.

I tried using focusPanels, but that didn't help

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

Unfortunately this has been the subject of an enhancement request for quite a while (dec 2012) but I'm afraid Google won't do anything about it since they stopped UiApp development (they recommend switching to HTMLService).

You could eventually use tabPanel instead, this one has all the necessary features.

Test here

code below :

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