0

好吧，我一直在阅读文档，并且我相信我正在正确调用函数并传递参数，但是对于我的生活，我无法让这个简单的 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()，但不会将 EquipmentIDLabel 添加到面板中。我将代码基于我在 GUI 构建器中创建的简单设计（几天后将弃用，这就是我编写代码以便以后更改它的原因）：

没什么特别的

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

4

3 回答 3

1

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

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

在此处输入图像描述

于 2013-09-15T10:39:36.000 回答
1

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

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

通过反复试验尝试一下，您可能会获得所需的 UI，如果没有，我会转移到备用布局，verticalPanel 的行为会更好一些，当然您也可以使用表单。

另一个小错误是您在设备IDLabel.setSize("20px", "125px"); 中反转了长度和高度。

让我知道我是否可以提供更多帮助

于 2013-09-15T02:57:19.390 回答
0

您的代码中的具体问题是以下行：

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

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

..您将看到该字段（在位置 0,0）。

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

当然，Google Script gui 现在已弃用（自 2014 年 12 月起），但我有兴趣尝试您的代码，看看它仍然基本上可以执行（截至 2016 年 2 月）。

于 2016-02-07T11:14:24.400 回答