Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Workflow
Code

Verständnis des PureMVC Open Source Frameworks

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Katharina Nevolina (you can also view the original English article)

Hin und wieder werden Sie vielleicht gebeten, an einem Projekt zu arbeiten, das viel Programmierung und/oder Zusammenarbeit mit Kollegen erfordert.  Es ist sicher, dass Frameworks oft die beste Wahl in Bezug auf Struktur, Semantik und Produktivität sind.

Das Verständnis eines Frameworks kann viel Zeit in Anspruch nehmen, aber sobald Sie mit Ihrem Wissen zufrieden sind, können Sie buchstäblich mit der Geschwindigkeit des Denkens programmieren.  PureMVC ist ein großartiger Framework für AS3; Manche mögen sagen, dass es ein bisschen schwierig ist, den Kopf herumzukriegen, aber Sie wierdwn glücklich sein, dass Sie es getan haben.

Wie Sie an der Demo sehen können, ist das, woran wir arbeiten, ziemlich einfach, aber es ist genug, um Ihnen zu vermitteln, wie PureMVC funktioniert.


Bevor wir anfangen...

Bevor wir beginnen, möchte ich sicherstellen, dass die folgenden Grundlagen abgedeckt sind.  Das ist ein Tutorial für Fortgeschrittene Actionscripter, aber lassen Sie sich nicht einschüchtern, wenn Sie es nicht sind, es gibt keine Zeit wie die Gegenwart, um mit dem Lernen anzufangen!

  1. Dieses Beispiel wird mit Flex Builder erstellt.  Sie können auf die Adobe-Website gehen und sich eine Kopie herunterladen (60 Tage kostenlose Testversion!).  Es funktioniert jedoch problemlos in einer IDE Ihrer Wahl, egal ob FlashDevelop, FDT oder guter TextMate.
  2. Wie ich schon sagte, dieses Tutorial ist für mittlere bis fortgeschrittene Actionscripter, also werde ich die weltlichen Teile überspringen, wie zum Beispiel das Einrichten Ihres Projekts in der von Ihnen gewählten IDE, etc ...
  3. Es ist erwähnenswert, dass es das nächste Mal, wenn Sie Ihr Geschäft betreiben, ratsam ist, zuerst eine Kopie der Best Practices von PureMVC auszudrucken.  Es ist ziemlich schwer, aber Sie werden froh sein, dass Sie es gelesen haben.

Schritt 1: Einrichten

Es wäre ratsam, sich eine Kopie der .zip-Datei des Projekts zu besorgen.  Darin sehen Sie die Grundeinstellungen für dieses Tutorial.  Starten Sie Ihre IDE (meine ist Flex Builder) und erstellen Sie ein neues Projekt.  Als nächstes müssen Sie den Flex-Compiler einrichten, um den Ordner "src" für den Quellpfad, den Ordner "debug" für den Debug-Ordner und den Ordner "deploy" für den Freigabebehälter zu verwenden.  Einfach.

Zweitens habe ich zwei zusätzliche Bibliotheken in den Ordner "src" eingefügt: Greensocks TweenLite ("src/gs") und PureMVC ("src/assets/swc").  Sie werden feststellen, dass ich eine .swc für die PureMVC-Bibliothek anstelle des Quellordners verwendet habe, weil ich lieber .swc-Dateien verwende.  Stellen Sie sicher, dass diese beiden Bibliotheken beim Debuggen und ggf. bei der Bereitstellung für die Kompilierung konfiguriert sind.  Unten ist ein Screenshot des Ziellayouts für das Projekt.  Obwohl Sie gerne das Projekt importieren und es Datei für Datei durchgehen, werde ich Ihnen sagen, wie Sie jede Datei schreiben, so dass Sie mit einem Projekt ähnlich dem Beispiel enden.


Schritt 2: Grundlagen

Das Konzept von PureMVC mag das Beste von uns scheuen, aber wenn man erst einmal mit den nackten Grundlagen vertraut ist, fliegt man sich schon bald darum herum.  Die Struktur von PureMVC bedeutet, dass Benachrichtigungen verwendet werden, um bestimmte Befehle auszuführen, unabhängig davon, ob sie sich in Modellen, Ansichten oder Controllern befinden.  Diese Benachrichtigungen bestehen aus dem Namen und einem optionalen Body.  Mit dem body-Parameter können Sie Daten aus der Ansicht (z. B. welche Schaltfläche angeklickt wurde) an einen Controller senden, der sie an das Modell übergeben kann, das dann die relativen Daten zurückgibt.

