Webitable 2005 -> 2012

[Shaos]

Webitable System Draft (OBSOLETE)

Автор: Александр Шабаршин

01 ноября 2005 - 28 июня 2006

1. Цели

Webitable это система с открытыми исходниками, предназначенная для управления веб-контентом, которая разрешает вам быстро строить веб-сайты и веб-приложения простым кликом мыши (высокий уровень) или с помощью программирования на серверной стороное (низкий уровень) или что-то между. Будучи написаным на Java, система пригодня для любого Java-хостинга. Кроме того система может быть переписана на другой серверный язык для веба например Python, Perl или PHP. Сейчас Webitable - это набор классов, пригодных для любой платформы где есть Java, однако основной целевой платформой для реализации в настоящий момент будет считаться только Linux+Apache+TomCat+MySQL (я уже имею такой хостинг и планирую использовать библиотеку Webitable в качестве основы для нескольких своих онлайн-проектов).

Главной идеей системы Webitable можно считать то, что на сайтах построенных с помощью нее НЕТ АДМИНСКИХ СТРАНИЦ. Почти все изменения могут быть сделаны внутри каждой веб-страницы не выходя из нее. Это должно быть похоже на сервис Personalize на google.com или live.com, но это будет определённо не AJAX т.к. мы не используем и никогда не будем использовать XML. Также вместо ограниченного списка предопределенных блоков для размещения на пользовательской странице этих сервисов, наша система предлагает возможность строить обычные веб-сайты из блоков, полностью определяемых пользователями. Любой пользователь может перестроить или подстроить веб-сайт на движке Webitable. Если пользователь является обычным пользователем или гостем, то все модификации будут сохранены только для него, но если он вебмастер - то у него есть права на редактирование контента для всех. Высокий уровень редактирования контента должен быть проще Wiki и будет более комфортабельным чем форумы или доски объявлений. API для написания модулей Webitable должен дать возможность написания массы дополнительных модулей для нашей платформы на низком уровне.

2. Структура

Webitable имеет 3 уровня:

• Низкий уровень - java классы и Webitable модули, написанные на Java (или в будущем на любом другом объектно-ориентированном серверном языке);
• Средний уровень - платформенно-независимые Webitable скрипты с HTML-кодом внутри (что-то типа SSI или ASP) которые интерпретируются специальными модулями Webitable;
• Высокий уровень - дружественные пользователю онлайн средства редактирования контента, встроенные в каждую веб-старницу.

Серверная сторона написана на Java (сервлеты и дополнительные пакеты например для доступа к базам данных MySQL). Клиентская часть будет написана на HTML+JavaScript и может быть на Java (J2SE) для некоторых специфических модулей как графические редакторы или чаты. Дистрибутив Webitable будет содержать тестовые скрипты, некоторую графику для тестовых проектов и базовые скины.

Со стороны пользователя, каждая веб-страница, построенная на технологии Webitable, будет состоять из набора блоков, упорядоченных в таблицу (с видимой или невидимой рамкой). Каждый блок может быть HTML-кодом (результат работы модуля Webitable) или таблицей, также в свою очередь поделенной на блоки. Если пользователь имеет права что-то делать со страницей или блоком, то он увидит небольшую звездочку в правом-верхнем углу соответствующего блока. По нажатию правой кнопки мыши над звездочкой может раскрытся попап-меню со списком допустимых действий (таких как Edit, Move или Add).

Сожержимое каждого блока является результатом работы некоторого действия определенного модуля Webitable. Каждая Webitable страница имеет список разрешенных модулей, каждый из которых имеет набор действий, генерирующих некоторый HTML-код. Один и тот же самый модуль (точнее одна и та же реализация модуля) может генерировать содержимое разных блоков на одной странице (разными действиями или одним и тем же действием). Это позволяет нам покрыть почти все потребности веб-дизайнеров для построения сайтов, подстраиваемых под пользователя.

3. Классы

Самый важный класс библиотеки Webitable это класс WebContext который дает модулям Webitable доступ к набору подсистем, а именно:

• WebPrint - подсистема печати для формирования HTML-кода как результата работы модуля (сейчас это реализовано как Java-интерфейс);
• WebParam - подсистема для сохранения параметров веб-сессии;
• WebDir - подсистема для доступа к файлам в определенном каталоге;
• WebSql - подсистема для работы с базами данных MySQL.

