User Interface‎ > ‎

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;
}
 
 


Comments