Flash und Flex debuggen mit dem De MonsterDebugger

Der De MonsterDebugger ist ein Open Source Projekt des Design Studios De Monsters.

Der Debugger ist in Flex realisiert und wird AIR Applikation verwendet. Diese stellt alle Objekte einer laufenden Flash, Flex oder AIR Applikation in einer übersichtlichen Baumstruktur dar, vergleichbar mit dem Debugger des Flex Builders / Flash Builders.

Der Vorteil zum Flex Debugger ist allerdingst, dass Properties der Instanzen direkt geändert werden können und diese Änderungen Live in der Applikation sichtbar sind (bekannt aus der Firefox Erweiterung FireBug). Außerdem werden alle Funktionen angezeigt und diese können zur Laufzeit ausgeführt werden.
Der Debugger enthält eine eigene trace Funktion die nicht nur Strings ausgeben kann sondern Objekte als Baumstruktur aufschlüsselt, also eine wesentlich übersichtlichere Darstellung als wenn man sich ein Objekt mit ObjectUtil.toString() ausgeben lässt.

Ein Großer Nachteil ist, dass nur Properties und Funktionen die auf public gesetzt sind angezeigt und werden können. Der Debugger verwendet intern die Funktion describeType(myObject) : XML die eine XML Struktur über das Object zurückgibt. Hier werden allerdings nur alle Properties und Funktionen die public sind ausgegeben.
Der Debugger unterstützt auch keine Breakpoints wie ein klassischer Debugger, dafür bietet er einen guten Einblick in die aktuell dargestellten und geladenen Objekte.

Anwendung

Um den Debugger nutzen zu können muss zuerst die entsprechende AIR Anwendung installiert werden. Daraus kann über File->Export Client Class die Client Klasse exportiert werden, die dann in das Flash / Flex Projekt eingebunden werden muss.

Beispiel Flash

package {
	import flash.display.Sprite;
	import nl.demonsters.debugger.MonsterDebugger;

	public class Main extends Sprite {

		// Variable to hold the debugger
		private var debugger:MonsterDebugger;

		public function Main() {

			// Init the debugger
			debugger = new MonsterDebugger(this);

			// Send a simple trace
			MonsterDebugger.trace(this, "Hello World!")
		}
	}
}

Beispiel Flex

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="init()">
	<mx:Script>
		<![CDATA[

		// Import the debugger
		import nl.demonsters.debugger.MonsterDebugger;

		// Variable to hold the debugger
		private var debugger:MonsterDebugger;

		private function onInit():void
		{
			// Init the debugger
			debugger = new MonsterDebugger(this);

			// Send a simple trace
			MonsterDebugger.trace(this, "Hello World!");
		}
		]]>
	</mx:Script>
</mx:Application>

Fazit

Der De MonsterDebugger ersetzt nicht den Debugger des Flex Builders, aber gerade um komplexere Objekte zu tracen ist er gut geeignet. Der größte Vorteil ist, dass sich Anwendungen in ihrer wirklichen Umgebung (also im Netz, oder als AIR Anwendung) einfach und komfortabel Inspizieren lassen.

Weitere Informationen und Download unter http://www.demonsterdebugger.com/

Text Layout Framework für Flash, Flex und AIR

Das neue Text Layout Framework für den Adobe® Flash® Player 10 and Adobe AIR® 1.5 ist als Beta Version bei Adobe Labs verfügbar. Das Framework setzt auf die neue Text-Engine des Flash Player 10 auf und kann ab Flash CS4 und dem Flex SDK 3.2 benutzt werden. In der nächsten Version von Flex (Codename „Gumbo“) ist das Framework bereits integriert.

Features

Die wichtigesten Features sind:

  • Verschiedene Textrichtungen: links-rechts, rechts-links sowie vertikal
  • über 30 verschiedene Schriftsysteme unter anderen Arabisch, Hebräisch, Chinesisch, Japansich, Koreanisch, Thailändisch, Laotisch und die wichtigesten Systeme von Indien.
  • Verschiedene text styling Optionen wie Ligaturen, Kerning, Leading, Hoch- und Tiefgestellter Text ect.
  • Mehrspaltigkeit
  • Verknüpfte Text Container
  • Tabulatoren
  • Inline Bilder die sich wie Buchstaben im Textfluss verhalten.

