Aufgabenstellung

Es wird eine Datenstruktur benötigt, die mehrere FilterFunctions unterstützt und mit der mx:ArrayCollection kompatibel ist.

Problem

mx:ArrayCollection besitzt nur die Eigenschaft für eine einzige Filter-Funktion. Möchte man mehrere Filter setzen, muss man komplexe Funktionen mit Filter-Logik implementieren.

Ansatz

Durch die Erweiterung der mx:ArrayCollection wird eine Methode filterFunctions implementiert, welche mehrere Filter entgegennehmen kann. Die erweiterte BjoernsArrayCollection kann in ArrayCollection gecastet oder ggfs. (z.B. durch eine Schleife) befüllt werden.

Lösung

Folgende Klasse erweritert die normale ArrayCollection um mehrere Filter-Funktionen:

package components
{
  import mx.collections.ArrayCollection;
 
  public class BjoernsArrayCollection extends ArrayCollection
  {
      private var _filterFunctions:Array;
 
      public function BjoernsArrayCollection( source:Array = null )
      {
         super(source);
      }
	
       public function set filterFunctions( filtersArray:Array ):void
       {
         _filterFunctions = filtersArray;
         this.filterFunction = complexFilter;
        }
		
       public function get filterFunctions():Array
       {
         return _filterFunctions;
       }
 
       protected function complexFilter( item:Object ):Boolean
       {
         var filterFlag:Boolean = true;
         var filter:Function;

         for each(filter in filterFunctions)
         {
            filterFlag = filter( item );
            if( !filterFlag ) break;
         }
         return filterFlag;
      }
    }
}

Der Filterfunktionen werden so deklariert:

// Result-Methode von Service liefert eine mx:ArrayCollection, die 
// anhand mehrerer Kriterien gefiltert wird.
public function getResetableOrganizationsHandler(event:ResultEvent):void
{
   // Instanzieren des neuen Objektes
   resetableorgas = new BjoernsArrayCollection();

   // Deklaration der Filter 
   resetableorgas.filterFunctions = 
   [
       filterByProductGroup,
       filterByCompcode,
       filterBySalesdiv,
       filterByMarket
   ];	
		
    // Umsortierung in BjoernsArrayCollection
    resetableorgas.removeAll();
			
    for each(var item:ResetableOrganizationsVO in event.result)
    {
       resetableorgas.addItem(item);				
    }
    
     resetableorgas.refresh();	
}

Der Aufbau der Filter-Funktion:

...
// Rückgabe ist true wenn der Vergleich des Eingegebenen (txtCompcode.text) 
// mit einem Element der ArrayCollection (item.compcode) passt
private function filterByCompcode( item:Object ):Boolean
{
   if( String(item.compcode).indexOf(txtCompcode.text)>-1 )return true;
   return false;
}
...

Ggfs. (z.B. in einem mx:TextInput) die Refresh-Methode aufrufen:

     <mx:TextInput change="{resetableorgas.refresh()}" id="txtCompcode" width="100%"/>

Aufgabenstellung

Gelegentlich ist es nötig über alle Komponenten eines mx:Canvas-Elements, einem Container oder einer UIComponent zu iterieren.

Beispiele:
* Deaktivieren von allen Controls eines bestimmten Typs (alle Textfelder ausgrauen)
* Neuschriftung von allen Labels
* Deaktivieren aller Reiter

Ansatz

Durch den Typecast in einen DisplayObjectContainer lässt sich über jedes UI-Element iterieren. Eine Startmethode übergibt das Canvas, bzw. das UI-Urelement. Die Rekursionsmethode castet in den kompatiblen Supertyp DisplayObjectContainer und verfügt über Möglichkeiten der Iteration über seine Eigenschaften.

Lösung

// Startmethode übergibt Urelement der Rekursion
public function startSearch():void
{
searchRecursion(this);
}

// Rekursionsmethode ruft sich selbst auf wenn Child-Elemente v.h.
public function searchRecursion(current:DisplayObjectContainer):void
{
for ( var i:Number=0; i< current.numChildren; i++) { var child:DisplayObject = current.getChildAt(i); trace(getQualifiedClassName(child)); var childContainer:DisplayObjectContainer = child as DisplayObjectContainer; if(childContainer) { searchRecursion(childContainer); } } } [/javascript]

Aufgabenstellung

Es wird ein Grundgerüst für eine Flex-Anwendung erstellt, auf dessen Basis Animationen und Charaktere, die aus Flash CS4 exportiert worden, gesteuert werden können.

Intention

Da Adobe Flex als Entwicklungsumgebung für Programmierungen wesentlich mehr Features bietet als Flash (Context-Hilfe, Syntax-Highlighting, Design-Time-Prüfungen), wird versucht die Vorteile von Beiden Umgebungen zu nutzen und ein Flashspiel mit Flex, dessen Focus auf der Entwicklung mit Eclipse liegt, zu implementieren.

