Mittwoch, 30. September 2009

Für Fortgeschrittene: Der Bubblechart

Wie bereits mal angekündigt, swiche ich durchaus gern zwischen meinem Anfängertutorial und sonstigen Infos. Da ich gerade Recherchiere, wie genau Bubblecharts funktionieren und wie ich bei diesen Kategorieachsen hinzufüge, hielt ich es für praktisch, das doch auch direkt zu posten.
Ich möchte also einen Bubblechart benutzen und diesem drei Werte (Höhe, Breite und Kreisradius) zuweisen.

Zuerst einmal erstelle ich einen Standard-Bubblechart in Marke einfach:
Ich füge einen Bubblechart hinzu, setze die x/y/Breite Werte und gebe ihn aus, d.h. Erstellung einer ArrayCollection mit den drei Werten als normale Zahlen, dann beim BubbleChart z.B. folgendes Coding (um die Codingschnipsel zu lesen müsst ihr ggf. draufklicken, das HTML des Blogs lässt kein Coding im Text zu...):Dies funktioniert, wie auf dem ersten Bild gezeigt, einwandfrei.
So jetzt das ganze bitte mit "sinnvolleren" Werten. Ich hätte gerne in der vertikalen Axe %-Angaben und in der horizontalen Monate. Gut, nichts leichter als das. Die vertikale Axe wird als "Linear Axis" definiert und die horizontale als "Category Axis". Für die Kategorien müssen wir aber noch solche bestimmen. Nehmen wir z.B. die Monate Januar bis April. Hierfür wird eine neue ArrayCollection erstellt, die die Monate der x-Axe enthält, damit wir diese der Axe zuweisen können. Auch müssen wir dann in unserer alten ArrayCollection natürlich die x-Werte an die Monate anpassen (dort dürfen sie durchaus doppelt vorkommen, nur wir brauchen die Extra-Collection, wenn wir Doppelwerte haben, sonst können wir auch einfach die vorhandene angeben - je nach Bedarf also).
Ergebnis: Alles sieht so aus, wie wir es gern hätten (vgl. Screenshot 2).
Aber eines fehlt mir persönlich noch - nämlich eine Möglichkeit den einzelnen Bubbles unterschiedliche Namen zu geben. Auch das ist nicht allzu schwer, denn wir können diese selbstständig formattieren, mit sogenannten "DataTipFunctions".
Ich stelle einfach mal das gesamte Coding her und mache alles neue und hierfür notwendige in Fettdruck:
Sooo und das wars für heute. Das Ergebnis seht ihr dann im letzten Bild.

Dienstag, 29. September 2009

(Tutorial) Flex Builder 3 hab ich - und was mache ich jetzt damit?

Heute ist eine kleine Einführung in den Flex Builder 3 an der Tagesordnung. Alle, die sich diese Entwicklungsumgebung angeschafft haben (ob als Studentenversion oder gekaufte normale Version ist unerheblich) und nicht mit dem SDK arbeiten, dürfen sich jetzt über eine Einführung in die Entwicklungsumgebung freuen. Diejenigen, die mit dem SDK arbeiten muss ich etwas enttäuschen, da dort nur mit MXML und ActionScript entwickelt werden kann und keine nette, grafische Benutzeroberfläche angeboten wird.

Startet nun doch bitte erstmalig euren Flex Builder (falls ihr damit arbeitet, sonst könnt ihr diesen Post mehr oder minder überspringen, da er nur als Einstieg in den Flex Builder gedacht ist).
Oben links in der Ecke drückt ihr bitte auf den kleinen „New“-Button (oder File -> New) und dann auf „MXML-Application“, die Software wird euch sagen, dass ein Wizard euch beim Anlegen eines Projekts helfen wird. Nun folgt ihr einfach den Anweisungen des Wizards. Im ersten Schritt gebt ihr eurem Projekt einen Namen, z.B. „Erste Schritte mit Flex“ und drückt auf „Finish“. Ihr könnt auch den Schritten folgen, aber die dort verwendeten Infos sind für die folgenden Beiträge erst einmal irrelevant. Fertig ist eure Datei.