Architektur

Der interne Aufbau des Text Layout Frameworks lehnt sich an das Model-View-Controller (MVC) Entwurfsmuster an.

Im Model wird ein abstrakter TextFlow definiert der den Text selbst enthält. Der Text über eine an XHTML angelehnte Struktur hierarchisch gegliedert. Als Basis dient immer eine Instanz der TextFlow Klasse, diese kann direkt einen Absatz (p) enthalten oder einen Container (div). Das DivElement kann wiederum ein DivElement oder einen Absatz enthalten. Der Absatz kann eine SpanElement (Span), eine Grafik (Graphic), ein Link (Link) oder ein TCYElement enthalten. Ein TCYElement repräsentiert kurze Textabschnitte die sowohl horizontal als auch vertikal ausgerichtete Texte enthalten können. Das TCYElement kann ein oder mehrere Span Elemente enthalten.
Außerdem gehört eine Konvertierungsklasse zum Model die Text importieren und wieder exportieren kann.

Im View wird der Text mit Hilfe der neuen Text-Engine des Flash Player 10 gerendert und angezeigt. Für das rendern gibt es zwei Ansätze, einen einfacheren für statischen Text und einen aufwendigeren für dynamischen Text der auch bearbeitet werden kann (siehe Beispiel).

Der Controller des Text Layout Frameworks enthält Klassen um Interaktionen des Benutzers mit dem Text und dessen Formatierung zu realisieren.

Beispiel für das Einbinden von des Text Layout Frameworks in Flex:

<mx:Script>
<![CDATA[
import flashx.textLayout.edit.UndoManager;
import flashx.textLayout.edit.EditManager;
import flashx.textLayout.container.DisplayObjectContainerController;
import flashx.textLayout.container.IContainerController;
import flashx.textLayout.conversion.TextFilter;
import flashx.textLayout.elements.TextFlow;

// container to hold the text
private var _container:Sprite = null;

private function init() : void {

// create a sprite to hold the TextLines
_container = new Sprite();
textContainer.rawChildren.addChild(_container);

// The text to display in the textContainer
var markup:String = ‚<TextFlow xmlns=“http://ns.adobe.com/textLayout/2008″><p><span>Hello,</span> <span     fontWeight=“bold“>World</span></p></TextFlow>‘;

// import the text into a new textFlow
var myFlow:TextFlow = TextFilter.importToFlow(markup, TextFilter.TEXT_LAYOUT_FORMAT);
// create a controller instace
var contr:IContainerController = new DisplayObjectContainerController(_container, textContainer.width,     textContainer.height);
// associate the controller with the flowComposer property of the text flow
myFlow.flowComposer.addController(contr);

// create a new instace of the EditManager and assign it with the interactionManager of the flow
myFlow.interactionManager = new EditManager(new UndoManager());

// update the display list
myFlow.flowComposer.updateAllContainers();
}

]]>
</mx:Script>

<mx:Canvas id=“textContainer“ width=“100″ height=“50″ backgroundColor=“0xFFFFFF“ top=“20″ left=“20″/>

Das war ein kurzer Einblick in das neue Text Layout Framework. Weitere Informationen gibt’s bei Adobe unter http://labs.adobe.com/technologies/textlayout/#fma

Adobe AIR Tour Munich

2 Mitglieder der ZeroSeven Crew sind live dabei. Adobe onAIR tour mit stop in München.

Um punkt 10.00 Uhr startet Serje mit seinem Vortrag, es geht um die Benefits vom neuen Adobe Flash Player 10, Jürgen und Sebastian sind dabei. Die neuen Möglichkeiten des Flash Players sprechen für sich. Filter die direkt auf Videos angewendet werden können, neue Möglichkeiten in Bezug auf den Einsatz von 3D (Alternativa) und live music rendering. Eine Fülle an neuen Möglichkeiten für den Entwickler und den Designer zu gleichen Teilen.