Diese Vorstellung von Benachrichtigungen bedeutet, dass PureMVC eine sehr genaue Struktur hat, wie die Quelldateien eingerichtet werden:

  • Proxies (Modell):
    Ein Proxy ist einfach ein Modell.  Ein Modell ist für diejenigen, die es vielleicht nicht wissen, eine Klasse, die alle Datentransaktionen wie das Laden von XML-Daten, das Speichern und Abrufen von Daten verarbeitet.  Im Gegensatz zu Mediatoren oder Befehlen hören Proxys niemals Benachrichtigungen ab oder verarbeiten sie. sie versenden sie nur immer.  Das bedeutet, dass, damit ein Befehl oder ein Vermittler einige Daten erfassen kann, die Daten entweder über den Körper einer Nachricht an den Angerufenen zurückgegeben werden müssen oder indem die Instanz des Proxy von der Fassade abgerufen werden muss.  Proxies speichern ihre Daten in öffentlichen Klassen namens VO (Wertobjekte).  Sie sind nur einfache Klassen mit öffentlichen Variablen, in denen wir unsere Daten zum Abrufen und Aktualisieren über unsere Proxies aufbewahren können.
  • Mediatoren und ihre Ansichten (Ansicht):
    Ein Mediator ist eine Klasse, die im Namen einer Sicht handelt.  Innerhalb Ihrer Anwendung haben Sie möglicherweise mehrere Ansichten und alle diese Ansichten erweitern eine DisplayObject-Klasse (andernfalls wären sie keine Ansichten).  Ein Mediator ist die Klasse, die Ihre Ansicht zu Ihrer Basis hinzufügt (die "viewComponent"; es ist das erste Argument, das an einen Mediator übergeben wird) und wird auch alle eingehenden und ausgehenden Benachrichtigungen in Bezug auf diese Ansicht verarbeiten.  Das bedeutet, dass der Mediator Ihre Anwendung benachrichtigen muss, wenn der Benutzer ein Ereignis in der Ansicht ausgelöst hat (z. B. durch Klicken auf eine Schaltfläche) und darüber hinaus Daten von einem Proxy an die Ansicht weiterleitet, um sie zu aktualisieren.  Ein Mediator hört und verwaltet Benachrichtigungen selbst und kann neue Mediatoren bei Bedarf an der Fassade registrieren, anstatt sie alle gleichzeitig zu laden.
  • Befehle (Controller):
    Ein Befehl ist einfach ein Controller.  Obwohl es nicht auf Benachrichtigungen selbst hört, werden ihm Benachrichtigungen von der Fassade übermittelt.  Das bedeutet, dass ein Befehl eine bedingte Anweisung ausführen muss, damit er feststellen kann, welche Benachrichtigung er erhalten hat und was als nächstes zu tun ist.  Benachrichtigungen können nicht nur empfangen, sondern auch gesendet werden.  Sie können auch Proxies, Mediatoren und weitere Befehle registrieren.

Hoffentlich sollte Ihnen das ein einfaches Verständnis von PureMVC gegeben haben.  Sehen Sie sich das konzeptionelle Diagramm von PureMVC an, um zu veranschaulichen, wie Benachrichtigungen in Ihrer Anwendung "herumfliegen" können:

Sie werden vergeben, wenn Sie denken, dass das alles sehr entmutigend ist, aber sobald Sie sich hinsetzen und planen, wie Ihre Bewerbung aussehen wird, werden Sie bald verstehen, wofür wir gehen:

  1. Unsere Basisklasse wird die Fassade anwerfen
  2. Die Fassade ruft dann den Startbefehl auf
  3. Der Startbefehl registriert unseren Proxy und Anwendungsvermittler
  4. Der Proxy wird dann auf sein Wertobjekt verweisen und auf weitere Benachrichtigungen warten
  5. Der Mediator wird den Fortschrittsmediator registrieren
  6. Der Fortschrittsvermittler erstellt die Fortschrittsanzeige und sendet dann eine Benachrichtigung zum Laden der Daten
  7. Die Fassade wird diese Benachrichtigung erhalten und sie an den Datenbefehl übergeben
  8. Der Datenbefehl filtert dann die Benachrichtigung und weist den Proxy an, die Daten zu laden
  9. Der Proxy teilt der Fortschrittsanzeige mit, dass die Daten geladen werden (es wird angezeigt), der Fortschritt (wird aktualisiert) und wenn es fertig ist (es wird ausgeblendet); der Mediator wird das alles übernehmen
  10. Der Proxy sendet dann eine Benachrichtigung an den Anwendungsvermittler
  11. Der Anwendungsmediator registriert die URL-Ansicht, in der wir Schaltflächen erstellen, auf die der Benutzer klicken kann
  12. Der URLs-Ansichtsvermittler übergibt die Daten vom Proxy an die URL-Ansicht und fügt die URL-Ansicht zur Bühne hinzu
  13. Der Benutzer wird auf eine Schaltfläche klicken, diese wird dann vom Mediator bearbeitet und eine Benachrichtigung wird an den Proxy gesendet
  14. Der Proxy lädt dann die Daten erneut und leitet den Status immer an die Fortschrittsanzeige weiter
  15. Der Proxy sendet dann erneut eine Benachrichtigung an den Anwendungsvermittler
  16. Der Anwendungsvermittler teilt dann dem URL-Ansichtsvermittler mit, die URL-Ansicht zu verbergen und anschließend die Bildansicht zu registrieren
  17. Der Mediator für die Bilderansicht erstellt die Bilderansicht aus den Proxy-Daten

Das mag komplex klingen, aber es ist nur ein Fall, die Funktion Ihrer Anwendung in kleine Bitgrößen zu bremsen.


Schritt 3: Alles beginnt mit der Fassade

