Adobe Flex Skins, Themes und Components

Adobe Flex Skins, Themes und Components
Skins, Themes und einige Components für Flex sind auf fleksray.org zu finden.

Montag, 29. Oktober 2007

CardLayout Component


Mit dem Cardlayout können UIComponents übereinandergelegt werden. Wie weit sich die Komponenten dabei überlappen, kann über die Parameter x_offset und y_offset gesteuert werden.

Wird eine der Komponenten im Stack angeklickt, erscheint diese im Vordergrund. Gleichzeitig wird ein Event vom Typ CardEvent ausgelöst. Dieses Event enthält im Attribut "selectedCard" eine Referenz auf das angeklickte Objekt. Im EventHandler können also sämtliche Informationen dieses Objektes ausgelesen werden.

Eine Beschreibung der Attribute und EventHandler, sowie eine Beispielanwendungen findet sich hier.
Im Beispiel werden neben einigen Bildern auch ein Button im CardLayout verwendet. Grundsätzlich kann aber jedes Objekt verwendet werden, das die Klasse UIComponent erweitert.

Example Code:

 The CardLayout


<ks:CardLayout id="cl"
x="10" y="10"
offset_x="15"
offset_y="15"
cardOffAlpha="0.7"
dataProvider="{dp}"
cardClicked="clickCardHandler(event)" />


Mittwoch, 10. Oktober 2007

Flex Data Service Tomcat

Um erste erfolgreiche Gehversuche mit dem Flex Data Service zu unternehmen, sollte man sich den FDS-Tomcat von der Adobe Website herunterladen. Dabei handelt es sich um einen Tomcat in der Version 5.5.20, auf dem der Flex Data Service mit allen Abhängigkeiten vorinstalliert ist.

Zu diesen Abhängigkeiten gehört unter anderem JOTM, eine JTA-Implementation. Nimmt man den Flex Data Service auf eigene Faust auf dem Tomcat oder einen anderen Webapplication-Server in Betrieb, kann man die Installation von JOTM leicht vergessen. Das resultiert dann in einem: "Unable to access UserTransaction in DataService" error.

Außerdem sind noch Spring 2.0, Hibernate 3.2 und HSQLDB 1.8 auf dem vorkonfigurierten Tomcat installiert. Diese Pakete sind nicht nötig für den Betrieb des Flex Data Service, einige der mit mitgelieferten Anwendungsbeispiele basieren jedoch auf diesen Technologien.

Der FDS-Tomcat wird, wie erwartet, über das startup.bat bzw. startup.sh Skript gestartet. Über http://localhost:8600 kann nun auf die mitgelieferten Beispielanwendungen zugegriffen werden.
Vorinstalliert sind zehn kleinere Anwendungen, die selten aus mehr als drei Quelldateien bestehen und einen wirklich guten Überblick über die Facetten des Flex Data Service liefern. Die Minianwendungen geben Einblick in die Verwendung von Web Services, Java RPC, Data Push und in andere Implementierungsansätze.
Zwei komplexere Anwendungen zeigen den Einsatz von Hibernate und Spring zusammen mit dem Flex Data Service.

Zuletzt gibt es noch ein Tutorial für Java Entwickler, die erste eigene Schritte mit dem Flex Data Service von Adobe unternehmen wollen.

„Zusammengebaut“ wurde der FDS-Tomcat von Christophe Coenraets, der auch an der Entwicklung JRun beteiligt war und nun bei Adobe arbeitet.

Donnerstag, 13. September 2007

Neue Adobe Flex Skin



Gestern habe ich ein neues Theme zum Skinnen von Flex Applikations auf fleksray.org hochgeladen. Das Theme heißt Treasure Map.

Treasure Map enthält Skins für das Panel, das Accordion, Buttons, den TabNavigator und für diverse Formelemente (TextInput, -area, CheckBox, RadioButton).

Für andere Elemente (Tree, Slider, DataGrid) ist keine Skin vorhanden.

Das Theme Treasure Map ist eher als Spielerei zu verstehen. Es sieht nett aus, ich glaube aber nicht, dass es mal in einer "RealWorld" Applikation eingesetzt wird.

show me the Treasure Map Theme

Montag, 10. September 2007

Background kacheln in Flex

In Adobe Flex ist das Kacheln des Hintergrundes mit einem Image nicht so einfach, wie man es aus der HTML-Welt gewohnt ist. Wird ein Hintergrundbild für die Applikation über das Attribute backgroundImage angegeben, wird dieses in Originalgröße und mittig angezeigt. Setzt man die Eigenschaften width und height auf 100% wird das Image entsprechend vergrößert bzw. verzerrt dargestellt.
Eine Standardfunktion zum Kacheln des Hintergrundes für Flex Applikationen oder einzelner Container gibt es in der aktuellen Version des Flex SDK nicht.

Eine einfache Möglichkeit, um dennoch ein Image hintergrundfüllend zu wiederholen, ist das Programmieren einer eigenen BorderSkin. Diese Skin erweitert die Klasse mx.skins.RectangularBorder oder mx.skins.Border und überschreibt deren Methode updateDisplayList.
In dieser Methode wird am graphics Objekt die Methode beginBitmap aufgerufen.
Als erster Parameter wird das Image als BitmapData erwartet.
Der zweite Parameter ist vom Typ flash.geom.Matrix. Mit der Matrix kann das Hintergrundbild nachträglich transformiert (gedreht, skaliert oder verzerrt) werden.
Im dritten Parameter wird angegeben, ob das Bitmap wiederholt werden soll oder nicht. Für unsere Zwecke muss dieser Parameter also auf true stehen.

