CodeBlog.ch » Flex

WYSIWYG Editor mit Flex

Remo Laubacher — Fri, 24 Oct 2008 08:04:09 +0000

Adobe liefert Flex mit einem RichTextEditor aus. Dieser lässt sich sehr einfach einbinden und passt vom Layout her auch wunderbar zu den restlichen Flex Controls.

Dieser Editor hat aber leider eine ziemlich begrenzte Funktionalität. Bereits beim Einfügen eines Bildes scheitern wir! Dazu kommt, dass der generierte Code nicht HTML konform ist, ein direktes verwenden in einer HTML Ausgabe ist deswegen zum Beispiel nicht möglich.

Alternative Lösungsmöglichkeit

Die einzige flash-basierte Lösung die ich finden konnte, ist diese hier: http://flashtexteditor.com/flexdemo/full Sieht auf den ersten Blick nett aus, eingefügte Bilder verhalten sich aber nicht wie gewohnt und fliessen mit dem Text mit und zudem ist dieses Control inzwischen nur noch kommerziell verfügbar.

Wer sich mit HTML und JavaScript beschäftigt hat, wird sicherlich den einen oder anderen WYSIWYG HTML Editor gefunden haben. Um nur ein paar zu nennen:

Wäre es nicht schön, wir könnten diese Editoren in Flex verwenden? Können wir!

Flex mit Adobe AIR vs. Flex im Browser

Es gibt einen Unterschied in der Art wie wir unsere Flex Anwendung starten bzw. ausführen lassen.

Es besteht die Möglichkeit mittels NPRuntime den Browser einzubinden, der das Flash aufgerufen hat. Details dazu findet man zum Beispiel bei Adobe: http://livedocs.adobe.com/flex/gumbo/langref/flash/external/ExternalInterface.html

Auf derselben Seite findet man auch den Hinweis, dass diese Funktionalität mit Adobe AIR nicht funktioniert.

Note: Adobe AIR currently does not support the ExternalInterface class.

In diesem Artikel wird nur eine mögliche Lösung beim Einsatz von Adobe AIR präsentiert. Der Lösungsweg über ExternalInterface dürfte aber ähnlich verlaufen.

http://osflash.org/projects/wrapper

HTML Code einbinden

Bei einem AIR Projekt, haben wir ein zusätzliches Control zu Verfügung: mx:HTML. Dieses lässt sich wie jedes andere Control in Flex mit MXML verwenden.

1	<mx:HTML id="html" location="http://www.codeblog.ch"/>

Wir können damit auch lokale HTML Files einbinden. Wir installieren als erstes die aktuelle TinyMCE Version. http://tinymce.moxiecode.com/download.php

Wir kopieren anschliessend sämtliche Files in unser Flex Projekt und erhalten diese Struktur:

editor.html ist nicht Teil von TinyMCE und TinyMCE.mxml ist unser Flex Control – mehr dazu später.

Der HTML Code

Wir könnten den ganzen HTML Code für den TinyMCE Aufruf in unserem Flex Code speichern, ich hab mich jedoch entschieden den Code in einer HTML Datei abzulegen. Der Code ist fast 1:1 aus dem TinyMCE Beispiel entnommen.

Ich habe versucht den Code in ein neues MXML Control zu packen. Gleich zu Beginn der vollständige Code – sind ja nur ein paar Zeilen:

<?xml version="1.0" encoding="utf-8"?>
<mx:HTML xmlns:mx="http://www.adobe.com/2006/mxml" location="tinymce/editor.html" initialize="init()">
	<mx:Script>
	[CDATA[
	private var htmlComplete:Boolean = false;
	private var localHtmlCode:String = null;
 
	public function init(): void
	{
		addEventListener(Event.COMPLETE, onHTMLLoadComplete);
	}
	public function set htmlCode (value:String):void
	{
		// in case the html file hasn't been loaded yet, delay the call..
		if (htmlComplete)
			setHtml(value);
		else
			localHtmlCode = value;
	}
	public function get htmlCode():String
	{
		this.htmlLoader.window.tinyMCE.triggerSave();
		return this.htmlLoader.window.elm1.value;
	}
	private function setHtml(value:String): void
	{
		this.htmlLoader.window.tinyMCE.get('elm').setContent(value);
		this.htmlLoader.window.document.getElementById('elm').value = value;
	}
	private function onHTMLLoadComplete(e:Event):void
	{
		htmlComplete = true;
 
		if (localHtmlCode != null)
			callLater(setHtml,[localHtmlCode]);
	}
	]]>
	mx:Script>
mx:HTML>

Als Basis für unser Control dient mx:HTML. Wir fügen lediglich die Eigenschaft htmlCode hinzu, um den Inhalt von TinyMCE zu ändern und auslesen.

Dazu müssen wir lediglich eine Methode mit dem Zusatz “get” ausstatten und eine mit “set”.

Nun hatte ich jedoch das Problem, dass TinyMCE noch nicht komplett geladen war, als ich versucht habe die Eigenschaft htmlCode zu verändern. Ich hab deswegen, eine noch nicht vollständig getestete, Lösung versucht umzusetzen – durch das abfangen des Events “COMPLETE”, wird uns mitgeteilt wann das HTML Control geladen ist, wurde die Eigenschaft htmlCode von vorher gesetzt (htmlComplete == false), so wird nachdem das Control geladen ist, der Code mittels callLater gesetzt. callLater sollte eigentlich schon selber erst ausgeführt werden, wenn das Control fertig geladen ist. In meinem Fall hat dies jedoch nicht gereicht. (bin für jeden Hinweis dankbar).