Wann immer Sie mit PureMVC arbeiten, müssen Sie verstehen, dass Codierung immer mit der Fassade beginnt.  Die Fassade ist eine Ebene, die das PureMVC-Framework, Ihren MVC-Code und Ihre Actionscript-Basisdatei verbindet. In diesem Fall heißt meine "App.as".  Zur Laufzeit wird App.as seine Aufgaben erledigen, sei es die Skalierung der Bühne, die Bildrate und was nicht; und wenn es fertig ist, ruft es die Fassade auf, um die Anwendung zu starten.

Lassen Sie uns unsere Actionscript-Basisdatei erstellen.  Erstellen Sie mit Ihrer bevorzugten IDE eine neue Datei, nennen Sie sie "App.as"  innerhalb von "src" und stellen Sie sicher, dass sie die Sprite-Klasse wie folgt erweitert:


Schritt 4: Einrichten der Basis

Nun, da wir unsere Basisklasse erstellt haben, können Sie Dinge wie die Einstellung von Breite, Höhe, Hintergrundfarben usw. hinzufügen.  Es ist auch praktisch, um alle benötigten Assets wie Schriftarten oder Bilder zu importieren.  Sobald Sie mit Ihrer Basisklasse zufrieden sind, können wir mit der Erstellung der Fassade fortfahren.  Unten ist eine Vorschau meiner Basisklasse:


Schritt 5: Einrichten der Fassade

In diesem Schritt tauchen wir direkt in die Welt von PureMVC ein.  Wie ich in Schritt 2 gesagt habe, ist die Fassade eine wichtige Schicht, die Ihre Anwendung zusammenhält.  Erstellen Sie eine neue Klasse namens "ApplicationFacade.as"  innerhalb von "src/com/flashtuts", stellen Sie sicher, dass sie Facade erweitert und IFacade implementiert.  Beachten Sie, dass unsere Fassade keinen Konstruktor hat, da sie die Klasse Facade erweitert.  Innerhalb unserer Fassade haben wir 3 Funktionen mit einer vierten optionalen.  Außerdem werden wir 2 öffentliche Konstanten haben.  Unten sehen wir, wie unsere Fassadenklasse aussieht:

In PureMVC werden Ereignisse oder "Benachrichtigungen" verwendet, um Daten zu routen und Funktionen auszulösen, die innerhalb unserer Ansichten oder Controller ausgeführt werden.  Da unsere Fassade eine Benachrichtigung an einen Befehl senden wird, um die Anwendung zu starten, erstellen wir eine eindeutige Konstante, die von der Fassade verwendet wird, um den Befehl und die Startfunktion zu senden.

Obwohl Sie keine Konstante namens NAME benötigen, sollten Sie sie immer in Klassen erstellen, in denen Benachrichtigungskonstanten enthalten sind, damit diese Benachrichtigungen eindeutig und weniger anfällig für menschliche Fehler sind (z. B. Rechtschreibfehler).

Als nächstes kommen wir zu der ersten unserer erforderlichen Funktionen, "getInstance()".  Das ist die erste und wichtigste Funktion der Fassade und ermöglicht es unserer Basisklasse, eine Instanz der Fassade abzurufen und dann den Startbefehl auszulösen (wir kommen dazu):

Jetzt kommen wir zu der Funktion, die das Routing von Benachrichtigungen an unsere Controller steuert, oder wie PureMVC sie aufruft, Befehle:

Es ist ziemlich wichtig, "registerCommand (STARTUP, StartupCommand)" zu behalten; Ohne dies würde die Anwendung nicht starten.  Alles was es im Grunde bedeutet ist, dass die Fassade die Benachrichtigung "STARTUP" an einen Befehl namens "StartupCommand" übergeben wird.  Wie Sie sehen können, habe ich zwei weitere.  Sie zeigen beide auf einen anderen Controller namens "DataCommand" und beide Benachrichtigungen sind Anfragen zum Abrufen von Daten.

Wir kommen nun zu unserer letzten geforderten Funktion ohne unsere Fassade, "startup()".  All das löst einfach eine Benachrichtigung aus, die über die Handler "registerCommand" an "StartupCommand" weitergeleitet wird:

Schließlich, aber nicht zuletzt, haben wir unsere letzte Funktion.  Das ist eine optionale Funktion, die ich hinzufügen möchte, wenn ich mit PureMVC arbeite, da ich sehen kann, welche Ereignisse in welcher Reihenfolge ausgelöst werden.  Die Funktion überschreibt einfach die Funktion "sendNotification()", die Sie in PureMVC zum Senden von Benachrichtigungen verwenden.  Er zeichnet nicht nur die Beobachter der Anwendung auf, sondern verfolgt auch die Ereignisse, die Sie sehen können:

Das ist unsere Fassade.  Bevor wir fertig sind, müssen wir eine weitere Zeile auf unsere Basisklasse anwenden.  Diese Zeile erhält einfach eine Instanz unserer Fassade und führt dann den Startbefehl aus:

Stellen Sie sicher, dass Sie diese Datei an das Ende Ihrer Basisklasse setzen.  Zum Beispiel habe ich es unter all die Dinge, die den Hintergrund Farbverlauf für meine Anwendung setzt:

Jetzt sind wir bereit, uns die Hände schmutzig zu machen.


Schritt 6: Der Startbefehl

