User Interface‎ > ‎

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:

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

Comments