Ein erster Blick auf die Oberfläche im Flex Builder 3 zeigt die auf dem Bild gezeigte Oberfläche (ohne die farbigen Kästen, die brauche ich nur gleich zur Erklärung). Der Flexbuilder hat zwei "Views", soll heißen zwei verschiedene Ansichten. Auf der einen Seite den auch auf dem Bild abgebildeten "Design-View" und einen Button zum Wechseln auf den "Source View", in dem im Code gearbeitet werden kann. Doch dazu später mehr. Der Design-View dient zum Designen via Drag&Drop und für Einstellungen kleinerer Art, die nicht im Source-View gemacht werden müssen.
In der Mitte habt ihr also eure Ansicht, wie das ganze später groß aussehen soll. Innerhalb des linken, gelben Kastens befindet sich eine Dateiverwaltung, in der ihr eure "MXML-Projekte", d.h. eure Flexprojekte sehen könnt. Im darunterliegenden grünen Kasten werden die vorgefertigten Komponenten angeboten, die ihr verwenden könnt. Diese können einfach per Drag&Drop auf eure Designoberfläche gezogen und somit eingebunden werden. Dann gibt es noch den rechten, blauen Kasten, in dem ihr zu den eingefügen Komponenten Attribute definieren und belegen könnt. Außerdem wird hier eine leichtere Möglichkeit geboten, die Komponenten auf dem Fenster zu arrangieren ohne das ganze mühsam im Code eingeben zu müssen. Zum oberen, roten Kasten komme ich später - hierzu sei jetzt nur soviel gesagt, als dass die "Stages" eine Möglichkeit bieten, Ereignisse auszuführen und z.B. bei Klicks andere Fenster anzuzeigen.
Hiermit kann man also schonmal ein bisschen herumspielen und etwas auseinander nehmen und zusammensetzen.

Als Beispiel nehmen wir uns doch einfach mal eine BarChart-Komponente und platzieren die auf unserem Designview. Diesem Diagramm können wir dann bei seinen Attributen z.B. einen Namen geben (die ID) und ihn z.B. so groß machen wie das gesamte Fenster, indem wir unter "Layout" Breite und Höhe mit 100% vorbesetzen. Was hierbei interessant ist: Man kann sowohl Pixelbeträge (z.B. 100px) eingeben als auch Prozentangaben, sodass das Diagramm immer prozentual an die Fenstergröße angepasst werden kann.
Mmmh… vermutlich wundert ihr euch jetzt, dass schon ein BarChart auf euren Designview vorgezeichnet wurde und dieser schon Angaben enthält, richtig? Das ist einfach nur eine einfache Vorschaufunktion ohne Inhalt. Die richtigen Daten, die ihr selbst später hinzufügen werdet, werden nicht auf dem Vorschaubildschirm angezeigt, sondern erst, wenn eure Datei gespeichert wurde und ihr eine SWF-Datei erzeugt habt.

Am besten spielt ihr jetzt einfach ein wenig mit dem Designview herum und schaut euch mal die verschiedensten Diagrammtypen an, die der Flexbuilder so anzubieten hat. Auch die Attribute sind sicherlich interessant. Spielt einfach mal herum. Im nächsten Beitrag werden dann unserem BarChart Datensätze hinzugefügt und die Datei wird benutzbar gemacht.

Montag, 31. August 2009

RIA, Flash, Flex - Was ist das alles überhaupt?

