Erst neulich hatte ich im Beitrag Tiny Designer exportiert Degrafa-MXML aufgezeigt, wie mit dem Online-Grafikprogramm Tiny Designer direkt Degrafa-Code erzeugt werden kann.

Tiny Designer geht nun einen Schritt weiter. Es lassen sich neuerdings zahlreiche Flex-Komponenten über vorgefertigte Templates skinnen. Dazu erstellt man über „File > New Degrafa Skin” ein neues Projekt. Anschließend stehen folgende Komponenten zur Auswahl:

(mehr …)

TinyDesigner ist ein Online-Grafikprogramm, das von einer kleinen Gruppe von Freelancern erstellt und weiterentwickelt wird.

Es kann nicht mit den „großen” RIAs wie Sumo Paint oder Aviary mithalten, bietet aber neuerdings eine interessante Funktion: den Export von Grafiken in MXML.

Der exportierte MXML-Quellcode ist für Degrafa (ein deklaratives Grafik-Framework) ausgelegt. Man kann in Tiny Designer etwas zeichnen, den Quellcode exportieren und in ein Flex-Projekt einfügen. Benötigt wird im Projekt lediglich die eingebunde Degrafa-SWC-Datei.

As of now, Adobe Flex builder does not render degrafa graphics at design time. So Tiny Designer is enhanced to fill this gap by providing an export function to MXML so that the degrafa designs can be visually created using Tiny Designer and can be exported to MXML for later use in Adobe Flex.

(mehr …)

Schon seit einiger Zeit wird es angeteasert, jetzt steht es erstmals zum Download bereit: Axiis, ein Open Source Framework für Visualisierungen.

Es setzt auf dem Flex-Framework und Degrafa auf. Laut Beschreibung wartet es mit vorgefertigten Komponenten auf, kann aber auch als Basis für eigene Visualisierungskomponenten dienen.

Axiis gives developers the ability to expressively define their data visualizations through concise and intuitive markup. Axiis has been designed with a specific focus on elegant code, where your code can be just as beautiful as your visual output.

(mehr …)

Nachdem bereits das Skinning von Charts und Buttons mit Degrafa gezeigt wurden, folgt nun ein Beispiel, wie der HSlider von Flex optisch angepasst werden kann.

Dieser sieht im Original so aus:

Beim Skinning werden drei Elemente angepasst:

• der Anfasser, der im Bild als Kreis zu sehen ist (in Flex ist das ThumbSkin verantwortlich)
• der Balken, auf dem der Anfasser bewegt wird (in Flex: trackSkin)
• der Bereich links vom Anfasser, also das blaue Rechteck (in Flex: trackHightlightSkin)

(mehr …)

Hier ein kurzes Beispiel, wie man Buttons mit Degrafa gestalten kann. Das Ergebnis ist ein Button im iPhone-Stil mit Glaseffekt. Das Beispiel wurde in Flex erstellt und zeigt, wie man ein Skin für eine Schaltfläche anlegt.

(mehr …)

Letztes Jahr sah ich ein hübsches Beispiel, wie man Diagramme in Flex mithilfe von Degrafa ansprechend gestalten kann. Das Beispiel war ein Diagramm im Stil der Nike+ Website. Man kann es sich hier anschauen: Nike+ Beispiel.

Endlich habe ich die Zeit gefunden, mich näher mit dem Beispiel beschäftigen. Damit man besser versteht, worin der eigentliche Kern des Diagramm-Skinnings mit Degrafa liegt, habe ich alles „Unwichtige“ aus dem Original geworfen.

Den Source-Code gibt es am Ende des Beitrags zum Herunterladen.

(mehr …)