Es wurde auch über eine neue Voice over IP referiert die bald auf Basis des neuen Flash Players erscheinen soll, Codename Pacifica! Über den Link erhaltet Ihr weitere informationen hierzu.

Ein Vortrag auf den ich gerne noch ein wenig näher eingehen will ist der von Lee Brimelow! Ich muss erstmal vorweg schicken dass er die undankbare Aufgabe hatte den letzten der Vorträge zu halten. 11 Vorträge lagen schon hinter uns, es wurde kurz davor Bier ausgeschenkt und keiner hatte mehr so richtig Lust sich noch einen Votrag anzuhören. Doch Lee Brimelows Vortrag war phänomenal und jede weitere sekunde Wert. Hauptsächlich ging es bei seinem Vortrag um die Möglichkeiten die einem mit AIR Anwendungen offen stehen, z.B. durch den Look der Anwendung. Wenn man das Custom Chrome verwendet kann man mit einem .png die Form der Anwendung völlig frei gestalten. Dies hat er mit einer Beispielapplikation mit Namen „David Hasselhoffs Head App“ vorgestellt. Die natürlich für viele Lacher gesorgt hat. Generell waren die Anwendungsbeispiele von Lee mit viel Humor gesegnet.

Ich habe zusätzlich noch einige weitere Links zusammengetragen die von den „Platform Evangelists“ der Adobe onAIR tour stammen. Hier findet Ihr eine vielzahl an nützlichen Inhalten und Beispielen.

www.webkitchen.be

onair.adobe.com

www.mikechambers.com

blog.kevinhoyt.org

www.danieldura.com

www.gotoandlearn.com

www.leebrimelow.com

www.theflashblog.com

Flash CS3 Skin Template

Wie in meinem letzten Artikel erwähnt, waren Jürgen und Ich bei der Adobe onAIR tour in München. Dort habe ich Lee (einem der Referenten von Adobe) das Problem mit dem Illustrator CS3 Skin Template geschildert. Es scheint nichts neues zu sein dass die Templates nicht richtig funktionieren.

Auf sein Anraten hin habe ich nun das Flex Extension Kit für Flash CS3 installiert und das mitgelieferte Template genutzt. Leider muss ich sagen das es keinen tick besser funktioniert als das Illustrator Template. Im Gegenteil, hier kommt noch hinzu das der PopUpButton nicht richtig dargestellt wird. Ein weiterer Versuch war, einzelne Komponenten anstatt des gesamten Templates zu verwenden. Aber auch hier ein Bild des jammers, das Panel versagt leider komplett und dadurch verhagelt es die gesamte Testanwendung.

Ich werde also weiterhin mit dem Illustrator Template arbeiten und auf schöne Tweens und Effekte leider verzichten müssen. Der Bug-Report an Adobe wird von mir die nächsten Tage noch rausgehen mit der Hoffnung das bald Besserung eintritt.

P.AIR, die Software zur Verwaltung von Passwörtern

Wer kennt das nicht, man will sich irgendwo einloggen hat aber mal wieder das Passwort vergessen? Sei es der Email Account für Spam-Mails der nicht regelmäßig genutzt wird, Zugangsdaten für XING, MySpace, den eigenen Blog oder auch die wichtigen Daten für Onlinebanking. Um all diese Passwörter zu organisieren und sicher zu speichern wurde die AIR Anwendung P.AIR entwickelt.

Screenshot P.AIR

P.AIR ist eine Datenbank, die es ermöglicht, Passwörter strukturiert und sicher zu speichern. Die gespeicherten Passwörter können jederzeit mit wenigen Klicks abgerufen werden. P.AIR wurde mit Flex3 entwickelt und wird als Adobe® AIR™ Applikation bereitgestellt. Bei der Installation von P.AIR wird die Adobe® AIR™ runtime automatisch mitinstalliert.

Funktionen