Alles speichern und schon haben wir im Flex Builder ein neues Control in der Rubrik “Custom” zur Verfügung. Per Drag’n'Drop einfügen, Projekt starten!

Web Applikation mit Adobe AIR

Remo Laubacher — Mon, 15 Sep 2008 09:06:14 +0000

Von Adobe gibt es seit einiger Zeit eine Technologie mit dem Namen AIR. Adobe AIR erlaubt es, Appliationen welche fürs Web entwickelt wurden, besser ins lokale Betriebssystem zu integrieren.

Man hat Zugriff auf eine Reihe von Funktionen welche Webapplikationen normalerweise nicht haben (Zwischenablage, Dateisystem usw.)
Die Applikation kann direkt aus dem Startmenü (bei Windows) geöffnet werden.

Adobe AIR unterstützt dabei HTML + Javascript, AJAX Appliationen. Natürlich wird aber auch die hauseigene Technologie Flash und damit auch Flex unterstützt.

Bevor wir beginnen, muss zuerst das (frei verfügbare) AIR SDK installiert werden. Dazu von dieser Seite das entsprechende ZIP herunterladen und installieren. http://www.adobe.com/products/air/tools/sdk/

HTML Applikation mit AIR starten

Neben dem bekannten HTML und JavaScript Code brauchen wir für Adobe AIR lediglich eine simple XML Datei.

Wir erstellen eine Datei mit dem Namen hellocodeblog-app.xml

 version="1.0" encoding="UTF-8"?>
 xmlns="http://ns.adobe.com/air/application/1.0">
    >hellocodeblog.html.hellocodeblog>
    >0.1>
    >hellocodeblog>
    >
        >hellocodeblog.html>
        >true>
        >400>
        >200>
    >
>

Als nächstes brauchen wir wie gewohnt ein bisschen HTML Code. Damit wir die AIR Funktionalität komplett nutzen können, binden wir die Datei AIRAliases.js ein. In diesem Beispiel werden wir sie allerdings nicht verwenden.

Die Datei hellocodeblog.html enthält diesen Code



    Hello CodeBlog


    Hello CodeBlog!

Applikation starten
Unsere Applikation starten wir nun indem wir der Datei adl.bat aus dem AIR SDK unsere XML Datei übergeben:

Applikation publizieren

Wir können unsere Applikation mit AIR gleich verpacken so dass wir ohne das SDK die Applikation starten können.

Applikationen müssen zertifiziert werden. Wenn man bereits ein Zertifikat hat, natürlich dieses verwenden. In unserem Fall erstellen wir uns aber ein eigenes. Dazu brauchen wir das Tool adt welches sich ebenfalls im bin Verzeichnis des AIR SDKs befindet.

adt -certificate -cn SelfSigned 1024-RSA codeBlog.pfx ein-password

Anschliessend rufen wir das Tool adt mit anderen Parametern auf um unsere Files in eine AIR Datei zu packen. Diese kann anschliessend mit einem Doppelklick installiert werden.

adt -package -storetype pkcs12 -keystore codeBlog.pfx HelloCodeBlog.air hellocodeblog-app.xml hellocodeblog.html

Anschliessend läuft unsere Applikation ohne das Konsolen Fenster und einem SDK Tool.

Weitere Informationen

Von Adobe gibt es ein gut strukturierter Büchlein in Englisch welches in Kapitel 4 die Möglichkeiten beschreibt die AIR bietet. http://onair.adobe.com/files/AIRforJSDevPocketGuide.pdf

Update 18. September 2008

Scheint so als gäbe es einige Einschränkungen bei der Integration ins Betriebssystem. Die trivial wirkende Anforderung einen Prozess zu starten erweist sich als deutlich komplexer als erwartet. Bisher scheint dies lediglich über einen zusätzlichen “Proxy” machbar zu sein. http://www.mikechambers.com/blog/2008/01/17/commandproxy-net-air-integration-proof-of-concept/

Warten wir mal ab und schauen was Adobe vielleicht nachliefert. Einfache Web Applikationen vom Desktop aus starten ist ja nett, aber wirklich konkurrenzfähig mit klassischen Applikationen ist das in dieser Form sicherlich nicht. Keine direkte Nutzung von lokalen (nativen) Bibliotheken usw…

Update 18. September 2008 – 2

Es scheint auch ohne Zusatzsoftware zu gehen, allerdings auch nicht wirklich elegant. Dieser Code:

var request = new air.URLRequest("file://c:/windows/notepad.exe");
air.navigateToURL(request);

scheint zu funktionieren, jedoch abhängig vom Standard Browser. URLRequest öffnet nämlich jeweils den Browser und abhängig vom Browser erhält man dann auch noch eine Warnung (als würde man einen Link im Internet anklicken). Hat man aber zum Beispiel Google’s Chrome installiert, so wird die Datei heruntergeladen, auch nicht wirklich optimal…

Update 8. Oktober 2008

Unter Windows kann man diese Erweiterung nutzen: http://aperture.fluorinefx.com/. Damit kann man sehr einfach Prozesse starten, Screenshots erstellen und auf gewisse Outlook Daten zugreifen. Allerdings nur für Windows!

AMFPHP Methoden mit Parametern

Remo Laubacher — Fri, 09 May 2008 14:44:25 +0000