Wie in Schritt 4 beschrieben, behandelt die Fassade das Routing aller Benachrichtigungen an unsere Befehle (die Controller).  Der erste Befehl, den wir erstellen müssen, ist der "StartupCommand".  Erstellen Sie eine neue Datei namens "StartupCommand.as"  innerhalb von "src/com/flashtuts/controller".  Stellen Sie sicher, dass es SimpleCommand erweitert und ICommand implementiert.  Genau wie unsere Fassade haben unsere Befehle keine Konstruktoren, sondern überschreiben eine öffentliche Funktion aus der SimpleCommand-Klasse namens "execute()":

Sie werden feststellen, dass es in unserer Funktion "execute ()" ein Argument namens "notification" gibt.  Wir müssen das nicht als diese Stufe verwenden, aber dies wird etwas, das wir in unseren anderen Befehlen verwenden.  Da dieser Befehl zum Starten unserer Anwendung verwendet wird, registriert er als erstes einen Proxy (ein Modell):

und dann unser Mediator:

Jetzt haben wir unseren Startup-Befehl fertig.  Was wir jetzt machen, ist unseren Proxy zu erstellen und dann zu unserem ApplicationMediator zu gelangen.


Schritt 7: Erstellen eines Proxys

Jetzt, wo unser "StartupCommand" unseren Proxy registriert, müssen wir sicherstellen, dass der Proxy existiert.  Erstellen Sie also eine neue Datei namens "DataProxy.as" innerhalb von "src/com/flashtuts/model" und stellen Sie sicher, dass sie Proxy erweitert und IProxy implementiert.  Zu Beginn haben wir nur zwei Funktionen in unserem Proxy: den Konstruktor und eine "get"-Funktion, um das VO (Wertobjekt) zu erhalten:

Wie Sie sehen können, ist die erste Funktion in unserem Proxy unser Konstruktor, in dem wir zwei Variablen "super()" haben: den Namen des Proxys (festgelegt durch die Konstante NAME) und das VO.  Wir müssen den Namen des Proxys übergeben, da wir dadurch die Instanz der Fassade abrufen können, anstatt eine neue Instanz zu erstellen und die Daten unserer VO zu verlieren:

Die zweite Funktion ist eine einfache get-Funktion, die unser VO zurückgibt.  Das ermöglicht den Proxies, Befehle und Mediatoren den einfachen Zugriff auf die VO über den Proxy:

Bevor wir mit unserem Proxy fertig sind, müssen wir unser VO erstellen, also erstellen Sie eine neue Klasse namens "DataVO.as"  innerhalb von "src/com/flashtuts/ model/vo".  Dann fügen wir drei öffentliche Variablen hinzu: "dataURL: String", "urlsArray: Array" und "urlsDataArray: Array".  Wir werden die "dataURL" so einstellen, dass sie auf unsere XML-Datei in "src/assets/xml" namens "data.xml" zeigt und für die anderen beiden werden wir sie einfach als leere Arrays setzen:

Das sind die Inhalte der XML-Datei:

Hinweis: Sie werden sehen, dass ich meinen API-Schlüssel entfernt habe.  Sie können sich einfach auf der Flickr-API-Dokumentationswebsite bewerben.

Jetzt, wo wir unseren Proxy und unsere VO eingerichtet haben, müssen wir unsere Mediatoren und Ansichten einrichten.


Schritt 8: Erstellen des ApplicationMediator

Der "ApplicationMediator" ist der Layer zwischen unserem "StartupCommand" und Ihren Ansicht-Mediatoren.  Wenn Ihre Anwendung immer größer wird, ist es nicht mehr sinnvoll, alle Ihre Mediatoren gleichzeitig zu registrieren (zum Beispiel beim Start).  Wenn Sie also einen übergeordneten Mediator (den ApplicationMediator) haben, können Sie sich die Benachrichtigungen anhören, die rund um Ihre Anwendung gesendet werden, und Mediatoren registrieren, wenn sie benötigt werden.  Da Mediatoren im Auftrag der Ansichten agieren, sind die für eine Ansicht erforderlichen Daten manchmal noch nicht geladen, so dass es albern erscheint, den Mediator zu registrieren und die Ansicht zu erstellen, ohne Daten weitergeben zu können.

Erstellen Sie zunächst eine neue Datei namens "ApplicationMediator.as" innerhalb von "src/com/flashtuts/view" und stellen Sie sicher, dass Mediator erweitert und IMediator implementiert wird.  Im Folgenden sehen Sie, wie Sie Ihren "ApplicationMediator" so aussehen lassen sollten:

Wie Sie sehen können, beginnt der Mediator mit unserem alten Freund die Konstante "NAME" und ihren Konstruktor.  Als wir den Mediator in Schritt 6 registriert haben, haben wir eine Instanz der Bühne, unsere Basisklasse ("App.as"),  als erstes Argument übergeben.  In unserem Konstruktor haben wir den Namen NAME und das erste Argument, die "viewComponent", da es die viewComponent ist, die unseren Mediatoren erlaubt, ihre Ansichten der Bühne, unserer Basisklasse, hinzuzufügen.

Jetzt ist es an der Zeit, über unsere Ansichten zu sprechen.  In meinem Beispiel habe ich drei: eine Fortschrittsansicht, eine URL-Auswahlansicht und eine Bilderansicht.  Für jede Ansicht haben wir einen Vermittler.  Da wir als erstes die Daten aus unserer XML-Datei laden wollen, scheint es angebracht, unsere Fortschrittsanzeige zu erstellen, dann den Mediator und dann den Mediator mit unserem "ApplicationMediator" zu registrieren.

