ExtJS 4 в WebTutor 3.

Введение.

В WebTutor версии 3 неявно используется JavaScript framework ExtJS 3.4 (через JS обертку интерпретируются файлы XAML для отрисовки UI), с некоторыми, довольно сильными ограничениями в плане разработки и написания сложных интерфейсов. Также в корне не устраивало обилие серверного кода в XAML файлах, зачастую невнятная логика обращения к серверу, а также, несмотря на использование ExtJS, отсутствие прямого к нему доступа. Поэтому было принято решение попробовать отказаться от предлагаемой WebSoftом идеологии и написать свой велосипед.

Основными тезисами при разработке были выбраны следующие:

• Использование ExtJS версии 4 (5 не подходит в силу лицензионных ограничений);
• Для взаимодействия с сервером использовать Ext Direct;
• Использовать существующие возможности WebTutor для упрощения поддержки и возможных правок в UI;
• Отрисовывать элементы интерфейса в зависимости от условий заданных в Администраторе WebTutor.

Часть 1. Подготовительные настройки (Страница авторизации).

После установки WebTutor мы получаем готовую для наших экспериментов систему. Для начала необходимо скачать и установить ExtJS версии 4. Создаем в папке wt\web\ сервера новую папку js и разархивируем в нее скачанный архив. В итоге должны получить примерно такую картину:

Запускаем наш сервер и открываем WebTutor Администратор. В итоге при открытии портала в браузере должна отображаться следующая картинка

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

Для начала стоит описать процесс загрузки страницы авторизации в WebTutor:

1. При первоначальном открытии портала загружается файл default.html, в котором в зависимости от того, какие параметры ссылок авторизированной и неавторизированной страницы заданы в настройках сайта, осуществляется перенаправление по этим ссылкам. По умолчанию осуществляется переход по ссылке view_doc.html?mode=default - неавторизированная страница.
2. Файл view_doc.html в зависимости от переданных параметров попытается загрузить шаблон требуемой страницы (в случае авторизации - шаблон с кодом DOC_DEFAULT, файл - view_doc_default.html).
3. В файле view_doc_default.html происходит загрузка файла include/head.html и отрисовка приветственного сообщения. Эти два файла нам и требуется отредактировать для того чтобы отобразить нашу страницу авторизации.

Открываем файл include/head.html в любимом редакторе, удаляем все его содержимое и заменяем следующим:
В данном файле мы производим загрузку фреймворка ExtJS и необходимых стилей. Этот код будет присутствовать на всех страницах нашего портала.

Теперь откроем файл view_doc_default.html, так же все удалим