Advertisement
  1. Code
  2. Workflow

Понимание PureMVC Open Source Framework

Scroll to top
Read Time: 38 min

Russian (Pусский) translation by Svetlana (you can also view the original English article)

Два раза в месяц мы возвращаемся к любимым постам наших читателей за всю историю Activetuts +. Этот учебник был впервые опубликован в мае 2009 года.

Время от времени вас могут попросить поработать над проектом, который требует много кода и / или сотрудничества с коллегами. Можно с уверенностью сказать, что фреймворки часто являются лучшим выбором в отношении структуры, семантики и производительности.

Понимание структуры может занять много времени, но как только вы довольны своими знаниями, вы можете буквально писать со скоростью мысли. PureMVC - отличный фреймворк для AS3; некоторые могут сказать, что немного сложно разобраться, но вы будете счастливы, что сделали.

Как вы можете видеть из демонстрации, то, над чем мы работаем, довольно просто, но этого достаточно, чтобы дать вам понимание того, как работает PureMVC.


Прежде чем мы начнем ...

Прежде чем мы начнем, я хотел бы удостовериться, что следующие основания охвачены. Это учебное пособие для  продвинутых сценаристов Actionscripters, но не пугайтесь, если вы ни то, ни другое,сейчас самый подходящий момент чтобы начать учиться!

  1. Этот пример построен с использованием Flex Builder. Вы можете перейти на веб-сайт Adobe и загрузить себе копию (60-дневная бесплатная пробная версия!). Тем не менее, он с радостью будет работать в IDE по вашему выбору, будь то FlashDevelop, FDT или хороший TextMate.
  2. Как я уже сказал, это руководство предназначено для  продвинутых сценариев Actionscripters, поэтому я собираюсь пропустить обычные части, такие как настройка вашего проекта в выбранной вами IDE и т. д.  
  3. Стоит отметить, что в следующий раз, когда вы зайдете в свой бизнес, желательно сначала распечатать копию лучших практик PureMVC. Это довольно тяжело, но вы будете рады, что прочитали это.

Шаг 1: настройка

Было бы целесообразно взять себе копию файла .zip проекта. В нем вы увидите основные настройки для этого урока. Запустите вашу IDE (у меня Flex Builder) и создайте новый проект. Следующее, что вам нужно сделать, это настроить компилятор Flex на использование папки «src» для исходного пути, папки «debug» для отладочной корзины и папки «deploy» для релизной корзины. Просто.

Во-вторых, я включил две дополнительные библиотеки в папку "src": TweenLite Greensock ("src / gs") и PureMVC ("src / assets / swc"). Вы заметите, что я использовал .swc для библиотеки PureMVC, а не для исходной папки, потому что я предпочитаю использовать файлы .swc. Убедитесь, что обе эти библиотеки настроены на компиляцию при отладке и последующем развертывании. Ниже приведен скриншот целевого макета для проекта. Хотя вы можете импортировать проект и просматривать его файл за файлом, я расскажу вам, как написать каждый файл, чтобы в итоге вы получили проект, подобный примеру.


Шаг 2: Основы

Концепция PureMVC может отвлечь внимание от нас, но как только вы осознаете основы, вы скоро обойдете ее. Структура PureMVC означает, что уведомления используются для запуска определенных команд, будь то в моделях, представлениях или контроллерах. Эти уведомления состоят из имени и необязательного тела. Параметр body позволяет отправлять данные из представления (например, какая кнопка была нажата) в контроллер, который затем передает их в модель, которая затем возвращает относительные данные.

