Creating 'dynamic' pages in web apps

Question

I've just started playing around with apps-script and Google web apps. I can construct a basic app in which a 'static' (for want of a better word) page is set up as follows:

function doGet() {
var app = UiApp.createApplication().setTitle('foo');
...set up widgets/etc
return app;
}
...handlers here

As far as I can make out, none of the handlers start running until after doGet returns. And that's my problem. I need an interactive page, where the contents of the page are determined by the first response to a drop-down list. In other words, the user is presented with a drop list, he makes a selection and hits 'submit', and I then have to set up a list box based on that selection.

So, it looks like I can't put any of my logic in doGet, and I essentially have to chain all the logic through my event handlers:

function doGet() {
  ...set up first page and first submit handler
  return app;
}
function firstSubmitHandler(e) {
  .. respond to first submit handler, draw list boxes, set up second list handler
}
function secondSubmitHandler(e) {
  .. respond to second submit handler, yada
}

If this is right, it's crazy. Have I missed something?

Answer 1

Here's a minor extension of the example script you get when you create a new "Script as Web App". All I've done is have the initial click handler add another button to the Ui, which then brings another click handler into scope. You can use the same concept to build a dynamic UI.

// Script-as-app template, extended.
// doGet is exactly as supplied
function doGet() {
  var app = UiApp.createApplication();

  var button = app.createButton('Click Me');
  app.add(button);

  var label = app.createLabel('The button was clicked.')
                 .setId('statusLabel')
                 .setVisible(false);
  app.add(label);

  var handler = app.createServerHandler('myClickHandler');
  handler.addCallbackElement(label);
  button.addClickHandler(handler);

  return app;
}

// myClickHandler now contains a modified copy of doGet.
function myClickHandler(e) {
  //////////// Key concept: The UI app lives on after doGet exits
  var app = UiApp.getActiveApplication();

  var button = app.createButton('Click Me 2');
  app.add(button);

  var label = app.createLabel('The 2 button was clicked.')
                 .setId('statusLabel')
                 .setVisible(false);
  app.add(label);

  var handler = app.createServerHandler('myClickHandler2');
  handler.addCallbackElement(label);
  button.addClickHandler(handler);

  return app;
}

// myClickHandler2 is the original myClickHandler, as supplied
function myClickHandler2(e) {
  var app = UiApp.getActiveApplication();

  var label = app.getElementById('statusLabel');
  label.setVisible(true);

  app.close();
  return app;
}

If that's not enough to get you started, take a look at a clear example of how to use Google UI Builder and Apps script, and the example supplied there by Serge.