Durch die Erweiterung der Klasse Mediator können wir eine praktische Funktion namens "onRegister()" überschreiben.  Diese Funktion wird aufgerufen, wenn die Fassade einen Mediator registriert. Das scheint der beste Ort zu sein, an dem unser "ApplicationMediator" den Mediator für unsere Fortschrittsanzeige registrieren kann:

Wie Sie sehen, ist es der gleiche Stil, den wir im "StartupCommand" verwendet haben, und wir übergeben die "viewComponent" an den Mediator, damit die Fortschrittsanzeige zur Bühne hinzugefügt werden kann.  Ihr Bewerbungsvermittler sollte so aussehen:


Schritt 9: Erstellen unseres Fortschritt-Mediators und Ansicht

Nachdem wir nun unseren "ApplicationMediator" eingerichtet haben, um unseren "ProgressViewMediator" zu registrieren, erstellen wir zunächst eine "ProgressView.as"- Klasse innerhalb von "src/com/flashtuts/view/components".  Das ist eine Klasse, die das DisplayObject einfach erweitert, in diesem Fall Sprite.  Ich werde den Code für die Ansicht nicht durchgehen, da er für jeden Actionscripter Standard ist, aber ich werde unten auf die Interaktion zwischen der Ansicht und ihrem Mediator eingehen:

Da der Mediator für die Ansicht "alles spricht", ist es wichtig, dass die Ansicht und der Mediator Informationen untereinander austauschen können.  Der Mediator kann Informationen an die Ansicht übergeben, da der Mediator eine Instanz der in ihm deklarierten Ansicht enthält. Um jedoch Informationen an den Mediator weiterzuleiten (z. B. ein Benutzer, der auf eine Schaltfläche klickt), verlassen wir uns auf Ereignisse mit Benachrichtigungen vermischt).  Wir sind einfach dazu bereit, eine Veranstaltung zu organisieren und unseren Mediator dazu zu bringen, diese Veranstaltung zu hören.  Der Mediator kann daher das Ereignis aus der Sicht behandeln, die Informationen verdauen und entsprechend etwas ausführen.  Wir haben den Namen dieser Ereignisse mit öffentlichen Konstanten deklariert, sodass unsere Ansicht drei Ereignisse hat: SHOW, HIDE und UPDATE (ähnlich wie unsere Fassade).

Hinweis: Die Platzierung von Ereignisnamen kann innerhalb der Fassade (Datei "ApplicationFacade.as") oder innerhalb der relativen Ansichten platziert werden.  Ich finde es einfacher und sauberer, sie in den Ansichten zu behalten, aber es liegt an Ihr, auf welche Weise Sie denken, dass es besser für Sie funktioniert.

Wie Sie sehen können, habe ich ein Textfeld erstellt, das den Prozentsatz der Daten anzeigt, die über unsere Anwendung geladen werden.

Wir können nun zum Mediator übergehen, also erstellen Sie eine neue Datei namens "ProgressViewMediator.as" in "src/com/flashtuts/view" und stellen Sie sicher, dass Mediator erweitert und IMediator implementiert wird.  Es folgt dem gleichen Stil wie unser "ApplicationMediator" und hat daher einen Konstruktor, der ein Argument (die "viewComponent"), eine öffentliche Konstante namens NAME und unseren Freund das überschriebene "onRegister()" hat.  Im Folgenden sehen Sie, wie Ihr Mediator aussehen sollte:

Das erste, was wir als Hinweis auf unseren Mediator hinzufügen müssen:

und jetzt bekommen wir den Vermittler, um unsere Sicht auf die "viewComponent" hinzuzufügen, so dass wir:

