Text Box

In this example, I have made some textboxes with different styling.

Hope you like it. You can see how a style Attribute can be applied without writing much code.

Reference Page:

• http://code.google.com/googleapps/appsscript/class_textbox.html

• http://www.cssportal.com/form-elements/text-box.htm

Example Demo:

Example Code:

//textbox style 1

var _tb1 = {

  'width': '230px'

}

//textbox style 2 

var _tb2 = {

  'backgroundColor' : '#99FFCC',

  'border': '1px solid #008000',

  'width': '230px'

}

//textbox Style 3

var _tb3 = {

  'border': '2px dashed #D1C7AC',

  'width': '230px'

}

//textbox Style 4

var _tb4 = {

  'border': '3px double #CCCCCC',

  'width': '230px'

}

//textbox Style 5

var _tb5 = {

  'width': '230px',

  'border': '1px solid #3366FF',

  'borderLeft': '4px solid #3366FF'

}

//Funtion to apply the style on an element

function applyCSS(element,style){

  for (var key in style){

    element.setStyleAttribute(key, style[key]); 

  }

}

function doGet() {

  var app = UiApp.createApplication();

  var panel = app.createVerticalPanel();

  var grid = app.createGrid(5,2);

  var label1 = app.createLabel('Style 1: ').setWidth('50');

  var textBox1 = app.createTextBox();

  //apply CSS on text box1

  applyCSS(textBox1,_tb1);

  var label2 = app.createLabel('Style 2: ');

  var textBox2 = app.createTextBox();

  applyCSS(textBox2,_tb2);

  var label3 = app.createLabel('Style 3: ');

  var textBox3 = app.createTextBox();

  applyCSS(textBox3,_tb3);

  var label4 = app.createLabel('Style 4: ');

  var textBox4 = app.createTextBox();

  applyCSS(textBox4,_tb4);

  var label5 = app.createLabel('Style 5: ');

  var textBox5 = app.createTextBox();

  applyCSS(textBox5,_tb5);

  grid.setWidget(0, 0, label1)

    .setWidget(0, 1, textBox1)

    .setWidget(1, 0, label2)

    .setWidget(1, 1, textBox2)

    .setWidget(2, 0, label3)

    .setWidget(2, 1, textBox3)

    .setWidget(3, 0, label4)

    .setWidget(3, 1, textBox4)

    .setWidget(4, 0, label5)

    .setWidget(4, 1, textBox5);

  panel.add(grid);

  app.add(panel);

  return app;  

}