Это понятие уведомлений означает, что PureMVC имеет очень четкую структуру для настройки исходных файлов:

  • Прокси (модель):
    Прокси это просто модель. Модель, для тех, кто может не знать, - это класс, который обрабатывает все транзакции данных, такие как загрузка данных XML, их сохранение и извлечение. В отличие от посредников или команд, прокси никогда не слушают и не обрабатывают уведомления; они только отправляют их. Это означает, что для того, чтобы команда или посредник могли получить некоторые данные, эти данные должны быть либо переданы вызываемому через тело уведомления, либо путем получения экземпляра прокси-сервера с фасада. Прокси хранят свои данные в открытых классах, называемых VO (объектами значений). Это просто простые классы с открытыми переменными, в которых мы можем хранить наши данные для извлечения и обновления через наши прокси.
  • Посредники и их взгляды (вид):
    Посредник - это класс, который действует от имени представления. В вашем приложении вы можете иметь несколько представлений, и все эти представления будут расширять класс DisplayObject (иначе они не будут представлениями). Посредник будет класс, который добавляет ваш взгляд к вашему основанию («viewComponent»; это первый аргумент, который передается посредника) и она также будет обрабатывать все входящие и исходящие уведомления, связанные с этой точки зрения. Это означает, что посредник отвечает уведомления приложения, если пользователь вызвал событие в представлении (например, нажав на кнопку) и будет также отвечать за передачи данных от прокси в представлении для того, чтобы обновить его. Посредник прослушивает и обрабатывает уведомления, сам и имеет возможность регистрировать новых посредников в фасад, когда они нужны, вместо того чтобы загружать их все сразу.
  • Команды (контроллер):
    Команда-это просто контроллер. Хотя он не слушать уведомления сам, он имеет уведомления по трубам к нему от фасада. Это означает, что команда для выполнения условного оператора, чтобы он мог определить, какие уведомления, он получил и что делать дальше. А также получение уведомлений, команды разрешается посылать их, слишком. Они могут также зарегистрировать прокси, посредников и другие команды.

Надеюсь что должны были дать вам простое понимание как PureMVC приводится. Для визуального представления как уведомления можно «вылететь» вокруг вашего приложения, проверьте PureMVC в концептуальной схеме:

Вы будете быть прощены, если вы думаете, что это все очень сложной, но как только вы садитесь и планировать ваше приложение будет выглядеть как, вы скоро поймете, что мы собираемся для:

  1. Наш базовый класс запустит фасад
  2. Затем фасад вызовет команду запуска
  3. Запуск команды зарегистрирует наш прокси и применения посредника
  4. Прокси будет затем ссылаться его значение объекта и ждать дальнейших уведомлений
  5. Приложение-посредник будет регистрировать прогресс посредника
  6. Посредник прогресс будет создать представление прогресса и затем отправить уведомление для загрузки данных
  7. Фасад будет получать уведомления и передать его в команду данные
  8. Команды данных будет затем фильтровать уведомления и рассказать прокси-сервер для загрузки данных
  9. Прокси будет уведомлять прогресс, посмотреть, что он загружает данные (это будет показан), прогресс (он будет обновляться) и когда он закончил (он будет скрыт;) посредник будет обрабатывать все это
  10. Прокси будет затем отправить уведомление для применения посредника для обработки
  11. Посредник приложения зарегистрирует представление URL, где мы создадим кнопки, по которым пользователь будет нажимать
  12. Посредник представления URL-адресов передаст данные из прокси-сервера в представление URL-адресов и добавит представление URL-адресов на сцену.
  13. Пользователь нажмет на кнопку, затем она будет обработана посредником и уведомление будет отправлено прокси
  14. Затем прокси снова загрузит данные, всегда передавая состояние на экран прогресса.
  15. Затем прокси снова отправит уведомление для обработки посредником приложения.
  16. Затем посредник приложения скажет посреднику представления URL-адресов скрыть представление URL-адресов, а затем зарегистрирует представление изображений.
  17. Посредник представления изображений создаст представление изображений из данных прокси

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


Шаг 3: Все начинается с фасада

Всякий раз, когда вы работаете с PureMVC, вы должны понимать, что кодирование всегда начинается с фасада. Фасад - это слой, который связывает инфраструктуру PureMVC, ваш код MVC и ваш базовый файл Actionscript; в этом случае мой называется "App.as". Во время выполнения App.as будет заниматься своим делом, будь то настройка масштаба сцены, частоты кадров и еще много чего; и когда он будет готов, он вызовет фасад для запуска приложения.

Давайте создадим наш базовый файл Actionscript. Используя вашу любимую среду разработки, создайте новый файл, назовите его «App.as» внутри "src" и убедитесь, что он расширяет класс Sprite следующим образом:


Шаг 4: Настройка базы

Теперь, когда мы создали наш базовый класс, не стесняйтесь добавлять такие вещи, как установка ширины, высоты, цветов фона и так далее. Также удобно импортировать любые ресурсы, которые вам могут понадобиться, например, шрифты или изображения. Если вы довольны своим базовым классом, мы можем перейти к созданию фасада. Ниже приведен предварительный просмотр моего базового класса:


