Flex+Drupal=...

Итак задача. Построить flash-сайт, причем на CMS.
Что такое CMS и зачем это надо - читать тут.
Для реализации этой задачи можно использовать два подхода:
1. Писать свою CMS -задача не простая, а главное долго. Отметаем этот вариант, хотя бы потому, что CMS уже написано великое множество, плодить свою, и не факт, что лучшую, мне кажется задачей неблагодарной.
2. Выбрать из готового. Есть варианты:
http://fuzzle-cms.ru но за деньги Цена основной версии Fuzzle CMS 12900 руб для физлиц (для юр.лиц - 19500)
http://www.flashloaded.com/ здесь слегка дешевле, но на английском Price: $149.95 (per website) , правда и функциональность ограничивается в основном неплохим текстовым процессором на flash.
http://fcmspro.com/ - 299$ и тоже на буржуйском
http://qubix-cms.org/ на русском бесплатно и очень грамотно.

В общем вариантов достаточно много, и если в Ваши задачи входит создания простенького функционально, но броского анимированного flash-сайта и в Вашем бюджете есть немного лишних денег, то дальше можете не читать.
Мы же откажемся от готовых решений по ряду причин. Ну, во-первых это не спортивно, а во-вторых, примем во внимание функциональную ограниченность вышеописанных систем, а так-же проблематичную расширяемость...
Как Вы понимаете, переходим к варианту №3, который будет некой золотой серединой, между вышеизложенными.
Берем традиционную, опробованную на тысячах web-сайтов, бесплатную CMS, поддерживаемую огромным многоязычным комьюнити разработчиков (в том числе и на русском языке), имеющую вполне развитую русскую локализацию. Такой системой, в нашем случае, будет CMS Drupal, хотя бы потому, что в наших экспериментах мы не единственные и работы в этом направлении уже велись, и , что самое главное, в состав подключаемых к системе модулей входят модули специально разработанные для взаимодействия системы с flash-клиентом. Но о них чуть позже. Итак начнем.

1.Flex+Drupal=... Строим сервер.

Нам потребуется:
Дистрибутив Drupal - берем здесь Drupal 6.13 (последнее обновление 2.07.2009 1.05Mb);
Для версий Drupal 6.x: русский перевод интерфейса (в формате PO, всё в одном файле)
AMFPHP 1.9 Beta 2 совершенно чудесная библиотека на PHP, наверняка пригодится вам для организации взаимодействия flash-клиент-сервер и за рамками данного проекта.
AMFPHP модуль Drupal - модуль для реализации работы библиотеки AMFPHP в контексте CMS Drupal
Services модуль Drupal - модуль для организации работы web-сервисов в контексте CMS Drupal
Views - чудесный модуль, только за него можно полюбить Drupal
не скупимся - берем самые последние стабильные версии, все равно бесплатно.

Устанавливаем Drupal - инструкция тут читаем от "Шаг1" до "Установка модулей", с учетом того, что все необходимые модули у нас есть.
В инструкции описана установка русского варианта Drupal, если с этим возникли трудности(мы взяли англ. версию), то ставьте англ..
Затем идите в Administer->Modules включаем модуль Locale -> сохраняемся. Идем в SiteConfiguration->Languages делаем Add Language -> выбираем в Language name(выпадающий список) "Русский", нажимаем на кнопку "Add Language"-> в списке языков отмечаем русский, как default -> сохраняемся -> идем по ссылке "import page"
жмем на кнопку "Выбрать файл" и вспоминаем куда мы сохранили файл перевода http://www.drupal.ru/files/drupal-6.6-ru.po выбираем -> сохраняемся. Вуаля. Наш Drupal теперь "Друпал" и говорит по-русски, как на своем.
Ага. На чем мы там остановились? Установка модулей. Ну, там все по инструкции. Распаковываем в sites/all/modules/ (если папки modules там нет, то создадим ее), да чуть не забыл. В папку sites/all/modules/amfphp (это модуль amfphp из архива amfphp-6.x-1.0-beta1.tar.gz) распаковываем содержимое архива amfphp-1.9.beta.20070513.zip(т.е у нас получается примерно такя конструкция sites/all/modules/amfphp/amfphp) -> идем в Управление -> Модули и все включаем.

Теперь идем в Управление -> Конструкция сайта -> Servises-> Browse. Видим список подключенных нами сервисов. Из этого списка и будем выбирать необходимые нам. По клику на сервисе можно перейти на тестовую страницу сервиса и проверить его работоспособность. Например выбираем метод system.connect жмем call method и получаем результат - свои данные пользователя в формате JSON У меня это выглядит примерно так:

stdClass Object  (      
[sessid] => 889e2c9d58e0e22ee54328c37a9eacf7      
[user] => stdClass Object          
(              
[uid] => 1              
[name] => kohl              
[pass] => 731982a033a5cc815ac03c8504abb748              
[mail] => kohl@m-design.ru              
[mode] => 0              
[sort] => 0              
[threshold] => 0              
[theme] =>               
[signature] =>               
[signature_format] => 0              
[created] => 1247949692              
[access] => 1248293418              
[login] => 1248120025              
[status] => 1              
[timezone] =>               
[language] =>               
[picture] =>               
[init] => kohl@m-design.ru              
[data] => a:0:{}              
[sid] => 889e2c9d58e0e22ee54328c37a9eacf7              
[hostname] => 127.0.0.1              
[timestamp] => 1248293443              
[cache] => 0              
[session] =>               
[roles] => Array                  
(                      
[2] => authenticated user                  
)            
)    
)

Все работает.

2.Flex+Drupal=... Строим клиент.

Для этого нам понадобится:
FlexBuilder 3
Flex SDK 3,3
PureMVC

Создаем новый Flex проект скажем, под названием drupal_flex_client, Для тех, кто использует Denver отмечаем, что Application Server Type нашего проекта - PHP.-> Next. Устанавливаем Web root проекта (у меня это C:\WebServers\home\drupalflashsite.ru\www) и Root Url (у меня это http://drupalflashsite.ru), делаем Validate Configuration, и если все ОК --> Next .Я обычно переименовываю название базового mxml компонента в main.mxml, хотя это дело вкуса. В общем жмем финиш и идем в папку lib импорт и где там у нас лежит PureMVC, импортируем.
Жмем f11 и Упс, Видим Сообщение от Друпала, что страница, не найдена. Исправим это. Идем в корень нашего сайта и создаем папку backup на всякий случай, копируем туда файл .htaccess. Заходим в оригинал и слегка его правим:
Ищем строку DirectoryIndex index.php и вместо "index.php" пишем относительный путь к нашему "main.html", сохраняем файл. Теперь вместо индекса будет открываться наша флэшка, а по адресу http://Ваш сайт/admin мы будем попадать в панель управления сайтом, что и требовалось.
Далее. Заходим в http://Ваш сайт/admin/build/services/keys и создаем ключ разработчика API key(в данной статье он нам не пригодится, но впоследствии без него не обойтись) , в графе "Allowed domain" ставим "*" Жмем кнопку (create API key). Теперь самое главное (потерял 2 часа, пока допетрил), идем http://Ваш сайт/admin/user/permissions модуль services и ставим галку в колонке анонимный пользователь, что разрешает всем и каждому обращаться к web-сервисам Вашего сайта.
Возвращаемся к flex-клиенту. На данном этапе наша задача - приконнектиться к сереру и получить данные пользователя. Иными словами выполнить команду system.connect только уже не с тестовой страницы, а с реального флэш-клиента.
Для реализации этой задачи используем микро-архитектуру PureMVC. В данном контексте я не буду углубляться в объяснения связанные с PureMVC, тем более, что по этой теме написано достаточно много, в том числе и на родном языке:
"Архитектура и ключевые фигуры фреймворка PureMVC",
"Фасад (Façade) — ядро и лицо фреймворка PureMVC",
"Как устроены Модель, Вид и Управление во фреймворке PureMVC "
Переведена на русский и бестпрактика PureMVC на официальном сайте проекта http://puremvc.org,
Даже я приложился к этой теме в своей статейке Женим Flex и pure Flash средствами PureMVC с прилагающимся исходником.
Так, что, если Вы уже в теме, то двинемся дальше. Создадим папку services в src flex-проекта и поместим туда файл services-config.xml со следующим содержанием:

<?xml version="1.0" encoding="UTF-8"?>

   <services-config>

  <services>

  <service id="amfphp-flashremoting-service"

  class="flex.messaging.services.RemotingService"

  messageTypes="flex.messaging.messages.RemotingMessage">

  <destination id="amfphp">

  <channels>

  <channel ref="my-amfphp"/>

  </channels>

  <properties>

  <source>*</source>

  </properties>

  </destination>

  </service>

  </services>
 <channels>

  <channel-definition id="my-amfphp" class="mx.messaging.channels.AMFChannel">

  <endpoint uri="http://Ваш сайт/services/amfphp" class="flex.messaging.endpoints.AMFEndpoint"/>

  </channel-definition>

  </channels>

  </services-config>

где, endpoint uri="http://Ваш сайт/services/amfphp" - это адрес файла /sites/all/modules/amfphp/amfphp/gateway.php в системе координат Друпала. Получить этот адрес можно сделав тест на странице сервисов в админке http://Ваш сайт/admin/build/services жмем на ссылку AMFPHP - /services/amfphp и переходим на страничку с текстом:

amfphp and this gateway are installed correctly. You may now connect to this gateway from Flash.

  Note: If you're reading an old tutorial, it will tell you that you should see a download window instead of this message. This confused people so this is the new behaviour starting from amfphp 1.2.

  View the amfphp documentation

  Load the service browser

Это значит, что все у нас работает корректно и в адресной строке как раз адрес файла gateway.php.
Далее, открываем Свойства нашего flex-проекта (FlexBuilder ->FlexNavigator->drupal_flex_client(наш проект)->rightClick->Properties -> FlexCompiler) и через пробел, после того, что написано в поле ввода Additional Compiler Arguments вводим адрес нашего services-config.xml ( выглядит это так -locale en_US -services services/services-config.xml).Сохраняемся.
Далее создаем суб-команду в файле StartupCommand нашего flex-проекта. Эта команда будет вызываться в тот момент, когда создано приложение, созданы прокси и медиаторы приложения команда должна содержать следующее:

 

  import mx.rpc.events.FaultEvent;

  import mx.rpc.events.ResultEvent;

  import mx.rpc.remoting.RemoteObject;


 

  override public function execute(notification:INotification):void{

  var service:RemoteObject=new RemoteObject;

  service.source="system"

  service.destination="amfphp";

  service.addEventListener(FaultEvent.FAULT,faultHandler);

  service.addEventListener(ResultEvent.RESULT,resultHandler);

  service.connect();

  }
private function faultHandler(event:FaultEvent):void{

  trace("FAULT= "+event.fault)//Содержит сообщение об ошибке.

  }
private function resultHandler(event:ResultEvent):void{

  trace("resultHandler - "+event.result)

  /*

  Здесь мы должны получить тот же результат, что и при вызове метода system.connect с тестовой страницы сервисов админки друпала,

  с той лишь разницей, что объект user будет пуст, как барабан, т.к. с точки зрения Drupal мы зашли как неавторизованый пользователь.
*/
}

Напоследок немножко о теории PureMVC, в материале бестпрактика PureMVC очень авторитетные люди считают, что вызов методов удаленных объектов есть прерогатива модели, я же эту функциональность целиком перекладываю на контроллер, может быть я и не прав, кто не согласен - делайте по-своему, ведь PureMVC - не догма, а руководство к действию.
Исходник прилагается. Продолжение следует...

Баннер Альтернативы

Совершенно безвозмездно разместил баннер Альтернативщиков. Очень интересный проект! Наш проприетарный кукиш буржуазному Papervision3D (бесплатному) :)! Болею за наших! Так держать!

