Deutsch:Wie beginnen

Download und Installation
Zuerst solltet ihr die aktuellste Gaia Framework MXP Komponente runterladen und mit dem Extension Manager installieren. Danach öffnet ihr Flash. im Hauptmenü unter Fenster > Anderere Panel >Gaia Framework kann die Gaia Oberfläche aufgerufen werden. Bevor ihr beginnt sollten die ASO Dateien gelöscht werden.

Alles klar? Lasst uns anfangen!



Ein Gaia Projekt erstellen
Zuerst müssen wir uns entscheiden welche Actionscript Version wir benutzen wollen. Klick auf Create AS3 oder Create AS2. Daraufhin erscheint die Projekt Oberfläche.



Projekt Panel
Als erstes sollte dem Projekt ein Name gegeben werden. Dies kann allerdings auch jederzeit nachgeholt werden, so daß man nicht gezwungen ist sofort einen Namen zu vergeben, und es erstmal im Ursprung belassen kann.

Projekt Ordner
Als nächstes wählt den Ordner in dem das Projekt gespeichert werden soll. Ihr könnt den Ordner vorher erstellen oder ihn mit der Dialogbox erstellen, die sich öffnet wenn ihr den Button klickt.

Eigenschaften
Nachdem ihr eurem Projekt einen Namen gegeben und einen Speicherort gewählt habt, ist es nun Zeit die Basis Eigenschaften festzulegen. Ihr könnt nun die Breite und Höhe, die Ausrichtung, Frame-Rate und Bühnenfarbe festlegen. All diese Einstellungen können später wieder verändert werden und diese werden von Gaia mit einem Klick an die Flash Dateien weitergereicht.

Ordner Pfade
Der letzte Schritt ist optional. Ihr könnt die Ordner Pfade euren Wünschen anpassen. Gaia selbst benutz grundsätzlich den Industriestandard:

* lib - For .fla files * bin - For .swf files, .html, etc. * src - For .as files (classes)

Eine weitere verbreitete Struktur ist:

* src - For .fla files * src/classes - For .as files * deploy - For .swf files, .html, etc.

Es kann sein, daß ihr andere Bezeichnungen lieber habt z.B.  "flash" für die Flash Dateien, oder ihr bevorzugt es die Klassen Dateien in dem selben Ordner zu speichern z.B. "flash/classes". Manche Entwickler nehmen "www" als Ordner für die Veröffentlichungen. Gaia ist flexibel genug um euch nach euren eigenen Namens-Konventionen arbeiten zu lassen.

Ebenso kann vorgegeben werden wo die Datei site.xml gespeichert sein soll. Doch lasst dieses Feld erstmal leer.

Klickt Create New Project und Gaia wird das komplette Projekt in ein paar Sekunden erstellen. Und automatisch zum Scaffold Reiter. Wir kommen bald darauf zu sprechen. Doch nun schauen wir uns erst einmal die von Gaia generierten Dateien an.



Projekt Dateien


Ihr seht nun welche Ordner Gaia angelegt hat und welche Dateien sich darin befinden.


 * Der lib Ordner enthält main.fla, preload.fla.
 * Der bin Ordner ist der Ort in dem die veröffentlichten Dateien gespeichert werden
 * Der src Ordner enthält die alle Klassen des Frameworks
 * Der templates Ordner enthält template fla und Klassen Dateien
 * Der project.gaia Ordner ist eine xml Konfigurations Datei in der die Informationen des Projekts gespeichert sind.

Öffne den bin Ordner.



Im Augenblick sind dort gespeichert: eine index.html Datei, eine preload.swf Datei, eine site.xml Datei, und ein Ordner der js heißt. Hierin sind die Dateien zu SWFObject und SWFAddress.

Wenn ihr die index.html Datei öffnet seht ihr, daß eure Einstellungen übernommen wurden und das SWFObject ebenfalls bereits eingebunden wurde.