Шаг 5: Настройка фасада

В этом шаге мы углубимся прямо в мире PureMVC. Как я уже говорил в шаге 2, фасад - это важный слой, который объединяет ваше приложение. Создайте новый класс, называемый «ApplicationFacade.as» в "src / com / flashtuts" убедитесь, что он расширяет Facade и реализует IFacade. Обратите внимание, что наш фасад не имеет конструктора, так как он расширяет класс Facade. В нашем фасаде у нас будет 3 функции с 4 дополнительными. Кроме того, у нас будет 2 открытых константы. Ниже приведено описание того, как будет выглядеть наш класс фасадов:

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

Хотя вам не нужно иметь константу с именем NAME, рекомендуется всегда создавать ее в классах, в которых есть константы уведомлений, чтобы эти уведомления были уникальными и менее восприимчивыми к человеческим ошибкам (таким как орфографические ошибки).

Далее мы переходим к первой из наших необходимых функций, «getInstance ()». Это первая и самая важная функция фасада, которая позволяет нашему базовому классу получить экземпляр фасада, а затем запустить команду запуска (мы вернемся к этому):

Теперь мы переходим к функции, которая управляет маршрутизацией уведомлений нашим контроллерам или, как их называет PureMVC, командами:

Очень важно сохранить «registerCommand (STARTUP, StartupCommand);» так как без этого приложение не запустится. Все это в основном означает, что фасад будет передавать уведомление под названием «STARTUP» команде под названием «StartupCommand». Как видите, у меня есть еще два. Они оба указывают на другой контроллер под названием «DataCommand», и оба уведомления являются запросами на получение данных.

Теперь мы переходим к нашей последней требуемой функции без нашего фасада, «startup ()». Все, что он делает, - это запускает уведомление, которое направляется в «StartupCommand» через обработчики «registerCommand»:

Наконец, последнее, но не менее важное, у нас есть наша последняя функция. Это дополнительная функция, которую я хотел бы добавить, когда я работаю с PureMVC, поскольку она позволяет мне видеть, какие события запускаются и в каком порядке. Эта функция просто перезаписывает функцию sendNotification (), которую вы используете в PureMVC для отправки уведомлений. Помимо уведомления наблюдателей, приложение отслеживает события, которые вы можете увидеть:

Так что это наш фасад. Прежде чем мы закончим, нам нужно применить еще одну строку к нашему базовому классу. Эта строка просто получит экземпляр нашего фасада и затем запустит команду запуска:

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

Теперь мы готовы испачкать руки.


Шаг 6: Запуск команды

Как обсуждалось в Шаге 4, фасад обрабатывает всю маршрутизацию уведомлений для наших команд (контроллеров). Первая команда, которую мы должны создать, это «StartupCommand». Поэтому создайте новый файл с именем «StartupCommand.as» в рамках «src/com/flashtuts/контроллер». Убедитесь, что он расширяет SimpleCommand и реализует ICommand. Как и наш фасад, наши команды не будут иметь конструкторов, вместо этого они будут переопределять открытую функцию из класса SimpleCommand с именем execute ():

Вы заметите, что в нашей функции execute () есть один аргумент, называемый «уведомлением». Нам не нужно использовать это на этом этапе, но это станет тем, что мы используем в других наших командах. Поскольку эта команда используется для запуска нашего приложения, в первую очередь она регистрирует прокси (модель):

а потом наш посредник

Итак, теперь у нас есть готовая команда запуска. Теперь мы создадим наш прокси и перейдем к нашему ApplicationMediator.


Шаг 7: Создание прокси

Теперь, когда у нас есть «StartupCommand», регистрирующий наш прокси, нам нужно убедиться, что прокси существует. Поэтому создайте новый файл с именем «DataProxy.as» в «src / com / flashtuts / model» и убедитесь, что он расширяет Proxy и реализует IProxy. Для начала у нас просто будет две функции в нашем прокси: конструктор и функция «get» для извлечения VO (объекта значения):

