Начнем приложение с Qooxdoo

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

Начнем.

1. Скачаем Qooxdoo SDK. На момент написания этой статьи имеется версия Qooxdoo 0.8.2. Это стабильный релиз. Имеется также версия 0.7.4 гарантирующая стабильность и работоспособность во всех отношениях для всех броузеров вышедших не позже выхода самого релиза. Использовать рекомендую более новую версию, так как в любом случае в дальнейшем необходимо будет делать процедуру перехода (зачем нам это лишний раз), во-вторых вам самим захочется 0.8 не иначе. Если бы 0.7 обладала всем-всем-всем, то можно было бы отнестись к этому вопросу проще, но даже в 0.8 есть некоторые общепринятые (стандартные для привычного нам GUI) вещи, которые еще не реализованы.
Да что говорить. Берем 0.8 и все. Документация по 0.8 полноценна и исчерпывающая на все 100%, остальные вопросы отпадают или не ко мне =). Лол. Продолжим.

Качаем http://downloads.sourceforge.net/qooxdoo/qooxdoo-0.8.2-sdk.zip
Либо смотрим сами: http://qooxdoo.org/download и выбираем, можно и SVN-repository взять, кто хочет грызть гранит фреймворка по-полной =)

Скачали, распаковали.
Смотрим папку. Видим структуру:

application
component
framework
tool
index.html
license.txt
readme.txt
version.txt

Так...

2. Можно конечно все делать руками, но зачем? Точнее не так. Руками все делать нужно, но есть очень удобные инструменты, которые следует взять в руки. Написаны они все на Python.

Пользователям Linux волноваться не о чем. Все как обычно либо уже под рукой, либо стоит поставить пакеты Python. Нужна версия Python не ниже 2.4. (2.3 более не поддерживается).

Пользователям Windows следует поставить ActivePython.
Да-да, конечно, ленивым я дам ссылку: http://www.activestate.com/activepython/

Ну и далее...

Для людей, которые привычны к капанию в исходниках эту статью писать не стоит, для других - рекомендую прочитать readme.txt. Если не помогло, буду рассказывать содержимое readme.txt. Итак:


Как создать новое приложение?

• Переходим в ./tool/bin. Запускаем create-application.py. И что? Ничего пока. Расскажу о параметрах этого скрипта.

Для особо одаренных: - Все имена, идентификаторы, параметры и т.д. пишутся только латинскими символами.

Общее:
create-application.py --name myapp

Параметы:
-n ИМЯПРИЛОЖЕНИЯ, или --name=ИМЯПРИЛОЖЕНИЯ
ИМЯПРИЛОЖЕНИЯ - название вашего приложения. Обязательное поле. Это имя создаваемого приложения. С таким же именем будет создана папка для приложения.

-o ПУТЬ_К_ПАПКЕ, --out=ПУТЬ_К_ПАПКЕ
Это путь к той папке, в которой будет создана папка приложения (см. выше).

-s ПРОСТРАНСТВОИМЕН, --namespace=ПРОСТРАСТВОИМЕН
Основное пространство имен для приложения. Объяснять что такое "пространство имен" не намерен. Если совсем новички - игнорируйте эту опцию и все. (По-умолчанию пространством имен будет являться ИМЯПРИЛОЖЕНИЯ (см. выше))

-t ТИП, --type=ТИП
Типом может быть inline, migration, bom, gui.
'gui' создаст стандартное qooxdoo GUI приложение,
'inline' создаст "inline", т. е. интегрируемое в страницу сайта qooxdoo GUI приложение, 'migration' используется для перехода с версии приложения qooxdoo 0.7 и 'bom' может быть использовано для создания low-level (низкоуровневого (для новичков - ничего общего с плохим, слабым, низким и другими словами) qooxdoo приложения. Если этот параметр не указывать, то по-умолчанию будет 'gui'.

-l LOGFILE, --logfile=LOGFILE
Тут LOGFILE - имя текстового файла, куда будет сохраняться вся информация по ходу работы скрипта.

-p PATH, --skeleton-path=PATH
Дополнительная опция. Здесь PATH - это имя к папке шаблонов, по которым может быть создано приложение. (По-умолчанию: ПУТЬ_К_QOOXDOO_SDK/component/skeleton)

Итак, запустим например такое:
./create-application.py -n myfirst -s mynamespace -t gui

• Теперь мы получили папку myfirst в той же папке, где и был запущен скрипт create-application.py. Структура папки такая:

cache
source
config.json
generate.py
Manifest.json
readme.txt

3. В congif.json мы имеем конфигурацию нашего приложения, необходимые модули, переменные среды и т.д. Это нам понадобится для сборки завершенной версии приложения. Все данные хранятся в формате JSON.

В Manifest.json находится информация о приложении, название, версия, описание и наименование главного класса приложения для запуска.

Не правда ли напоминает Java 2 ME =) Похоже, но только в JSON формате.

• Ну наконец уже надоело. Запустим мы приложение или нет? Давайте запустим.

Запустим в папке нашего приложения скрипт generate.py с параметром source-all
./generate.py source-all

Это выдаст:
=====================================================
INITIALIZING: MYFIRST
=====================================================
>>> Configuration: config.json
>>> Jobs: source-all
>>> Resolving config includes...
>>> Resolving jobs...
>>> Resolving macros...
>>> Resolving libs/manifests...

=====================================================
EXECUTING: SOURCE-ALL::SOURCE-ALL-SCRIPT
=====================================================
>>> Scanning libraries...
- Scanning /home/raven/Desktop/Qooxdoo/qooxdoo-0.8.2-sdk/framework...
- Scanning /home/raven/Desktop/Qooxdoo/qooxdoo-0.8.2-sdk/tool/bin/myfirst...
- Excludes may break code!
>>> Resolving dependencies...
- Sorting 513 classes...
>>> Resolving dependencies...
- Sorting 513 classes...
>>> Generate source version...
- Processing translation for 2 locales...
- Analysing assets...
- Compiling resource list...
- Generate translation code...
- Generating boot loader...
>>> Done