TemplateMonster

Вопрос:

VisioN пишет...

Здравствуйте. Что вы можете сказать о flash-шаблонах templatemonster? Недавно пришлось столкнуться с парой шаблонов, если честно я в ужасе...Классы, находящиеся там дополняют готовые классы флэша, например mx.controls.Button, mx.controls.RadioButtonGroup. Раньше всё задумывался почему эти сайты так тормозят на слабых компьютерах, теперь взглянув на код хочется повеситься

2 Июль 2009 г. 0:11

Ответ:

Добрый день. На самом деле шаблоны на монстре - неисчерпаемый источник вдохновения flash-технолога. Встречаются очень интересные решения. Мне, например очень нравятся шаблоны под маркой Di . Спасибо, кстати ему огромное!

Правда, при оценке этих творений необходимо учитывать тот факт, что это продукт, предназначенный для конечного пользователя. Пытаться как-то расширять их код - не стоит.

Многие шаблоны существуют уже довольно давно, мне встречались программы, явно портированные с AS1-2, однако смотрятся, и наверняка продаются. Так что проще посмотреть как сделан понравившийся эффект, что-то позаимствовать оттуда и сделать по-своему.

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

Если говорить о ценах на шаблоны, то нужно отметить, что конечно-же глупо покупать эксклюзив за несколько тысяч долларов, за эти деньги Вам сделают лучше, а вот потратить 20-50$ за исходник бывает не грех, т.к. Графика и код(местами) стоят этих денег и вслучае модернизации избавят от большОй части рутинной работы. Можно и декомпилировать демки (защиты никакой), но это не красиво по отношению к авторам, ну и реально Вы теряете весь код, так-что, если позволяет бюджет проекта лучше раскрутить заказчика или манагера на лишние 50-100$ и сократить время разработки как раз на 2-3 дня.