Jetzt, da wir die Grundlagen unseres Vermittlers haben, müssen wir uns ansehen, was unsere Sichtweise tun wird.  Nun, wie Sie wahrscheinlich von den Konstanten wissen können, wird unsere Ansicht dem Benutzer sagen, wie viel bisher geladen wurde, daher hat es die öffentlichen Konstanten SHOW, HIDE und UPDATE.  Da es etwas sein wird, auf das unsere Ansicht reagieren wird (wie Sie anhand der Funktionen "show()", "hide()" und "update() unserer Ansicht sehen können, müssen wir unseren Mediator damit umgehen Benachrichtigungen und führen Sie diese Funktionen entsprechend aus.

Wir werden unserem Mediator zwei neue Funktionen hinzufügen: "listNotificationInterests()" und "handleNotification()".  Die erste Funktion gibt ein Array aller Benachrichtigungen zurück, an denen dieser Mediator interessiert ist (deshalb ist es so wichtig, diese Benachrichtigungen in öffentlichen Konstanten zu speichern, damit sie leicht referenziert werden können).  Letzteres macht tatsächlich etwas mit ihnen.  Dieser Mediator interessiert sich nur für SHOW, HIDE und UPDATE. Das ist es, was wir der ersten Funktion hinzufügen und in der zweiten behandeln:

Sie können einfach sehen, dass unsere "handleNotification()" das Argument einer INotification übernimmt, einer Klasse, die den Namen und den Text einer Benachrichtigung enthält.  Wir verwenden eine "switch"-Anweisung, um zu bestimmen, welche Benachrichtigung behandelt werden soll, und führen die Funktionen entsprechend aus.  Einfach.

Herzliche Glückwünsche!  Sie haben den ersten Meilenstein erreicht!  Sind wir nicht weit gekommen?  Testen Sie Ihre Datei und Sie sollten folgendes sehen:


Meilenstein

Bisher haben wir unsere Fassade erstellt, einen Befehl, einen Proxy und einen Anwendungsmediator hinzugefügt, dann eine Ansicht erstellt und sie über die Fassade der Ansicht zu unserer Anwendung hinzugefügt.


Schritt 10: Erstellen unserer URL-Ansicht

Jetzt wollen wir einige Daten laden.  Bevor wir dies tun, erstellen wir die Ansicht, die zum Anzeigen dieser Daten verwendet wird.  Da wir drei Flickr-API-Feeds laden, finde ich es passend, dass wir in unserer nächsten Ansicht drei Schaltflächen erstellen, die dem Benutzer erlauben, zu klicken, an welchem Punkt unsere Anwendung die Bilder aus dem entsprechenden Feed zurückgibt.  Lassen Sie uns dann eine neue Datei namens "URLsView.as" in "src/com/flashtuts/view/component" erstellen und genau wie unsere "ProgressView", wird das die Sprite-Klasse erweitern:

Ich werde Sie nicht durch diese Ansichtsklasse führen, wie bei allen Ansichtsklassen.  Sie sind grundlegende AS3-Klassen und Sie sollten mit ihnen vertraut sein.  Wie Sie jedoch sehen können, habe ich den Konstruktor weggelassen, da wir nur die Schaltflächen erstellen wollen, wenn die Daten von unserem "DataProxy" geladen wurden.  Beachten Sie auch die öffentlichen Konstanten am Anfang der Klasse, hauptsächlich DATA_GET und DATA_READY.  Das sind Ereignisse, die abgefeuert werden, um anzuzeigen, dass die Daten geladen werden müssen, dass dann die Daten geladen sind und für die Ansicht bereit sind.

Wir kommen jetzt zum Mediator unserer Ansicht, also erstellen Sie eine Datei namens "URLsViewMediator.as" in "src/com/flashtuts/view" und stellen Sie sicher, dass Mediator erweitert und IMediator implementiert wird.  Das ist genau wie bei allen Mediatoren in unserer Anwendung.  Wie bei unserem "ProgressViewMediator" hat dieser einen Konstruktor, in dem er seinen NAME und die "viewComponent" überlagert und auch die überschriebene "onRegister"-Funktion hat.  Wie bei "ProgressViewMediator" erklären wir eine neue Instanz unserer Ansicht:

Wir müssen jetzt darüber nachdenken, was unsere Sichtweise bewirken wird.  Nun, es wird dem Benutzer erlauben, auf eine Schaltfläche innerhalb der Ansicht zu klicken und ein Ereignis zu versenden (das ist die Funktion "handleContainerClick()" in der Ansicht).  Wir müssen unserem Mediator sagen, dass er unserer Meinung nach ein Zuhörer für dieses Ereignis sein soll und entsprechend damit umgehen:

Jetzt müssen wir darüber nachdenken, wann dieser Mediator in Gebrauch kommen wird.  Erinnern Sie sich früher, ich sagte, dass es keinen Sinn hat, einen Mediator zu führen, bevor er gebraucht wird?  Nun, dieser Mediator wird nicht ausgeführt werden, bevor wir ihn brauchen. Daher gehen wir davon aus, dass die Daten bei der ersten Registrierung für die Ansicht bereit sind, um die Schaltflächen zu erstellen. Daher aktualisieren wir unsere Funktion "onRegister()" auf Senden Sie die Daten an die Ansicht, zeigen Sie die Ansicht an und fügen Sie sie zur Bühne hinzu.  Da unsere Daten in unserem "DataProxy" VO gespeichert sind, müssen wir eine weitere Funktion hinzufügen, die es uns ermöglicht, auf die Proxy-Instanz der Fassade zuzugreifen und Daten von der VO abzurufen:

Schließlich, da dieser Mediator erstellt wird, sobald die Daten fertig sind, müssen wir unserem "ProgressView" mitteilen, dass wir ihn nicht länger sichtbar haben wollen. Daher wird eine Benachrichtigung namens "ProgressView.HIDE" ausgelöst, die vom "ProgressView" abgerufen wird. ProgressViewMediator "und sagt" ProgressView ", sich zu verstecken:

Noch einmal, bevor wir fortfahren können, müssen wir darüber nachdenken, welche Benachrichtigungen dieser Mediator hören muss.  Da es sich um eine brauchbare Anwendung handelt, ist es sinnlos, den Benutzer nicht zurückzulassen und eine andere Flickr-Feed-URL auszuwählen.  Daher ist es sinnvoll, diese Ansicht erneut anzeigen zu lassen. Hier kommt die öffentliche const SHOW zum Einsatz (Sie werden feststellen, dass ich eine Benennungskonvention für alle meine Benachrichtigungen habe, das ist eine gute Sache und wird Ihre Entwicklung beschleunigen).  Genau wie bei unserem "ProgressViewMediator" fügen wir unserer Klasse die Funktionen "listNotificationInterests()" und "handleNotification()" hinzu:

Sie werden feststellen, dass ich der Funktion "handleContainerClick()" etwas hinzugefügt habe.  Alle diese Funktion besteht einfach darin, den Index der gedrückten Taste (wie 0, 1, 2 ...) mit dem Ereignisnamen "URLsView.CLICKED" zu übergeben.  Wir werden dieses Ereignis in Kürze behandeln, da es das Ereignis ist, mit dem wir den Flickr-Feed laden, den der Nutzer ausgewählt hat.

Jetzt, wo unsere Ansicht für unsere Daten bereit ist, können wir mit dem Proxy fortfahren und etwas XML laden.  Whoop Whoop!


Schritt 11: Daten laden

Wie bereits erwähnt, löst unser "ProgressViewMediator" eine Benachrichtigung mit dem Namen "URLsView.DATA_GET" aus.  Damit unser Proxy diese Benachrichtigung erhält, müssen wir ihn über unsere Fassade und dann über einen Befehl aufrufen, der dann die Funktion des Proxys aufruft.  Zuerst müssen wir den Befehl in unserer Fassade registrieren, also "ApplicationFacade.as"  öffnen und die Funktion "registerCommand" der Funktion "initializeController()" hinzufügen:

Sie werden sehen, dass wir unsere Fassade anweisen, diese Benachrichtigung an einen Befehl namens "DataCommand" zu übergeben, das ist der Name des Controllers, den wir machen werden, um diese Benachrichtigung zu verarbeiten und den Proxy auszuführen.  Als nächstes erstellen Sie eine Datei namens "DataCommand.as" in "src/com/flashtuts/controller" und es muss SimpleCommand erweitern und ICommand implementieren.  Unsere Klasse benötigt keinen Konstruktor, da wir an der Funktion "execute()" interessiert sind (genau wie beim "StartupCommand"):

Wenn Sie ein scharfes Auge haben, werden Sie feststellen, dass wir unserem Freund die INotification-Klasse gegenüberstehen.  Genau wie bei einem Mediator gibt uns diese Klasse den Namen und den Text einer Benachrichtigung, also behandeln wir sie auf die gleiche Weise - mit einem Schalter:

Da wir möchten, dass diese Benachrichtigung dem Proxy mitteilt, dass er einige Daten laden soll, müssen wir die Instanz der Fassade des Proxys holen und veranlassen, dass eine Funktion ausgelöst wird.  Wir verwenden die gleiche Methode, die wir in unserem Mediator verwendet haben, und erstellen eine get-Funktion:

Schließlich werden Sie sehen, dass wir eine Funktion in unserem Proxy namens "urlsDataGet()" aufrufen.  Dadurch werden unsere Daten geladen, also sollten wir sie besser erstellen.  Öffnen Sie "DataProxy.as" und erstellen Sie eine Funktion namens "urlsDataGet()", die die Daten wie folgt lädt:

Sie werden feststellen, dass wir unsere VO hier nutzen, indem wir erneut eine get-Funktion erstellen, damit wir Daten verwenden und hinzufügen können.  Sie sollten mit dem Laden von XML-Daten vertraut sein, damit ich nicht auf die Funktionen eingehen werde. Sie sollten in der Lage sein zu sehen, was sie tun.  Sie wundern sich vielleicht, warum ich eine Schleife der URLs durch die XML-Daten durchlaufe und ein Array mit einer leeren Zeichenfolge bevölke, erfahren Sie später ...

Die wichtigsten Dinge, die ich erwähnen werde, sind die Funktionen "handleProgress()" und "handleURLsDataGetComplete()".  Sie senden beide Benachrichtigungen an die Anwendung, die erste sendet einen Prozentsatz der Daten laden, um unsere Fortschrittsansicht (erinnere mich, ich sagte eine Benachrichtigung besteht aus einem Namen und Körper?) Und letztere sendet eine Benachrichtigung an die Anwendung, dass unsere erste Datenbit ist geladen.

Schließlich, weil wir nur unseren "URLsViewMediator" und "URLsView" registrieren möchten, wenn die Daten fertig sind, müssen wir den Application Mediator ändern, um den Mediator zu registrieren, wenn das Ereignis gesendet wird:

Dieser Code sollte nicht zu unbekannt sein, aber wie Sie sehen können, legen wir fest, welche Benachrichtigungen wir hören sollen und welche dann behandelt werden sollen.  In diesem Fall wird der "URLsViewMediator" registriert, der die Funktion "onRegister()" ausführt und die Ansicht erstellt.

Wir sind am nächsten Meilenstein!  Jetzt sollten wir sehen, dass unsere Anwendung die XML-Daten lädt und diese Daten an unseren "URLsViewMediator" weiterleitet, der wiederum die "URLsView" anweist, einige Schaltflächen zu erstellen, die der Benutzer anklicken kann:


Meilenstein

Geben Sie sich einen Klaps auf den Rücken, da Sie viel erreicht haben!  Jetzt sollten Sie wissen, wie Benachrichtigungen in der Anwendung eine große Rolle spielen und wie die gesamte Struktur von der Fassade zusammengeführt wird.  Das nächste Stück wird ein Kinderspiel sein ...


Schritt 12: Behandeln eines Benutzerereignisses

Wie bereits erläutert, wird in einer Ansicht ein Benutzerereignis ausgelöst, z. B. Mausbewegung oder in diesem Fall Mausklick.  Diese Veranstaltung wird dann von ihrem Vermittler abgeholt, der dann entscheidet, was zu tun ist.  Da wir die Funktion "handleContainerClick()" innerhalb von "URLsViewMediator" eingerichtet haben, um einen Index der Schaltfläche zu senden, müssen wir nun dieses Ereignis behandeln und die nachfolgenden Daten laden.  Zuerst müssen wir unseren letzten Blick und Vermittler bauen.

Hier ist die Ansicht:

Alle diese Ansicht verwendet die XML-Daten, die von der Flickr-API geladen wurden, erstellt ein Raster aus Bildern und eine Zurück-Schaltfläche.  Hier ist der Mediator:

Auch das sollte Ihnen nichts Neues sein, da wir einfach eine Instanz unserer Ansicht erstellen, sie der Bühne hinzufügen, Listener zu unserer Ansicht (und ihren Handlern) hinzufügen und dann die Benachrichtigungen festlegen, die sie hören und hören wird wie es mit ihnen umgehen wird.

Um diese Benachrichtigung zu bearbeiten, aktualisieren wir den Anwendungsvermittler ein letztes Mal und legen ihn so fest, dass er die Benachrichtigung "URLsView.CLICKED" abhört:

Eine Sache, die bei der Handhabung dieses Ereignisses zu beachten ist: Das erste, was der Code tut, ist zu überprüfen, ob der Mediator registriert wurde.  Wenn nicht, registriert es sich, und alle machen es gut.  Der Grund dafür ist, dass wir eine Zurück-Schaltfläche erstellen, damit der Benutzer zurückgehen und einen anderen Flickr-Feed auswählen kann.  Da wir nur die Schaltflächen anzeigen und ausblenden müssen, die der Benutzer auswählen kann, müssen sie nicht neu erstellt werden.  Da der Benutzer dann jedoch möglicherweise einen anderen Flickr-Feed auswählt, müssen wir unsere Bilder neu erstellen.  Um das Duplizieren unseres Codes zu speichern, erstellen wir nur Bilder, wenn der "ImagesViewMediator" das Ereignis "ImagesVIEW.DATA_READY" erhalten hat.

Da unsere Anwendung "ImagesVIEW.DATA_GET" sendet, wenn der Benutzer eine Flickr-API auswählt, müssen wir "ApplicationFacade", "DataCommand" und "DataProxy" anpassen, um a) das Ereignis zu verarbeiten und b) die Daten zu laden und ein Ereignis zurückzusenden.

