如何在Google Apps脚本中使用CheckBox小部件？

Question

I am trying to figure out how to create a function that turns the color of the "productInfoButton" lime green when checked and grey when unchecked? Could someone please help?

function doGet(e) {
  var app = UiApp.createApplication();

  var productInfoButton = app.createButton("Products").setId('productInfoButton');

  var handlerL = app.createServerClickHandler('prodCompleteHandlerL');
  var productCompleteCheckBox = app.createCheckBox().setId("productCompleteCheckBox")
  .setName("productCompleteCheckBox");
  productCompleteCheckBox.addClickHandler(handlerL);
  handlerL.addCallbackElement(productInfoButton);

  app.add(productInfoButton);
  app.add(productCompleteCheckBox);

  return app;
}

function prodCompleteHandlerL(e) {
  var app = UiApp.getActiveApplication();
  app.getElementById('productInfoButton').setStyleAttribute('background', 'lime')
  return app;
}

Answer 1

The state of the checkBox is available in the event info parameter using the name of the widget. In your code it would be :

function prodCompleteHandlerL(e) {
  var app = UiApp.getActiveApplication();
if(e.parameter.productCompleteCheckBox == 'true'){
  app.getElementById('productInfoButton').setStyleAttribute('background', 'lime')
}else{
  app.getElementById('productInfoButton').setStyleAttribute('background', '#dddddd') // is light grey
}
  return app;
}

EDIT : I didn't notice another problem (sorry about that) : the CallbackElement should include the productCompleteCheckBox .... so you should use productCompleteCheckBox as callBackElement in the main function (or use the parent widget that holds this wjidget (if any))

EDIT2 : following your comment : You can find documentation on colors and styles by looking for CSS documentation since it is what is used here... or you can have a look at the options available in the GUI builder to get inspiration and to see what happens in a WYSWYG environment. Everything that can be done with the GUI builder can of course be done using script (in fact script is even more powerful but it's nice to have an idea).

If you want to get a widget transparent simply use .setStyleAttribute('background','transparent')

EDIT 3 : getting the 'default look' for buttons:

Examinig the code from a page I noticed that it uses a .png file in a cache... since I couldn't find a way to use that I copied the file, put it on a public folder, get the url and used it in the style... quite a surprise : it's working. (the url found in the page seems to be specific to the script, I don't know if I could use it in another script)

Maybe someone smarter than me will find a more easy way to achieve the same goal, feel free to comment and/or suggest ;-)

Also : I copied all the parameters, some of them are useless in this use case, I know ^^

  var btn = app.getElementById('btn').setStyleAttributes({ 
  'margin': '5px',
  'padding': '3px 5px',
  'text-decoration': 'none',
  'font-size': 'small',
  'cursor': 'pointer',
  'cursor': 'hand',
  'background': 'url("https://dl.dropbox.com/u/211279/hborder.png") repeat-x 0px -27px',
  'border': '1px outset #ccc'
  })