Как видите, первая функция нашего прокси - это наш конструктор, в котором мы «super ()» две переменные: имя прокси (устанавливается константой NAME) и VO. Нам нужно передать имя прокси, поскольку это позволит нам получить его экземпляр фасада, а не создавать новый экземпляр и терять данные нашего виртуального объекта:

Вторая функция - это простая функция get, которая возвращает наш VO. Это позволяет прокси, командам и посредникам легко получить доступ к VO через прокси:

Прежде чем мы закончим с нашим прокси, нам нужно создать наш VO, поэтому создайте новый класс с именем «DataVO.as» в "src / com / flashtuts / model / vo". Затем мы добавим три открытые переменные: «dataURL: String», «urlsArray: Array» и «urlsDataArray: Array». Мы собираемся установить «dataURL», чтобы он указывал на наш XML-файл в «src / assets / xml» с именем «data.xml», а для двух других мы просто установим их как пустые массивы:

Это содержимое XML-файла:

Примечание. Вы увидите, что я удалил свой ключ API. Вы можете легко подать заявку на него, зайдя на сайт документации Flickr API.

Теперь, когда у нас есть наш прокси и VO, нам нужно настроить наших посредников и взгляды.


Шаг 8: Создание ApplicationMediator

«ApplicationMediator» - это слой, который будет находиться между нашей «StartupCommand» и посредниками вашего представления. По мере того, как ваше приложение становится все больше и больше, больше не имеет смысла регистрировать всех ваших посредников одновременно (например, при запуске). Поэтому, имея родительский посредник (ApplicationMediator), вы можете прослушивать уведомления, отправляемые вокруг вашего приложения, и регистрировать посредников, когда они необходимы. Поскольку посредники действуют от имени представлений, иногда данные, необходимые для представления, могут быть еще не загружены, поэтому кажется глупым регистрировать посредника и создавать представление, не имея возможности передавать ему какие-либо данные.

Для начала создайте новый файл с именем «ApplicationMediator.as» в «src / com / flashtuts / view» и убедитесь, что он расширяет Mediator и реализует IMediator. Ниже приведено описание того, как должен выглядеть ваш «ApplicationMediator»:

Как видите, посредник начинает с нашего старого друга константой "NAME" и ее конструктором. Назад, когда мы зарегистрировали посредника в Шаге 6, мы прошли экземпляр стадии, наш базовый класс («App.as») в качестве первого аргумента. В нашем конструкторе мы присваиваем супермену NAME и первый аргумент, viewComponent, так как это viewComponent, который позволит нашим посредникам добавлять свои представления на сцену, в наш базовый класс.

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

Расширяя класс Mediator, он позволяет нам переопределить удобную функцию с именем "onRegister ()". Эта функция вызывается, когда фасад регистрирует посредник, так что, кажется, лучшее место, чтобы наш "ApplicationMediator" зарегистрировал посредник для нашего представления прогресса:

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


Шаг 9: Создание нашего посредника прогресса и просмотра

Теперь, когда мы настроили наш «ApplicationMediator» для регистрации нашего «ProgressViewMediator», мы, прежде всего, начнем с создания «ProgressView.as» Класс внутри "src / com / flashtuts / view / components". Это класс, который просто расширяет DisplayObject, в данном случае Sprite. Я не буду проходить через код для представления, так как он довольно стандартен для любого Actioncripter, но ниже я расскажу о взаимодействии между представлением и его посредником:

Поскольку посредник «все говорит» для представления, важно, чтобы представление и посредник могли передавать информацию друг другу. Посредник может передавать информацию в представление, поскольку посредник будет иметь экземпляр представления, объявленного внутри него, но для представления, чтобы передать информацию посреднику (например, пользователь нажимает на кнопку), мы полагаемся на события (не перепутал с уведомлениями). Мы просто получаем наше представление о том, чтобы отправлять событие, и заставляем нашего посредника слушать это событие. Следовательно, посредник может обработать событие из представления, переварить информацию и выполнить что-либо соответствующим образом. Мы объявили имя этих событий, используя открытые константы, поэтому в нашем представлении есть три события: SHOW, HIDE и UPDATE (очень похоже на наш фасад).

Примечание: размещение имен событий может быть размещено внутри фасада (файл «ApplicationFacade.as») или в относительных видах. Я считаю, что легче и чище держать их в поле зрения, но вам решать, какой способ работы вам подходит.

