nedoPC.org

Electronics hobbyists community established in 2002
Register • FAQ • Search • Login
Atom Feed | View unanswered posts | View active topics It is currently 19 Apr 2024 15:52

Board index » GENERAL » Software

All times are UTC - 8 hours [ DST ]



This topic is locked, you cannot edit posts or make further replies.  Page 1 of 2
  [ 27 posts ]  Go to page 1, 2  Next
Previous topic | Next topic 
Webitable 2005 -> 2012 
Author Message
Shaos
Admin
User avatar

Joined: 08 Jan 2003 23:22
Posts: 22543
Location: Silicon Valley
Post Webitable 2005 -> 2012
Webitable System Draft

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

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 мы используем логическое выражение в форме имяпеременной чтобы проверить существование переменной с таким именем в списке параметров сессии или в форме имяпеременной=значениепеременной чтобы проверить что переменная с таким именем имеет указанное значение (пока не реализовано).

_________________
:dj: https://mastodon.social/@Shaos


Last edited by Shaos on 24 Feb 2012 07:33, edited 1 time in total.
14 Feb 2012 18:10
Profile WWW
Shaos
Admin
User avatar

Joined: 08 Jan 2003 23:22
Posts: 22543
Location: Silicon Valley
Post 
Это был мой первый проект на SourceForge (незаконченный):

http://sourceforge.net/projects/webitable

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

_________________
:dj: https://mastodon.social/@Shaos


Last edited by Shaos on 17 Feb 2012 06:49, edited 1 time in total.
14 Feb 2012 18:14
Profile WWW
Shaos
Admin
User avatar

Joined: 08 Jan 2003 23:22
Posts: 22543
Location: Silicon Valley
Post 
Shaos wrote:
Это был мой первый проект на SourceForge (незаконченный)
Вот думаю не возродить ли его, переписав серверную часть с джавы на перл...


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

_________________
:dj: https://mastodon.social/@Shaos
14 Feb 2012 20:05
Profile WWW
Shaos
Admin
User avatar

Joined: 08 Jan 2003 23:22
Posts: 22543
Location: Silicon Valley
Post 
Если по началу Webitable был более серверным решением, то теперь я хочу на клиента фреймворк растянуть - причём так, чтобы можно было и без сервера пользоваться. На клиенте у нас будет один JavaScript-файл webitable.js, имеющий в себе некоторый набор функций и классов, упрощающих программирование динамических веб-страниц. В первую очередь заменяем самую распостранённую конструкцию, применяемую в веб-программировании - document.getElementById(...) на $(...):

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


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

Code:
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). Оба аргумента должны быть строковыми.

_________________
:dj: https://mastodon.social/@Shaos
16 Feb 2012 21:17
Profile WWW
Shaos
Admin
User avatar

Joined: 08 Jan 2003 23:22
Posts: 22543
Location: Silicon Valley
Post 
Ещё одна полезная штука - так называемый AJAX (динамическая подгрузка контента без перезагрузки всей страницы) - благо сейчас его инициализация единообразна для всех современных браузеров (5 лет назад было как минимум 3 разных способа для разных браузеров):

Code:
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 (это когда данные не в урл засовываются, а передаются в теле запроса).

_________________
:dj: https://mastodon.social/@Shaos
16 Feb 2012 21:47
Profile WWW
Shaos
Admin
User avatar

Joined: 08 Jan 2003 23:22
Posts: 22543
Location: Silicon Valley
Post 
Shaos wrote:
В первую очередь заменяем самую распостранённую конструкцию, применяемую в веб-программировании - document.getElementById(...) на $(...):

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


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


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

_________________
:dj: https://mastodon.social/@Shaos
18 Feb 2012 20:19
Profile WWW
Shaos
Admin
User avatar

Joined: 08 Jan 2003 23:22
Posts: 22543
Location: Silicon Valley
Post 
Shaos wrote:
Отсюда мысль - добавить новую функцию $$, которая будет возвращать список элементов по неполному наименованию идентификатора (например по маске)! Получается, что кроме физической иерархии элементов страницы мы можем ввести логическую иерархию - которая будет строиться по идентификаторам, к примеру точка в имени идентификатора может разделять классы и подклассы, например - "formA.button.1" и "formA.button.2" могут быть идентификаторами двух кнопок в пределах формы "formA" и по запросу $$('formA.*') будет возвращён список из двух элементов веб страницы, соответствующих кнопкам формы. Написание такой функции дело нетривиальное - т.к. чтобы исключить полный перебор элементов веб-страницы нам придётся кешировать списки элементов, которые уже запрашивались, чтобы быстрее можно было возвращать повторные запросы...


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

