This tutorial will explain how to create a custom windowed environment in flex 3.0.  This environment consists of draggable and collapsible content panes, the content and style of which can be easily changed by the programmer. Here is an example



I created this system out of necessity while working on a class project. The project consisted of several isolated graphical elements (a guitar neck schematic, a metronome, and a circle-of-fifths). spread throughout the page. I desired that the user should be able to drag these around, or hide them at will. I didn’t want to write all that code for each one of the objects. The conclusion was to create a superclass which encapsulated all the common functionality of the windows.

We will now create the class Window, which is designed to draw a basic title bar and background and have click-and-drag capabilities. Our example subclass will be Menu. One of the features of the Window is that the Menu class will not have to make any adjustments to how it is drawn.  Here is a simple form of

      import flash.display.MovieClip;
      import flash.text.*;
      public class Window extends MovieClip
            protected var h:int;
            protected var w:int;
            protected var header:String;
            public static var barHeight:int = 20;
            public function Window(w:int, h:int, header:String)
                  this.w = w;
                  this.h = h;
                  this.header = header;
            public function draw():void{                        
                  //draw the large frame in gray
                  graphics.drawRect(-2, -4-barHeight, w+4, barHeight+6+h);
                  //draw the title bar in blue
                  graphics.beginFill(0x0000ff, .5);
                  graphics.drawRect(0, -2-barHeight, w, barHeight);
                  //write the header text
                  var t:TextField = new TextField();
                  t.textColor = 0xffffff;
                  t.text = header;
                  t.width = 100;
                  t.selectable = false;
                  t.x = -3;
                  t.y = -barHeight+3;
                  //draw content background in gray
                  graphics.beginFill(0x00ff00, .5);
            public function childDraw():void{}