Hier ein Beispiel von Maikel Sibbald aus Holland.

Die programmatische BorderSkin

package{
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Graphics;
import flash.display.Loader;
import flash.events.Event;
import flash.events.IOErrorEvent;
import flash.geom.Matrix;
import flash.net.URLRequest;

import mx.controls.Image;
import mx.core.BitmapAsset;
import mx.graphics.RectangularDropShadow;
import mx.skins.RectangularBorder;

public class RepeatedBackground extends RectangularBorder{
private var tile:BitmapData;

[Embed(source="/assets/achtergrond_tegel.jpg")]
public var imgCls:Class;


public function RepeatedBackground():void{
var background:BitmapAsset
= BitmapAsset(new imgCls());
this.tile = background.bitmapData;
}

override protected function updateDisplayList(
unscaledWidth:Number,
unscaledHeight:Number):void {
super.updateDisplayList(
unscaledWidth,
unscaledHeight);

var transform: Matrix = new Matrix();

graphics.clear();

graphics.beginBitmapFill(this.tile,
transform,
true);

graphics.drawRect(0, 0,
unscaledWidth,
unscaledHeight);
}
}
}

Einbinden der BorderSkin in die Applikation. Die entwickelte Skin kann für jeden Container eingesetzt werden, der das Attribut borderSkin besitzt.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
borderSkin="RepeatedBackground"
backgroundGradientAlphas="[]"
backgroundImage=""
backgroundAlpha="0"
backgroundColor="#000000"
viewSourceURL="http://labs.flexcoders.nl/samples/RepeatedBackground/srcview/index.html">

</mx:Application>

Montag, 3. September 2007

Transparenter DataGrid Header


blendeMode="multiply"

Setzt man das Attribut backgroundAlpha für die Flex Komponenten DataGrid oder DataChooser auf 0 hat das keinen Einfluss auf die Transparenz des Headers der jeweiligen Komponente. Der Header des DataGrid bzw. des DataChooser übernimmt den Wert für die Hintergrund Transparenz nicht.

Adobe hat offensichtlich kein Attribut vorgesehen, um diese beiden Komponenten vollständig transparent erscheinen zu lassen.
Man kann sich jedoch mit einem kleinem Trick behelfen. Wird das Style Attribut blendMode auf multiply gesetzt, erscheinen die Komponenten vollständig durchsichtig. Der Wert für backgroundAlpha bleibt auf 1 stehen.

Sonntag, 2. September 2007

Der Google Bann

Und plötzlich bist Du nicht mehr dabei. Vergessen, aufs Abstellgleis geschoben, ausgeschlossen aus der Gesellschaft.
Für meine Homepage fleksray.org war der 1. September 2007 der schwarze Samstag. An diesem Tag ist die Seite aus dem Google Index geflogen. Einfach rausgeschmissen.

Selbst wenn ich den Domainnamen eingebe, landet die Website nicht unter den ersten zehn Treffern. Alle Seiten, die Fleksray.org irgendwann mal erwähnt haben (und das sind einige) landen vor fleksray.org in der Trefferliste.

Warum ausgerechnet das? Arbeitslosigkeit, Hartz IV, von der Freundin verlassen werden... alles das hätte ich ertragen können. Aber aus dem Index fliegen? Jetzt bin ich ein Zombie, nicht tot, aber irgendwie auch nicht mehr lebendig. Ich existiere einfach nicht mehr, so als hätte ich keinen Personalausweis, keine Steuer- und keine Sozialversicherungsnummer mehr.

Warum bin ich beim großen Google Gott in Ungnade gefallen? Habe ich nicht genug Opfer gebracht. Hätte ich mehr Ziegen schächten sollen, um dem großen Bruder zu huldigen?

An der Seite selbst kann es kaum liegen. fleksray.org verwendet nur statische HTML Seiten, keine serverseitigen Schikanen, um Suchmaschinen freundliche URL's zu generieren. Keine gekauften Backlinks. Ich verwende nicht eine Zeile JavaScript (außer auf den Seiten, die die *.swf Files ausliefern, Flashplayer Check usw.). Alles plain HTML. Keine weiße Schrift auf weißem Grund. Warum also???

Doch ich werde kämpfen! Die Domains googlegeaechtete.de, googledesperados.es und googlevictims.com sind schon so gut wie mein.

Mal im Ernst, in solchen Momenten denkt man schon mal darüber nach, wozu die Allmacht Google inzwischen fähig ist. Bei fleksray.org handelt es sich um eine rein private Website. Ich habe also keine finanziellen Verluste, auch kam nur ca. ein Viertel aller Besucher über google (allerdings ist ...ähhm... war davon ein Großteil aus Deutschland). Ein wenig schmerzt es schon.

Als Betreiber eines Internetshops wäre meine Existenz möglicherweise auf Gedeih und Verderb von der allmächtigen Suchmaschine abhängig. Ein falsches HTML-Tag zur falschen Zeit... und aus ist der Ofen.


Übrigens der Levenshtein Abstand zwischen google und god beträgt 5, aber den wird google auch noch verkleinern....

You searched for "god" did you mean "google"