Nun schauen wir und die Datei site.xml an. 

Seiten XML
Gaia benutzt eine XML Datei um die Seiten Struktur zu definieren. Diese heißt site.xml.

Öffnet die Datei site.xml mit eurem Lieblings Editor. Die Grundstruktur der site.xml sieht so aus:

   

Äste
Gaia benutzt Äste (wie bei einem Baum) als Metapher um die Struktur von Seiten darzustellen. Äste funktionieren genauso wie verschachtelte Ordner oder URL´s. Hierbei wird der Vorwärts-Slash ( / ) zur Abgrenzung benutzt.

Die oben gezeigte XML Struktur hat nur einen Ast: "index/nav/home".

Ein Ast beruht auf Seiten-Knoten. Jeder davon kann beliebig viele Knoten, als Kind-Knoten haben. Jeder Seiten-Knoten ist eine swf Datei die als Teil des Astes eingeladen wird.

Gaia läd die vollständigen Äste von der Index Seite ausgehen zu den einzelnen Kind-Knoten. Im Beispiel oben kann die "index/nav" nicht geladen werden weil die "nav" Seite eigentlich nur ein Kind hat. In diesem Fall eine Seite mit dem Namen "home". Wenn also versucht wird "index/nav" aufzurufen wird automatisch "index/nav/home" geladen. Dieses Verhalten kann beeinflusst werden indem das "landing" Attribut im Kind-Knoten hinzugefügt wird.

Genaue Informationen über den Aufbau der site.xml Datei, den Knoten und deren Attributen kann in dem [Deutsch:Das_XML_Gerüst] Teil der Dokumentation nachgelesen werden.



XML Baum Struktur
Bevor wir beginnen die site.xml Datei anzupassen, schauen wir uns erstmal die Struktur an, um dessen Einfluss auf den Inhalt durch Gaia zu erkennen. Gaia läd die Dateien von oben nach unten. So das die Kinder-Knoten über den Eltern liegen. Dieses Verhalten kann überschrieben werden indem Tiefen Attribute zugewiesen werden. Dies wird im Folgenden beschrieben.

Site Knoten
Der oberste im folgenden "root" Knoten heißt. Der Knoten benötigt keine Attribute und setzt einen optionalen Titel und das Basis Menü für euch ein.

Index Seite
Das erste Kind des Knoten ist ein Knoten mit der id="index". Dies ist eine der wenigen Konventionen die Gaia vorgibt. Die erste Seite muß "index" heißen.

Die "index" Seite ist aus zwei Gründen speziell: sie lädt selbstständig und bevor alle anderen Seiten geladen werden. Zudem lädt sie sich hinter alle Seiten.

Seiten
In der site.xml ist als erstes Kind der "index" Seite ein Knoten mit der id "nav" eingetragen. Die "nav" Seite dient als Herberge für die globale Navigation: sie wird über allen anderen Seiten geladen, die geschieht durch die Tiefen Einstellung "top". Ebenso wichtig ist das sie die einzige Unterseite von "index" und somit Teil jedes weiteren Astes ist.

Die nächste Kind-Seite in unserem Beispiel heißt "home". Diese Seite hat ein Titel Attribut namens "Home". Dieser Titel erscheint im Titel der Browsers. Der Browsertitel ist für den Platzhalter %PAGE% reserviert. Diese Seite wird ebenso als Auslöse Seite benutzt, da sie die letzte Seite des Astes ist.

Nur Auslöse Seiten eines Astes zeigen ihren Titel im Browserkopf. Dementsprechend müssen Titel auch nur auf Seiten angegeben werden. Deren Seiten das Attribut landing = true haben (oder Seiten with landing="true"). Diese Titel werden dann mit dem Platzhalter %PAGE% ausgetauscht. Der Preloader übergibt die Titel der Seiten. Wenn also jede Seite einen Titel haben solle, so steht einem dies frei. Weitere Ausführungen sind unter dem Punkt Vorladen zu finden.



