Google Script. Standalone UI.

Продолжаем знакомиться с Google Script. Рассмотрим создание Standalone интерфейса.
В отличие от Spreadsheet Integrated для реализации Standalone UI нет необходимости использовать табличный документ. Достаточно создать скрипт и опубликовать его в качестве сервиса, после чего доступ к приложению можно получить посредством специально сформированного URL.

Заходим на Google Drive: Создать - Еще - Скрипт. Сразу открывается редактор скриптов.
Точкой входа Standalone UI является функция doGet(). Рисуем интерфейс.

// точка входа
function doGet() {
  var app = UiApp.createApplication().setTitle('Standalone UI');

  var hPanel = app.createHorizontalPanel();
  app.add(hPanel);

  var btn1 = app.createButton('Все');
  var btn2 = app.createButton('Свободные');
  var btn3 = app.createButton('Используемые');

  hPanel.add(btn1);
  hPanel.add(btn2);
  hPanel.add(btn3);

  var vPanel = app.createVerticalPanel().setId('vPanel');
  app.add(vPanel); 

  // на сервере   
  btn1.addClickHandler(app.createServerHandler('getAll').addCallbackElement(vPanel));
  btn2.addClickHandler(app.createServerHandler('getFree').addCallbackElement(vPanel));
  btn3.addClickHandler(app.createServerHandler('getUsed').addCallbackElement(vPanel));
  
  // применяем CSS
  applyCSS(btn1,_btn);
  applyCSS(btn2,_btn);
  applyCSS(btn3,_btn);
  applyCSS(hPanel,_hp); 
  applyCSS(vPanel,_vp);

  getAll();

  return app;
}

Разукрасим интерфейс с помощью CSS, для чего добавим файл скрипта: Файл - Создать - Файл скрипта. Назовем файл CSS.gs.

var _btn = {
  "color":"white",
  "font-weight":"bold",
  "border-radius":"10px 10px 10px 10px", 
  "border":"4px solid white",
  "width": "120px",
  "height": "40px",
  "padding":"5px",
  "margin":"5px",
  "background":"4169e1"
}
var _hp = {
  "border-radius":"10px 10px 10px 10px", 
  "padding":"5px",
  "margin":"10px 20px",
  "background":"4169e1"
}
var _vp = {
  "border-radius":"10px 10px 10px 10px",
  "border":"4px solid 4169e1",
  "width": "400px",
  "height": "400px",
  "padding":"5px",
  "margin":"10px 20px",
  "background":"ccccdd"
}

Нарисовать интерфейс можно также используя GUI Builder - WYSIWYG-инструмент для создания интерфейсов: Файл - Создать пользовательский интерфейс.

Для отображения такого интерфейса в функцию doGet() необходимо добавить строку:

app.add(app.loadComponent('MyGui')); // имя сохраненного GUI

Оставим использование GUI Builder в качестве домашнего задания. Интерфейс уже нарисован вручную.

Возвращаемся в Код.gs, после чего добавляем функцию применения стилей CSS.

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

В качестве источника данных используем таблицу со списком IP-адресов, созданную в предыдущей статье.

// извлекаем все IP-адреса
function getAll() {
  var app = UiApp.getActiveApplication();

  // получаем данные
  var ss = SpreadsheetApp.openById('0AkYcK5KeNe1tdFJHY1pxS21KaTlsTUdVeF94RW83dlE').getSheets()[0]; 
  var values = ss.getDataRange().getValues();

  var vPanel = app.getElementById('vPanel');
  vPanel.clear(); //очищаем панель 

  var grid = app.createGrid().setCellPadding(2);

  for (var i = 0; i < values.length; i++)   
    grid.resize(i + 1, 2).setText(i, 0, values[i][0]).setText(i, 1, values[i][1]);

  vPanel.add(grid); 

  return app;
}

//извлекаем свободные IP-адреса
function getFree() {
  var app = UiApp.getActiveApplication();

  // получаем данные
  var ss = SpreadsheetApp.openById('0AkYcK5KeNe1tdFJHY1pxS21KaTlsTUdVeF94RW83dlE').getSheets()[0]; 
  var values = ss.getDataRange().getValues();

  var vPanel = app.getElementById('vPanel');
  vPanel.clear(); //очищаем панель 

  var j = 1;
  var grid = app.createGrid(j,1).setCellPadding(2).setText(0, 0, values[0][0]);

  for (var i = 1; i < values.length; i++){
    if (values[i][1].toString() == '') {   
      j += 1;
      grid.resize(j, 1).setText(j - 1, 0, values[i][0]);     
    }
  }

  vPanel.add(grid); 

  return app;
}

// извлекаем используемые IP-адреса
function getUsed() {
   var app = UiApp.getActiveApplication();

  // получаем данные
  var ss = SpreadsheetApp.openById('0AkYcK5KeNe1tdFJHY1pxS21KaTlsTUdVeF94RW83dlE').getSheets()[0]; 
  var values = ss.getDataRange().getValues();

  var vPanel = app.getElementById('vPanel');
  vPanel.clear(); //очищаем панель 

  var j = 1;
  var grid = app.createGrid(j,2).setCellPadding(2).setText(0, 0, values[0][0]).setText(0, 1, values[0][1]);

  for (var i = 1; i < values.length; i++){
    if (values[i][1].toString() != '') {   
      j += 1;
      grid.resize(j, 2).setText(j - 1, 0, values[i][0]).setText(j - 1, 1, values[i][1]);     
    }
  }

  vPanel.add(grid); 

  return app;
}

Сохраняем версию приложения: Файл - Управление версиями - Сохранить новую - ОК.
Публикуем: Публикация - Развернуть как веб-приложение - Выбираем уровень доступа - "Все, включая анонимных пользователей".
Запускаем с помощью URL...  Easy peasy lemon squeezy :)