In Flex 4 (Gumbo) gibt es eine neue Grafik-Library mit dem Namen FXG. Darin sind z.B. die folgende geometrische Grundformen vorhanden, die nun über MXML gezeichnet werden können:

  • <Rect> (Rechteck)
  • <Ellipse> (Ellipse)
  • <Path> (Pfade)
  • <Line> (Linien)
  • <TextGraphic> (Texte als Grafik)

Die Konturen (strokes) und Flächen (fills) sowie Filter, Masken, Alphas und Blendmodes können ebenfalls über MXML gesteuert werden. Die einzelnen Grafikelemente kann man auch über <Group> zu einer Einheit zusammenfassen.

FXG soll des Weiteren als Austauschformat für Flex und Thermo zum Einsatz kommen. Dabei ist FXG ein Subset von MXML und kann sich auch in extra Dateien mit der Dateiendung .fxg befinden.

Das folgende Beispiel zeigt meinen ersten Versuch mit den Grafikkomponenten. Es handelt sich um ein einfaches "Hello World", das alle neuen Komponenten auf der Bühne platziert. Zur Kompilierung wird ein Nightly Build von Flex 4 benötigt. Abspielbar ist das SWF-File mit dem darin enthaltenen Flash Player.

Flex 4 Gumbo Graphics FXG

XML:
  1. <mx:Application xmlns:mx="http://ns.adobe.com/mxml/2009" >   
  2.    
  3.     <!-- Rechteck -->
  4.     <mx:Rect left="20" top="20" width="100" height="100">
  5.    
  6.         <!-- Kontur -->
  7.         <mx:stroke>
  8.             <mx:SolidColorStroke color="0x005571" />
  9.         </mx:stroke> 
  10.  
  11.         <!-- Fill --> 
  12.         <mx:fill>
  13.             <mx:SolidColor color="0xe8f9ff" />
  14.         </mx:fill>
  15.  
  16.     </mx:Rect>
  17.  
  18.    
  19.     <!-- Ellipse -->   
  20.     <mx:Ellipse left="200" top="20" width="100" height="100">   
  21.        
  22.         <!-- Kontur --> 
  23.         <mx:stroke>
  24.             <mx:SolidColorStroke color="0x5f7101" />
  25.         </mx:stroke>
  26.      
  27.         <!-- Fill -->  
  28.         <mx:fill>
  29.           <mx:SolidColor color="0xc6d381" />
  30.         </mx:fill>
  31.  
  32.     </mx:Ellipse>     
  33.  
  34.  
  35.     <!-- Line -->   
  36.     <mx:Line left="400" top="20" width="100" height="100">   
  37.        
  38.         <!-- Kontur --> 
  39.         <mx:stroke>
  40.             <mx:SolidColorStroke color="0x333333" />
  41.         </mx:stroke>
  42.  
  43.  
  44.     </mx:Line>         
  45.  
  46.  
  47.     <!-- TextGraphic -->   
  48.     <mx:TextGraphic left="400" top="200" width="100" height="100" content="TextGraphic">   
  49.     </mx:TextGraphic>
  50.    
  51.     <!-- Path -->   
  52.     <mx:Path left="200" top="200" data="Q 400 200 100 0">   
  53.         
  54.         <!-- Kontur --> 
  55.         <mx:stroke>
  56.             <mx:SolidColorStroke color="0x333333" />
  57.         </mx:stroke>   
  58.  
  59.    
  60.         <!-- Fill -->  
  61.         <mx:fill>
  62.             <mx:SolidColor color="0xfdf2b2" />
  63.       </mx:fill>
  64.  
  65.     </mx:Path>
  66.  
  67.    
  68. </mx:Application>

Link: An Introduction to the Gumbo Component Architecture