13
октября

Сайт на PureMVC + SWFAddres

Написал    в категории  Программирование

Это действительно надо!

Задача. Создать флеш сайт с возможностью использования навигации, как на обычных html сайтах. И обеспечить модульность при разработке проекта.

Инструменты: PureMVC, SWFAddress.

Что происходит на сервере?

На стороне сервера было реализовано следующее: по ссылке http://exampl.ru/catalog мы переходим на страничку с каталогом, но если мы добавим параметр /?xml то получаем данные с этой страницы в формате xml. Для начала сделаем унифицированный xml документ со статичными аттрибутами mod и view, первый нам говорит — что за модуль мы должны загрузить, а второй сообщает нам как мы должны его отобразить:

<data mod="nameOfModul" view="typeOfView">
...more...
</data>

Например: имеется модуль галереи, у которого есть три представления:

  • Просмотр всего списка (view = allImage)
  • Отображение выбранного изображения (view = targetImage)
  • И допустим вывод картинок по какому-то признаку (view = sortBy).

В данном случае имя модуля остаётся неизменным mod = gallery, а имя представление модуля меняется соответственно на allImage, targetImage, sortBy, — говоря нашему приложению как надо обрабатывать эти данные.

Как с этим должна работать клиентская часть?

Для начала разберёмся с адресной строкой (для этого использована библиотека SWFAddress), так выглядит слушатель события реагирующий на изменение ссылки в адресной строке:

SWFAddress.addEventListener(SWFAddressEvent.CHANGE, handleSWFAddress);

function handleSWFAddress(e:SWFAddressEvent) {
    var paramArr:Array = new Array(); //массив параметров
    paramArr = e.value.split("/");
    var url : String = ""; // переменная с ссылкой на xml
    // формирем ссылку на xml документ
    for(var i : Number = 1;i <= paramArr.length - 1; i++) {
        (paramArr[i] == "" || paramArr[i] == "#") ?
            null :
            url += "/" + paramArr[i];
    }
    var sufixUrl:String ="?xml"; //
    url == "" ?
        null :
        loadXmlData("example.ru/"+ url + sufixUrl);
    paramArr = null;
}

Таким образом адресная строка вида http://example.ru/#/catalog будет распарсена и передана в качестве параметра методу loadXmlData(); в виде ссылки http://example.ru/catalog/?xml на иксэмэль документ. После загрузки файла в в метод choiseModule(); передаётся полученный нами xml документ. Его код можно посмотреть ниже:

private function choiseModule(dataXml:XML):void {
	switch (dataXml.@mod) {
		case "home":
			sendNotification(ApplicationFacade.HOME_DATA_SUCCESS,
                                                               dataXml);
		break;

		case "gallery":
			sendNotification(ApplicationFacade.GALLERY_DATA_SUCCESS,
                                                               dataXml);
		break;
        }
}

Далее, как видно, данные передаются в зависимости от того какой модуль написан в атрибуте mod, и выполняется отображение конкретного представления.

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

Ссылки

  1. PureMVC — это реализация классического MVC для Flash-платформы.
  2. Bumpslide Framework AS 3.0 and AS 2.0 (Много полезных компонентов + )
Оставьте свой комментарий

Rss Feed Tweeter button Facebook button