Wer sich meine PureMVC Site schon angesehen hat, wird den Namen der Extension bereits kennen. Ich habe ihr den Extension-Key mwflash2t3 gegeben. Im Repository ist sie noch nicht, da sie außer den Grunddateien noch nicht viel Funktion enthält. Ich hoffe, dass sich das diese Woche noch ändert.
Den groben Aufbau will ich euch aber nicht vorenthalten.

Die Extension wird in Frontend- und Backendfunktionen aufgeteilt. Im Frontend kann man die Extension sowohl als neuen Pagetype als auch als Plugin einfügen. Der neue Pagetype ist für komplette Flashsites gedacht. Das Plugin für ein einzelnes Flashmodul auf der Website. Das Frontendplugin wird zukuftsgerecht mit den lib/div Extension programmiert. Ich verspreche mir davon, dass es später für mich einfacher wird auf TYPO3 v5 zu switchen.
Das Backendmodul versteckt sich dann unter WEB im TYPO3-Backend. Hier wählt der Nutzer seine XML aus und mappt nach TemplaVoilà-Art. Ich hoffe, dass ich es zeitlich schaffe, dass die XML, ohne vorherige Eingabe der Node-Namen durch den User gemappt werden kann.
Beim Datenbankaufbau habe ich mich an TemplaVoila orientiert. Auch ich werde mit der Trennung zwischen Templateobject und Datastructure arbeiten. Da bei mir aber sowohl Frontend wie Backend Zugriff auf die XML brauchen, gibt es bei mir eine eigene Tabelle für die XML. Auch für die Daten aus der Flexform des Plugins stelle ich eine eigene Tabelle zur Verfügung.

Schade ist, dass TemplaVoilà das Mappen von XML nicht unterstützt. Interessant ist aber, dass dies anscheinend einmal angedacht war. In der Datei class.tx_templavoila_htmlmarkup.php befindet sich die Funktion setTagsFromXML ( $content )

	/**
	 * The idea is to parse the XML in $contnet and set the internal TAG array with all these tags so they can be mapped...
	 * NOT WORKING YET - experiment.
	 *
	 * @param	[type]		$content: ...
	 * @return	[type]		...
	 */
	function setTagsFromXML($content)	{
		$parser = xml_parser_create();
		$vals = array();
		$index = array();
 
		xml_parser_set_option($parser, XML_OPTION_CASE_FOLDING, 0);
		xml_parser_set_option($parser, XML_OPTION_SKIP_WHITE, 0);
		xml_parse_into_struct($parser, $content, $vals, $index);
 
		if (xml_get_error_code($parser))	return 'Line '.xml_get_current_line_number($parser).': '.xml_error_string(xml_get_error_code($parser));
		xml_parser_free($parser);
 
		$this->tags = $index;
		foreach($index as $idx => $value)	{
			$this->tags[$idx] = array();
		}
		print_r ($this->tags);
 
		$this->textGnyf = 1;
	}

Allerdings wird diese Funktion nie benutzt und ist sogar in der index.php des cm1-Ordners der Extension in der Funktion

function displayFileContentWithMarkup($content,$path,$relPathFix,$limitTags)

eingebaut, aber auskommentiert.

/**
	 * This will mark up the part of the HTML file which is pointed to by $path
	 *
	 * @param	string		The file content as a string
	 * @param	string		The "HTML-path" to split by
	 * @param	string		The rel-path string to fix images/links with.
	 * @param	string		List of tags to show
	 * @return	void		Exits...
	 * @see main_display()
	 */
	function displayFileContentWithMarkup($content,$path,$relPathFix,$limitTags)	{
		$markupObj = t3lib_div::makeInstance('tx_templavoila_htmlmarkup');
		$markupObj->gnyfImgAdd = $this->show ? '' : 'onclick="return parent.updPath(\'###PATH###\');"';
		$markupObj->pathPrefix = $path?$path.'|':'';
		$markupObj->onlyElements = $limitTags;
 
		// $markupObj->setTagsFromXML($content);
 
		$cParts = $markupObj->splitByPath($content,$path);
		if (is_array($cParts))	{
			$cParts[1] = $markupObj->markupHTMLcontent(
							$cParts[1],
							$GLOBALS['BACK_PATH'],
							$relPathFix,
							implode(',',array_keys($markupObj->tags)),
							$this->MOD_SETTINGS['displayMode']
						);
			$cParts[0] = $markupObj->passthroughHTMLcontent($cParts[0],$relPathFix,$this->MOD_SETTINGS['displayMode']);
			$cParts[2] = $markupObj->passthroughHTMLcontent($cParts[2],$relPathFix,$this->MOD_SETTINGS['displayMode']);
			if (trim($cParts[0]))	{
				$cParts[1]='<a name="_MARKED_UP_ELEMENT"></a>'.$cParts[1];
			}
			return implode('',$cParts);
		}
		$this->displayFrameError($cParts);
		return '';
	}