Nachdem ich doch mehr als 5 Minuten benötigt habe, um eine PHP Methode die ich mittels AMFPHP zur Verfügung gestellt habe aufzurufen, hier ein weiterer Mini-Artikel zum Thema Flex und AMFPHP.

In der Praxis will man ja meistens nicht einfach eine Methode ohne Argumente aufrufen. Bei mir war es zum Beispiel eine Methode die Datensätze zurückliefert. Dort wollte ich ein paar Daten übergeben, so dass man nicht unnötig viele Datensätze übertragen muss. Das schöne oder auch unschöne an Flex, je nach Anwendungsfalls, ist ja, dass wir lediglich die Daten vom Server zum Client übertragen müssen. Das GUI wird einmalig beim Start übertragen und läuft dann auf dem Client. Bei HTML (AJAX ausgenommen) übertragen wir ja immer eine ganze Reihe Anweisungen die das Layout betreffen. Ein Webdesigner beklagt sich darüber wohl kaum noch, ein Softwareentwickler vielleicht schon eher.

Damit das wirklich ein Mini-Artikel bleibt auch nur ein Auszug aus dem PHP Code. Unsere Methode die wir aufrufen wollen. Sollte nicht klar sein, wie man diese mittels AMFPHP Flex zur Verfügung stellen kann. Im Artikel http://www.codeblog.ch/2008/04/datenaustausch-mit-amfphp-und-flex/ ist dies beschrieben.

