如何使SubmitButton的样式与Google App Script UI中的Button样式一致？

Question

我正在通过代码（不使用UI Builder）构建UI表单，我注意到SubmitButton类样式与Button类外观和＆amp;感觉。 你知道如何调整外观和方式吗？感觉Button类或SubmitButton类使它们相似。

我注意到Button有一个调用setStylePrimaryName，setStyleName等...但是文档很模糊 - 说：“这对于调试很有用”!!!

有什么建议吗？

见下面的屏幕截图，第一个按钮是Button类，第二个按钮是SubmitButton。你可以看到它们甚至没有对齐。

Answer 1

您可以使用setStyleAttribute

按照自己的方式设置样式（按钮）

var _btn= {
    "background-color":"none",
    "background":"none",
    "width":"80px",
    "height":"24px",
    "border":"None",
    "font-family":"hobo std",
    "font-size":"0.9em",
    "color":"3f3f3f",
    "opacity":"1",
}
....
....
  var closeb = app.createButton("Submit");
  library.applyCSS(submit,_btn);
....
....

在你的图书馆中你有这个功能（归功于James Fereira）

function applyCSS(element, style){
  for (var key in style){
    element.setStyleAttribute(key, style[key]); 
  }  
}

Answer 2

我通过在同一表单中使用多个提交按钮解决了这种美容困境。我尝试了CSS没有成功;提交＆amp;重置按钮是按钮小部件世界中的两个独特的动物。  Here is some working code 这演示了一个多页面表单，其中每个页面使用三个submitButton's来前后进行多个doPost()'s。

// Muliple page form using Google Apps Script

function doGet(eventInfo)  {return GUI(eventInfo)};
function doPost(eventInfo) {return GUI(eventInfo)};

function GUI (eventInfo) {
  var n = (eventInfo.parameter.state == void(0) ? 0 : parseInt(eventInfo.parameter.state));
  var ui = ((n == 0)? UiApp.createApplication() : UiApp.getActiveApplication());
  var Form;
  switch(n){
    case 0: {
      Form = getForm(eventInfo,n); // Use identical forms for demo purpose only
    } break;
    case 1: {
      Form = getForm(eventInfo,n); // In reality, each form would differ but...
    } break;
    default: {
      Form = getForm(eventInfo,n) // each form must abide by (implement) the hidden state variable
    } break;
  }
  return ui.add(Form);
};

function getForm(eventInfo,n) {
  var ui = UiApp.getActiveApplication();

  // Increment the ID stored in a hidden text-box
  var state = ui.createTextBox().setId('state').setName('state').setValue(1+n).setVisible(true).setEnabled(false);
  var H1 = ui.createHTML("<H1>Form "+n+"</H1>");
  var H2 = ui.createHTML(
    "<h2>"+(eventInfo.parameter.formId==void(0)?"":"Created by submission of form "+eventInfo.parameter.formId)+"</h2>");

  // Add three submit buttons to go forward, backward and to validate the form
  var Next = ui.createSubmitButton("Next").setEnabled(true).setVisible(true);
  var Back = ui.createSubmitButton("Back").setEnabled(n>1).setVisible(true);
  var Validate = ui.createSubmitButton("Validate").setEnabled(n>0).setVisible(true);
  var Buttons = ui.createHorizontalPanel().add(Back).add(Validate).add(Next);
  var Body = ui.createVerticalPanel().add(H1).add(H2).add(state).add(Buttons).add(getParameters(eventInfo));
  var Form = ui.createFormPanel().setId((n>0?'doPost[':'doGet[')+n+']').add(Body);

  // Add client handlers using setText() to adjust state prior to form submission
  // NB: Use of the .setValue(val) and .setValue(val,bool) methods give runtime errors!
  var onClickValidateHandler = ui.createClientHandler().forTargets(state).setText(''+(parseInt(n)));
  var onClickBackHandler = ui.createClientHandler().forTargets(state).setText(''+(parseInt(n)-1));
  Validate.addClickHandler(onClickValidateHandler);
  Back.addClickHandler(onClickBackHandler);

  // Add a client handler executed prior to form submission
  var onFormSubmit = ui.createClientHandler()
  .forTargets(state).setEnabled(true) // Enable so value gets included in post parameters
  .forTargets(Body).setStyleAttribute("backgroundColor","#EEE");    
  Form.addSubmitHandler(onFormSubmit);

  return Form;
}

function getParameters(eventInfo) {
  var ui = UiApp.getActiveApplication();
  var panel = ui.createVerticalPanel().add(ui.createLabel("Parameters: "));
  for( p in eventInfo.parameter)
    panel.add(ui.createLabel(" - " + p + " = " + eventInfo.parameter[p]));
  return panel;
}

代码使用单个“隐藏”状态（此处在TextBox中可视化）和多个SubmitButton以允许用户在表单序列中前后前进，以及验证表单的内容。两个额外的SubmitButton使用ClientHandler进行“重新布线”，只需在表单提交之前修改隐藏状态。

备注

• 请注意在客户端处理程序中使用.setText(value)方法。使用Chrome浏览器，如果我切换到TextBox的{​​{1}}或.setValue(value)方法，我会收到奇怪的运行时错误。

• 我尝试（不成功）使用.setValue(value, fireEvents)而不是隐藏的TextBox来实现此逻辑。这需要使用服务器处理程序，而不是客户端处理程序。行为不稳定，向我建议异步服务器端事件发生在表单提交事件之后。