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>