RIA-приложение Fuzzle CMS*: разбор полётов *Fuzzle CMS – система управления Flash-сайтом на базе Flex и PHP

История 1: прокси-классы

Серверных классов может быть много: – Работа с файлами; – Работа со страницами; – Работа с фотогалереей; – Работа с настройками и т.д. Прокси-классы абстрагируют вызовы процедур серверных классов; Автоматически генерируются в AMFPHP!

История 1: прокси-классы Пожелание 1: общая авторизация, автобиндинг;

История 1: прокси-классы Пожелание 2: вызов функции «по исполнению» – callgetGallery(rootid:Object, onDataReceive: Function = null) – onDataReceive(result:Object):Object { return new XML(String(result)); } Хорошо работает в случаях, когда нужно преобразовать, полученную строку в XML или список; Позднее было понято, что Event-структура была бы логичнее; однако, текущее решение позволяет определять callback-функции проще.

История 1: прокси-классы Пожелание 3: обработка состояний запроса (удался/не удался) – Создаются специфичные серверные функции, возвращающие статус запроса; – Теперь результат каждого запроса - массив

История 1: прокси-классы Пожелание 4: кеширование!(хотя бы на время одной сессии) – Специальным статусом указываем о необходимости кешировать результат.

История 1: прокси-классы Пожелание 5: создать постоянный кеш с обновлением через указанное время – Решение: автогенерация SharedObject; Пожелание 6: хочу управлять кешем! – Решение: набор специальных функций очистки кеша; вызов событий при вызове определенных функций; Пожелание 7: отслеживание выполнения удаленных операций. – Решение: создание флага isRemoteCall, специальной процедуры errorHandler.

История 1: результат Что мы получаем в результате автоматической генерации: – Единую аутентификацию; – Возможность автоматически использовать результаты запроса (автобиндинг); – Отслеживать и преобразовывать результаты; – Генерировать ошибки на сервере с автоматической обработкой на клиенте; – Кешировать результаты на время сессии/в постоянной памяти, управлять кешем при определенных событиях; – Отслеживать выполнение запроса (например, блокировать кнопки на время его выполнения) Пример из жизни: клиентская часть одного из проектов включает строк кода из них занимают прокси-классы.

История 2: модули и виджеты Или как мы «налажали» Шаг 1: Fuzzle CMS – как модульная система; – Deep Linking (навигация через подмену строки браузера, SWFAddress) – В нашем случае: / / – Предполагалось, что каждый модуль – отдельное Flex-приложение

История 2: модули и виджеты Шаг 2: Внедрение модуля визуального редактирования страниц. – Позволяет пользователям размещать блоки на странице в произвольном порядке; – В него встроены следующие виды блоков: Текстовый, SWF, картинка-со-ссылкой, видео. – Для каждого блока можно задавать оформление и анимацию появления на странице. Клиенты довольны. Очень удобно, очень довольны.

Клиенты спрашивают: а почему, собственно, нельзя все сделать таскаемыми блоками? модули не пригодились…

История 2: модули и виджеты Решение: создание библиотеки виджетов. – SWF-библиотека с внедренными классами; – 2 класса на виджет – собственно, визуальный блок, и его редактор. – Блок и редактор принимают на вход конфигурационный XML. – Редактор может включать в себя компоненты Fuzzle: выбор файла, ссылок и т.д.

История 2: модули и виджеты

Пример виджета (Картинка/SWF)

История 2: модули и виджеты Пример редактора виджета (Картинка/SWF)

История 2: модули и виджеты Как загружать библиотеки? – К каждой библиотеке приписан конфигурационный XML. В нем может быть задано несколько виджетов, например: Standart com.fuzzle.standart.BlockText com.fuzzle.standart.BlockTextEditor Text block

История 2: модули и виджеты Плюсы решения: – Разработка сторонними разработчиками виджетов и «прозрачное» их подключение; Бонус для разработчиков: можно зашифровать виджет так, чтобы библиотека работала только на определенном сайте. – Простота разработки (два Flex-класса); – Унификация интерфейса для пользователя. Минусы: – Необходимость подгружать ряд дополнительных файлов после загрузки движка; Одно из решений: уменьшение объема путем исключения (External) стандартных Flex-библиотек. – Хуже работает DeepLinking, например, на фотогалереях (внутри блока изменения строки не предусмотрено) – Не работает стандартная локализация.

История 3: как подключать дизайн? (и тут мы промахнулись) Идея 1: каждый Flash-сайт уникален, и под каждый создается отдельный Flex-загрузчик с соответствующими меню, местом подгрузки модулей и т.д. – При этом поддерживаются «растягивающийся» дизайн.

История 3: как подключать дизайн? На практике: – Появился Template1Loader, подгружающий «в себя» SWF-файл на задний план; – Он очень всем понравился, поскольку можно было создавать дизайн отдельно от Flex. – Template1Loader разрастался фичами, которые желательно было поддерживать и другими загрузчиками. – Код инициализации постоянно обновлялся, что требовало обновления всех загрузчиков и занимало кучу времени. – (Последнее) Идеология расстановки блоков вынудила отказаться от «растягивающихся» дизайнов.

Результат? Остался только один загрузчик, у которого мы решили сделать много параметров конфигурации

История 3: дизайн

История 3: как подключать дизайн? Как устроен дизайн? фон основной дизайн место подгрузки модулей

История 3: как подключать дизайн? Как происходит взаимодействие с кодом? – Как сделать кнопку? – а) Делаем кнопку средствами Flash – б) Пишем следующий обработчик: getClassByAlias("aliasXmLoader").xmLoader.goToURL( "thissite://XmAdvPage-main/TestPage"); Ядро доступно через getClassByAlias. Соответственно, доступны и разные его возможности.

История 3: как подключать дизайн? Плюсы: – Простота разработки дизайна; Минусы: – Наличие двух слоев (дизайна и содержимого страницы) приводит к тому, что вывод поверх содержимого страницы затруднен (например, при разработке выпадающего меню) – Сложность отслеживания разных событий (начала и конца анимации между страницами и т.д.)

Архитектура (целиком)

Результаты Три истории: – Генерация клиентских классов позволяет здорово экономить время; – Людям нравится удобство и простота при создании: Дополнительных модулей; Дизайна. – Ради удобства они готовы поступиться функциональностью.

Полезные ссылки Сайт системы: Создание и установка виджетов: – - документация программисту – cms.ru/Programmistu/Sozdanievidzhetov - пример Flex-виджета cms.ru/Programmistu/Sozdanievidzhetov Интеграция дизайна: – - документация дизайнеру