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

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>

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.

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"

Die PopUp ToolBar

Ein Klick auf ein Item in der PopUp ToolBar öffnet ein neues (PopUp) Panel, das beliebige, selbst entwickelte Komponenten enthalten kann. Das geöffnete Panel kann verschoben, minimiert, in der Größe geändert und wieder geschlossen werden.

In der Anwendung wird die PopUp ToolBar mit dem Tag <PopUpToolBar /> deklariert. Die Komponente basiert auf mx.containers.Box und erbt demzufolge alle Properties dieser Klasse. Über das Attribut direction kann die Richtung bestimmt werden, in der die Child-Komponenten der Toolbar angeordnet werden sollen. Mögliche Werte sind horizontal und vertical. Zusätzlich zu den geerbten Eigenschaften der Parent Klasse hat die Toolbar die Properties target und dataProvider.

In der Eigenschaft target (Typ: flash.display.DisplayObjectContainer) wird die Parent Komponente für das PopUp Panel bestimmt. Per default wird hier die Parent Komponente der PopUp ToolBar selbst verwendet. Die Eigenschaft dataProvider erwartet eine ArrayCollection, deren Elemente vom Typ ToolBarItem sein müssen.

Mit der ToolBarItem (<ToolBarItem></ToolBarItem>) Komponente werden Paare von Objekten vom Typ mx.core.UIComponent deklariert. Die erste UIComponent wird für das Icon in der ToolBar verwendet. Hierfür bieten sich Klassen wie Button oder Image an.
Der zweite Eintrag gibt die Komponente an, die im PopUp Panel angezeigt werden soll. Hier bieten sich die mx.containers.* Klassen an. Grundsätzlich kann jedoch für beide Elemente jede Klasse verwendet werden, die auf mx.core.UIComponent basiert.

ToolBarItem erbt alle Eigenschaften und Methoden von mx.collections.ArrayCollection und besitzt zusätzlich die Attribute: title:String, x:Number, y:Number, width:Number, height:Number, event:String. Die hier angegebenen Werte werden auf das PopUp Panel übertragen.
Im Attribut event wird angegeben, auf welches MouseEvent das Item in der Toolbar reagieren soll.

Eine ausführliche Beschreibung der Attribute, Code Beispiele und eine Beispiel Anwendung finden sich auf fleksray.org