В будущем мы можем реализовать еще несколько подсистем, например для отправки почты по SMTP или для поддержки cookies.

Каждый Webitable модуль должен реализовывать интерфейс WebModule. Этот интерфейс имеет два метода:

• boolean init(WebContext w) используемый для инициализации модуля путем передачи ему объекта WebContext с набором активных подсистем текущего контекста;
• boolean act(String s) вызываемый каждый раз когда модуль должен сгенерировать HTML-код (конкретное действие определяется строковым аргументом).

Класс WebStrings используется для представления динамических массивов строк.

4. Модули

4.1 WebModuleSet

Этот модуль используется для манипуляций с параметрами сессии (WinParam). Действие этого модуля задается строкой в форме "имя=значение" которе добавляет новую запись в список параметров текущей веб-сессии (или редактирует существующую запись, если параметр с таким именем уже был определен). Модуль не генерирует никакого HTML-кода и пользуется только одной подсистемой WebParam из контекста WebContext.

4.2 WebModuleScript

Этот модуль используется для загрузки и исполнения простых скрипитов для формирования динамического HTML-наполнения. Действие этого модуля задается именем файла со скриптом (в будущем модуль сможет брать скрипты для исполнения не только из файлов, но также и из базы данных). Синтаксис поддерживаемых скриптов прост:

• \MODULE объект класс создает объект класса classname, который должен реализовывать интерфейс WebModule;
• \ACT объект строка инициирует действие, определяемой параметром строка для модуля объект;
• \VAL строка печатет значение параметра сессии с именем строка;
• \IF выражение начинает IF-блок в скрипте по результатам выполнения логического выражения (см.далее);
• \ENDIF заканчивает IF-блок скрипта;
• \ELSE определяет ELSE-часть IF-блока скрипта (между \IF и \ENDIF);
• \ELIF выражение определяет ELSE-IF-часть IF-блока скрипта (между \IF и \ENDIF).

В командах \IF и \ELIF мы используем логическое выражение в форме имяпеременной чтобы проверить существование переменной с таким именем в списке параметров сессии или в форме имяпеременной=значениепеременной чтобы проверить что переменная с таким именем имеет указанное значение (пока не реализовано).

[Shaos]

Это был мой первый проект на SourceForge (незаконченный):

http://sourceforge.net/projects/webitable

Вот думаю не возродить ли его, переписав серверную часть с джавы на перл...

[Shaos]

Это был мой первый проект на SourceForge (незаконченный)
Вот думаю не возродить ли его, переписав серверную часть с джавы на перл...

Сейчас мне это видится следующим образом - каждая веб-страница в системе представляет из себя таблицу, на ячейках которой можно двойным кликом мыши вызвать Webitable Main Menu (WMM) со списком действий - редактировать ячейку, добавить строку, добавить столбец и т.д.

[Shaos]

Если по началу Webitable был более серверным решением, то теперь я хочу на клиента фреймворк растянуть - причём так, чтобы можно было и без сервера пользоваться. На клиенте у нас будет один JavaScript-файл webitable.js, имеющий в себе некоторый набор функций и классов, упрощающих программирование динамических веб-страниц. В первую очередь заменяем самую распостранённую конструкцию, применяемую в веб-программировании - document.getElementById(...) на $(...):

Code: Select all

function $(s) {
 return document.getElementById(s);
}

Функцию $ я подсмотрел во фреймворке Prototype, там правда допускается передавать несколько аргументов - при этом оно возвращает массив элементов, но я честно говоря не вижу в этом особого смысла. Также там есть функция $F, возвращающая значение value элемента формы по идентификатору элемента - я хочу сделать аналогичную вещь, но расширить её также на innerHTML, причём с возможность как чтения, так и записи:

Code: Select all

function $_(s) {
  var e = $(s);
  var v = arguments[1];
  if(v==null) {
    if(e.value==null) {
      return e.innerHTML;
    } else {
      return e.value;
    }
  } else {
    if(e.value==null) {
      e.innerHTML = v;
    } else {
      e.value = v;
    }
  }
}

