LzSOFT Flex Blog

Die Realisierung eines blinkenden Textes ist zwar nicht weiter aufwendig - aber das genutzte Beispiel soll gleich mal die Nutzung von Paketen und Klassen verdeutlichen.

Stellen wir uns vor, wir wollen den folgenden Text zum Blinken bringen
…
<mx:Label text=”Hier mehr Infos!” color=”#ff0000″ fontWeight=”bold” />
…

Hierfür erstellen wir eine eigene Klasse und dies in einem Paket. Die Klasse soll einfach “Blink” heißen.
Für die Anlage eines Paketes (in dem auch mehrere Klassen enthalten sein können) wird z.B. ein Verzeichnis angelegt, welches den Namen Pakete trägt.
Die nun zu erstellende Paket-Datei benennen wir in diesem Fall einfach Blink.as - der Inhalt dieser Datei sieht dann wie folgt aus:

package Pakete{

 import mx.controls.Label; 
 import flash.utils.Timer;
 import flash.events.TimerEvent;

 public class Blink extends Label
 {
  private var blinkTimer:Timer;
  
  public function Blink():void
  {   
   this.blinkTimer = new Timer( 500 , 0 );
            this.blinkTimer.addEventListener( “timer” , toggleText );
            this.blinkTimer.start();
  }
  
  public function toggleText( event:TimerEvent ):void
  {
   if( this.visible ){   
    this.visible = false;    
   }else{   
    this.visible = true;    
   }  
  }
  
  public function get interval():uint
  {
   return this.blinkTimer.delay;
  }
  public function set interval( value:uint ):void
  {
   this.blinkTimer.delay = value;  
  }  
 }
}

Das Paket muß so benannt werden, wie auch das übergeordnete Verzeichnis benannt ist. Bei der eigentlichen Klasse wird die Klasse Label als Grundlage genommen. D.h. alle Klasseneigenschaften der Klasse Label (die durch Flash selbst zur Verfügung gestellt wird) wird bei behalten.
Durch get und set auf “interval” wird ein zusätzlicher Parameter an die Klasse übergeben (hier die Dauer des Blinkintervals). Dieser Parameter wäre auf Grund der get-Funktion auch durch die rufende Funktion auslesbar.

Die eigentliche Einbindung erfolgt dann in folgender Form:

…
<pakete:Blink interval=”500″ text=”Hier mehr Infos!” color=”#ff0000″ fontWeight=”bold” />
…

Damit “eigene” gefunden wird, ist in der allersten Struktureinheit des Scriptes noch folgender Parameter erforderlich:

…. xmlns:pakete=”Pakete.*” …

Die Änderung von Eigenschaften hinsichtlich des Styles einzelner Elemente zur Laufzeit kann sehr einfach realisiert werden.

  agb_window.setStyle(”backgroundColor”,”#101010″);

Hier ist backgroundColor eine CSS-Eigenschaft des agb_window. In dieser Form kann während der Laufzeit eigentlich jede erdenklich Style-Eigenschaft geändert werden. Mögliche Style-Eigenschaft jedes Elementes sind in der Hilfe von Adobe zu finden.

Farben in einem TileList können entsprechend dem nachfolgenden Beispiel geändert werden.

alternatingItemColors ermöglicht die Realisierung eines Schachbrettmusters. Wird hier eine weitere Farbe hinzugefügt, erfolgt ebenfalls abwechselnd die Darstellung.
rollOverColor modifiziert die Backgrundfarbe des jeweiligen Feldes, auf dem sich der Maus-Zeiger befindet.
selectionColor realisiert die Modifikation der Hintergrundfarbe nach z.B. einem Click auf das jeweilige Element.

<mx:TileList … alternatingItemColors=”[#FFFFFF,#F0F0F0]” rollOverColor=”#E0E0E0″ selectionColor=”#C0C0C0″ />

Insoweit z.B. durch ein Button eine externe URL aufgerufen werden soll, kann die Ziel-URL nicht direkt angegeben werden. Vielmehr ist ein URLRequest entsprechend dem nachfolgenden Beispiel zu bilden:

var urlRequest:URLRequest = new URLRequest(serverURL1+
“?job=”+ssData.ACCESSKEY+”&name=”+ssData.ACCESSUSER);

navigateToURL(urlRequest, “_self”);

Für “_self” können selbstverständlich alle HTML-typische Angaben des targets genutzt werden (z.B. _new, _blank, name etc.)

Bei der Konstruktion von Fenstern und Boxen versucht Flex selbstständig eine otpimale Anpassung der enthaltenen Elemente. Das ist auch in 98 Prozent der Fälle OK so. Im Falle, dass sich Elemente am Rand z.B. einer box befinden, kann es schnell passieren, dass diese Box durch Flex (bzw. durch Flash) scrollbar gemacht wird. Dies ist dann oft für das optische Bild nicht so schön.
Durch das Einfügen der beiden nachfoglend genannten Eigenschaften ist das Scrolling innerhalb einer Box oder in einem entsprechenden Element verhinderbar:

<mx:Box … horizontalScrollPolicy=”off” verticalScrollPolicy=”off” … />