Leider, leider, leider bietet TemplaVoilà hier keinen Hook an, weshalb ich keinen Weg sehe, die Funktionalität, die ich benötigen würde, auf vernünftige Weise einzubauen. Per XCLASS zu erweitern, erscheint mir nicht sonderlich sinnvoll.

Was ich allerdings an dem neuen Ansatz lib/div noch nicht sehe, ist die Möglichkeit für das Backend mit dem MVC-Model zu programmieren. Es scheint ein Feature nur für Frontend-Plugins zu sein. Falls ich mich hier irre, lasse ich mich gerne berichtigen. Aber ich denke, dass mir für das Backendmodul nur der Weg über den Aufbau index.php + weitere Aspektorientierte Klassen gehen kann.

Anregungen, Tipps oder Kritik gerne hier posten.

Design des Flash Frontends
Nach langer Zeit ohne Post, melde ich mich mit der Nachricht “PureMVC Website ist fertig” zurück. Ich habe mich eingearbeitet und muss sagen, dass ich mit der Arbeit mit PureMVC sehr zufrieden bin. Das Framework ist klasse und während ich an dem Frontend für die Beispielwebsite meiner Bachelorarbeit gearbeitet habe, ist mir schon das eine oder andere Mal der Gedanke gekommen: “Warum keine Arbeit über PureMVC?” Aber sei’s drum.
Ihr findet die kompletten Quellcode, die FLA und die XML am Ende des Posts. Der Quellcode ist leider kaum dokumentiert und das ganze Projekt ist noch nicht gesäubert. Darum kümmere ich mich, wenn ich mit der Extension-Programmierung fertig bin, also verzeiht bitte den einen oder anderen Schönheitsfehler. Falls erfahrenere PureMVC Programmierer unter meinen Lesern sind und noch den einen oder anderen Tipp an mich haben: Immer her damit. Da es mein erstes Projekt war, kann man mit mehr Erfahrung bestimmt das ein oder andere besser machen.
Wem das Projekt gefällt es gerne für seinen eigenen Zwecke benutzen und abändern. Über ein kleines Danke freue ich mich dann aber doch.

Als Debugger habe ich Arthropod von Carl Calderon benutzt. Auf diesen bin ich irgendwann gestoßen und er hat mich bisher nicht entäuscht. Ich glaube zwar, dass der Debugger nicht mehr sonderlich stark weiterentwickelt wird, aber da er auf Adobe Air basiert ist er einfach universal einsetzbar.
Ich habe die Debugger-Klasse jetzt nicht entfernt und es sind glaube ich auch noch ein paar Debug-Aufrufe im Quellcode. Wen das stört, kann sie gerne rausschmeißen.

Wenn ich Zeit finde, werde ich auch gerne mal ein Tutorial über den Aufbau des Flashmoduls schreiben. Ich habe mich unter folgenden Adressen schlau gemacht:

Die XML site.xml enthält die Daten für die Website. Da ich den Content ja dann in TYPO3 einfüllen werde, ist das Ganze natürlich eher als Template gehalten. Aber ich denke die Strukur erklärt sich von selbst, da das ganze Frontend ja nur ein Beispiel für die Funktionsweise der Extension sein soll.

Bugs, Vorschläge oder Ähnliches einfach als Kommentar unter den Post.

T3lovesFlash

Da ich ja zur Zeit hauptsächlich im AS 3 und Flash Universum unterwegs bin, bin ich auf ein paar Bugs (Eigenarten, Features..) von Flash gestoßen, die mir so circa zwei Stunden zusätzliche Arbeit gekostet haben. Es kann sein, dass der eine oder andere Flash-Crack sich müde lächelnd abwendet, aber ich bin im Laufe meiner Programmierzeit immer wieder über Eigenarten von Flash im Umgang mit Textfeldern respektive der TextField-Klasse gestolpert.

Über ein paar möchte ich hier Auskunft geben, um vielleicht dem einem oder anderen bei der Fehlersuche behilflich zu sein.

Fehler: Es wird kein Text angezeigt

Einbetten von Schriften

Denkt daran eure Schriften einzubetten. Wenn ihr dynamisch Textfelder zur Bühne hinzufügt, müssen alle Zeichen eures Zeichensatzes, die ihr benutzen wollt, eingebettet sein. Das macht ihr über den Einbetten-Button, nachdem ihr das dynamische Textfeld auf der Bühne selektiert habt.

einbetten

Im auftauchenden Fenster wählt ihr die Zeichen aus, die ihr benötigen werdet. Vergesst nicht die deutschen Umlaute einzubauen (natürlich nur, wenn es eine deutsche Seite ist). Die sind nämlich in Flashs Auswahl für Groß- und Kleinbuchstaben nicht vorhanden. Ist dann in eurem Text, den ihr dynamisch hinzufügt, ein Umlaut vorhanden, zeigt Flash euren Text nicht an.