Begriffe, mit denen im Bereich Flex sehr viel hantiert wird. Bevor ich also mit der Programmierung anfangen möchte, erstmal ein kleiner Einstig (in Marke "Simple und einfach" in den Bereich RIA, Flash und Flex und was eigentlich was ist.

RIA steht für Rich Internet Applications. Hierbei handelt es sich um ein "neues" Applikationsmodell mit der Trennung des Backends (d.h. der Logik, die hinter dem ganzen steht. Stellen wir uns z.B. vor, wir wollten unsere Flex-Applikation in eine bestehende Software oder eine bestehende Webseite integrieren. Auf der Website oder in der Software sind diverse Informationen gespeichert und wir möchten diese Informationen gerne mit Flex anzeigen lassen. Dann wird die Verarbeitung der Informationen nicht in der Flexapplikation stattfinden, sondern die Verarbeitung findet erst statt und dann werden die Informationen an die Applikation weitergereicht und müssen nur noch angezeigt werden. Alternativ ist es auch in Flex möglich mit Klassen zu arbeiten und eine Hauptseite zum Anzeigen zu verwenden und alle anderen Aspekte in Klassen auszulagern. Aber ich komme vom Thema ab, also weiter im Text...) und des Frontends (in dem nur die Darstellung unserer vorher verarbeiteten Inhalte erfolgt. Außerdem ermöglichen RIA asynchrones Datenladen, d.h. nur die Daten, die aktuell benötigt werden, werden auch angezeigt und sie werden immer nachgeladen, wenn neue Daten benötigt werden. In vielen Softwarebereichen (man denke z.B. auch an Spiele wie WoW, GuildWars, Gothic etc, bei denen ab und an so nette Ladebalken erscheinen) ist dieses bereits normal, in Internetapplikationen kam dies jedoch erst mit den RIA. Außerdem sind RIA plattformunabhängig und lassen sich überall darstellen, wenn überhaupt sind nur kleinere Erweiterungen zum Anzeigen der RIA nötig, wie z.B. im Falle von Flex ein Flash Player 9 bzw. Adobe Air für Desktop Anwendungen). Und warum heißen die nun "Rich" Internet Applications? Stellt euch mal eine einfache Webseite vor oder betrachtet dieses Blog und nun nehmt im Vergleich irgendeine Flash- oder Flexanwendung oder eine Javaanwendung. Dort habt ihr z.B. Vorteile wie "Drag&Drop" Funktionalitäten oder faszinierende Bewegungen etc. Rich steht also für reichhaltig und bedeutet, dass ein Mehrwert geboten wird.
Sooo und warum erzähle ich euch grob, was RIA sind? Ganz einfach: Flash und Flex sind solche RIA und weisen die o.g. Vorteile auf.
Weitere Informationen zu RIA erhaltet ihr z.B. bei Wikipedia oder bei Adobe selbst oder fragt Google.

Wo ist nun der Unterschied zwischen Flex und Flash?
Defakto wird beides nachher im Flash-Player angezeigt, also kann der Unterschied ja nicht ganz so groß sein, richtig?
Adobe Flash gilt als ideal für Animationen und Filme, da z.B. mithilfe einer Timeline gearbeitet werden kann. Für Interaktionen kann hierbei mit ActionScript programmiert werden. Also z.B. Interaktionen, die über die Timeline hinausgehen wie z.B. das Erscheinen oder Verschwinden von Objekten.
Adobe Flex ist eher für weitergehende Entwicklungsprojekte geeignet, da es auch objektorientierte Programmierung anbietet. Außerdem ist eine Datenübertragung von extern (z.B. von PHP oder für SAP-Entwickler interessant auch von ABAP/WebDynpro ABAP) möglich. Zur Übertragung via PHP werde ich in späteren Blogeinträgen kommen, nachdem die Grundlagen von Flex und Flex Builder klar sind :). Apropos Flex-Builder - auch dies ist ein Argument für die erweiterte Entwicklung mit Flex anstatt mit Flash. Der Flex Builder bietet nämlich bereits vorgefertigte Komponenten zur Oberflächengestaltung wie z.B. Textfelder, Buttons, Tabellen oder Diagrammtypen an.

Wo ich gerade bei Flex bin, könnte ich euch eigentlich auch noch einen kurzen historischen Überblick über die Entwicklung von Adobe Flex mitgeben (genauer nachzulesen bei Adobe oder Wikipedia):
Die erste Version von Flex hat Macromedia 2004 auf den Markt gebracht. Diese baute auf dem Dramweaver 2004 auf und es handelte sich damals noch um eine Serverapplikation mit sehr hohen Lizenzgebüren. Verständlicherweise hatte dies zur Folge, dass Flex noch nicht so erfolgreich war und auch nur im Unternehmensumfeld eingesetzt wurde. Zwei Jahre später ist dann das heute bekannte Flex entstanden. 2006 war Macromedia bereits von Adobe aufgekauft und Flex wurde komplett umgearbeitet. So kam 2006 dann Flex 2.0 auf den Markt in Zusammenhang mit dem Adobe Flex Builder 2.0, der auf Eclipse aufbaut. Flex wurde zu einer Clientapplikation, bei der kein Server mehr benötigt wurde, weswegen es nun auch privat verwendbar wurde und die Gebüren sanken. 2008 ist dann Flex 3.0 erschienen, das Flex, mit dem wir heute arbeiten. Parallel wurde ein Flex SDK 3 als OpenSource-Version unter der Mozilla Public Licence herausgegeben (ich habe im letzten Blogeintrag erwähnt, wo man diese Version herbekommt!) sowie der (kostenpflichtige) Adobe Flex Builder 3.0 mit einigen Erweiterungen zur Version 2.0, wie z.B. nach mehreren Aspekten sortierbare Tabellen. Für irgendwann Ende 2009 bzw. Anfang 2010 ist dann die nächste Version (Flex 4.0) geplant. Scheint also ganz gut zu laufen, wie man auch an den vermehrt auftretenden Flex-Applikationen im Internet und für den Desktop (mit Adobe Air, wie z.B. diverse Twitterclients wie Twhirl oder TweetDeck) sehen kann, würd ich mal sagen…