Теперь у нас создана debug-версия приложения. Что это значит?
Это значит то, что мы можем запустить наше приложение и посмотреть на его работу, но это не версия для издания, т.е. эта версия не предназначена для наших конечных пользователей, она имеет много "лишней" отладочной информации и связана с нашими локальными модулями. В своих последующих статьях я расскажу как создавать полноценные приложения и размещать их в сети интернет.

• Айе! Наконец запуск! Переходим в папку soure. Открываем в броузере файл index.html.

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

Вот такое у нас первое приложение.



В дальнейших моих планах есть описание создания нескольких более серьезных приложений, в том числе с использованием запросов к серверу, где на стороне сервера будет использоваться PHP и MySQL. К сожалению в мои планы не входит публиковать тут учебник по Qooxdoo или что-то подобное. Всего лишь основы.

Обсуждаем, смотрим, пользуемся, жалуемся и т.д..............

Несколько JavaScript GUI Frameworks

Вчера копался в форуме eyeOS и прочел, что их JavaScript-фреймворк работает, но он очень простой и происходит это по той причине, что в команде нет ни одного фаната JavaScript и написано все очень примитивно. Там же они сообщили, что присматриваются к AJAX-фреймворку Qooxdoo, чтобы построить на нем свой eyeOS tooklit2. Именно так я узнал о Qooxdoo. Приятное открытие.

qooxdoo is a comprehensive and innovative Ajax application framework. Leveraging object-oriented JavaScript allows developers to build impressive cross-browser applications. No HTML, CSS nor DOM knowledge is needed.

It includes a platform-independent development tool chain, a state-of-the-art GUI toolkit and an advanced client-server communication layer. It is open source under an LGPL/EPL dual license.

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

Но почему же мне все так понравилось?

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

Упс... Заикнулся про конкурентов. Надо бы и про них немного рассказать, итак:

• TIBCO General Interface - сейчас наверное самый нашумевший из "тяжеловесов". Довольно много с ним работал, месяца 3. Вообще понравился, но очень уж "тяжелый" и многие его возможности мне просто не нужны.
  
• Bindows - взглянул, с первого раза впечатления как от Tibco. Красиво, тяжело, запутанно.
  
• Dojo - о нем знают все. Но это скорее AJAX-фремворк для использования в структуре обычного сайта. Где-то прилепил эффект, где-то окно, где-то получил данные из базы. Это нельзя назвать GUI-фреймворком как остыльных в этом списке, однако и лишить Dojo упоминания тоже как-то нельзя. Имеено по причине его "не совсем GUI-фреймворк" я искал что-то другое.
  
• Jx - люблю! =) молодой фреймворк построенный на базе Mootools. Легковесный, как и все, что связано с Mootools. Хороший конструктор для хороших мозгов. Еще очень молодой, но очень приятный и быстрый. Рекомендую всем.
  
• Backbase AJAX Framework - достойный конкурент Qooxdoo. Мне понравился. Идея описывать весь GUI и events в XML очень хорошая. Однозначно! Для ознакомления - всем.
  
• JackBe Presto Framework - что-то ооооочень тяжелое, но выглядит красиво. Заморачиваться не стал, так как при виде демо сразу испугался =).

Работать с Qooxdoo одно удовольствие. Все понятно и очень удобно в отличие от того же TIBCO General Interface. Форматом обмена данными в Qooxdoo является JSON, что не может не радовать, так как работать с XML не очень удобно, если проект у тебя довольно небольшой.

Вот пример создания обычной кнопки с изображением рядом с текстом:

// Создаем кнопку
var button1 = new qx.ui.form.Button("Моя кнопка", "images/myicon.png");

// Создаем контейнер в котором будет находиться кнопка, в данном случае само тело страницы (объект document)
var doc = this.getRoot();

// Помещаем кнопку в контейнер с фиксированными координатами
doc.add(button1, {
left : 100,
top : 50
});

// Добавим обработчик события
button1.addListener("execute", function(e) {
alert("Привет!");
});

Все элементарно и очень удобно.


А вот пример как сделать RPC (Remote Procedure Call):

var rpc = new qx.io.remote.Rpc(
"http://localhost:8080/qooxdoo/.qxrpc",
"qooxdoo.test"
);

// синхронный вызов
try {
var result = rpc.callSync("echo", "Test");
alert("Результат вызова: " + result);
} catch (exc) {
alert("Исключение во время вызова: " + exc);
}

// ассинхронный вызов
var handler = function(result, exc) {
if (exc == null) {
    alert("Результат вызова: " + result);
} else {
    alert("Исключение во время вызова: " + exc);
}
};
rpc.callAsync(handler, "echo", "Test");

Ну на этом закончу. Цели рассказать подробно я не ставил, хотел лишь сказать, что мне очень понравился Qooxdoo и порекомендовать всем если не использовать, то хотябы ознакомиться с этим творением.

Опять же не стоит забывать о том, что всему свое место и время. Использовать Qooxdoo для создания обычного сайта или для создания сайта с элементами AJAX глупо. Qooxdoo предназначен для создания именно веб-приложений и если вам требуется просто делать XMLHttpRequest или добавить эффекты и анимацию на сайт, то рекомендую использовать компиляцию Mootools с набором необходимых классов, а не таскать за страницами "тяжеловесный" фреймворк типа Qooxdoo или TIBCO General Interface.