Нетрудно видеть, что вышеописанная функция $_ при наличии лишь одного аргумента возвращает содержимое поля value, если оно есть, и содержимое поля innerHTML, если value нет, а при наличии второго аргумента производит запись в соответствующее поле (value или innerHTML). Оба аргумента должны быть строковыми.

[Shaos]

Ещё одна полезная штука - так называемый AJAX (динамическая подгрузка контента без перезагрузки всей страницы) - благо сейчас его инициализация единообразна для всех современных браузеров (5 лет назад было как минимум 3 разных способа для разных браузеров):

Code: Select all

function $__(s,u) {
  var r = null;
  var p = arguments[2];
  try {
    r = new XMLHttpRequest();
  } catch(e) {
    r = null;
  }
  if(r!=null)
  {
    r.onreadystatechange = function() {
      if(r.readyState==4 && r.status==200) {
        $_(s,r.responseText);
      }
    }
    if(p==null) {
      r.open("GET",u,true);
      r.send(null);
    } else {
      r.open("POST",u,true);
      r.send(p);
    }
  }
}

Как видим тут при вызове функции $__ в элемент документа с идентификатором s заливается ответ HTTP-запроса по пути u (в пределах текущего сервера), причем если при вызове присутствует третий аргумент, то HTTP-запрос делается методом POST (это когда данные не в урл засовываются, а передаются в теле запроса).

[Shaos]

В первую очередь заменяем самую распостранённую конструкцию, применяемую в веб-программировании - document.getElementById(...) на $(...):

Code: Select all

function $(s) {
 return document.getElementById(s);
}

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

Функция $, подменяющая собой getElementById также имеется в JS-фреймворке MooTools. Также в jQuery и MooTools есть средства выдачи списка элементов по тегам с фильтрацией (производные от getElementsByTagName) - я не вижу в этом большого смысла - с моей точки зрения если ты хочешь манипулировать некими объектами веб-страницы, то присваивай этим объектам идентификаторы и манипулируй. Отсюда мысль - добавить новую функцию $$, которая будет возвращать список элементов по неполному наименованию идентификатора (например по маске)! Получается, что кроме физической иерархии элементов страницы мы можем ввести логическую иерархию - которая будет строиться по идентификаторам, к примеру точка в имени идентификатора может разделять классы и подклассы, например - "formA.button.1" и "formA.button.2" могут быть идентификаторами двух кнопок в пределах формы "formA" и по запросу $$('formA.*') будет возвращён список из двух элементов веб страницы, соответствующих кнопкам формы. Написание такой функции дело нетривиальное - т.к. чтобы исключить полный перебор элементов веб-страницы нам придётся кешировать списки элементов, которые уже запрашивались, чтобы быстрее можно было возвращать повторные запросы...

[Shaos]

Отсюда мысль - добавить новую функцию $$, которая будет возвращать список элементов по неполному наименованию идентификатора (например по маске)! Получается, что кроме физической иерархии элементов страницы мы можем ввести логическую иерархию - которая будет строиться по идентификаторам, к примеру точка в имени идентификатора может разделять классы и подклассы, например - "formA.button.1" и "formA.button.2" могут быть идентификаторами двух кнопок в пределах формы "formA" и по запросу $$('formA.*') будет возвращён список из двух элементов веб страницы, соответствующих кнопкам формы. Написание такой функции дело нетривиальное - т.к. чтобы исключить полный перебор элементов веб-страницы нам придётся кешировать списки элементов, которые уже запрашивались, чтобы быстрее можно было возвращать повторные запросы...

Вот что получилось:

Code: Select all

function $map(a,f) {
  var r = [];
  var n = a.length;
  for(var i=0;i<n;i++) {
    r.push(f(a[i]));
  }
  return r;
}

function $reduce(a,b,f) {
  var n = a.length;
  for(var i=0;i<n;i++) {
    b = f(b,a[i]);
  }
  return b;
}

function $filter(a,f) {
  var r = [];
  var n = a.length;
  for(var i=0;i<n;i++) {
    if(f(a[i])) {
      r.push(a[i]);
    }
  }
  return r;
}

var $W = {
  cache: {}
};

$W.clear = function() {
  this.cache = {};
};

