Labs‎ > ‎

GAS, Accessing Textbox Value in/out of Events

posted May 22, 2011, 5:57 AM by Sundew Shin
Since (component).getText() is not available *yet*, the basic component referencing often become too convoluted as the component count goes up. So the following use case proposes an unified component referencing method inside and outside of EventHandler.

(cannot see the demo? click here )

Code

var app = UiApp.createApplication();
app.add(app.loadComponent('MyGui'));
function doGet(){return app;};

// class for component reference
var Components = function(app){var self = this;
  this.source = app.getElementById('txtSource').setName('txtSource');                              
  this.target = app.getElementById('txtTarget').setName('txtTarget');
  this.container = app.getElementById('pnlContainer');
  this.button = app.getElementById('btnCopy');
  // add more..
                                  
  // forward click event to the container
  self.button.addClickHandler(app.createServerClickHandler('copy').addCallbackElement(self.container));
  // and more..
};

// outside referencing
var c = new Components(app);
c.target.setText('0');


/* eventhandlers */
function copy(e){
  var app = UiApp.getActiveApplication();
  // inside referencing
  var c2 = new Components(app);
  c2.target.setText(e.parameter.txtSource);
  return app;
};

Update: I revised this code after the Johninio's comment here.

(cannot see the demo? click here )

Code

function doGet(){
  var app = UiApp.createApplication();
  app.add(app.loadComponent('MyGui'));
  // outside (of eventhandler) referencing
  var c = new Components(app);
  c.target.setText('0');
  
  // forward click event to the container
  var handler = app.createServerClickHandler('copy');
  c.button.addClickHandler(handler.addCallbackElement(c.container));
  // and more..
  return app;
};


// class for component reference
var Components = function(app){var self = this;
  this.source = app.getElementById('txtSource').setName('txtSource');                              
  this.target = app.getElementById('txtTarget').setName('txtTarget');
  this.container = app.getElementById('pnlContainer');
  this.button = app.getElementById('btnCopy');
  // add more..
};


/* eventhandlers */
function copy(e){
  var app = UiApp.getActiveApplication();
  // inside referencing
  var c2 = new Components(app);
  c2.target.setText(e.parameter.txtSource);
  return app;
};

Update2: GAS team recently introduced the CacheService class, and now we can simplify our method as below:
(on GUI Builder, 'update' has registered as 'On Change' event handler of txtSource, and 'copy' for 'On Mouse Click' of btnCopy)

(cannot see the demo? click here )

Code

var cache = CacheService.getPrivateCache();

function doGet(e){
  var app = UiApp.createApplication();
  app.add(app.loadComponent('MyGui'));
  // init value  
  var value = 5;
  app.getElementById('txtSource').setText(value);
  cache.put('txtSource', value);
  return app;
};


/* eventhandlers */
function update(e){
  var source = e.parameter.source;
  cache.put(source, e.parameter[source]);  
};

function copy(e){
  var app = UiApp.getActiveApplication();
  // inside referencing
  app.getElementById('txtTarget').setText(cache.get('txtSource'));  
  return app;
};

Comments