function load($transactionId)
{
...

Wir benötigen auch in diesem Fall (ausser wir geben die Adresse zu gateway.php fix an) eine Konfigurationsdatei, welche wir mxmlc mit dem Parameter “-services” übergeben.

 version="1.0" encoding="UTF-8"?>
>
	>
		 id="amfphp-flashremoting-service" class="flex.messaging.services.RemotingService" messageTypes="flex.messaging.messages.RemotingMessage">
			 id="amfphp">
				>
					 ref="amfphp-channel"/>
				>
				>
					>*>
				>
			>
		>
	>
	>
		 id="amfphp-channel" class="mx.messaging.channels.AMFChannel">
			 uri="http://localhost/amfphp/gateway.php" class="flex.messaging.endpoints.AMFEndpoint"/>
		>
	>
>

Damit haben wir unsere Konfiguration in eine XML Datei ausgelagert.

Argument übergeben – Variante 1

Wir können direkt in der RemoteObject Definition die Argumente definieren:

<mx:RemoteObject id="myservice" destination="amfphp" source="accounting.TransactionDao" fault="faultHandler(event)" showBusyCursor="true">
   <mx:method name="load" result="transactionResultHandler(event)">
      <mx:arguments>
         <transactionId>{transactionId}transactionId>
      mx:arguments>
   mx:method>
mx:RemoteObject>

Dies macht vorallem dann Sinn, wenn wir Werte übergeben wollen, die schon zur Verfügung stehen. Zum Beispiel Formularfelder oder sonstige Werte die “bindable” sind.

Das obige Beispiel sucht einfachheitshalber nur eine Variable transactionId, welche sich folgendermassen definieren lässt:

[Bindable]
var transactionId:String;

Wollen wir die Methode aufrufen, so müssen wir sicherstellen, dass die Variable auch einen Wert enthält:

public function loadData(): void
{
   transactionId = 123;
   myservice.load.send();
}

Man erkennt ziemlich schnell, dass dieser Code etwas fraglich ist – wieso sollten wir eine “globale” Variable definieren um einer Methode einen Wert zu übergeben? Wie vorhin erwähnt macht dies vorallem dann Sinn, wenn die Variable bereits vorhanden ist. Ist dies nicht der Fall, so ist Variante 2 wohl zu bevorzugen.

Von Adobe gibt es übrigens auch einen Artikel der dieses Binding Verfahren beschreibt:
http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Book_Parts&file=dataservices_099_11.html

Argument übergeben – Variante 2

Wollen wir lokal verfügbare Daten übergeben, so sieht die Angelegenheit noch etwas einfacher aus. Wir definieren bei RemoteObject keine Argumente mehr:

<mx:RemoteObject id="myservice" destination="amfphp" source="accounting.TransactionDao" fault="faultHandler(event)" showBusyCursor="true">
   <mx:method name="load" result="transactionResultHandler(event)"/>
mx:RemoteObject>

und wer hätte es gedacht, wir können die Argumente direkt übergeben.

public function loadData(): void
{
   myservice.load.send(123);
}

Zugegeben etwas offensichtlich, ich hab aber trotzdem ein paar Minuten benötigt um die zwei unterschiedlichen Methoden zu entdecken – vielleicht hilft’s ja jemandem!

Natürlich hätte man bei Adobe auch dazu einen Artikel gefunden. http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Book_Parts&file=dataservices_099_11.html Wenn man nur gleich an der richtigen Stelle suchen würde, wäre das alles kein Problem gewesen!

Datenaustausch mit AMFPHP und Flex

Remo Laubacher — Tue, 29 Apr 2008 12:44:21 +0000

Bereits in einem älteren Artikel: Datenaustausch mit Flex, hab ich erwähnt wie man Daten von einem PHP Script in einer Flex Anwendung bringen kann. Das PHP Script war dort jedoch sehr primitiv und sollte so nicht in die Internet-Wildnis gelassen werden.

In diesem Beitrag wollen wir mittels AMFPHP etwas eleganter Daten von einem serverseitigen PHP Script in einer Flex Anwendung bringen. Adobe bietet mit Flash Remoting MX selber eine Komponente an um dies zu bewerkstelligen. Ich versuche aber bewusst freie verfügbare Komponenten einzusetzen, da das “Spielen” etwas mehr Spass macht, wenn man kein Geld ausgeben muss. Es gäbe noch eine weitere Alternative – PHPObject, diese wird hier aber nicht weiter erwähnt, ev. kommt dazu aber noch ein weiterer Artikel.

Vorbereitung

Flex SDK, wer’s noch nicht hat – zurück an der Start: Einstieg in Adobe Flex 3

Webserver mit PHP Unterstützung

AMFPHP herunterladen & installieren. Am besten, so dass es gleich mit “http://localhost/amfphp” ansprechbar ist. Dadurch funktionieren alle Pfadangaben.

PHP Script

In diesem Beispiel wird in einem PHP Script ein Array mit zwei Einträge erstellt, welches mittels AMFPHP publiziert wird. Mit AMFPHP kann man sehr einfach mit Remoting Daten zur Verfügung stellen.

Wir definieren dazu lediglich eine Klasse “Topic” welche die Felder für unsere Daten enthält. Und eine Service Klasse, welche die Daten ausliest und zurückgibt. Da wir unseren Service in einem eigenen Ordner/Namespace/Package haben wollen, definieren wir zudem _explictType.

Wichtig ist hier, dass am Ende der Datei keine Leerzeichen stehen. AMFPHP modifiziert den “Header” – wer schon mit PHP ein paar Erfahrungen gesammelt hat, weiss, dass man keine Ausgaben machen darf, wenn man den Header modifizieren will. Zeilenumbrüche oder Leerzeichen sind auch Zeichen!

Wer dies nicht beachtet, wird die nette Meldung “Client.Error.DeliveryInDoubt” erhalten. Heisst ungefähr soviel wie Daten wurden in einem nicht brauchbaren Format übergeben. Eine PHP Fehlermeldung ist in unserem Fall nicht brauchbar!


class Topic {
   var $_explicitType = "codeblog.Topic";
 
   var $topic;
   var $author;
   var $email;
   var $message;
}
class TopicService
{
   function getTopics()
   {
      $topics = array();
 
      $topic = new Topic();
      $topic->author  = 'SuperMario';
      $topic->email   = 'super@mario';
      $topic->topic   = 'gameplay';
      $topic->message = 'luigi';
      $topics[] = $topic;
 
      $topic = new Topic();
      $topic->author  = 'Laubi';
      $topic->email   = 'laubi@codeblog';
      $topic->topic   = 'flex remoting';
      $topic->message = 'siehe codeblog.ch';
      $topics[] = $topic;
 
      return $topics;
   }
}
?>

Als TopicService.php, wie auf diesem Screenshot abgebildet, speichern:

Service Konfiguration

Damit wir die Adresse des Services nicht in den Code schreiben müssen, erstellen wir eine Datei mit dem Namen services-config.xml welche dies übernimmt:

 version="1.0" encoding="UTF-8"?>
>
	>
		 id="amfphp-flashremoting-service" class="flex.messaging.services.RemotingService" messageTypes="flex.messaging.messages.RemotingMessage">
			 id="amfphp">
				>
					 ref="amfphp-channel"/>
				>
				>
					>*>
				>
			>
		>
	>
	>
		 id="amfphp-channel" class="mx.messaging.channels.AMFChannel">
			 uri="http://localhost/amfphp/gateway.php" class="flex.messaging.endpoints.AMFEndpoint"/>
		>
	>
>

Wichtig sind hier folgende Dinge:

Die ID bei destination: amfphp. Diesen Namen benötigen wir um den Service aus dem Action Script anzusprechen

Das Attribut ref bei channel muss zur channel-definition passen

Bei endpoint muss die korrekte Adresse eingetragen sein

Damit diese zusätzliche Konfigurationsdatei beim Erstellen beachtet wird, müssen wir sicherstellen, dass mxmlc dieser Zusatz übergeben wird: “-services services-config.xml”. Bei FlashDevelop geht dies natürlcih auch:

Die Flex Anwendung

Die Flex Anwendung sollen die Daten in einer Liste bzw. Grid ausgeben und beim Selektieren eines Eintrages dessen Details anzeigen. Dazu benötigen wir zwei Dateien. Die erste Datei Topic.as dient uns als Struktur um die Daten entgegen zu nehmen.

package codeblog
{
	[RemoteClass(alias="codeblog.Topic")]
	[Bindable]
	public class Topic
	{
		public var author:String;
		public var email:String;
		public var topic:String;
		public var message:String;
	}
}

Die zweite Datei enthält das MXML Layout und die Anweisungen Daten vom Service zu holen. Als erstes braucht es dazu eine Definition damit die Flex Anwendung unseren Service findet.

<mx:RemoteObject id="myservice" source="codeblog.TopicService" destination="amfphp" fault="faultHandler(event)" showBusyCursor="true">
    <mx:method name="getTopics" result="getTopicsHandler(event)" fault="faultHandler(event)" />
mx:RemoteObject>

Wir nun die Send Methode aufgerufen, so wird die Anfrage gestartet und die Methode getTopicsHandler wird aufgerufen bzw. faultHandler bei einem Fehler.

myservice.getOperation('getTopics').send();
 
...
 
private function faultHandler(fault:FaultEvent):void
{
    Alert.show(fault.fault.faultString, fault.fault.faultCode.toString());
}
 
private function getTopicsHandler(ev:ResultEvent):void
{
    dp = new ArrayCollection(ArrayUtil.toArray(ev.result) );
}

Den vollständigen Code findet ihr am Ende des Artikels. Und wenn alles geklappt hat, solltet FlashDevelop nach dem Betätigen von F5 das hier anzeigen:

Quellcode der Flex Anwendung ohne AMFPHP

Fraktal mit Flex

Remo Laubacher — Wed, 23 Apr 2008 12:11:23 +0000

Flex benötigt zur Ausführung Flash und bekanntlich ist Flash ja früher ein Tool gewesen um Animationen und vergleichbares zu erstellen. Fälschlicherweise denken auch heute noch viele an ein besseres Powerpoint wenn sie das Wort “Flash” hören, aber dies ist ein anderes Thema.

Anstelle der grafischen Art und Weise wie man eine Flash Animation erstellen kann, ist es natürlich auch möglich, Bilder per Code erstellen. Wir wollen deswegen ein simples Fraktal von Flex/Flash zeichnen lassen.

Der Code für die Erstellung des Fraktals, hab ich einem C-Beispiel entnommen, dessen Herkunft ich leider nicht mehr kenne. Ich hab es aber in der Kategorie “ohne Copyright” bei mir eingeordnet, sollte dies nicht stimmen, bitte melden!

Damit unser Fraktal gezeichnet wird, ohne dass wir 10 Tassen Kaffee trinken müssen bis etwas sichtbar ist, verwenden wir die BitmapData Klasse. Diese Klasse ist für unsere Zwecke ideal, da wir nicht direkt auf den Monitor zeichen, sondern in eine Art 2D-Array. Würden wir jeden Pixel direkt auf den Monitor zeichnen, gäbe es sehr viele “Refreshs” der Anzeige.

Wie kann ich mit BitmapData etwas ausgeben?

...
bmd = new BitmapData(300, 200);
bmd.setPixel(10,10,0xFF0000);
img.source = new Bitmap(bmd);
]]>
mx:Script>
 
