How many callback elements ?

Question

Consider the following simple piece of code

function doGet(){
  var app = UiApp.createApplication();
  var panel = app.createVerticalPanel();
  var handler = app.createServerHandler('click').addCallbackElement(panel);
  var btn = app.createButton('Click', handler);

  panel.add(button);
  app.add(panel);
  return app;
}

There is a single panel and the callback element is the lone panel. However, when you have many panels for different purposes, what is the better approach - adding multiple callback elements or adding all your various panels into a single 'master' panel and add the master panel as the callback element. What are the pros and cons of these approaches ?

Some code examplee below

Option 1:

function doGet(){
  ...
  var panel1 = app.createVerticalPanel();
  var panel2 = app.createVerticalPanel();

  var handler = app.createServerHandler('click')
     .addCallbackElement(panel1) 
     .addCallbackElement(panel2) ; // Notice two callback elements added here 
  var btn = app.createButton('Click', handler);

  ...
  return app;
}

Option 2:

function doGet(){
  ...
  var masterPanel = app.createVerticalPanel();
  var panel1 = app.createVerticalPanel();
  var panel2 = app.createVerticalPanel();

  var handler = app.createServerHandler('click')
     .addCallbackElement(masterPanel) ;

  var btn = app.createButton('Click', handler);

  masterPanel.add(panel1).add(panel2); // Master panel has both panels added to it      
  ...
  return app;
}

Is one option better than the other ?

Answer 1

option 2 is simply easier to write in the script ;-) and let you be sure you don't forget something in a (eventually) long list of callbackElements.

but both work just the same .