– Strukturierte, übersichtliche und sichere Passwortverwaltung
– Mehrplatznutzung (P.AIR Advanced)
– Suchfunktion in unterschiedlichen Bereichen
– Automatische Generierung von Passwörtern

P.AIR Advanced

Die Netzwerklösung P.AIR Advanced befindet sich momentan im Endstatium der Entwicklung. Diese bietet Firmen mit mehr als einem Nutzer zusätzlich die Möglichkeit, ihre Passwörter zentral zu verwalten. Die Netzwerklösung speichert die Daten in einer MySQL-Datenbank auf einem von Ihnen angegebenen internen Server. Somit kann jeder berechtigte Mitarbeiter zu jeder Zeit auf die Passwörter zugreifen, wobei sie von außen nicht zugänglich sind.

Sicherheit

Da es sich bei Passwörtern im vertrauliche Daten handelt werden diese mit dem Advanced Encryption Standard mit 128 bit synchron verschlüsselt in der Datenbank gespeichert. Für die Netzwerkversion ist außerdem ein Key-File notwendig um überhaupt auf die Datenbank zugreifen zu können. Dieser Schlüssel kann vom Admin generiert und an alle berechtigten Mitarbeiter weitergegeben werden.
Die Applikation nimmt zu keinem Zeitpunkt selbständig Kontakt mit dem Internet auf, lediglich wenn auf den Button „Check for Updates“ geklickt wird wird die momentan installierte Version mit der aktuellen Version auf dem Server updates.zeroseven.de verglichen und bei bedarf upgedatet.

Für Fragen, Anregungen und eventuelle Bugs und Schwierigkeiten hinterlasst bitte Kommentare zu diesem Blogpost.

AIR Applikationen Updaten

Das Szenario ist bekannt, eine Anwendung wurde fertiggestellt, natürlich wurde alles ausreichend getestet und doch stellt sich nach einem erfolgreichen Launch heraus, es gibt doch noch den ein oder anderen Bug. Oder ein bestimmtes Feature wird noch nachgeschoben. Das ist bei einer Webapplikation kein Problem, die entsprechenden Files werden geändert und auf dem Server erneuert. Doch eine AIR Applikation ist auf den Systemen der Benutzer installiert und kann nicht von einem zentralen Ort upgedatet werden. Außer man hat beim Entwickeln daran gedacht eine Updatefunktion einzubauen. Genau für diesen Zweck gibt es in Adobe AIR eine spezielle Updater Klasse. Mithilfe dieser Klasse können AIR Anwendungen einfach und unkompliziert upgedatet werden.

Update Klasse
Die Updater Klasse enthält folgende Funktion update
public function update(airFile:File, version:String):void

Wird diese Funktion aufgerufen, wird die laufende Applikation beendet (wie wenn NativeApplication.exit() aufgerufen würde), die Applikation auf die die Variable airFile verweist wird installiert und gestartet. Aus Sicherheitsgründen muss die Variable version die korrekte Version der zu installierenden Anwendung enthalten.
Diese Versionsnummer kann aber nicht fest in die Applikation codiert werden, ansonsten wäre immer nur ein Update von einer bestimmten zu einer bestimmten Version möglich. Eine Möglichkeit ist nun eine XML-Datei auf einen Update-Server zu legen in der die Versionsnummer der aktuellen Version und der Pfad zum .air File gespeichert wird. Diese wird dann heruntergeladen, geparst und die Version wird mit der aktuell installierten Version verglichen. Ist die Version auf in der XML-Datei neuer als die aktuell installierte Software wird der Benutzer benachrichtigt und das Update kann durchgeführt werden.

AIRRemoteUpdater
Mit dem AIRRemotUpdater von „cotedazur brazil“ wird das Updaten erheblich vereinfacht. Das erstellen, updaten und parsen der XML-Datei fällt hier komplett weg, denn Der AIRRemoteUpdater vergleicht die momentan installierte Version der Anwendung mit der neusten verfügbaren Version auf einem Webserver (ohne das .air File herunterzuladen). Handelt es ich um eine andere Version kann die neue Version heruntergeladen und über die Updater.update Funktion (siehe oben) installiert werden.