<mx:Image id="img" />

Dieser Code zeichnet lediglich einen roten “Pixel” an der Position 10, 10 und gibt in anschliessend im Image Objekt “img” aus. Für die Ausgabe müssen wir unser BitmapData Object in ein Bitmap Objekt umwandeln, dazu gibt es sogar einen Konstruktor, so dass wir dafür lediglich eine Zeile benötigen (new Bitmap(bmd)).

Mit diesem Prinzip können wir mit einer akzeptablen Performance Bilder erstellen. Selbstverständlich können wir nicht nur einzelne Pixel mit BitmapData manipulieren, es gibt zahlreiche Funktionen wie zum Beispiel fillRect, wir wollen aber nicht weiter auf die Funktonen von BitmapData eingehen.

Damit wir die Parameter unseres Fraktals ohne Code-Änderung einstellen können, erstellen wir mit MXML ein simples Interface. Mit “mx:HSlider” stellt uns Flex ein passendes Control zur Verfügung um einen numerischen Wert grafisch zu verändern.

<mx:HSlider id="slider_p" minimum="-5" maximum="-0.7" value="-1.29" tickColor="black" snapInterval="0.1" tickInterval="0.3" allowTrackClick="true" liveDragging="true" change="generateFractal()"/>

Bei jeder Änderung (change=…) führen wir die Funktion “generateFractal” aus, welche sofort das Fraktal neu zeichnet.

Mein Wissen bezüglich Fraktalen ist definitiv zu klein, deswegen kann ich den Code nicht weiter kommentieren. Es gibt aber zahlreiche Ressourcen im Internet wenn jemand mehr über dieses Thema wissen will.

<mx:Script>
[CDATA[
 
private var bmd:BitmapData;
 
public function generateFractal():void
{
	bmd = new BitmapData(300, 200);
        bmd.lock();
 
	var xmin:Number, xmax:Number, ymin:Number, ymax:Number;
	var fact:Number = 1.0;
	var ypy:Number, x:Number, y:Number, x0:Number, y0:Number, xp:Number, yp:Number;
	var const_scr:Number = 1.0;
	var deltax:Number, deltay:Number, p:Number, q:Number, ya:Number, r:Number, xkp1:Number, ykp1:Number;
	var npix:int = 640, npiy:int = 480;
	var kcolor:int;
	var k:int, np:int, nq:int, ipen:int;
 
	p = slider_p.value;
	q = slider_q.value;
	xmin = slider_xmin.value;
	xmax = slider_xmax.value;
	ymin = slider_ymin.value;
	ymax = slider_ymax.value;
	kcolor = slider_kcolor.value;
 
	deltax = (xmax-xmin)/npix-1;
	deltay = (ymax-ymin)/npiy-1;
 
	for (np = 0; np <= npix - 1; np++)
	{
		x0 = xmin + np*deltax;
		for (nq = 0; nq <= npiy - 1; nq++)
		{
			y0 = ymin + nq*deltay;
			x = x0;
			y = y0;
			k  = 0;
			do
			{
				xkp1 = (x+y)*(x-y) + p;
				ya   = x*y;
				ykp1 = ya + ya + q;
				r    = xkp1*xkp1 + ykp1*ykp1;
				k++;
				if (r >= kcolor)
				{
					ipen = 30 + k;
					xp = const_scr*np;
					yp = nq;
					bmd.setPixel(xp,yp,ipen*100);
				}
 
				if (k == kcolor)
				{
					ipen = 1;
					xp = const_scr*np;
					yp = nq;
					bmd.setPixel(xp,yp,ipen*100);
				}
 
				x = xkp1;
				y = ykp1;
			} while (r <= kcolor && k<=kcolor);
		}
	}
        bmd.unlock();
	img.source = new Bitmap(bmd);
}
]]>
mx:Script>