einbetten2

Bei vollkommen dynamisch hinzugefügten Textfeldern müsst mit der Eigenschaft

TextField.embedFont = true;

das einbetten von Fonts erlauben und mit der TextFormat-Klasse einen Font definieren.

TextFormat.font = "Verdana";

Weitere Infos im LiveDoc von Adobe zu dem Thema.

Fehler: Trotz einbetten der Glyphen, zeigt Flash keinen Text an

Mitkompilieren des Zeichensatzes

Ihr habt eure Glyphen im Textfeld eingebettet, allerdings wird auf einem anderen Computer kein Text eingezeigt. Hier liegt es meistens daran, dass die Schrift, die ihr verwendet nicht auf dem fremden Computer vorhanden ist. Die Einbetten-Funktion bei Flash ist dabei etwas missverständlich gekennzeichnet. Beim Einbetten bettet ihr nicht die Schrift selber ein, sondern sagt dem Textfeld nur, welche Glyphen im Textfeld dargestellt werden sollen. Ist eure Schrift aber nicht auf dem fremden Computer vorhanden, kann den Flash die passenden Buchstaben nicht mehr darstellen. Deshalb ist es wichtig, dass ihr eure Schriftart in der Bibliothek mitkompiliert.

Das macht ihr über das Kontextmenü der Bibliothek. Hier wählt ihr neue Schriftart.

einbetten3

Im auftauchenden Dialogfenster legt ihr eure Schrift dann an und speichert sie in die Bibliothek. Wichtig: Für jede Größe und Art eurer Schrift, die ihr in eurem Flash verwendet, also zum Beispiel “Webdings”, 16pt und fett und “Webdings”, 14pt und normal, müsst ihr eine eigene Schrift anlegen. Es reicht nicht, einmal “Webdings” in 16pt in die Bibliothek zu importieren.

Der Nachteil an diesem Verfahren ist natürlich, dass der Flashfilm in der Größe wächst. Deshalb sollte genau überlegt werden, welche Glyphen und Schriftarten wirklich benötigt werden.

Fehler: Beim dynamischen Einladen von Texten, werden diese verzerrt oder an falscher Position dargestellt

Sind TextFieldAutoSize-Konstanten gesetzt und der Parent-MovieClip nicht verzerrt

Es ist leider unbedingt von Nöten bei dynamischen Textfeldern die Konstanten der TextFieldAutoSize an das Textfeld zu übergeben. ActionScript 3 setzt den Default-Wert für TextField.autoSize auf NONE, weshalb dieser unbedingt im Quellcode übergeben werden muss, da sich sonst die dynamischen Textfelder nicht an die Größe des übergebenen Textes anpasst. Hierfür sind die Konstanten der Klasse TextFieldAutoSize zuständig (LiveDoc). Folgende Optionen

TextFieldAutoSize.LEFT
TextFieldAutoSize.NONE (default)
TextFieldAutoSize.RIGHT
TextFieldAutoSize.CENTER

sind verfügbar. Dummerweise ist der default-Wert für die Erstellung einer Navigation nicht brauchbar (zumindest war es bei mir so).  Denn mit dem Default-Wert behalten die Textfelder ihre Größe und passen sich nicht an der Inhalt an. Wenn ich nun den Abstand zwischen den Navigationspunkten berechnen will bekomme ich falsche Wert und die Navigationspunkte verschieben sich.

Ein weiteres, nerviges Verhalten ergibt sich, wenn dynamische Textfelder in MovieClips geladen werden, die eine Transformation erfahren haben. Die nachgeladenen Textfelder verzerren ebenfalls und ändern ihre Größe. Falls ihr dieses Problem auch beobachtet, so ist eine Lösung, die Textfelder in einen leeren, frischen MovieClip außerhalb des transformierten Clips zu laden.

Im Großen und Ganz gehört die TextField-Klasse, neben der Tween-Klasse, zu den Klassen, die mir am meisten Probleme bereitet haben. Entweder durch schlechte Dokumentation oder durch “verbuggtes” Verhalten. Würde mich freuen, wenn der eine oder andere seine Erfahrungen mit diesen beiden Klassen posten könnte. Vielleicht kriegen wir eine schöne Bug-Sammlung zusammen und es wird eine Hilfe für andere.

Kleiner Nachtrag für die Bugsammlung:
Wenn Ihr ein TextFormat auf ein TextField anwendet, müsst ihr das TextFormat NACH der Zuweisung des Textes machen. Beispiel:

var meinText : TextField = new Textfield ();
var meinTextFormat : TextFormat = new TextFormat ();
meinTextFormat.size = 16;
meinTextFormat.color = 0xFF00FF;
meinTextFormat.font = "Verdana";
 
meinText.text = "Mein Text";
linktitle.setTextFormat ( tf );