Dieser ganze Prozess kann nun automatisiert werden, so dass zum Beispiel bei jedem Start der Anwendung abgefragt wird ob eine neue Version verfügbar ist. Somit bleiben die Benutzer der Anwendung immer auf dem neusten Stand. Wichtig ist jedoch die Update Funktionalität von Anfang an einzubauen, ansonsten können die Benutzer der ersten Stunde nicht über Updates informiert werden.

AIR Anwendungen zertifizieren

Um die Identität des Herausgebers einer AIR Anwendung sicherzustellen, muss beim Erstellen einer AIR Anwendung ein Zertifikat verwendet werden. Es ist möglich dieses Zertifikat selbst zu erstellen, jedoch wird dann bei der Installation der Anweunden ein rotes Fragezeichen angezeigt, und bei Publisher steht „UNKNOWN“.

AIR Installation Fenster

Zertifikate bei Thawte bestellen

Die von Adobe empfohlene Firma Thawte verkauft offizielle Adobe AIR Entwickler Zertifikate. Leider wurden wir auf deren Website automatisch auf die deutsche Seite weitergeleitet, auf der das AIR Zertifikat nicht angeboten wurde. Nach einer Umstellung der bevorzugten Sprache in Firefox konnten wir dieses Problem umgehen.

Wichtig ist, dass für den ganzen Prozess der Browser Firefox benutzt wird. Währen der Bestellung wird ein privater Schlüssel generiert und im Browser gespeichert, dieser ist wieder nötig wenn um später das Zertifikat abzuholen.

Nach dem das Bestellformular abgeschickt wurde, wird die angegebene Firma von Thawte autorisiert. In diesem Prozess kann es sein, dass noch weitere Informationen zur Firma benötigt werden. Wir wurden zweimal angerufen um die angegebenen Informationen nochmal zu überprüfen.
Schon nach wenigen Stunden erhielten wir dann eine Email mit einem Link zum download des Zertifikats.
Nach dem einloggen werden alle Informationen des Zertifikats angezeigt, inklusive Versionsnummer und Laufzeit. Über den Button „Fetch certificate“ kann das Zertifikat abgeholt werden. Nun wird das Zertifikat im Firefox gespeichert.

Über „Firefox/Einstellungen/Erweitert/Zertifikate anzeigen“ (Max OS) bzw. „Extras/Einstellungen/Erweitert/Zertifikate anzeigen“ (Windows) kann das Zertifikat angezeigt und kann von dort über den „Backup“ Button als .p12 Datei abgespeichert werden. Hier muss ein Backup Passwort vergeben werden, das bei der Erstellung der signierten AIR Applikation wieder benötigt wird.

Nun ist die Herkunft der AIR Applikation offiziell bestätigt und der Firmenname wird im Installationsfenster angezeigt.

AIR Installationsfenster Signiert

Adobe AIR

Die Grundidee von Adobe AIR (Adobe Integrated Runtime) ist, dass den Entwicklern die Möglichkeit gegeben wird, mit Webtechnologien Desktop-Anwendungen zu erstellen. Dabei ist es nicht mehr notwendig, auf die bisherigen Programmiersprachen wie C# oder C++ zurückzugreifen zu müssen. Adobe AIR verbindet hierbei die bekannten Technologien von Flash, Flex, HTML, Ajax oder JavaScript. Darüber hinaus bietet AIR nun auch die Möglichkeit Funktionalitäten des Betriebssystems wie z.B. Lese- und Schreibzugriff der lokalen Festplatte zu nutzen. Auch das aufwendige Portieren einer Desktop-Anwendung auf unterschiedliche Betriebssysteme gehört nun der Vergangenheit an. Eine Entwicklungsumgebung für die drei Betriebssystem Windows, MacOS und Linux.
Eine von Grund auf gutgeplante Webentwicklung unter Flex kann ein Großteil einer Desktop-Entwicklung beinhalten.