So, ich denke, das war vorerst genug Theorie. Im nächsten Blogeintrag geht es dann weiter mit der Bedienung vom Flex-Builder und dann auch mit dem ersten kleinen Projekt mit Flex. Ihr dürft euch schonmal freuen…

Sonntag, 2. August 2009

Idee des Blogs und Basis-Informationen

Hallo,

die Idee dieses Blogs stammt aus der letzten Praxisphase meines Dualen Studiums bei der SAP AG. In diesem Zusammenhang bin ich das erste Mal in Kontakt mit Adobe Flex gestoßen, weil ich ein Dashboard mithilfe von Flex entwickeln musste. Hierbei ist mir aufgefallen, dass es außer der Adobe-Seite selbst sehr wenige (v.a. deutsche) Seiten zum Thema "Einstieg in Flex" gibt. Dort ist mir auch aufgefallen, wie viel Interesse an diesem Thema besteht, da ich während und nach meinem Flex-Projekt diverse Anfragen zum Thema Flex bekam.
Ich denke, dass viele sowohl im privaten als auch geschäftlichen Bereich demnächst immer mehr mit Flex zu tun haben werden, denn Flex eröffnet sehr viele verschiedene Möglichkeiten.
Schon jetzt kann man viele Seiten bewundern, in denen Flex verwendet wird. Man denke nur an Onlineshops, in denen sich Bilder im Kreis bewegen lassen um auf verschiedene andere Seiten zu verweisen oder an neueste Dashboards im Business-Umfeld, auf denen sich Daten verarbeiten und besser darstellen lassen. Ich selbst habe mich bisher hauptsächlich im Unternehmen mit Flex beschäftigt, habe in dem Zusammenhang aber ein sehr großes Interesse an dessen Entwicklungsmöglichkeiten entwickelt und plane in nächster Zeit mehr im privaten Umfeld damit zu arbeiten. Auch für die Website-Entwicklung ermöglicht Flex diverse, sehr interessante Möglichkeiten, z.B. durch Schnittstellen für PHP oder Anbindungen an Webservices (so ist z.B. auch eine Anbindung an die Google-Maps-API oder ICQ möglich).

Wer die Dinge, die in nächster Zeit hier präsentiert werden, selbst ausprobieren möchte, hat die Möglichkeit, sich bei Adobe den Adobe Flex-Builder z.B. zuerst einmal als 60-Tage-Trial-Version herunterzuladen und auszuprobieren und, wem Flex gefällt, später eine Lizenz zu kaufen. Studenten empfehle ich die kostenlose Education-Version des Flex Builder 3.
Meine Beispiele werden so erklärt sein wie man sie mit dem Flex-Builder erstellt, alternativ stellt Adobe auch ein kostenloses Flex-Software Development Kit zur Verfügung, womit die Entwicklung allerdings nicht so einfach ist, wie mit dem Flex Builder 3.
So, jetzt aber genug Werbung für Adobe für heute!

Ich freue mich auf neugierige und interessierte Leser, eure Kommentare zu meinen Erklärungen und Beispielen und natürlich über Anregungen, worüber ich sonst noch schreiben könnte. Auch Fragen zu Adobe Flex nehme ich natürlich gerne entgegen und versuche sie, soweit es mir möglich ist, zu beantworten.