GUI en Google Apps Script I

ahora crearemos una interfaz gráfica básica utilizando la clase UiApp.
el ejemplo que realizaremos sera un panel que contenga un botón y al dar clic en el botón nos muestre un mensaje.

function gui(){
   var sheet=SpreadsheetApp.getActiveSpreadsheet();

//creamos un objeto de la clase UiApp usando el metodo createApplication()

  //para poder crear nuestra aplicacion y setTitle para ponerle un título ala aplicación  

  var app=UiApp.createApplication().setTitle("GUI").setHeight(150).setWidth(200);
  
// se crea un panel de posicion vertical  
  var panel=app.createVerticalPanel();
  
  // creamos un Label, Texbot y un Button.
   var label=app.createLabel("Ingresar nombre:");
  var texto=app.createTextBox().setName("txtNom");
    var boton=app.createButton("Ver Info");


   // crear un objeto, haga clic en el servidor controlador denominado controlador como parte de la aplicación UiApp llamado aplicación,  al dar clic se llama a  la función "mostrar()"
  var handler=app.createServerClickHandler("mostrar");
  boton.addClickHandler(handler);
  handler.addCallbackElement(panel);
  
// Agregamos los widgets al panel 
  panel.add(label);
  panel.add(texto);
  panel.add(boton);


// agregamos el panel a la aplicación
  app.add(panel);


// abrir la aplicación
  sheet.show(app)
  
}


 El metodo mostrar recibe un parámetro, ese parámetro nos dará acceso a la información que contengan los widgets, en este caso el TextBox.

function mostrar(e){
// capturamos el dato que tiene el TextBox por medio del nombre del textBox.
  var nombre= e.parameter.txtNom;
  Browser.msgBox("Información",nombre+":   Mi Primera GUI",Browser.Buttons.OK);
}


Su GUI lo llaman desde un submenu.
link del ejemplo: https://docs.google.com/spreadsheet/ccc?key=0ApnkyhgdI9tXdEx3WDFPR0dBVTFCc1M5YTcyZjFPYWc#gid=0

eso sería todo, pronto publicare la segunda parte de GUI y también como usar el GUI Builder para generar rápidamente la GUI.