Die Input Parameter hab ich “empirisch” auf ein Minimum bzw. Maximum beschränkt. Einige sind aber trotzdem nicht ganz optimal, so lässt sich zum Beispiel die Farbe nicht wirklich ändern.. Werde bei Gelegenheit noch ein paar Dinge optimieren, bekomme aber auch immer gerne Feedback!

Quellcode als FlashDevelop Projekt

Flex Entwicklung mit FlashDevelop

Remo Laubacher — Wed, 09 Apr 2008 11:15:39 +0000

Wer SWF Dateien erstellen wollte, war bisher immer relativ stark an Adobe Flash gebunden. Adobe Flash ist noch immer das einzige Werkzeug, das wirklich alle Features von Flash mit einem grafischen Interface zur Verfügung stellt.

Es gibt inzwischen einige Tools um für einen speziellen Zweck SWF Dateien zu erstellen, dies beschränkt sich dann aber auf Bildergalerien, kleine Animationen oder ähnliches.

Als ich vor einigen Tagen das Flex SDK angeschaut habe, bin ich auch auf eine Seite eines Programmes gestossen das meiner Meinung nach zu unbekannt ist. FlashDevelop

Die Oberfläche präsentiert sich nach dem Start sehr aufgeräumt, vom Aufbau her ganz ähnlich zu Visual Studio. Wir wollen natürlich gleich mit einem Projekt starten. Im Menü “Project” wählen wir “New Project…” und erhalten eine Liste mit verschiedenen Typen, Flash, Flex 2.0, Flex 3.0 usw. Wir wollen eine Flex Anwendung entwickeln und verwenden dazu Flex 3.0.

Gleich nachdem das Projekt angelegt wurde, erstellt FlashDevelop eine Datei main.mxml welche so auch gleich ausführbar ist. Wir wollen nun gleich das erstelle File übersetzen und anzeigen lassen. Ein Klick auf den blauen Pfeil (oder F5) – es erscheint ein Konfiugrationsdialog. Wir haben FlashDevelop das erstemal gestartet und müssen nun noch angeben wo sich das Flex SDK befindet.

Wir müssen hier lediglich bei “Flex SDK Location” den korrekten Pfad angeben. Und schon ist FlashDevelop fähig unsere MXML Datei zu übersetzen und anzeigen.

Durch das MDI Docking Interface lassen sich auch zahlreiche Fenster öffnen so dass wir alles was wir wollen im Überblick haben.

Fazit

FlashDevelop ist klein schlank, und vorallem sehr aufgeräumt. Für Leute mit Erfahrungen im Bereich Softwareentwicklung, Visual Studio oder ähnlichem, wirkt die Oberfläche sehr übersichtlich. Nett sind auch Kleinigkeiten wie das automatische Anzeigen des Konfigurationdialoges wenn eine Einstellung fehlt. Von einem derart unbekannten Programm hätte ich dies nicht erwartet, auch eine sprechende Fehlermeldung wäre da ganz gut gewesen.

Da der Adobe Flex Builder für meine Spielereien etwas zu teuer ist, wird FlashDevelop ab sofort meine neue Entwicklungsumgebung für Flex werden! cmd.exe ist auf Dauer doch etwas umständlich!

Datenaustausch mit Flex

Remo Laubacher — Sun, 06 Apr 2008 15:34:57 +0000

In diesem Beitrag geht es um die Erstellung einer sehr einfachen Applikation, die Daten von einem PHP Script holt und auch wieder zurückgeben kann. Wer noch nie mit Flex gearbeitet hat, sollte vielleicht zuerst diesen Artikel lesen: Einstieg in Adobe Flex. Wie im ersten Artikel arbeiten wir auch hier ohne den Flex Builder – nur das kostenlose Flex SDK wird benötigt.

Wir holen in diesem Fall die Daten von einem PHP Script, theoretisch kann aber auch ASP.NET, JSP, Ruby usw. zum Einsatz kommen. Die Daten die wir anzeigen, werden im XML Format übertragen. Damit dieser Artikel nur zu gross wird, hab ich eine statische XML Struktur in die PHP Datei eingefügt. Der folgende Code zeigt dies. Am Ende des PHP Codes steht auch der Teil, der für das Einfügen von neuen Datenbank-Einträgen verantwortlich ist, aber auch hier kein wirklicher Code, es wird lediglich eine Datei geschrieben:


$xmlData = <<


1
Hans
Mustermann
nirgendwo@da.com


2
Frida
Beispielfrau
nirwana@heaven.org



EOD;
 
if ($_REQUEST['method'] == 'getAll')
{
   echo $xmlData;
}
else if ($_REQUEST['method'] == 'insert')
{
   $fp = fopen('test.log','w');
   fwrite($fp,$_REQUEST['firstName']);
   fwrite($fp,$_REQUEST['lastName']);
   fwrite($fp,$_REQUEST['mailAddress']);
   fclose($fp);
}
?>

Dies ist schon alles was wir serverseitig benötigen, aber wie gesagt dies ist nur ein stark vereinfachter Code. Es werden Daten weder abgespeichert, noch aus einer Datenbank ausgelesen.

