Google UiApp Tutorial

The Google has a wonderful web server scripting application called Apps script. which is not only used for scripting for google products but also can be used to develop stand alone webpages with few limitations. This stand alone web interface is supported by UiApp class. This tutorial will explain about UiApp and its basic controls with a live example script

// Below script contains two functions. one is main function called doGet, which runs by default, other one is user defined function sendback().

//doGet function starts
function doGet() {
//initialize UiApp class
var app = UiApp.createApplication();


//limited HTML
//create HTML using HTML tages and set id or style. note that Anchor tag will not work in this class
var myHTML =  app.createHTML("<center><b>Test Script</b></center>").setStyleAttribute("color", "green").setId('Result');
//add it to UiApp class
app.add(myHTML);

//textArea in UiApp
//create textarea control using textarea class and set id or name, which will help to read and write data
var textAreaA = app.createTextArea().setId('TextArea1').setName('textAreaA');
//you  can design the textarea by calling its id
app.getElementById('TextArea1').setHeight('100').setWidth('450');
//finally add it to UiApp class
app.add(textAreaA);

//textbox in UiApp is more similar like text Area
var textBoxA = app.createTextBox().setId('TextBox1').setName('textBoxA');
app.getElementById('TextBox1').setWidth('300');
app.add(textBoxA);

//Button in UiApp
//Create button with any name
var addButton = app.createButton("Submit").setEnabled(true);
//assign the any user define function and arguments(textAreaA)
var handler = app.createServerClickHandler('sendback').addCallbackElement(textAreaA);
//assign above function to onclick event
addButton.addClickHandler(handler);
//finally add it to UAiApp Class
app.add(addButton);


//label in UiApp
//create label and resize the alignment as well
var labelA = app.createLabel("Developed by macrolayer.blogspot.com").setPixelSize(900,80).setHorizontalAlignment(UiApp.HorizontalAlignment.RIGHT);
//Finally add it to UiApp
app.add(labelA);

//anchor in UiApp
//As I said early, Html doesnot support Anchor tag, this anchor class will help to do so. create and add it to UiApp
var anchor1 = app.createAnchor("View my blog  |", "http://macrolayer.blogspot.com");
app.add(anchor1);



//you can add those classes with good allignment using VerticalPanel or HorizontalPanel
//finally close the function by returning the UiApp class
  return app;
}

//doGet function will execute as userinterface and sendback function will be called once the function is called.(in our example "onclick")

//since we passed argument for this function, the function should have argument e
function sendback(e) {
//get the existing UiApp
  var app = UiApp.getActiveApplication();
//get textAreaA value from parameter e
  var line=e.parameter.textAreaA;


//write your code for other execution using the input value 'line'



//response by new control
//create and add new textArea class and write the output using settext class
var textAreaB= app.createTextArea().setId('TextAreaB').setName('textAreaB').setHeight('100').setWidth('450');;  
app.getElementById('TextAreaB').setText(line);
app.add(textAreaB);
 
//response by existing control
//call the existing control and write the output
 app.getElementById('TextArea1').setText("Your input is " + line);


//finally return the app to display the results
return app;
}




Reference:https://developers.google.com/apps-script/reference/ui/ui-app