Ziel

Ziel ist das Auffinden von Bests Practices bei der Spieleentwicklung mit Flash/Flex.

Vorgehensweise 1

Erstellen von Animationen

Es werden 2 Loop-fähige Animationen erstellt, die nachher als Symbol konvertiert werden
Hier:
– Moving Landscape
– Character

Export aus Flash / Import in Flex

• Flash schließen
• Adobe Account anlegen
• Flex Component Kit bei Adobe runterladen
• Flex Component Kit mit Adobe Extension Installer installieren
• Nur bei Problem mit Deutschen Versionen: Das in C:\User … … AppData … Adobe Flash CS4 … !!!DE!!! … Configuration-Verzeichnis in das auf der gleichen Ebene befindliche !!!EN!!! Verzeichnis kopieren
• Flash neu starten
• Die auf der Stage befindlichen Ebenen markieren
• Menülieste: Modify -> Convert to Symbol
• In Library (STRG+L) Symbol anklicken
• Neues Menü: Command – Convert to Flex Component aufrufen
• File->Publish aufrufen
• In der Library auf dem neuen Flex Symbol -> Rechte Maustaste -> Convert to SWC (vorher auch unter Properties die Classnamen angeben)
• In das Flex Projekt (lib-Verzeichnis) kopieren
• Die Komponente steht in MXML zur Verfügung, wenn man den unter Properties angegebenen Classnamen aufruft

Versuch die Komponenten über Flex zu steuern

<?xml version="1.0" encoding="utf-8"?>
<mx:Application horizontalScrollPolicy="off" verticalScrollPolicy="off" 
          creationComplete="{onCreationComplete()}" 
         xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*" >
  <mx:Script>
  	<!&#91;CDATA&#91;
  		public function onCreationComplete():void
  		{
  			test3.scaleX=-1;
  		}
  	&#93;&#93;>
  </mx:Script>
 <local:landscape x="1400" y="600" height="600">
 </local:landscape>
 <local:MeinTest id="test3" height="300"  y="370" x="200" >
 </local:MeinTest>	
 <mx:ApplicationControlBar x="0" y="0" width="100%" height="50">
  <mx:Button click="{test3.gotoAndStop(0)}" label="Stop"/>
  <mx:Button click="{test3.gotoAndPlay(0)}" label="Start"/>
  <mx:Button click="{test3.scaleY*=-1;test3.scaleX*=-1}" label="Drehen"/>
 </mx:ApplicationControlBar>
</mx:Application>

Ergebnis

Problem

Die UIMovieClips lassen sich zwar rotieren, aber nicht per scaleX um die eigene Achse drehen.

Abhilfe

Wird noch gesucht

Problem

Adobe Flex 3 definiert eine Reihe von Standard-Events, die über die Kontext-Hilfe bei der Quellcodeingabe mit einem gelbem Blitz gekennzeichnet werden. Häufig nutzt man die Kontext-Hilfe im Flex-Builder (STRG+SPACE ruft sie beim Deklarieren/in der Deklaration eines MXML-Tags auf) um die definierten Events anzuzeigen.

Bei Event-Namen wie creationComplete, applicationComplete, InitializationComplete usw… stellt sich häuft die Frage nach der Reihenfolge

Ansatz

Es werden alle Events, die mit einem gelben Blitz versehen sind, an die deklarierte Methode „eventListener“ übergeben. Diese Methode listet im Debug-Modus über die TRACE-Funktion die Reihenfolge und das Auftreten der Events auf.

Lösung

<?xml version="1.0" encoding="utf-8"?>
<mx:Application added="eventListener(event)"
  addedToStage="eventListener(event)"
  applicationComplete="eventListener(event)"
  creationComplete="eventListener(event)"
  initialize="eventListener(event)"
  preinitialize="eventListener(event)"
  layout="absolute"
  xmlns:mx="http://www.adobe.com/2006/mxml">
 <mx:Script>
    <!&#91;CDATA&#91;
      import flash.utils.getQualifiedClassName;
      import mx.events.FlexEvent;
      
      private function eventListener(event:Event):void 
      {
         if (
              (event.target == this) || 
              (event.target == this.myDataGrid) ||
              (event.target == this.myPanel)
          ) 
         {
            trace(getQualifiedClassName(this) + ".eventListener: " +
	       getQualifiedClassName(event) + "." + event.type);
            trace("\ttarget: " + getQualifiedClassName(event.target));
          }
    }
 &#93;&#93;>
  </mx:Script>
  <mx:Panel added="eventListener(event)"
      addedToStage="eventListener(event)"
      creationComplete="eventListener(event)"
      id="myPanel"
      initialize="eventListener(event)"
      preinitialize="eventListener(event)">
  <mx:DataGrid  added="eventListener(event)"
           addedToStage="eventListener(event)"
           creationComplete="eventListener(event)"
           id="myDataGrid"
           initialize="eventListener(event)"
           preinitialize="eventListener(event)"/>
  </mx:Panel>
