injun #576871

Этот тутор написал Саймон Бейли (Simon Bailey), а я - перевёл. Полагаю PureMVC будет многим интересен, и лишний тутор не помешает¹.

***

***

Предисловие:
Это на самом деле простое приложение, написанное во flex builder’е на AS, а Flash использовался только для визуальных компонентов. Основная идея данного тутора - это показать простоту использования фреймуорка PureMVC. Вы узнаете некоторые особенности взаимодействия компонентов на сцене с PureMVC. Мы пристроим компонент FLVPlayback в качестве примера; создадим event listener в медиаторе, который будет ожидать клика. Итак, данный тутор не является материалом по углубленному изучению фреймуорка; просто вы получите step-by-step гайд по применению возможностей фреймуорка в реальных примерах.

Шаг первый. Открывайте ваш Flex builder и создавайте новый AS-проект. Назовите его CS3VideoPMVC. Все настройки оставьте по умолчанию и кликайте Next. Нам понадобится компонент FLVPlayback, так что кликайте чтобы добавить swc и выберите FLVPlaybackAS3.swc в Configuration > Components > Video, что находится в стандартной директории иснталяции Flash CS3.

После этого, кликайте по Browse, выбирайте директорию CS3VideoPMVC и кликайте New, чтобы создать стандартную директорию src для наших сорсов. Кликайте Finish. Теперь правой кнопкой мыши по директории проекта и выберите ActionScript компилятор, HTML wrapper нам не понадобится - всю работу мы предоставим Flash’у. Теперь создайте новую директорию внутри src, назовите её assets, и в неё положите то, что будет проигрываться.

Шаг второй. Откройте Flash CS3 и воспользуйтесь инструкцией Клиффа Холла, как правильно импортировать фреймуорк во Flash (или же просто скопируйте PureMVC директорию org в нашу src), сохраните как CS3VideoPMVC в нашей директории src. Выставьте свойства документа равные этим: ширина = 320, высота = 240, frame rate = 31.

Создайте новый мувик и назовите его VideoMC. Перетащите instance на сцену и обзовите его как player. Теперь перетащите компонент FLVPlayback на сцену и обзовите его flv_player. В инспекторе компонентов укажите скин SkinOverPlaySeekMute.swf. В настройках публикации, выберите вкладку Flash и кликните по настройкам версии AS: automatically declare stage instances - нам не нужно. Кликайте ОК. Всё. С Flash IDE мы покончили, правда держите IDE открытой - она нам понадобится при публикации.

Шаг третий. Во Flex builder’е откройте класс CS3VideoPMVC.as. Создайте две публичных переменных: одну - player, а другую - flv_player. Теперь займёмся непосредственным внедрением PureMVC.

Шаг четвёртый. В директории src создайте новую директорию и назовите её com, и уже в ней создайте директорию - nutrixinteractive. Создайте три новых директории: model, view и controller.

Шаг пятый. Создайте новый AS суперкласс (тип Facade), назовите его ApplicationFacade, чтобы импортировать PureMVC класс Facade, кликайте для добавления интерфейсов и пишите IFacade, чтобы включить класс IFacade. Генерация конструкторов нам не нужна, поэтому отключим её, как и генерацию функций. Сохраните всё это дело в директорию nutrixinteractive.

Шаг шестой. Впишите следующий код для класса ApplicationFacade:

package com.nutrixinteractive
{
    import com.nutrixinteractive.controller.StartupCommand;

    import org.puremvc.interfaces.IFacade;
    import org.puremvc.patterns.facade.Facade;
    import org.puremvc.patterns.observer.Notification;

    public class ApplicationFacade extends Facade implements IFacade
    {
        public static const STARTUP:String           = "startup";

        public static function getInstance():ApplicationFacade
        {
            if ( instance == null ) instance = new ApplicationFacade();
            return instance as ApplicationFacade;
        }

        public function startup( app:CS3VideoPMVC ):void
        {
            notifyObservers( new Notification( STARTUP, app ) );
        }

        override protected function initializeController():void
        {
            super.initializeController();

            registerCommand( STARTUP, StartupCommand );
        }
    }
}

Шаг седьмой. В директории controller создайте новый AS суперкласс, назовите его StartupCommand с интерфейсом ICommand, опять же отключите генерацию конструкторов и функций. Ну и в качестве кода впишите следующий код:

package com.nutrixinteractive.controller
{
    import com.nutrixinteractive.view.PlayerMediator;

    import org.puremvc.interfaces.ICommand;
    import org.puremvc.interfaces.INotification;
    import org.puremvc.patterns.command.SimpleCommand;

    public class StartupCommand extends SimpleCommand implements ICommand
    {
         override public function execute( note:INotification ):void
         {
             var app:CS3VideoPMVC = note.getBody() as CS3VideoPMVC;

             facade.registerMediator( new PlayerMediator( app ) );
         }
    }
}

Шаг восьмой. В директории view создайте суперкласс PlayerMediator и интерфейсом IMediator, отключите генерацию конструкторов и функций.  Впишите следующий код:

package com.nutrixinteractive.view
{
    import fl.video.*;

    import flash.display.Sprite;
    import flash.events.MouseEvent;

    import org.puremvc.interfaces.IMediator;
    import org.puremvc.patterns.mediator.Mediator;

    public class PlayerMediator extends Mediator implements IMediator
    {
        public static const NAME:String = ‘PlayerMediator’;

        private var flv_player:FLVPlayback;

        public function PlayerMediator( viewComponent:Object )
        {
            super( viewComponent );

            assignPlayer();
        }

        override public function getMediatorName():String
        {
            return PlayerMediator.NAME;
        }

        protected function get player():CS3VideoPMVC
        {
            return viewComponent as CS3VideoPMVC;
        }

        private function assignPlayer():void
        {
             flv_player = player.flv_player;

             flv_player.addEventListener( MouseEvent.CLICK, onClick );

             playVideo();
        }

        private function playVideo():void
        {
            flv_player.play("assets/krome.flv");
        }

        private function onClick( e:MouseEvent ):void
        {
            trace(" CLICK ");
        }
    }
}

Шаг девятый. Убедитесь, что ваш CS3VideoPMVC.as выглядит следующим образом:

package
{
    import com.nutrixinteractive.ApplicationFacade;

    import fl.video.FLVPlayback;
    import flash.display.MovieClip;

    public class CS3VideoPMVC extends MovieClip
    {
        public var player:MovieClip;
        public var flv_player:FLVPlayback;

        public function CS3VideoPMVC()
        {
            ApplicationFacade.getInstance().startup(this);
        }
    }
}

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

1. Целую серию статей о PureMVC вы можете почитать у Роста: "Чисто MVC", "Архитектура и ключевые фигуры фреймворка PureMVC", "Фасад (Façade) — ядро и лицо фреймворка PureMVC", "Как устроены Модель, Вид и Управление во фреймворке PureMVC", "Кто использует Cairngorm?" [↩]

Trackback URI | RSS-фид для комментариев