Пользовательский интерфейс скриптов Google Apps

Question

Ну, я читал документацию, и я считаю, что я правильно звоню в функции и передавая параметры, но для жизни я не могу заставить этот простой код пользовательского интерфейса работать.

Я генерации пользовательского интерфейса для электронной таблицы, используя следующий код:

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 Builder (который устареет в течение нескольких дней, поэтому я пишу код, так что я могу изменить его позже):

Так что же здесь происходит не так? Если я смогу понять, как добавить один элемент, я могу сделать вывод о остальном, посмотрев документы. Я никогда не был хорош в разработке графического интерфейса!

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

Answer 2

Он выглядит как метод абсолютной панель смещения немного капризен и взять контроль над позиционированием, в моих тестах я был в состоянии положения панелей, которые видны следующим образом:

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

Попробуйте с проб и ошибок, вы можете получить пользовательский интерфейс, который вам нужен, если бы я не перешел на альтернативный макет, verticalPanel немного лучше себя ведет, и, конечно, вы также можете использовать формы.

Еще одна небольшая ошибка заключается в том, что вы перевернули длину и высоту в оборудованииIDLabel.setSize («20px», «125px»);

Позвольте мне знать, если я могу быть более assitance

Answer 3

Конкретная проблема в вашем коде находится следующая строка:

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

Просто измените его до: panel.add(equipmentIDLabel);

..и вы увидите поле (в позиции 0,0).

Как отмечает patt0, вы можете добавить ДРУГИЕ компоненты и использовать позиционирование. Кажется, это ограничение добавления первого поля в absolutePanel.

Разумеется, GUI GUUE теперь не рекомендуется (с декабря 2014 года), но мне было интересно попробовать ваш код и посмотреть, что он по-прежнему в основном выполняется (по состоянию на февраль 2016 года).