$W.iterate = function(node) {
  var base = this.cache['*'];
  $map(node.childNodes,
       function(e) {
         if(e.id!=null && e.id!='') {
           base.push(e);
         }
         $W.iterate(e);
         return null;
       }
      );
}

$W.select = function(s) {
  if(this.cache['*']==null) {
    this.cache['*'] = [];
    this.iterate(document.body);
  }
  if(this.cache[s]==null) {
    var w = s.replace(/\./g,"\\.").replace(/\*/g,".*");
    this.cache[s] = $filter(this.cache['*'],
                            function(e) {
                              return e.id.search(w)==0;
                            }
                           );
  }
  return this.cache[s];
};

function $$(s) {
  return $W.select(s);
}

Функция $$ выбирает элементы по маске, в которой * обозначает любое ненулевое кол-во символов - причём идентификаторы сравниваются с начала строк до того момента пока строка маски не кончится, т.е. к примеру "1.2.3" и "*.2" совпадут. Кроме того тут можно видеть реализованный кэш - все ответы на запросы по маскам кешируются (кэш можно сбросить).

[Shaos]

Подбираюсь к программной манипуляции HTML-таблицами - выяснилась интероесная особенность - оказывается браузер (как минимум Firefox - на других пока не пробовал) добавляет после тэга table тэг tbody, если его там нет!

[Shaos]

Ешё хочу события добавить по аналогии с тем, как это сделано в Backbone

[Different]

Как бы уже есть jQuery + UI, микробиблиотеки и даже Ext JS. Можно еще БЭМ поковырять, ибо открытый.
В чем преимущество нового велосипеда?

[Shaos]

Как бы уже есть jQuery + UI, микробиблиотеки и даже Ext JS. Можно еще БЭМ поковырять, ибо открытый.
В чем преимущество нового велосипеда?

Свой собственный велосипед всегда ближе и роднее

jQuery с одной стороны недостаточен (ибо для нормального полнофункционального фреймвора требуется ещё что-то в довесок типа Backbone), а с другой - избыточен (т.к. поддерживает целый букет разных версий разных браузеров - в настоящее время это уже и ненужно, т.к. JS в целом унифицирован и стандартизирован). Ну в конце-концов jQuery во многом нелогичен - такое ощущение, что его выдумали вебдизайнеры, а не программисты. А я хочу получить легковесный и понятный фреймворк для программиста, причём такой, который мог бы не только на клиенте работать, но и с сервером общаться.

P.S. Спасибо за БЭМ - я вижу в первоначальном описании свои собственные мысли 7-летней давности
https://web.archive.org/web/20120507072032/https://bem.github.com/bem-method/pages/beginning/beginning.ru.html

[Different]

A я хочу получить легковесный и понятный фреймворк для программиста, причём такой, который мог бы не только на клиенте работать, но и с сервером общаться.

Это фантастика! Переписать BB - это одно, а заставить легко и просто работать код в разных браузерах - это совсем другое. Даже если оно и будет хорошо общаться с сервером, это увидят немногие. Чего стоит только один IE, не говоря уж об Opera.

[Shaos]

A я хочу получить легковесный и понятный фреймворк для программиста, причём такой, который мог бы не только на клиенте работать, но и с сервером общаться.

Это фантастика! Переписать BB - это одно, а заставить легко и просто работать код в разных браузерах - это совсем другое. Даже если оно и будет хорошо общаться с сервером, это увидят немногие. Чего стоит только один IE, не говоря уж об Opera.

с выходом IE9 междубраузерные отличия свелись фактически к нулю, а опера если честно вообще никому кроме русских ненужна

[HardWareMan]

Это почему это? Операмини идет на гаджетах. Альтернативы нет. Или гаджеты юзают только русские?

[Different]

с выходом IE9 междубраузерные отличия свелись фактически к нулю, а опера если честно вообще никому кроме русских ненужна

Это сказки, навеянные буржуйской рекламой. Реально IE9 ушел недалеко от IE7-8. Даже IE10 здорово отстает от других браузеров. https://twitter.com/ie9bugs
Opera тоже не блещет и довольно часто. Я не имею в виду скорость и прочие маркетинговые плюшки.
Реально хочется поубивать создателей этих двух недобраузеров, на свой особо извращенный манер понимающих HTML. Монополизм IE и Opera в некоторых областях не идет им на пользу.