Как вы можете сказать, я создал текстовое поле, которое будет использоваться для отображения процента данных, загруженных через наше приложение.

Теперь мы можем перейти к посреднику, поэтому создайте новый файл с именем «ProgressViewMediator.as» в «src / com / flashtuts / view» и убедитесь, что он расширяет посредник и реализует IMediator. Он будет следовать тому же стилю, что и наш ApplicationMediator, и поэтому будет иметь конструктор, который имеет один аргумент ("viewComponent"), общедоступную константу с именем NAME и переопределенный наш друг "onRegister ()". Вот как должен выглядеть ваш посредник:

Первое, что нам нужно добавить к нашему мнению в качестве ссылки на нашего посредника:

и теперь мы получаем посредник, чтобы добавить наше представление к "viewComponent", поэтому мы имеем:

Теперь, когда у нас есть скелеты нашего посредника, нам нужно посмотреть на то, что собирается делать наш взгляд. Что ж, как вы, вероятно, можете сказать из констант, наше представление расскажет пользователю, сколько уже загружено, поэтому оно имеет открытые константы SHOW, HIDE и UPDATE. Поскольку это будет нечто, на что будет реагировать наше представление (как вы можете сказать с помощью функций "show ()", "hide ()" и "update ()" в нашем представлении), нам нужен наш посредник для обработки этих данных. уведомления и запускать эти функции соответственно.

посредника: «listNotificationInterests ()» и «handleNotification ()». Первая функция возвращает массив всех уведомлений, в которых заинтересован этот посредник (вот почему так важно вставлять эти уведомления в открытые константы, чтобы к ним было легко обращаться). Последний на самом деле что-то делает с ними. Этот посредник интересуется только SHOW, HIDE и UPDATE, поэтому мы добавляем первую функцию и обрабатываем вторую:

Вы можете просто увидеть, что наш handleNotification () принимает аргумент INotification, класса, который содержит имя и тело уведомления. Мы используем оператор «switch», чтобы определить, какое уведомление должно быть обработано, и соответственно запустить функции. Простой.

Поздравляю! Вы достигли первого этапа! Мы не продвинулись далеко? Протестируйте ваш файл, и вы должны увидеть следующее:


Этап

Итак, мы создали наш фасад, добавили команду, прокси и посредник приложения, затем создали представление и добавили его в наше приложение, используя фасад представления.


Шаг 10: Создание просмотра наших URL

Теперь мы хотим загрузить некоторые данные. Прежде чем мы это сделаем, давайте создадим представление, которое будет использоваться для отображения этих данных. Поскольку мы загружаем три канала API Flickr, я вижу, что в следующем представлении мы создаем три кнопки, которые позволяют пользователю нажимать, после чего наше приложение будет возвращать изображения из соответствующего канала. Затем давайте создадим новый файл с именем «URLsView.as» в «src / com / flashtuts / view / component» и точно так же, как наш «ProgressView», это расширит класс Sprite:

Я не собираюсь проводить вас через этот класс представления, как со всеми классами представления. Это базовые классы AS3, и вы должны с ними ознакомиться. Однако, как вы можете видеть, я не использовал конструктор, так как мы хотим создавать кнопки только тогда, когда данные загружены нашим «DataProxy». Также обратите внимание на открытые константы в верхней части класса, в основном DATA_GET и DATA_READY. Это события, которые будут запущены, чтобы сигнализировать о том, что данные должны быть загружены, затем данные загружены и готовы к просмотру.

Теперь мы переходим к посреднику нашего представления, поэтому создайте файл с именем «URLsViewMediator.as» в «src / com / flashtuts / view» и убедитесь, что он расширяет Mediator и реализует IMediator. Это так же, как и все посредники в нашем приложении. Как и в случае с нашим «ProgressViewMediator», у этого есть конструктор, в котором он заменяет NAME и «viewComponent», а также имеет переопределенную функцию «onRegister». Опять же, как и «ProgressViewMediator», мы объявляем новый экземпляр нашего представления:

Теперь нам нужно подумать о том, что собирается делать наш взгляд. Что ж, это позволит пользователю щелкнуть по кнопке внутри нее и отправить событие (это то, что делает функция handleContainerClick () в представлении). Нам нужно сказать нашему посреднику, чтобы он предоставил нашему представителю прослушиватель этого события и обработал его соответствующим образом:

Теперь нам нужно подумать, когда этот посредник вступит в действие. Помните, раньше я говорил, что бессмысленно запускать посредника, пока он не понадобится? Этот посредник не будет запущен до того, как он нам понадобится, поэтому мы предполагаем, что когда он будет впервые зарегистрирован, данные будут готовы для представления для построения кнопок, поэтому мы обновим нашу функцию onRegister (), чтобы отправить данные в представление, показать представление и добавить его на сцену. Поскольку наши данные хранятся в нашем виртуальном объекте DataProxy, нам нужно добавить еще одну функцию, которая позволяет нам получать доступ к экземпляру прокси-сервера фасада и получать данные из виртуального объекта:

Наконец, поскольку этот посредник будет создан, когда данные будут готовы, нам нужно сообщить нашему «ProgressView», что мы больше не хотим, чтобы они были видимыми, поэтому мы запускаем уведомление под названием «ProgressView.HIDE», которое будет поднято « ProgressViewMediator "и скажет" ProgressView ", чтобы скрыть себя:

Еще раз, прежде чем мы сможем продолжить, нам нужно подумать о том, какие уведомления должен будет слушать этот посредник. Поскольку мы собираемся сделать это приложение пригодным для использования, нет смысла не позволять пользователю возвращаться и выбирать другой URL-адрес канала Flickr, поэтому имеет смысл разрешить повторное отображение этого представления. Именно здесь в игру вступает публичное const SHOW (вы заметите, что у меня есть соглашение об именах, когда дело касается всех моих уведомлений, это хорошо и ускорит ваше развитие). Как и в случае с нашим «ProgressViewMediator», мы добавляем функции «listNotificationInterests ()» и «handleNotification ()» в наш класс:

Вы заметите, что я добавил некоторые вещи в функцию handleContainerClick (). Все, что делает эта функция - просто передает индекс нажатой кнопки (например, 0, 1, 2 ...) с именем события "URLsView.CLICKED". Мы обработаем это событие в ближайшее время, так как это событие мы будем использовать для загрузки канала Flickr, выбранного пользователем.

Теперь, когда наше представление готово к нашим данным, мы можем перейти к прокси и загрузить немного XML. Ух ты! 


Шаг 11: Загрузка данных

Как я упоминал выше, наш «ProgressViewMediator» запускает уведомление под названием «URLsView.DATA_GET». Чтобы наш прокси получил это уведомление, нам нужно, чтобы оно прошло через наш фасад, а затем команду, которая затем вызовет функцию прокси. Сначала нужно зарегистрировать команду в нашем фасаде, поэтому откройте «ApplicationFacade.as». и добавьте функцию «registerCommand» в функцию «initializeController ()» следующим образом:

Вы увидите, что мы говорим нашему фасаду передать это уведомление команде под названием «DataCommand», это имя контроллера, который мы собираемся сделать, чтобы обработать это уведомление и запустить прокси. Затем создайте файл с именем «DataCommand.as» в «src / com / flashtuts / controller», и он должен будет расширить SimpleCommand и внедрить ICommand. Нашему классу не понадобится конструктор, так как нас интересует функция «execute ()» (как и «StartupCommand»):

Если у вас острый взгляд, вы заметите, что мы встречаемся с нашим другом в классе INotification. Как и с посредником, этот класс дает нам имя и тело уведомления, поэтому мы обрабатываем его таким же образом - с помощью переключателя:

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

Наконец, вы увидите, что мы вызываем функцию в нашем прокси с именем "urlsDataGet ()". Это загрузит наши данные, поэтому нам лучше их создать. Откройте «DataProxy.as» и создайте функцию с именем «urlsDataGet ()», которая будет загружать данные следующим образом:

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

Основными вещами, которые я упомяну, являются функции handleProgress () и handleURLsDataGetComplete (). Они оба отправляют уведомления в приложение, первое отправляет процент загрузки данных в наше представление хода выполнения (помните, я говорил, что уведомление состоит из имени и тела?), А второе отправляет уведомление приложению о том, что наш первый бит данных закончил загрузку.

