Download - RIA- приложение Fuzzle CMS* : разбор полётов
![Page 1: RIA- приложение Fuzzle CMS* : разбор полётов](https://reader035.vdocuments.pub/reader035/viewer/2022062321/56813d0f550346895da6c81e/html5/thumbnails/1.jpg)
RIA-приложение Fuzzle CMS*:разбор полётов
*Fuzzle CMS – система управления Flash-сайтом на базе Flex и PHP
![Page 2: RIA- приложение Fuzzle CMS* : разбор полётов](https://reader035.vdocuments.pub/reader035/viewer/2022062321/56813d0f550346895da6c81e/html5/thumbnails/2.jpg)
История 1: прокси-классы
![Page 3: RIA- приложение Fuzzle CMS* : разбор полётов](https://reader035.vdocuments.pub/reader035/viewer/2022062321/56813d0f550346895da6c81e/html5/thumbnails/3.jpg)
История 1: прокси-классы
• Серверных классов может быть много:– Работа с файлами;– Работа со страницами;– Работа с фотогалереей;– Работа с настройками и т.д.
• Прокси-классы абстрагируют вызовы процедур серверных классов;
• Автоматически генерируются в AMFPHP!
![Page 4: RIA- приложение Fuzzle CMS* : разбор полётов](https://reader035.vdocuments.pub/reader035/viewer/2022062321/56813d0f550346895da6c81e/html5/thumbnails/4.jpg)
История 1: прокси-классы
• Пожелание 1: общая авторизация, автобиндинг;
![Page 5: RIA- приложение Fuzzle CMS* : разбор полётов](https://reader035.vdocuments.pub/reader035/viewer/2022062321/56813d0f550346895da6c81e/html5/thumbnails/5.jpg)
История 1: прокси-классы
• Пожелание 2: вызов функции «по исполнению»– callgetGallery(rootid:Object, onDataReceive: Function =
null)– onDataReceive(result:Object):Object { return new
XML(String(result)); }
• Хорошо работает в случаях, когда нужно преобразовать, полученную строку в XML или список;
• Позднее было понято, что Event-структура была бы логичнее; однако, текущее решение позволяет определять callback-функции проще.
![Page 6: RIA- приложение Fuzzle CMS* : разбор полётов](https://reader035.vdocuments.pub/reader035/viewer/2022062321/56813d0f550346895da6c81e/html5/thumbnails/6.jpg)
История 1: прокси-классы• Пожелание 3: обработка состояний запроса
(удался/не удался)– Создаются специфичные серверные функции,
возвращающие статус запроса;– Теперь результат каждого запроса - массив
![Page 7: RIA- приложение Fuzzle CMS* : разбор полётов](https://reader035.vdocuments.pub/reader035/viewer/2022062321/56813d0f550346895da6c81e/html5/thumbnails/7.jpg)
История 1: прокси-классы• Пожелание 4: кеширование!(хотя бы на время
одной сессии)– Специальным статусом указываем о необходимости
кешировать результат.
![Page 8: RIA- приложение Fuzzle CMS* : разбор полётов](https://reader035.vdocuments.pub/reader035/viewer/2022062321/56813d0f550346895da6c81e/html5/thumbnails/8.jpg)
История 1: прокси-классы• Пожелание 5: создать постоянный кеш с
обновлением через указанное время– Решение: автогенерация SharedObject;
• Пожелание 6: хочу управлять кешем!– Решение: набор специальных функций очистки
кеша; вызов событий при вызове определенных функций;
• Пожелание 7: отслеживание выполнения удаленных операций. – Решение: создание флага “isRemoteCall”,
специальной процедуры errorHandler.
![Page 9: RIA- приложение Fuzzle CMS* : разбор полётов](https://reader035.vdocuments.pub/reader035/viewer/2022062321/56813d0f550346895da6c81e/html5/thumbnails/9.jpg)
История 1: результат• Что мы получаем в результате автоматической
генерации:– Единую аутентификацию;– Возможность автоматически использовать результаты
запроса (автобиндинг);– Отслеживать и преобразовывать результаты;– Генерировать ошибки на сервере с автоматической
обработкой на клиенте;– Кешировать результаты на время сессии/в постоянной
памяти, управлять кешем при определенных событиях;– Отслеживать выполнение запроса (например, блокировать
кнопки на время его выполнения)• Пример из жизни: клиентская часть одного из проектов
включает 10000 строк кода. 6000 из них занимают прокси-классы.
![Page 10: RIA- приложение Fuzzle CMS* : разбор полётов](https://reader035.vdocuments.pub/reader035/viewer/2022062321/56813d0f550346895da6c81e/html5/thumbnails/10.jpg)
История 2: модули и виджеты
• Или как мы «налажали» • Шаг 1: Fuzzle CMS – как модульная система;– Deep Linking (навигация через подмену строки
браузера, SWFAddress)– В нашем случае:• /<имя модуля>/<параметр>
– Предполагалось, что каждый модуль – отдельное Flex-приложение
![Page 11: RIA- приложение Fuzzle CMS* : разбор полётов](https://reader035.vdocuments.pub/reader035/viewer/2022062321/56813d0f550346895da6c81e/html5/thumbnails/11.jpg)
История 2: модули и виджеты
• Шаг 2: Внедрение модуля визуального редактирования страниц.– Позволяет пользователям размещать блоки на
странице в произвольном порядке;– В него встроены следующие виды блоков:
• Текстовый, SWF, картинка-со-ссылкой, видео.– Для каждого блока можно задавать оформление и
анимацию появления на странице.• Клиенты довольны. Очень удобно, очень
довольны.
![Page 12: RIA- приложение Fuzzle CMS* : разбор полётов](https://reader035.vdocuments.pub/reader035/viewer/2022062321/56813d0f550346895da6c81e/html5/thumbnails/12.jpg)
Клиенты спрашивают: а почему, собственно, нельзя все сделать
таскаемыми блоками?
модули не пригодились…
![Page 13: RIA- приложение Fuzzle CMS* : разбор полётов](https://reader035.vdocuments.pub/reader035/viewer/2022062321/56813d0f550346895da6c81e/html5/thumbnails/13.jpg)
История 2: модули и виджеты
• Решение: создание библиотеки виджетов.– SWF-библиотека с внедренными классами;– 2 класса на виджет – собственно, визуальный
блок, и его редактор.– Блок и редактор принимают на вход
конфигурационный XML.– Редактор может включать в себя компоненты
Fuzzle: выбор файла, ссылок и т.д.
![Page 14: RIA- приложение Fuzzle CMS* : разбор полётов](https://reader035.vdocuments.pub/reader035/viewer/2022062321/56813d0f550346895da6c81e/html5/thumbnails/14.jpg)
История 2: модули и виджеты
![Page 15: RIA- приложение Fuzzle CMS* : разбор полётов](https://reader035.vdocuments.pub/reader035/viewer/2022062321/56813d0f550346895da6c81e/html5/thumbnails/15.jpg)
История 2: модули и виджеты
• Пример виджета (Картинка/SWF)
![Page 16: RIA- приложение Fuzzle CMS* : разбор полётов](https://reader035.vdocuments.pub/reader035/viewer/2022062321/56813d0f550346895da6c81e/html5/thumbnails/16.jpg)
История 2: модули и виджеты
• Пример редактора виджета (Картинка/SWF)
![Page 17: RIA- приложение Fuzzle CMS* : разбор полётов](https://reader035.vdocuments.pub/reader035/viewer/2022062321/56813d0f550346895da6c81e/html5/thumbnails/17.jpg)
История 2: модули и виджеты
• Как загружать библиотеки?– К каждой библиотеке приписан
конфигурационный XML. В нем может быть задано несколько виджетов, например:
<path>http://fuzzle/standart.swf</path><libName>Standart</libName><widget>
<classMain>com.fuzzle.standart.BlockText</classMain><classEditor>com.fuzzle.standart.BlockTextEditor</classEditor><title>Text block</title>
</widget>
![Page 18: RIA- приложение Fuzzle CMS* : разбор полётов](https://reader035.vdocuments.pub/reader035/viewer/2022062321/56813d0f550346895da6c81e/html5/thumbnails/18.jpg)
История 2: модули и виджеты• Плюсы решения:
– Разработка сторонними разработчиками виджетов и «прозрачное» их подключение;• Бонус для разработчиков: можно зашифровать виджет так, чтобы
библиотека работала только на определенном сайте.– Простота разработки (два Flex-класса);– Унификация интерфейса для пользователя.
• Минусы:– Необходимость подгружать ряд дополнительных файлов после
загрузки движка;• Одно из решений: уменьшение объема путем исключения (External)
стандартных Flex-библиотек.– Хуже работает DeepLinking, например, на фотогалереях (внутри
блока изменения строки не предусмотрено)– Не работает стандартная локализация.
![Page 19: RIA- приложение Fuzzle CMS* : разбор полётов](https://reader035.vdocuments.pub/reader035/viewer/2022062321/56813d0f550346895da6c81e/html5/thumbnails/19.jpg)
История 3: как подключать дизайн?
• (и тут мы промахнулись)• Идея 1: каждый Flash-сайт уникален, и под
каждый создается отдельный Flex-загрузчик с соответствующими меню, местом подгрузки модулей и т.д.– При этом поддерживаются «растягивающийся»
дизайн.
![Page 20: RIA- приложение Fuzzle CMS* : разбор полётов](https://reader035.vdocuments.pub/reader035/viewer/2022062321/56813d0f550346895da6c81e/html5/thumbnails/20.jpg)
История 3: как подключать дизайн?
• На практике:– Появился Template1Loader, подгружающий «в себя»
SWF-файл на задний план;– Он очень всем понравился, поскольку можно было
создавать дизайн отдельно от Flex.– Template1Loader разрастался фичами, которые
желательно было поддерживать и другими загрузчиками.
– Код инициализации постоянно обновлялся, что требовало обновления всех загрузчиков и занимало кучу времени.
– (Последнее) Идеология расстановки блоков вынудила отказаться от «растягивающихся» дизайнов.
![Page 21: RIA- приложение Fuzzle CMS* : разбор полётов](https://reader035.vdocuments.pub/reader035/viewer/2022062321/56813d0f550346895da6c81e/html5/thumbnails/21.jpg)
Результат? Остался только один загрузчик, у которого мы решили
сделать много параметров конфигурации
![Page 22: RIA- приложение Fuzzle CMS* : разбор полётов](https://reader035.vdocuments.pub/reader035/viewer/2022062321/56813d0f550346895da6c81e/html5/thumbnails/22.jpg)
История 3: дизайн
![Page 23: RIA- приложение Fuzzle CMS* : разбор полётов](https://reader035.vdocuments.pub/reader035/viewer/2022062321/56813d0f550346895da6c81e/html5/thumbnails/23.jpg)
История 3: как подключать дизайн?
• Как устроен дизайн? фон
основнойдизайн
место подгрузки модулей
![Page 24: RIA- приложение Fuzzle CMS* : разбор полётов](https://reader035.vdocuments.pub/reader035/viewer/2022062321/56813d0f550346895da6c81e/html5/thumbnails/24.jpg)
История 3: как подключать дизайн?
• Как происходит взаимодействие с кодом?– Как сделать кнопку?– а) Делаем кнопку средствами Flash– б) Пишем следующий обработчик:
• getClassByAlias("aliasXmLoader").xmLoader.goToURL("thissite://XmAdvPage-main/TestPage");
• Ядро доступно через getClassByAlias. Соответственно, доступны и разные его возможности.
![Page 25: RIA- приложение Fuzzle CMS* : разбор полётов](https://reader035.vdocuments.pub/reader035/viewer/2022062321/56813d0f550346895da6c81e/html5/thumbnails/25.jpg)
История 3: как подключать дизайн?
• Плюсы:– Простота разработки дизайна;
• Минусы:– Наличие двух слоев (дизайна и содержимого
страницы) приводит к тому, что вывод поверх содержимого страницы затруднен (например, при разработке выпадающего меню)
– Сложность отслеживания разных событий (начала и конца анимации между страницами и т.д.)
![Page 26: RIA- приложение Fuzzle CMS* : разбор полётов](https://reader035.vdocuments.pub/reader035/viewer/2022062321/56813d0f550346895da6c81e/html5/thumbnails/26.jpg)
Архитектура (целиком)
![Page 27: RIA- приложение Fuzzle CMS* : разбор полётов](https://reader035.vdocuments.pub/reader035/viewer/2022062321/56813d0f550346895da6c81e/html5/thumbnails/27.jpg)
Результаты
• Три истории:– Генерация клиентских классов позволяет
здорово экономить время;– Людям нравится удобство и простота при
создании:• Дополнительных модулей;• Дизайна.
– Ради удобства они готовы поступиться функциональностью.
![Page 28: RIA- приложение Fuzzle CMS* : разбор полётов](https://reader035.vdocuments.pub/reader035/viewer/2022062321/56813d0f550346895da6c81e/html5/thumbnails/28.jpg)
Полезные ссылки
• Сайт системы: http://fuzzle-cms.ru/• Создание и установка виджетов:– http://docs.fuzzle-cms.ru/Programmistu -
документация программисту– http://docs.fuzzle-cms.ru/Programmistu/Sozdanie
vidzhetov - пример Flex-виджета
• Интеграция дизайна:– http://docs.fuzzle-cms.ru/Designer -
документация дизайнеру