Wir bearbeiten zuerst "ApplicationFacade", indem wir der Funktion "initializeController()" ein "registerCommand()" hinzufügen:

Wir teilen dann dem "DataCommand" mit, wie er damit umgehen soll (über den Proxy):

Schließlich bearbeiten wir den "DataProxy":

Sie werden feststellen, dass ich in der Funktion "imagesDataGet()" etwas Actionscript-Zauber durchgeführt habe.  Auch hier wird nur etwas XML geladen, nichts Besonderes, aber es werden nur einmalige Daten geladen.  Das ist die Schönheit von VOs und die Verwendung von Indizes, wenn Tasten gedrückt werden. Im Wesentlichen passiert Folgendes: Wenn der Benutzer die Taste 2 (die dritte) drückt, prüft er, ob an diesen Index Daten gebunden sind (da die Schleife beim ersten Laden der URLs ein Array mit leeren Zeichenfolgen erzeugte).  Wenn das der Fall ist, müssen die Daten nicht erneut geladen werden. Wenn die Daten nicht geladen sind und die Schönheit der Wörterbücher verwendet wird, können wir sie in das Array einfügen.

Schließlich schiebt dieser Proxy die Benachrichtigung "ImagesVIEW.DATA_READY" zurück zu unserer Anwendung und zu unserer Ansicht, wo etwas Magie passieren wird.


Sie haben es geschafft!

Da ist Ihre erste PureMVC-Anwendung!  Sie sollten wissen, wie PureMVC funktioniert und, am wertvollsten, ein Skelett. Wenn Sie also mehr Anwendungen entwickeln möchten, können Sie diesen Code verwenden, ihn überarbeiten oder ihn einfach als Referenz verwenden.


Fußnote

PureMVC ist ein großartiges Werkzeug und ich verwende es in vielen Projekten, aber es gibt einige wichtige Unterschiede zwischen der Verwendung mit Actionscript 3.0 und MXML.  Wenn Sie MXML verwenden, fügen Sie die Ansichten wie folgt mit XML hinzu:

Flex erstellt diese Ansichten automatisch, anstatt Ihnen zu erlauben, ihre Erstellung zu verschieben.  Daher haben Sie, wenn Sie bereit sind, mehr PureMVC zu nutzen, eine kleine Anwendung erstellt, die Ihnen sagt, wie Sie die verzögerte Instanziierung verwenden können.

Ich hoffe, es hat Ihnen Spaß gemacht, diesem Tutorial zu folgen, zögern Sie nicht, irgendwelche Fragen oder Kommentare in den Kommentaren zu hinterlassen!

Advertisement
Advertisement
Advertisement
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.