Google Apps脚本用户界面

Question

好吧，我一直在阅读文档，我相信我正在调用函数并正确传递参数，但对于我的生活，我无法使用这个简单的UI代码。

我正在使用以下代码为电子表格生成UI：

function checkOut() {

  var app = buildUI();
  var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  spreadsheet.show(app);
}

function buildUI() {
  var gui = UiApp.createApplication();
  gui.setTitle("Check-Out/Check-In");
  gui.setStyleAttribute("background", "lavender");

  // Absolute panel for setting specific locations for elements
  var panel = gui.createAbsolutePanel();

  // Equipment ID#s Label
  var equipmentIDLabel = gui.createLabel("Equipment ID#s");
  equipmentIDLabel.setHorizontalAlignment(UiApp.HorizontalAlignment.CENTER);
  equipmentIDLabel.setSize("20px", "125px");
  equipmentIDLabel.setStyleAttributes({background: "SteelBlue", color: "white"});

  // Add all components to panel
  panel.add(equipmentIDLabel, 10, 0);

  gui.add(panel);

  return gui;
}

function getUIdata(eventInfo) {
  // I know how to get the data from each element based on ID
}

它在调用checkOut()时正确生成Absolute Panel，但是EquipmentIDLabel永远不会添加到面板中。 我将代码基于我在GUI构建器中创建的简单设计（将在几天内弃用，这就是为什么我编写代码以便以后可以更改它）：

那么到底出了什么问题呢？ 如果我能弄清楚如何添加一个元素，我可以通过查看文档来推断其余元素。 我从来没有擅长GUI开发！

Answer 1

看起来绝对的面板偏移方法有点反复无常并控制您的定位，在我的测试中，我能够按以下方式定位可见的面板：

  panel.add(equipmentIDLabel);
  panel.add(equipmentIDField,150,0);
  panel.add(otherLabel);
  panel.add(otherField, 150, 20);

通过反复试验尝试，你可能会得到你需要的UI，如果不是我会转移到另一个布局，verticalPanel表现得更好，当然你也可以使用表格。

另一个小错误是你在设备IDLabel.setSize（“20px”，“125px”）中反转长度和高度;

如果我能得到更多的帮助，请告诉我

Answer 2

您可以使用网格作为一个有趣的替代方案......这是一个例子：

// define styles
var labelStyle = {background: "SteelBlue", color: "white",'textAlign':'center','line-height':'20px','vertical-align':'middle','font-family':"Arial, sans-serif",'fontSize':'10pt'};// define a common label style
var fieldStyle = {background: "white", color: "SteelBlue",'font-family':"Courrier, serif",'fontSize':'11pt'};// define a common label style

function checkOut() {
  var app = buildUI();
  var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  spreadsheet.show(app);
}

function buildUI() {
  var gui = UiApp.createApplication();
  gui.setTitle("Check-Out/Check-In");
  gui.setStyleAttribute("background", "lavender");
  var panel = gui.createAbsolutePanel().setStyleAttribute('padding','10px');
  var grid = gui.createGrid(4,2).setWidth('300').setCellPadding(10);//define grid size in number of row & cols
  var equipmentID = ['equipmentIDLabel','equipmentIDLabel1','equipmentIDLabel2','equipmentIDLabel3'];// define labels in an array of strings
  for(var n=0 ;n<equipmentID.length ; n++){;// iterate
    var equipmentIDLabel = gui.createLabel(equipmentID[n]).setWidth('125').setStyleAttributes(labelStyle);
    var equipmentIDField = gui.createTextBox().setText('Enter value here').setName(equipmentID[n]).setSize("125", "20").setStyleAttributes(fieldStyle);
    grid.setWidget(n,0,equipmentIDLabel).setWidget(n,1,equipmentIDField);
  }
  gui.add(panel.add(grid));
  return gui;
}

Answer 3

代码中的具体问题如下：

// Add all components to panel
  panel.add(equipmentIDLabel, 10, 0);

只需将其更改为： panel.add(equipmentIDLabel);

..你会看到该字段（在0,0位置）。

正如patt0观察到的那样，您可以添加OTHER组件并使用定位。 将第一个字段添加到absolutePanel似乎是一个限制。

当然，谷歌脚本gui现在已被弃用（自2014年12月起），但我有兴趣尝试你的代码并看到它仍然基本上执行（截至2016年2月）。