Text Area

In this example, I have shown some text areas with different styling. You can see that how a significant no of line of code can be minimized just by making styles in JSON data and applying it through a function with for loop.

Reference Page:

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

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

Example Demo:

Example Code:

//Styles

var _ta1 = {

        'width': '230px',

        'height': '60px'

}

var  _ta2 = {

'width':'230px',

'height':'60px',

'backgroundColor':'#99FFCC',

'border':'1px solid #008800'

}

var  _ta3 = {

'width':'230px',

'height':'60px',

'border':'2px dashed #D1C7AC'

}

var  _ta4 = {

'width': '230px',

'height':'60px',

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

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

}

var  _ta5 = {

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

'width': '230px',

'height': '60px'

}

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,1);

  var textArea1 = app.createTextArea();

  applyCSS(textArea1, _ta1);

  var textArea2 = app.createTextArea();

  applyCSS(textArea2, _ta2);

  var textArea3 = app.createTextArea();

  applyCSS(textArea3, _ta3);

  var textArea4 = app.createTextArea();

  applyCSS(textArea4, _ta4);

  var textArea5 = app.createTextArea();

  applyCSS(textArea5, _ta5);

  grid.setWidget(0,0,textArea1).setWidget(1,0,textArea2).setWidget(2,0,textArea3)

    .setWidget(3,0,textArea4).setWidget(4,0,textArea5);

  panel.add(grid);

  app.add(panel); 

  return app;

}