Наконец, поскольку мы хотим, чтобы наши «URLsViewMediator» и «URLsView» регистрировались только тогда, когда данные готовы, нам нужно изменить посредник приложения, чтобы он регистрировал посредник при отправке этого события:

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

Мы на следующей миле! Теперь мы должны увидеть, что наше приложение загрузит данные XML и затем передаст эти данные нашему «URLsViewMediator», который, в свою очередь, скажет «URLsView» создать несколько кнопок, готовых для нажатия пользователем:


Этап

Похлопайте себя по спине, так как вы многого добились! К настоящему времени вы должны быть знакомы с тем, как уведомления играют большую роль в приложении, и как вся структура объединяется фасадом. Следующий бит будет бризом ...


Шаг 12: Обработка пользовательского события

Как я объяснил ранее, представление будет отправлять пользовательское событие, такое как перемещение мыши или в этом случае щелчок мышью. Это событие будет затем обработано его посредником, который затем решает, что делать. Поскольку мы настроили функцию «handleContainerClick ()» внутри «URLsViewMediator» для отправки индекса кнопки, теперь нам нужно обработать это событие и загрузить последующие данные. Сначала нам нужно построить наш окончательный взгляд и посредник.

Вот мнение: 

Все, что делает этот вид, - это берет данные XML, загруженные из Flickr API, создает сетку изображений и кнопку возврата. Вот посредник:

Опять же, ничего из этого не должно быть новым для вас, так как мы просто создаем экземпляр нашего представления, добавляем его на сцену, добавляем слушателей к нашему представлению (и их обработчикам), а затем устанавливаем уведомления, которые он собирается прослушивать, и как он с ними справится.

Чтобы обработать это уведомление, мы в последний раз обновляем посредник приложения и настраиваем его на прослушивание уведомления «URLsView.CLICKED»:

Об обработке этого события следует отметить одну вещь: первое, что делает код, это проверяет, был ли зарегистрирован посредник. Если нет, то он регистрируется, и все с этим уживаются. Причина этого в отличие от перерегистрации заключается в том, что мы собираемся создать кнопку «Назад», чтобы пользователь мог вернуться и выбрать другой канал Flickr. Поскольку нам нужно только показать и скрыть кнопки, которые позволяют пользователю выбирать, нет необходимости перестраивать их. Однако, поскольку пользователь потенциально может выбрать другой канал Flickr, нам нужно перестроить наши изображения. Чтобы сохранить дублирование нашего кода, мы создаем изображения только тогда, когда «ImagesViewMediator» получил событие «ImagesView.DATA_READY».

Поскольку наше приложение отправляет «ImagesView.DATA_GET» всякий раз, когда пользователь выбирает API Flickr, нам нужно настроить «ApplicationFacade», «DataCommand» и «DataProxy», чтобы а) обрабатывать событие и б) загружать данные и отправлять событие обратно.

Сначала мы редактируем «ApplicationFacade», добавляя «registerCommand ()» к функции «initializeController ()»:

Затем мы сообщаем «DataCommand», как с ним обращаться (через прокси):

Наконец мы редактируем «DataProxy»:

Вы заметите, что я выполнил немного волшебства Actionscript в функции "imagesDataGet ()". Опять же, это просто загрузка некоторого XML, ничего особенного в этом нет, но уникальные данные будут загружены только один раз. В этом прелесть наличия VO и использования индексов при нажатии кнопок. По сути, происходит следующее: если пользователь нажимает кнопку 2 (третью), он проверяет, не связаны ли с этим индексом какие-либо данные (поскольку цикл, когда URL-адреса были впервые загружены, создает массив с пустыми строками). Если это так, нет необходимости снова загружать данные, в противном случае данные загружаются и, используя красоту словарей, мы можем поместить их в массив.

Наконец, этот прокси-сервер отправляет уведомление «ImagesView.DATA_READY» обратно в наше приложение и на наш взгляд, где произойдет какое-то волшебство ..


Вы сделали это!

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


Примечание

PureMVC - отличный инструмент, и я использую его во многих проектах, но есть некоторые ключевые различия между его использованием в ActionScript 3.0 и MXML. Когда вы используете MXML, вы добавляете представления с использованием XML, например так:

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

Надеюсь, вам понравилось после этого урока, не стесняйтесь оставлять любые вопросы или отзывы в комментариях!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.