Code:
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" совпадут. Кроме того тут можно видеть реализованный кэш - все ответы на запросы по маскам кешируются (кэш можно сбросить).

_________________
:dj: https://mastodon.social/@Shaos
23 Feb 2012 01:25
Profile WWW
Shaos
Admin
User avatar

Joined: 08 Jan 2003 23:22
Posts: 22543
Location: Silicon Valley
Post 
Подбираюсь к программной манипуляции HTML-таблицами - выяснилась интероесная особенность - оказывается браузер (как минимум Firefox - на других пока не пробовал) добавляет после тэга table тэг tbody, если его там нет!

_________________
:dj: https://mastodon.social/@Shaos
24 Feb 2012 07:35
Profile WWW
Shaos
Admin
User avatar

Joined: 08 Jan 2003 23:22
Posts: 22543
Location: Silicon Valley
Post 
Ешё хочу события добавить по аналогии с тем, как это сделано в Backbone

_________________
:dj: https://mastodon.social/@Shaos
09 Mar 2012 21:50
Profile WWW
Different
Doomed

Joined: 18 Feb 2007 11:40
Posts: 408
Post 
Как бы уже есть jQuery + UI, микробиблиотеки и даже Ext JS. Можно еще БЭМ поковырять, ибо открытый.
В чем преимущество нового велосипеда?
11 Mar 2012 02:32
Profile
Shaos
Admin
User avatar

Joined: 08 Jan 2003 23:22
Posts: 22543
Location: Silicon Valley
Post 
Different wrote:
Как бы уже есть jQuery + UI, микробиблиотеки и даже Ext JS. Можно еще БЭМ поковырять, ибо открытый.
В чем преимущество нового велосипеда?


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

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

P.S. Спасибо за БЭМ - я вижу в первоначальном описании свои собственные мысли 7-летней давности ;)

_________________
:dj: https://mastodon.social/@Shaos
11 Mar 2012 18:44
Profile WWW
Different
Doomed

Joined: 18 Feb 2007 11:40
Posts: 408
Post 
Shaos wrote:
A я хочу получить легковесный и понятный фреймворк для программиста, причём такой, который мог бы не только на клиенте работать, но и с сервером общаться.

Это фантастика! Переписать BB - это одно, а заставить легко и просто работать код в разных браузерах - это совсем другое. Даже если оно и будет хорошо общаться с сервером, это увидят немногие. Чего стоит только один IE, не говоря уж об Opera.
11 Mar 2012 22:00
Profile
Shaos
Admin
User avatar

Joined: 08 Jan 2003 23:22
Posts: 22543
Location: Silicon Valley
Post 
Different wrote:
Shaos wrote:
A я хочу получить легковесный и понятный фреймворк для программиста, причём такой, который мог бы не только на клиенте работать, но и с сервером общаться.

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


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

_________________
:dj: https://mastodon.social/@Shaos
12 Mar 2012 07:55
Profile WWW
HardWareMan
Banned
User avatar

Joined: 20 Mar 2005 13:41
Posts: 2141
Location: От туда
Post 
Это почему это? Операмини идет на гаджетах. Альтернативы нет. Или гаджеты юзают только русские?
12 Mar 2012 08:42
Profile
Different
Doomed

Joined: 18 Feb 2007 11:40
Posts: 408
Post 
Shaos wrote:
с выходом IE9 междубраузерные отличия свелись фактически к нулю, а опера если честно вообще никому кроме русских ненужна ;)

Это сказки, навеянные буржуйской рекламой. Реально IE9 ушел недалеко от IE7-8. Даже IE10 здорово отстает от других браузеров. https://twitter.com/ie9bugs
Opera тоже не блещет и довольно часто. Я не имею в виду скорость и прочие маркетинговые плюшки.
Реально хочется поубивать создателей этих двух недобраузеров, на свой особо извращенный манер понимающих HTML. Монополизм IE и Opera в некоторых областях не идет им на пользу.
12 Mar 2012 21:38
Profile
Display posts from previous:  Sort by  
This topic is locked, you cannot edit posts or make further replies.   Page 1 of 2
  [ 27 posts ]  Go to page 1, 2  Next

Board index » GENERAL » Software

All times are UTC - 8 hours [ DST ]

Who is online

Users browsing this forum: No registered users and 55 guests

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB® Forum Software © phpBB Group
Designed by ST Software.