[flexcoders] Manipulating child panels of a tabnavigator

[Adrian Williams]

Hi guys,

   Am having a doozy of a time figuring this out.  I am using the
flexlib SuperTabNavigator to create tabbed containers.  Then I am
creating individual SuperPanelPlus panels within the containers for
each tab. Basically creating a dashboard with the tabs acting as the
switch to change from on dashboard to another.  The panels are widgets
that while they can be duplicated between the tabs, the data contained
in the widget is unique to the tab.  

   Put another way, the dashboard is for a PM who has a project. If a
PM has multiple projects, they have multiple tabs.  Each tab contains
widgets that allow the PM to manipulate data specific to the project.

   The problem I am having is in controlling the properties, layout
and constraints of the panels.  The controls that are available to the
panel if I code it in the "body" of the page are not available if I
script them out in the mx:Script section.  They are valid attributes
for the container but are being unrecognized.  

   In case you aren't familiar with the flexlib, SuperTabNavigator
extends TabNavigator which extends ViewStack.  SuperPanelPlus extends
CollapsiblePanel (a custom conatiner) which extends TitleWindow.  

   Keep in mind that when I code it straight out in the body, it works
beautifully.  The challenge is in scripting it.

   Here is the code as it works in the "body":

<ns3:SuperPanelPlus id="calendar" title="Calendar" 
        width="98%" height="35%" 
        layout="absolute" horizontalAlign="center" 
        fontFamily="Arial" fontSize="14"
        styleColor="0xE26876"
        mouseMove="dragInit(calendar,graphData,event,'objFormat')"
        dragEnter="handleDragEnter(event,'objFormat')" 
        dragDrop="handleDragDrop(calendar)"
        dragComplete="handleDragComplete(event)" 
        resizeEnabled="true"
        showControls="true"
        closeClickEvent="closeWindow(calendar,event)"
        resizeHeightEnabled="true">
</ns3:SuperPanelPlus>

   Because the tab creation is dynamic, I have to add the panels in
the script section. Here is the code that creates the tabbed navigator:

private function initTabs():void 
{
        addTab("Project1", nav, "Project1 Administrator Dashboard", "Click to
swith to Project1", home_icon);
        addTab("Project2", nav, "Project2 Administrator Dashboard", "Click to
swith to Project2");
        addTab("Project3", nav, "Project3 Administrator Dashboard", "Click to
swith to Project3");
}

   Here is the code for the addTab() method. It is within this method
that I am trying to create the panels using the same arguments/options
as I have available in the "body" code.  

private function addTab(lbl:String, navigator:SuperTabNavigator,
contentString:String=null, toolTip:String=null, icon:Class=null):void 
{
        if(lbl=="") lbl = "(Untitled)";
                                
        var curNum:Number = nav.numChildren + 1;
                                
        var child:VBox = new VBox();
        child.setStyle("closable", false);
        child.label = lbl;
        child.toolTip = toolTip;
                                
        // determine which icon to place on the tab
        if(icon) {
                child.icon = icon;
        }
        else {
                child.icon = document_icon;
        }
                                
        //layout the quicklinks above the panels, but for each tab
        var tabCanvas:Canvas = new Canvas();
        child.addChild(tabCanvas);
        tabCanvas.percentWidth = 100;
        tabCanvas.height = 35;
                                
        var label:Label = new Label();
        label.text = contentString + " - Index Number: " + curNum ;
        tabCanvas.addChild(label);

        // main container to hold the vboxes and panels
        var mainBox:HBox = new HBox();
        child.addChild(mainBox);
        mainBox.percentWidth = 100;
        mainBox.percentHeight = 100;
                                
        // configure column 1
        var column1:VBox = new VBox();
        mainBox.addChild(column1);
        column1.percentWidth = 33;
        column1.percentHeight = 100;
        var panelCalendar:SuperPanelPlus = new SuperPanelPlus();
        column1.addChild(panelCalendar);
        panelCalendar.id = "calendar";
        panelCalendar.title = "Calendar " + curNum;
        panelCalendar.percentWidth = 98;
        panelCalendar.percentHeight = 30;
        panelCalendar.setStyle("fontfamily","Arial");
        panelCalendar.setStyle("fontSize",14);
        panelCalendar.setStyle("left",10);
        panelCalendar.setStyle("color",0xB8E569);
        panelCalendar.showControls = true;
        panelCalendar.resizeHeightEnabled = true;

   Now the problems that I am encountering are:

   1.)  The setStyle commands are not working at all. 
   2.)  Some of the attributes that work cleanly in the "body" coding
are not available in the script.  For example dragEnter and
dragComplete.  These are just two of the many that are not available.
  Using Flex Builder, using the intellisense, when I type
"panelCalendar." these properties are not shown in the list of
possible actions.  

   I would GREATLY appreciate any help I can get with this...it's got
me stumped.

Thanks,
Adrian