Wir erstellen nun also wieder eine MXML Datei mit einem beliebigen Editor.

Da wird zwei Formulare benötigen, für die Ausgabe der Daten in einer Tabelle, und für die Eingabe von neuen Einträgen. Wir verwenden dafür das sogenannte “ViewStack” Control mit dem wir verschieden Controls an einer Stelle platzieren können. Mittels einer Zeile Code können wir ganz einfach das aktive Control bestimmen.

In Zeile 1 steht im Click Ereignis des Buttons ein Code der im untenstehen Viewstack das Canvas Control in den Vordergrund bringt.

<mx:Button label="Hinzufügen..." click="{viewstack.selectedIndex = 1}"/>
...
<mx:ViewStack id="viewstack" width="100%" height="100%">
   <mx:Panel label="Personen" width="100%" height="100%">
   ...
   mx:Panel>
   <mx:Canvas label="Neue Person einfügen" width="100%" height="100%">
   ...
   mx:Canvas>
mx:ViewStack>

Wie im vorigen Artikel verwenden wir den HTTPService um Daten vom Server zu holen bzw. zu speichern.

<mx:HTTPService id="httpService"
                url="data.php"
                resultFormat="e4x"
                fault="Alert.show(event.fault.faultString), 'Error'"
                useProxy="false"/>

Dieses HTTPService Objekt kann HTTP Anfragen mit der GET und POST Methode schicken bzw. empfangen. Da wir beim Auslesen der Daten kaum Daten übergeben verwenden wir dort die GET Methode:

httpService.method = "GET";
httpParams['method'] = "getAll";
httpService.send(httpParams);

Beim Abspeichern hingeben kommt die POST Methode zum Einsatz. Der Code ist aber fast identisch:

httpService.method = "POST";
httpParams = {"method":      "insert",
              "firstName":   inputFirst.text,
              "lastName":    inputLast.text,
              "mailAddress": inputMail.text};
httpService.cancel();
httpService.send(httpParams);

Abgesehen von diesem Code benötigen wir ein paar Kleinigkeiten wie zum Beispiel eine Clear-Methode um die Eingabefelder nach der Eingabe zu löschen. Und natürlich einiges an XML Anweisungen um das GUI aufzubauen. Dies sollte aber zu einem grossen Teil selbsterklärend sein, wenn HTML und XML nicht ganz neu sind.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="fetchData()">
   <mx:Script>
   [CDATA[
   import mx.rpc.events.ResultEvent;
   import mx.collections.XMLListCollection;
   import mx.controls.Alert;
 
   private var httpParams:Object = new Object();
 
   [Bindable]private var xmlData:XMLListCollection;
 
   public function resultHandler(event:ResultEvent):void
   {
      var result:XML = XML(event.result);
      var xmlList:XMLList = result.data.children();
      xmlData = new XMLListCollection(xmlList);
   }
 
   public function insertItemHandler(event:ResultEvent):void {
      fetchData();
   }
 
   public function fetchData():void
   {
      httpService.removeEventListener(ResultEvent.RESULT,insertItemHandler);
      httpService.addEventListener(ResultEvent.RESULT,resultHandler);
 
      httpService.method = "GET";
      httpParams['method'] = "getAll";
 
      httpService.cancel();
      httpService.send(httpParams);
   }
   public function insert():void
   {
      httpService.removeEventListener(ResultEvent.RESULT,resultHandler);
      httpService.addEventListener(ResultEvent.RESULT,insertItemHandler);
 
      httpService.method = "POST";
      httpParams = {"method":      "insert",
                    "firstName":   inputFirst.text,
                    "lastName":    inputLast.text,
                    "mailAddress": inputMail.text};
      httpService.cancel();
      httpService.send(httpParams);
 
      viewstack.selectedIndex = 0;
      clearFields();
   }
   public function clearFields(): void
   {
      inputFirst.text = "";
      inputLast.text = "";
      inputMail.text = "";
   }
   public function cancelInsert():void
   {
      viewstack.selectedIndex = 0;
      clearFields();
   }
   ]]>
   mx:Script>
   <mx:HTTPService id="httpService"
                   url="data.php"
                   resultFormat="e4x"
                   fault="Alert.show(event.fault.faultString), 'Error'"
                   useProxy="false"/>
 
   <mx:ViewStack id="viewstack" width="100%" height="100%">
      <mx:Panel label="Personen" width="100%" height="100%">
         <mx:DataGrid width="100%" height="100%" dataProvider="{xmlData}">
              <mx:columns>
               <mx:DataGridColumn dataField="firstName" headerText="Vorname"/>
               <mx:DataGridColumn dataField="lastName" headerText="Nachname"/>
               <mx:DataGridColumn dataField="mailAddress" headerText="Mail"/>
            mx:columns>
         mx:DataGrid>
         <mx:Form>
            <mx:FormItem label="Neue Person einfügen">
               <mx:Button label="Hinzufügen..." click="{viewstack.selectedIndex = 1}"/>
            mx:FormItem>
         mx:Form>
      mx:Panel>
      <mx:Canvas label="Neue Person einfügen" width="100%" height="100%">
         <mx:Form horizontalCenter="0" verticalCenter="0" backgroundColor="#FFFFFF">
            <mx:FormItem label="Vorname">
               <mx:TextInput id="inputFirst"/>
            mx:FormItem>
            <mx:FormItem label="Nachname">
               <mx:TextInput id="inputLast"/>
            mx:FormItem>
            <mx:FormItem label="Mail">
               <mx:TextInput id="inputMail"/>
            mx:FormItem>
            <mx:ControlBar>
               <mx:Button label="Einfügen" click="insert()" />
               <mx:Button label="Abbrechen" click="cancelInsert()" />
            mx:ControlBar>
         mx:Form>
      mx:Canvas>
   mx:ViewStack>
