En

JazzTeam Software Development Company

Agile Java Development

Делаем приложение c ExtJS и Alfresco

Содержание:

Используемые технологии

Архитектура приложения

Пример приложения

Model

Store

Reader

View

Controller Фильтрация списка

Подключение MVC

Деплой приложения

Используемые технологии

Клиентская часть: Ext JS - библиотека JavaScript для разработки web-приложений и пользовательских интерфейсов. Поддерживает технологию AJAX, анимацию, работу с DOM, реализацию таблиц, вкладок, обработку событий.

Серверная часть: Alfresco - интегрированная система управления контентом для организаций. Alfresco объединяет в себе сервер и базу данных. В нём применяются как стандартные объекты Alfresco, так и кастомные (с расширенными свойствами/возможностями). Взаимодействие между клиентом и сервером осуществляется по средствам REST-сервисов.

Архитектура приложения

На рисунке представлена диаграмма взаимодействия Alfresco и Ext JS. В частности взаимодействие MVC Ext JS c Alfresco. диаграмма взаимодействия Alfresco и Ext JS

Пример приложения

Приложение, в котором отображается список книг (таблица), который можно фильтровать.

Model

Метод define объекта Ext позволяет определить класс. Первым параметром выступает имя класса, оно состоит из имени пространства имен, каталога в котором лежит класс, имя класса. Вторым параметром выступает объект описывающий создаваемую модель.

Каждая новая модель должна наследоваться от стандартной модели Ext JS. За наследование отвечает поле extend, для того чтобы наследоваться от модели Ext JS необходимо в поле extend указать имя модели, от которой необходимо унаследоваться, в данном случае это Ext.data.Model.

Model Поле idProperty позволяет указать поле, значение которого будет выступать идентификатором для данной модели. В данном случае мы указываем в качестве идентификатора поле id.

Массив fields содержит описание полей данной модели. Каждое описание поля представляет из себя объект со следующими полями:

Store

На следующем шаге необходимо определить объект хранилище (store). Хранилище выполняет роль контейнера и отвечает за хранение записей в виде объектов определенной модели.

store Поле model содержит название класса модели, объекты которого будут храниться в данном хранилище.

Массив requires описывает классы, которые необходимо импортировать в данный класс.

Переменная autoLoad является булевой переменной и отвечает за автоматическую загрузку записей с сервера, в данном случае она установлена в true - это значит, что данные будут загружены автоматически, сразу после запуска приложения. Объект proxy отвечает за получение данных с сервера.

proxy

Поле type определяет тип прокси, в данном случае используется ajax прокси. Поле url объекта proxy отвечает за путь, на который будет отправлен запрос на получение данных, в данном случае указан URL REST сервиса Alfresco. Поле timeout содержит интервал ожидания отклика сервера в миллисекундах.

Объект proxy должен содержать поле описывающее объект reader. Объект reader используется для парсинга ответа сервера, который получен объектом proxy. Объект reader содержит поле root указывающее имя корневого узла, в котором следует искать записи. Поле record содержит имя узла, который будет интерпретирован как запись, прочитан объектом reader и занесен в текущее хранилище как экземпляр модели.

Reader

При использовании REST API Alfresco мы получаем все ответы в виде сложного XML, содержащего несколько пространств имен. При этом возникает проблема кроссбраузерности, не все браузеры одинаково умеют работать с пространствами имен, чтобы решить эту проблему напишем свой собственный reader, который перед тем как начать парсить XML, очистит в нем префиксы пространств имен.

Reader

Для этого наследуемся от стандартного XML reader, и переопределим его метод read, который вызывается перед тем как начнется парсинг. В нем реализуем очистку XML от префиксов пространств имен.

View

Перейдем к написанию view для отображения данных из хранилища:

View

Каждая новая view должна наследоваться от стандартной Ext JS. За это отвечает поле extend. В этом свойстве указываем Ext.panel.Panel.

Свойство alias это список коротких псевдонимов для имен классов. В этом свойстве устанавливаем id для нашей панели. Чтобы подключить панель в другом компоненте или разместить ее на главном layout необходимо прописать:

xtype

Свойство title это название нашей панели.

Для панели используем схему размещения название layout. Используем layout fit. При использовании компоновки fit внутренние элементы растягивается до границ родительского контейнера.

Свойство flex это ширина нашей панели. Указываем 1, чтобы панель растянулась на всю длину, родительского контейнера.

Метод initComponent является важным шагом инициализации для компонентов. Он предназначен для реализации каждого подкласса вложенных компонентов.

В свойстве items размещаются внутренние элементы. xtype свойство обеспечивает более короткую альтернативу создания объектов, чем при использовании полного имени класса.

Так создается компонент текстовое поле.

field text