Seiten zur Site XML hinzufürgen
Eine Seite mit nur einem Ast, ist keine große Seite. Also fügen wir noch ein paar Seiten hinzu!

      <page id="tree" title="The Family Tree" src="familytree.swf"/> <page id="home" title="Home" src="home.swf" menu="true"/>

Nun haben wir drei Äste. Dies sind:


 * 1) "index/nav/people/friends"
 * 2) "index/nav/people/family/tree"
 * 3) "index/nav/home"

Beim näheren Betrachten fällt auf, daß nur die letzten Seiten der Äste einen Titel haben. Zudem wurde dem Knoten und einigen Unterseiten das Attribut "menu" hinzu gefügt.

Wenn die Seite mittels rechtem Mausklick gesteuert werden soll, so muß jede Seite die erreichbar sein soll, beim Attribut "menu" den Wert "true" bekommen.

Wenn also eine Seite im Kontext-Menü erscheinen soll, muss menu="true" gesetzt sein. Und ein Titel muss vergeben werden.

Anmerkung: Seiten ohne Titel werden im Kontext-Menü nicht aufgeführt.

Ebenso ist zu sehen das die Stammseite ein Kontext-Menü hat, obwohl sie nicht die letzte Seite ist. Das ist gut so den Gaia zeigt auch den Stamm an. Dennoch navigiert Gaia wie folgt: "index/nav/people/family/tree".

Nun gut! Wir haben nun genug Seitenstruktur um eine Testseite zu erstellen. Also tun wir´s einfach. Kopiert die obrige Struktur in die site.xml Datei und speichert sie ab.

<br style="clear:both" />

Das Gerüst erstellen!
So nun kommt der aufregende Teil. Wir erstellen das Gerüst!

Klassen Pakete
Geht wieder zu Flash, genauer gesagt auf die Gaia Oberfläche. Der Scaffold Reiter ist bereits ausgewählt. Und oben im Eingabefeld steht bereits "pages".

Wenn Ihr euch mit Klassen Paketen nicht so gut auskennt, so ist dies kein Grund zur Panik. Die Basis Regel lautet: Nehmt den Domainnamen und hängt den Projektnamen an.

Zum Beispiel: die Webseite eures Kunden ist company.com, und das Projekt heißt website, dann heißt der Klassenpfad:

com.company.website

Für Gaia Projekte empfiehlt sich "pages" an das Ende zu stellen. So ist der Pfad dann:

com.company.website.pages

Es empfiehlt sich den Standardeintrag im Augenblick bei "pages" zu belassen.

Das Projekt Gerüst erstellen
Alles was ihr nun noch tun müsst ist auf den Scaffold Project Button zu klicken. Und Gaia kümmert sich um den Rest!

Gaia´s Gerüstbau erstellt alle FLAs der Seite mit den .swf Namen die in der site.xml angegeben wurden. Es werden alle Pfade und Ordner erstellt. Für jede Seite wird eine Klassendatei mit allen nötigen Klassen erstellt. Die AS2 Erstellung speichert zusätzlich zu jeder Seite eine exclude.xml Datei, was die Dateigrößen der .swf Dateien erheblich reduziert.

Nachdem alle Dateien generiert wurden erscheint der Publish Reiter. Gaia veröffentlicht nun die komplette Seite und öffnet die main.fla.

Mit dem Rechtsklick kann nun durch die Seite navigiert werden und ihr könnt sehen wie die Seiten ein- und ausblenden.

In den Ordnern lib und bin sind nun alle Flash und .swf Datei. Im src Ordner für die Seiten wurden alle Klassen von Gaia generiert und mit den Namen der page id versehen.

Ich gratuliere! Ihr habt eure erste Gaia Framework Seite erstellt!

Nun ist es Zeit sich den Bereich Seiten anzuschauen um zu verstehen was hier passiert ist.