mx:Application>

Bei den Sonderzeichen gibt es noch eine Kleinigkeit zu beachten. Wer gerne Umlaute in seinem Flex GUI anzeigen möchte, sollte darauf achten, dass die MXML Datei im UTF-8 Format gespeichert wird. Bei FlashDevelop einfach bei “File – Encoding – UTF-8″ auswählen.

Einstieg in Adobe Flex 3

Remo Laubacher — Sat, 05 Apr 2008 11:44:14 +0000

Allgemein

Schon länger liest man öfters die drei Buchstaben RIA. Mit diesem, ich nenne es mal, Modewort entstanden auch verschiedene mehr oder weniger neue Technologien. Einige, wie zum Beispiel AJAX basieren eigentlich komplett auf älteren Technologien, anderen wie zum Beispiel Flex verwenden das ebenfalls nicht mehr neue Flash.

Bei Flex ist allerdings die Art und Weise wie man schlussendlich zu einer SWF-Datei kommt stark abweichend von dem was alteingesessene Flash Freunde sich gewohnt sind.

Bei Adobe gibt es eine schöne Übersicht, über die Adobe RIA Technologien. http://www.adobe.com/resources/business/rich_internet_apps/

Auf dieser Grafik ist auch zu erkennen, dass das eigentlich Thema dieses Artikels nur ein Framework ist, Adobe aber eigentlich vorsieht, Flex Projekte mit dem Flex Builder zu erstellen. Flex Builder ist ein auf Eclipse basierendes Werkzeug um Flex Anwendungen zu entwickeln. Im Gegensatz zum Flex SDK aber nicht gratis! Und da ich persönlich immer gerne zuerst die Technologie verstehe, wollte ich von ganz vorne beginnen, also nur mit dem freiverfügbaren Flex SDK.

Die Vorbereitungen

Natürlich benötigen wir das Flex SDK. Dies finden wir zum Beispiel hier: http://www.adobe.com/go/flex3_sdk. Wer will kann auf dieser Seite auch eine 60-Tage Testversion des Flex Builders herunterladen, wir scrollen aber als erstes mal weiter runter und holen uns das Flex SDK.

Das Flex SDK ZIP entpacken, z.B. nach c:\flex

Da wie erwähnt Flash eine der grundlegenden Technologie ist, brauchen wir einen Flash Player. Ich geh aber davon aus, dass dies bereits installiert ist.

Hello World

Wie könnte ich anders als zu Beginn ein kleines Hello World zu schreiben. Bei Flex gibt es zwei Dinge die zu diesem Weg führen. Einerseits gibt es ActionScript welches wir schon von Flash kennen und es gibt das neue MXML welches wie unschwer zu erkennen, eine XML Erweiterung ist. Da ich wenn es um GUIs geht ein Freund von XML bin werde ich den ActionScript Teil mal weglassen.

Hier mal ein erstes MXML Beispiel ohne Worte:

 version="1.0" encoding="utf-8"?>
 xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*">
    text="Hello from CodeBlog.ch!"/>
>

Abspeichern unter HelloWorld.mxml.

Anschliessend öffnen wir ein CMD-Fenster und lassen uns eine SWF Datei erstellen, indem wir mit dem Befehl mxmlc die vorher erstellte Datei übergeben:

Und schon haben wir unsere erste SWF Datei. Die passende HTML Datei schreiben, per Doppelklick starten (geht nicht immer) oder einfach wieder löschen.

Datenaustausch per HTTP

Nach der anspruchsvollen HelloWorld Aufgabe wollen wir Daten von einem Webserver auslesen. Dazu hab ich eine PHP Datei geschrieben die den Wert des Parameters “input” ausgibt (echo $_REQUEST['input']).

Flex stellt uns für zahlreiche Dinge wie HTTP oder Webservice Anfragen Klassen zur Verfügung.

Wir beginnen gleich wieder mit dem Code:

 version="1.0" encoding="utf-8"?>
 xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*">
 
   >
   
>
 
 id="http" url="http://www.codeblog.ch/flex/echo.php" showBusyCursor="true" result="sendHttpRequest(event)"/>
 id="httpRequest" label="CodeBlog HTTP Request" click="http.send({input: 'Hello CodeBlog!'});" />
 
>

Wir haben nun eine Script Sektion (mx:Script) mit einem CDATA Block. Auch hier sieht man wieder die Ähnlichkeit zu XML. Wir definieren lediglich eine Funktion “sendHttpRequest”, die die Anfrage ausführt und das Ergebnis in einer Dialog Box ausgibt.

Mit mx:HTTPService definieren wir die Parameter für unsere HTTP Anfrage. Neben der Adresse geben wir hier lediglich an dass wir gerne einen “Busy-Cursor” hätten. Dann noch ein Button der die Funktion startet und fertig! Damit können wir bereits HTML Daten auslesen.

Kleiner Hinweis am Rande, wer Daten von “fremden Servern” auslesen will, sollte sich bezüglich crossdomain.xml schlau machen.