WindowShade and CollapsibleAccordion problems, migrating from Flex3 to Flex4 - apache-flex

Question

I have two problems in my code:
First: is with the WindowShade. I have a WindowShade in my application, and the moment I click to run this everything just hangs up. This was working fine when I was using the Flex3 to compile.
The code looks like:
<mdi_containers:MDIWindow xmlns:mdi_containers="flexlib.mdi.containers.*"
xmlns:flexlib_controls="flexlib.controls.*"
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:containers="flexlib.containers.*"
width="800" layout="absolute"
height="500" title="News Articles"
textAlign="center"
verticalGap="0" horizontalGap="0"
minWidth="800"
minHeight="500">
<mx:Canvas width="100%" styleName="roundedBottomCorner">
<containers:WindowShade id="wshade_fox" top="0" width="100%" opened="false" visible="true"
openIcon="{null}" closeIcon="{null}" paddingTop="0"
headerRenderer="{new ClassFactory(c7.views.components.news.header)}">
<mx:VBox horizontalScrollPolicy="off" width="100%" height="225" verticalGap="0" horizontalGap="0">
</mx:VBox>
</containers:WindowShade>
</mx:Canvas>
Second: The CollapsibleAccordion. I have two canvas inside the CollapsibleAccordion, and everything works fine in Flex4 also, but the only problem, that i am unable to see the label on the Canvas.
The code for this problem is below:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:cal="cal.*"
layout="absolute"
addedToStage="stage_init()"
applicationComplete="init()"
xmlns:geometry="com.degrafa.geometry.*"
xmlns:degrafa="com.degrafa.*"
xmlns:paint="com.degrafa.paint.*"
xmlns:containers="flexlib.containers.*"
xmlns:flexlib_controls="flexlib.controls.*"
xmlns:mdi_containers="flexlib.mdi.containers.*"
xmlns:auto="com.hillelcoren.components.*"
xmlns:local="*" backgroundColor="#f7fafe" backgroundGradientColors="[#f7fafe, #6caaeb]"
xmlns:components="CollapsibleAccordion.*"
xmlns:notifications="c7.views.components.notifications.*"
xmlns:dbview="c7.views.apps.dashboard.*"
modalTransparency="0.8" preloader="c7.views.components.Pre"
modalTransparencyColor="0x000000" verticalScrollPolicy="auto"
backgroundSize="100%"
xmlns:components1="c7.views.components.*"
xmlns:notification="c7.views.components.notification.*"
xmlns:news="c7.views.components.news.*">
<mdi_containers:MDICanvas id="mdic" horizontalScrollPolicy="off" verticalScrollPolicy="off"
visible="{!GlobalModel.getInstance().dashboard_mode}"
minWidth="{top_bar.width}"
width="100%" height="100%" top="{top_bar.height}" backgroundAlpha="0">
<mx:Canvas id="cvs_widget_bar" right="0" top="0" height="100%">
<components:CollapsibleAccordion id="collapsibleAccordion1" height="100%" top="0" right="0"
orientation="left" barSize="30" currentWidth="30" openSize="150"
drawerButtonStyle="drawerButton" closeButtonStyle="drawerCloseRight" accordianStyle="drawerAccordion">
<mx:Canvas width="100%" top="0" right="0" height="100%" label="Widget Bar">
</mx:Canvas>
<mx:Canvas width="100%" height="100%" label="Feedback" icon="{IconUtility.getClass(cvs_comment,'assets/cloud_main/images/article-48x48.png')}"
id="cvs_comment" top="0" right="0">
</mx:Canvas>
</components:CollapsibleAccordion>
</mx:Canvas>

Answer 1

I had simliar problems with WindowShade going from Flex 3 to Flex 4. I had to define a button for the headerClass. Since I had a bunch of WindowShades, I added in my style sheet:
flexlib|WindowShade {
headerClass:ClassReference("mx.controls.Button");
}
Or, if you want when you declare a WindowShade, you can add in your MXML:
headerClass="mx.controls.Buttons"
...so that way your "wshade_fox" declaration looks something like:
<containers:WindowShade id="wshade_fox" top="0" width="100%" opened="false" visible="true"
openIcon="{null}" closeIcon="{null}" paddingTop="0"
headerRenderer="{new ClassFactory(c7.views.components.news.header)}"
headerClass="mx.controls.Button">
Hope that helps the first part of your problem.