</mx:Application>

Aufgabenstellung

UI-Komponenten sollen per Drag and Drop verschoben werden können.

Ansatz

Dieser Artikel beschreibt die notwendigen Flex-APIs (DragManager) für die Implementierung einer Drag and Drop-Funktionalität am Beispiel der (siehe Nachfolgeartikel) eLearning-Anwendung für das V-Modell.

Lösung

1.) Definition der verschiebbaren Komponenten und der Behälter-Komponenten.

<!-- WIRD VERSCHOBEN -->
<mx:Button dragComplete="dragCompleteHandler(event);" 
label="System-Entwurf" id="btnSystementwurf"  />
<mx:Button dragComplete="dragCompleteHandler(event);" 
label="Software-Entwurf" id="btnSoftwareentwurf"  />
..

<!-- WIRD HINEINGESCHOBEN -->
<mx:HBox verticalAlign="middle" verticalScrollPolicy="off" 
horizontalScrollPolicy="off" id="dropField1" />
<mx:HBox verticalAlign="middle" verticalScrollPolicy="off" 
horizontalScrollPolicy="off" id="dropField2" />

2.) Registrierung der Eventlistener

<mx:Application creationComplete="{onCreationComplete()} ...

public function onCreationComplete():void
{
   // Registrierung des Buttons "Anforderungsanalyse" für das Verschieben in ein Feld
   this.btnAnforderungsnanalyse.addEventListener( MouseEvent.MOUSE_DOWN, beginDrag );

   // Registrierung des Buttons "AbnahmeEntwurf" für das Verschieben in ein Feld
   this.btnAbnahmeEntwurf.addEventListener( MouseEvent.MOUSE_DOWN, beginDrag );

...

   // Die DropListener werden an die UI-Komponten, bzw. die Komponeten, in die 
   // die Objekte geschoben werden können, angehängt
   this.dropField1.addEventListener( DragEvent.DRAG_ENTER, acceptDrop );
   this.dropField2.addEventListener( DragEvent.DRAG_ENTER, acceptDrop );
   ..
   this.dropField1.addEventListener( DragEvent.DRAG_DROP, handleDrop );
   this.dropField2.addEventListener( DragEvent.DRAG_DROP, handleDrop );
}
&#91;/actionscript3&#93;

3.) Implementierung der Logik - Hier: Überprüfung ob alles richtig verschoben ist
&#91;actionscript3&#93;
private function dragCompleteHandler(event:DragEvent):void {
     var draggedButton:Button = event.dragInitiator as Button;
     var dragInitCanvas:HBox = event.dragInitiator.parent as HBox;

     var stimmt1:Boolean = getButtons(dropField1).indexOf('btnAnforderungsnanalyse')>-1;
     var stimmt2:Boolean = getButtons(dropField2).indexOf('btnSystemarchitektur')>-1;
               	
     if(stimmt1&&stimmt2) 
     {
          Alert.show('Congratulations you did it!'); 
     }                	 
}  

4.) Welche Buttons sind in den Container? (Hier HBOX)

private function getButtons(box:HBox):String
{
var btnString:String=“;
var numChildren:Number = box.numChildren;

for (var i:int = 0; i < numChildren; i++) { if(box.getChildAt(i)["id"]) { btnString=box.getChildAt(i)["id"]; } } return btnString; } [/actionscript3] 5.) Management der Drag and Drop Funktionalität [actionscript3] public function beginDrag( mouseEvent:MouseEvent ):void { // the drag initiator is the object being dragged (target of the mouse event) var dragInitiator:IUIComponent = mouseEvent.currentTarget as IUIComponent; // the drag source contains data about what's being dragged var dragSource:DragSource = new DragSource(); // add some information to the drag source dragSource.addData( "name", dragInitiator.name ); dragSource.addData( "parent", dragInitiator.parent.name ); // ask the DragManger to begin the drag DragManager.doDrag( dragInitiator, dragSource, mouseEvent, null ); } public function handleDrop( dragEvent:DragEvent ):void { var dragInitiator:Button = Button( dragEvent.dragInitiator ); var dropTarget:HBox = dragEvent.currentTarget as HBox; HBox(dropTarget).addChild(dragInitiator); } public function acceptDrop( dragEvent:DragEvent ):void { var dropTarget:IUIComponent = dragEvent.currentTarget as IUIComponent; var dragSource:DragSource = dragEvent.dragSource; // accept the drop DragManager.acceptDragDrop( dropTarget ); // show feedback DragManager.showFeedback( DragManager.MOVE ); } [/actionscript3]