С использование xtype это выглядит следующим способом:

xtype field text

В нашей панели будет размещен компонент grid. При создании панели, вызовется конструктор grid, установятся свойства для этого компонента.

Создаем компонент таблица, где будут отображаться книги. В xtype указываем grid. Grid это стандартный компонент Ext JS. Id это уникальный идентификатор этого компонента. В свойстве store указываем нужное хранилище для отображения источника данных. В viewConfig указываются свойства, которые будут применены к таблице. Отключаем иконку, которая отображает изменение данных в таблице. Так же убираем иконку загрузки таблицы.

В свойстве column описываем столбцы, для отображения в таблице.

Другие свойства, события и методы о компоненте grid, можно узнать тут. Описание View компонента панели фильтрации приведено на рисунке ниже.

View Filter Panel

Controller - Фильтрация списка

Напишем контролер, который будет фильтровать список книг по названию:

Controller FilteringGrid

Для начала наследуемся от класса Ext.app.Controller и устанавливаем для контроллера ранее созданные представления в свойстве views.

Далее в функции init, которая срабатывает при инициализации контроллера, мы инициализируем обработчики кнопок, которые у нас находятся в представлении. Связать обработчики с компонентами помогает функция control. Эта функция позволяет с помощью CSS селектора найти элемент. Каждому такому элементу сопоставляется объект, ключом которого является имя события, а значением - обработчик события.

Подключение MVC

Осталось подключить все классы в главном классе app.js. Импортируем написанные store, model, controller, view.

MVC

Основными секциями являются name, appFolder, stores, models, controller, view и функция launch.

В секции name мы указываем имя нашего проекта, оно будет выступать пространством имен. В appFolder указываем папку, где лежит структура иерархии проекта (controller, store, model, view).

В соответствующих секциях stores, models, controller, view указываем путь к написанным классам.

Функция launch выполнится после загрузки всех классов, указанных в соответствующих секциях. В ней мы создаем главный layout и размещаем наши view компоненты.

В нашем примере, пространство имен - это example. Корневая папка app. В секциях stores, models, controllers, views подключаем ранее написанные файлы.

В функции launch мы создаем главный viewport, где будут размещены панель с таблицей и панель фильтрации. Используем функцию Ext.create и создаем стандартный viewport. В конструкторе описываем layout. Значение layout:'border' устанавливает компоновку. Border позволяет прикреплять элементы к одной из четырех сторон окна, либо закрепить его в центре. Затем мы задаем панели, которые примыкают к определенным сторонам контейнера с помощью параметра region. Этот параметр может принимать следующие значения:

В свойстве items разместим две панели. Первую панель располагаем по левой стороне, внутрь ее подключаем панель фильтрации. Вторую панель располагаем по центру, внутрь ее подключаем панель с таблицей.

После этого, на страничке index.html нужно подключить необходимые css, javascript файлы.

alfresko example 0

Сначала подключаем стили ext-all.css библиотеки Ext JS. Потом JavaScript библиотеки extjs-all.js. Далее JavaScript файл с нужной локализацией ext-lang-ru.js. После основных импортов, подключаем JavaScript файл нашего приложения app.js. Если у вас другой JavaScript файл входной точки приложения, то подключаем его.

Деплой приложения

Чтобы запустить приложение, его необходимо подложить под Tomcat Alfresco. Для начала остановим Alfresco. С установкой Alfresco идет программа Manager Tools. В ней нажимаем Stop All.

Manager Tools

Далее подкладываем в папку Alfresco\tomcat\webapps\ наш war-файл приложения, и делаем Restart All в Manager Tools. Приложение будет доступно по:

localhost:порт/имя_приложения/index.html

порт - порт, указанный при установке Alfresco. По умолчанию 8080; имя_приложения - имя приложения указанное в war файле.

Если же нету war-файла, то можно создать папку. К примеру папку example в Alfresco\tomcat\webapps\ и положить в нее файлы приложения:

path

Тогда приложение будет доступно по адресу: http://localhost:порт/example/index.html

Зайдем на Alfresco (http://localhost:порт/share). Создадим тестовый сайт example. В библиотеки документов создадим папку books:

books

В папке books создадим папку “Мастер и Маргарита” и изменим ей тип на books:

alfresko example

Так же создадим еще две папки, изменим им тип на books. После этого для каждой папки, в свойствах, заполним поля: начальная цена и дата публикации.

Перейдем на наше приложение. Получилось приложение, которое отображает список книг, а так же фильтруют их по названию:

alfresko example 2

Проверим работу фильтрации, введем в поле название “мастер” и применим фильтрацию. Видно, что в таблице осталась одна запись:

alfresko example 3

, , ,

Leave a Reply

Your email address will not be published. Required fields are marked *