37
PureMV PureMV С С в в картинках картинках - для ленивых – - для ленивых – Ростислав Сирык Ростислав Сирык http://flash-ripper.com/ http://flash-ripper.com/

PureMVC в картинках - часть 1

Embed Size (px)

DESCRIPTION

Презентация к докладу на UAFPUG-1 (первой встрече Ukrainian Adobe Flash Platform User Group, состоявшейся 15 марта 2008 г. в Харькове). Обзор методов разработки приложений, введение в рефакторинг, шаблоны проектирования и фреймворк PureMVC. Автор: Ростислав Сирык (http://flash-ripper.com/) Предупреждение: презентация выкладывается "как есть". Автор осознает необходимость ее доработки. Планируется вторая часть.

Citation preview

Page 1: PureMVC в картинках - часть 1

PureMVPureMVСС в картинкахв картинках

- для ленивых –- для ленивых –

Ростислав СирыкРостислав Сирыкhttp://flash-ripper.com/http://flash-ripper.com/

Page 2: PureMVC в картинках - часть 1

Способы разработки приложенийСпособы разработки приложений

Хотелось бы:Хотелось бы: «Раз!» - «работка»«Раз!» - «работка»

Есть:Есть: «Раз!» - «Раз!» - «…а получилось как обычно»«…а получилось как обычно»

Должно быть: Должно быть: 1. 1. РазРаз--РаРа--БотБот--КаКа

((«по-э-тап-но»«по-э-тап-но»))

Page 3: PureMVC в картинках - часть 1

PureMVCPureMVC для ленивых для ленивых

Вопрос: Зачем нужен Вопрос: Зачем нужен PureMVC?PureMVC? Ответ: Для экономии лени.Ответ: Для экономии лени.

1.1. Лень – это друг человека.Лень – это друг человека.2.2. Количество лени во Вселенной Количество лени во Вселенной

ограничено и неизменно ;-(ограничено и неизменно ;-(3.3. Лень не берется из ниоткуда не Лень не берется из ниоткуда не

исчезает в никуда.исчезает в никуда.4.4. Слишком умные отбирают лень у просто Слишком умные отбирают лень у просто

умныхумных

PureMVC —PureMVC — оружие «слишком» умных. оружие «слишком» умных.

Page 4: PureMVC в картинках - часть 1

Векторная Векторная карта Москвыкарта Москвы

- пример - пример PureMVC-PureMVC-приложения - приложения -

Page 5: PureMVC в картинках - часть 1

Векторная карта как деревоВекторная карта как деревоНа вид двумерная, но внутри четыре измеренияНа вид двумерная, но внутри четыре измерения

Page 6: PureMVC в картинках - часть 1

Общий вид картыОбщий вид карты

Page 7: PureMVC в картинках - часть 1

Работа карты с браузеромРабота карты с браузером

Page 8: PureMVC в картинках - часть 1

Требования к картеТребования к карте

Карта Москвы с точностью до метраКарта Москвы с точностью до метра 9 уровней масштаба9 уровней масштаба Гибкая настройка стиля и поведенияГибкая настройка стиля и поведения Инструменты картыИнструменты карты «Чтобы работала лучше «Чтобы работала лучше Mos2.ruMos2.ru»» Рабочая версия Рабочая версия http://217.10.32.73:8080/http://217.10.32.73:8080/

mapmap//

Page 9: PureMVC в картинках - часть 1

- - рефакторингрефакторинг - -

Большая Большая переделкапеределка

Page 10: PureMVC в картинках - часть 1

Если вы попали в серьезную Если вы попали в серьезную переделкупеределку

РефакторингРефакторинг или или РеорганизацияРеорганизация — — процесс полного или частичного процесс полного или частичного преобразования внутренней структуры преобразования внутренней структуры программы при сохранении её внешнего программы при сохранении её внешнего поведения.поведения.

httphttp://://ru.wikipedia.orgru.wikipedia.org//wikiwiki//РефакторингРефакторинг

Page 11: PureMVC в картинках - часть 1

Подходы к рефакторингуПодходы к рефакторингу

Наивный (нет подхода): Наивный (нет подхода): как-нибудь да получится («какой-какой как-нибудь да получится («какой-какой

«рефакторинг?»)«рефакторинг?») Самоуверенный: Самоуверенный:

вера в идеальный код, не нуждающийся в переделкевера в идеальный код, не нуждающийся в переделке Эгоистичный:Эгоистичный:

пусть рефакторит компьютер, он железныйпусть рефакторит компьютер, он железный Осознанный: Осознанный:

делаем с учетом будущего, придерживаемся правилделаем с учетом будущего, придерживаемся правил Стратегический: Стратегический:

применение паттернов, проектирование, фреймворки.применение паттернов, проектирование, фреймворки.

Page 12: PureMVC в картинках - часть 1

Методы рефакторингаМетоды рефакторинга Изменение сигнатуры методаИзменение сигнатуры метода

Заключается в добавлении, изменении или удалении Заключается в добавлении, изменении или удалении параметра метода.параметра метода.

Инкапсуляция поляИнкапсуляция поля Было: Было: public var x: Number;public var x: Number; Стало: Стало: private var _x: Number;private var _x: Number; // // добавляется добавляется getter-getter-

settersetter

Выделение методаВыделение метода Самокомментирующийся код: если фрагмент кода Самокомментирующийся код: если фрагмент кода

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

Перемещение метода Перемещение метода Перемещается метод, который чаще обращается к Перемещается метод, который чаще обращается к

другому классу, чем к своему собственному.другому классу, чем к своему собственному.

Page 13: PureMVC в картинках - часть 1

Проблемы от рефакторингаПроблемы от рефакторинга

Проблемы, связанные с базами данныхПроблемы, связанные с базами данных Проблемы изменения интерфейсовПроблемы изменения интерфейсов Трудности при изменении дизайнаТрудности при изменении дизайна

Page 14: PureMVC в картинках - часть 1

PureMVCPureMVC- - и паттерны проектированияи паттерны проектирования - -

Page 15: PureMVC в картинках - часть 1

Что такое Что такое PureMVCPureMVC

PureMVC - это классический мета-паттерн PureMVC - это классический мета-паттерн «Model-View-Controller»«Model-View-Controller»

ProxiesProxies = Модель = Модель MediatorMediator = Представление = Представление CommandsCommands = Контроллер = Контроллер

+ + NotificationsNotifications (Оповещения) (Оповещения) для для коммуникации.коммуникации.

+ + Façade ( (ФасадФасад)) для для координирования координирования

Page 16: PureMVC в картинках - часть 1

Шутка про Шутка про k=3k=3

Математик идет по улицеМатематик идет по улице..Видит — филармония, афиша, "Камерный Видит — филармония, афиша, "Камерный оркестр Джо Пауэлла".оркестр Джо Пауэлла".О, говорит, интересно, зайду.О, говорит, интересно, зайду.Через полчаса растроенный выходит: Через полчаса растроенный выходит: "Тьфу, тривиальный случай, "Тьфу, тривиальный случай, k=3k=3""

Математик что-то знал (Математик что-то знал (Паттерны?Паттерны?).).

Page 17: PureMVC в картинках - часть 1

Схема Схема PureMVCPureMVC

Page 18: PureMVC в картинках - часть 1

Схема Схема PureMVCPureMVC (0 (0xffffffxffffff))

Page 19: PureMVC в картинках - часть 1

Что дает Что дает PureMVCPureMVC

Дисциплина разработкиДисциплина разработки Общий язык для архитекторовОбщий язык для архитекторов Более устойчивый к рефакторингу проектБолее устойчивый к рефакторингу проект

Page 20: PureMVC в картинках - часть 1

Структура Структура PureMVCPureMVC

Фасад:Фасад: Показать все, что скрыто.Показать все, что скрыто.

Медиатор: Медиатор: Скрыть все, что видно.Скрыть все, что видно.

Посредник:Посредник: Отдать то, что взято.Отдать то, что взято.

Команда: Команда: Сделать, когда нужно.Сделать, когда нужно.

Оповещение:Оповещение: Сделаю все, что скажут.Сделаю все, что скажут. Пойду туда, куда пошлют.Пойду туда, куда пошлют. Принесу то, не знаю что.Принесу то, не знаю что.

Page 22: PureMVC в картинках - часть 1

Мы хотим знатьМы хотим знать разницуразницу

PureMVC or Cairngorm?PureMVC or Cairngorm?>>> Интересует Ваше мнение по этим библиотекам > Интересует Ваше мнение по этим библиотекам >> >> и вообще по паттерным решениям для Flex.и вообще по паттерным решениям для Flex.

Без сомнения и то и другое полезно. Но если бы еще авторы их уделяли Без сомнения и то и другое полезно. Но если бы еще авторы их уделяли достаточно внимания "расжевыванию" своих замыслов реализованных во достаточно внимания "расжевыванию" своих замыслов реализованных во фреймворке. фреймворке.

Качественное "расжевывание" - это когда даже студенту-программисту Качественное "расжевывание" - это когда даже студенту-программисту незнакомому с паттернами будет ясно что к чему. Потому что когда незнакомому с паттернами будет ясно что к чему. Потому что когда специалист не может оценить риски по миграции - это уже либо бестолковое специалист не может оценить риски по миграции - это уже либо бестолковое описание, либо "особая форма маркетинга" (сокрытие информации о описание, либо "особая форма маркетинга" (сокрытие информации о недостатках продукта) ИМХО. недостатках продукта) ИМХО.

[[httphttp://://groups.google.comgroups.google.com//groupgroup//fpugfpug//browse_threadbrowse_thread//threadthread/3770e9c4a296dad9/3770e9c4a296dad9]]

Page 23: PureMVC в картинках - часть 1

Изучение Изучение PureMVCPureMVC

http://puremvc.orghttp://puremvc.org Goals & BenefitsGoals & Benefits Conceptual DiagramConceptual Diagram Framework OverviewFramework Overview Best PracticesBest Practices

Page 24: PureMVC в картинках - часть 1

Статьи о PureMVC на русскомСтатьи о PureMVC на русском

10 советов по 10 советов по PureMVCPureMVC Что мы знаем о Что мы знаем о flashflash//flexflex фреймуоркахфреймуорках?? Пример Flash-галереи на Пример Flash-галереи на PureMVCPureMVC Как создать простой FLV-плеер во Как создать простой FLV-плеер во FlexFlex и и FlashFlash, используя , используя PureMVCPureMVC

Мои статьиМои статьи -= Чисто MVC =- (тут важны -= Чисто MVC =- (тут важны комментыкомменты)) Архитектура и ключевые фигуры Архитектура и ключевые фигуры фреймворкафреймворка PureMVCPureMVC Фасад (Фасад (FaçadeFaçade) — ядро и лицо ) — ядро и лицо фреймворкафреймворка PureMVCPureMVC Как устроены Модель, Вид и Управление во Как устроены Модель, Вид и Управление во фреймворкефреймворке PureMVCPureMVC Кто использует Кто использует CairngormCairngorm??

Обновления по статьям, новые ссылки: Обновления по статьям, новые ссылки: httphttp://://flash-ripper.comflash-ripper.com//archivesarchives/002194.php/002194.php

Page 25: PureMVC в картинках - часть 1

Развитие Развитие PureMVCPureMVC: Мультитон: Мультитон MultitonMultiton вместо вместо SingletonSingleton

http://en.wikipedia.org/wiki/Multiton_patternhttp://en.wikipedia.org/wiki/Multiton_pattern МультитонМультитон – паттерн, подобный Синглтону, – паттерн, подобный Синглтону,

позволяющий создание более одного экземпляра позволяющий создание более одного экземпляра класса.класса.

Вместо Одиночки – группа Одиночек, доступных Вместо Одиночки – группа Одиночек, доступных по ключам (экземпляров). по ключам (экземпляров). Клиенты не могут добавлять ключи.Клиенты не могут добавлять ключи. Никогда не возвращает пустую ссылку.Никогда не возвращает пустую ссылку.

Польза: упрощение работы с общими ресурсами в Польза: упрощение работы с общими ресурсами в приложении (shared objects).приложении (shared objects).

Централизованный доступ к хранилищу.Централизованный доступ к хранилищу.

Page 26: PureMVC в картинках - часть 1

Пример Пример использования использования

PureMVCPureMVC- в приложении карты -- в приложении карты -

Page 27: PureMVC в картинках - часть 1

Обновление карты-1Обновление карты-1: : ВидВид

Класс Класс MapViewMapView ( (boundaryboundary))package view package view {{

public class MapView extends Spritepublic class MapView extends Sprite{{

private function updateMap():voidprivate function updateMap():void{{

mapMediatormapMediator.onBBoxChanged(layersToLoad);.onBBoxChanged(layersToLoad);

}}}}

}}

Page 28: PureMVC в картинках - часть 1

Обновление карты-2: МедиаторОбновление карты-2: Медиатор

КлассКласс MapMediator MapMediator

package view package view {{

public class MapMediator extends public class MapMediator extends MediatorMediator{{

internal internal function onBBoxChanged(layersToLoad:function onBBoxChanged(layersToLoad: Array):Array): voidvoid

{{var noteBBoxUpdate:var noteBBoxUpdate: Notification = new Notification = new

NotificationNotification((ApplicatonFacadeApplicatonFacade..NOTE_BBOX_UPDATENOTE_BBOX_UPDATE););noteBBoxUpdate.noteBBoxUpdate.setBodysetBody(layersToLoad);(layersToLoad);facade.facade.notifyObserversnotifyObservers(noteBBoxUpdate);(noteBBoxUpdate);

}}}}

}}

Page 29: PureMVC в картинках - часть 1

Обновление карты-3: ФасадОбновление карты-3: ФасадКласс Класс ApplicationFacadeApplicationFacadepackagepackage{{

public class public class ApplicatonFacadeApplicatonFacade extends Facade implements extends Facade implements IFacadeIFacade {{

public static const public static const NOTE_BBOX_UPDATENOTE_BBOX_UPDATE: String= : String= "noteBBoxUpdate";"noteBBoxUpdate";

// Commands registration// Commands registrationoverrideoverride protected function protected function initializeControllerinitializeController(): void(): void{{

super.super.initializeControllerinitializeController();();

// Layer Model.updatePatchesInRectangle// Layer Model.updatePatchesInRectangleregisterCommandregisterCommand((NOTE_BBOX_UPDATENOTE_BBOX_UPDATE, , UpdateUpdateBBoxBBoxCommandCommand); );

}}}}

}}

Page 30: PureMVC в картинках - часть 1

Обновление карты-Обновление карты-4: 4: КомандаКоманда

Класс Класс UpdateBBoxCommandUpdateBBoxCommandpackage controller package controller {{

public class public class UpdateBBoxCommandUpdateBBoxCommand extends extends SimpleCommandSimpleCommand {{

overrideoverride public function public function executeexecute(note: (note: INotificationINotification): void): void

{{

ApplicatonFacadeApplicatonFacade.msProxy.updateMap(.msProxy.updateMap(notenote..getBodygetBody() as () as Array);Array);

}}}}

}}

Page 31: PureMVC в картинках - часть 1

Обновление карты-Обновление карты-5: 5: ПроксиПрокси

Класс Класс MapServerProxyMapServerProxypackage model package model {{public class public class MapServerProxyMapServerProxy extends extends ProxyProxy{{

public function public function updateMap updateMap (layersToLoad:Array):void(layersToLoad:Array):void

{{mapModel.loadLayers(layersToLoad);mapModel.loadLayers(layersToLoad);

}}}}

}}

Page 32: PureMVC в картинках - часть 1

Обновление карты-Обновление карты-6: 6: МодельМодель

Класс Класс MapModelMapModel

package model package model {{

internal class MapModelinternal class MapModel{{

internal function loadLayers (arrLayersToLoad:Array):voidinternal function loadLayers (arrLayersToLoad:Array):void{{

// // собственно загрузка данныхсобственно загрузка данных}}

}}}}

Page 33: PureMVC в картинках - часть 1

PureMVC PureMVC спешит на помощьспешит на помощь

Рефакторинг 1: Смена источника данных с Рефакторинг 1: Смена источника данных с Geo XML на AMFGeo XML на AMF

Page 34: PureMVC в картинках - часть 1

PureMVC PureMVC помогает еще разпомогает еще раз

Рефакторинг 2. Древовидный рендеринг карты.Рефакторинг 2. Древовидный рендеринг карты. Смена сигнатуры методаСмена сигнатуры метода

Было: Было: private function renderGeoEntity(data: private function renderGeoEntity(data: FlashGeoEntity): voidFlashGeoEntity): void

Стало: Стало: private function renderGeoEntity(): voidprivate function renderGeoEntity(): void // // после после initGeoEntityinitGeoEntity

Переход от Спрайтов к ШейпамПереход от Спрайтов к Шейпам Откат на Спрайты☻Откат на Спрайты☻

Page 35: PureMVC в картинках - часть 1

5 советов по 5 советов по PureMVCPureMVC

1.1. Используйте Используйте МедиаторыМедиаторы: создавайте : создавайте API API для компонентов вида в Медиаторах, а не для компонентов вида в Медиаторах, а не используйте их методы напрямуюиспользуйте их методы напрямую..

2.2. Используйте Используйте ОповещенияОповещения почаще (но не почаще (но не напрямую от Медиатора к Прокси)напрямую от Медиатора к Прокси)..

3.3. Используйте Используйте КомандыКоманды и МакроКоманды и МакроКоманды..4.4. Используйте Используйте Remote ProxyRemote Proxy..5.5. Используйте Используйте Value ObjectsValue Objects (VO). (VO).

Page 36: PureMVC в картинках - часть 1

Почему проект выжилПочему проект выжил

1.1. Благодаря разделению кода с самого началаБлагодаря разделению кода с самого начала2.2. Благодаря разделению кода с самого началаБлагодаря разделению кода с самого начала3.3. Благодаря разделению кода с самого началаБлагодаря разделению кода с самого начала4.4. Благодаря разделению кода с самого началаБлагодаря разделению кода с самого начала5.5. Благодаря разделению кода с самого началаБлагодаря разделению кода с самого начала6.6. Благодаря разделению кода с самого началаБлагодаря разделению кода с самого начала7.7. Благодаря разделению кода с самого началаБлагодаря разделению кода с самого начала8.8. Благодаря разделению кода с самого началаБлагодаря разделению кода с самого начала9.9. Благодаря разделению кода с самого началаБлагодаря разделению кода с самого начала10.10. Благодаря разделению кода с самого началаБлагодаря разделению кода с самого начала11.11. Благодаря разделению кода с самого началаБлагодаря разделению кода с самого начала12.12. Благодаря разделению кода с самого началаБлагодаря разделению кода с самого начала

Page 37: PureMVC в картинках - часть 1

QQ && AA