Including Panel

[sgergawi]

Hello All;
Please how can i add (include a panel) to the mxml file.

Please see the attached code

Thanks

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml"
xmlns="*"
pageTitle="SMET Project">

<mx:Style source="style.css"/>

<mx:Canvas width="100%" height="100%">

<mx:HBox width="100%" height="100%">

***********************************
Including Panel here
***********************************

<mx:Panel id="detailsPanel" width="100%" height="100%">

<mx:TabNavigator id="tn" width="100%" height="100%">
<mx:Canvas label="SMET Team">
</mx:Canvas>

<mx:Canvas label="Inputs">
</mx:Canvas>

<mx:Canvas label="Reports">
</mx:Canvas>

<mx:Canvas label="Projects">
</mx:Canvas>

<mx:Canvas label="Charts">
</mx:Canvas>

<mx:Canvas label="Forums">
</mx:Canvas>

<mx:Canvas label="Chat">
</mx:Canvas>

<mx:Canvas label="Logout">
</mx:Canvas>
</mx:TabNavigator>

<!-- <mx:ControlBar>
<mx:Button label="Write Review" />
</mx:ControlBar> -->

</mx:Panel>

</mx:HBox>


</mx:Canvas>

</mx:Application>

********************** The Panel **********************
<mx:Panel id="smetnav" title="Home" width="210" height="100%"
textAlign="center" fontSize="14">
<mx:Form>
<mx:Label text="About SMET Team"/>
</mx:Form>
</mx:Panel>

[ntsiii]

What do you man when you say "include"?

Do you mean that you want to create a custom mxml component that extends mx:Panel, and then use that custom component in your main mxml file?

Tracy

[sgergawi]

Thanks for your fast replay,
I mean when i change the tab nav (click on a Canvas) i want to get the file
(Panel) and import it in the
<mx:ViewStack> tag (to be replaced).

For example when i click on Canvas "SMET Team" i want to import file
"SmetPanelLeft.mxml" in the <mx:ViewStack> tag.
and when clicking on Canvas "Inputs" i want to import file
"InputPanelLeft.mxml" in the <mx:ViewStack> tag.
and like this ..... for each canvas

Here is the attached cood and would be happy if anyone have an idea and replay
me.

****************** ProjectForm.mxml ***********************
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml"
xmlns="*"
pageTitle="SMET Project">
<mx:Style source="style.css"/>
<mx:Script>
import mx.core.UIComponent;
import InputPanelLeft; //you need to create this component for left side.
import SmetPanelLeft; //you need to create this component for left side.
import ReportPanelLeft; //you need to create this component for left side.

function addsmetPanel()
{
createLeftPanel(SmetPanelLeft);
}

function addInputPanel()
{
createLeftPanel(InputPanelLeft);
}
function addreportPanel()
{
createLeftPanel(ReportPanelLeft);
}

function createLeftPanel(componentClass:UIComponent)
{
var hbox = leftHBox.createChild(componentClass, "id"); //Assuming
there is separate mxml component for this?
leftHBox.setChildIndex(hbox, 0); //set this as first child in HBox
container.
}
</mx:Script>
<mx:Canvas width="100%" height="100%">
<mx:HBox width="100%" height="100%">
<!-- <mx:HBox id="leftHBox" height="100%" textAlign="center" fontSize="14"/>
-->
<mx:ViewStack id="leftHBox" height="100%"/>
<mx:Panel id="detailsPanel" width="100%" height="100%"
title="Choose one">
<mx:TabNavigator id="tn" width="100%" height="100%"
change="leftHBox.selectedChild=createLeftPanel(id) ;">

<mx:Canvas label="SMET Team">
</mx:Canvas>

<mx:Canvas label="Inputs">
</mx:Canvas>

<mx:Canvas label="Reports">
</mx:Canvas>
<mx:Canvas label="Projects">
</mx:Canvas>
<mx:Canvas label="Charts">
</mx:Canvas>
<mx:Canvas label="Forums">
</mx:Canvas>
<mx:Canvas label="Chat">
</mx:Canvas>
<mx:Canvas label="Logout">
</mx:Canvas>
</mx:TabNavigator>
</mx:Panel>
</mx:HBox>
</mx:Canvas>
</mx:Application>

****************** SmetPanelLeft.mxml ***********************
<mx:Panel xmlns:mx="http://www.macromedia.com/2003/mxml" width="100%"
height="100%" textAlign="center" fontSize="14">
<mx:Form>
<mx:Label text="About SMET Team"/>
</mx:Form>
</mx:Panel>

****************** InputPanelLeft.mxml ***********************
<mx:Panel xmlns:mx="http://www.macromedia.com/2003/mxml" height="100%"
textAlign="center" fontSize="14" title="Inputs">
<mx:Form>
<mx:Label text="Input Form"/>
</mx:Form>
</mx:Panel>

****************** ReportPanelLeft.mxml *********************
<mx:Panel xmlns:mx="http://www.macromedia.com/2003/mxml" width="100%"
height="100%" title="Reports" textAlign="center" fontSize="14">
<mx:Form>
<mx:Label text="Report Form"/>
</mx:Form>
</mx:Panel>

************************************************** *****************

[ntsiii]

You may want to look at the mx:Loader tag. But first, why do you want to
"import" it into a ViewStack? Do you understand the purpose of a ViewStack and
how to use it?

The normal usage is to put the panel components in the ViewStack then use set
selectedIndex to display the desired panel.

<mx:ViewStack id="leftHBox" height="100%">
<SmetPanelLeft/>
<InputPanelLeft/>
<ReportPanelLeft/>
</mx:ViewStack>


Tracy

[sgergawi]

Hi ntsiii,
Thanks for your fast Replay :)
about ViewStack i dont understand the purpose of it, what what can every thing
done by it.
but i saw an example about it and your attach code i have done it but that
haven't worked :(
could you please attach me the code how will it be work please?
to get the idea more!

Many thanks for your advice

[ntsiii]

Look at the ViewStack example in the flex/samples Flex Explorer, read the
documentation, and come back with a specific question.

I also follow flexcoders. Abdul has suggested the same thing.

Tracy

[sgergawi]

Hello Tracy and everybody,
Thank you for your advice, i get the idea about "ViewStack" that is also a way
to fix my problem, but in this way i can't do you it throught "TabNavigator"
but in for my example it would not be usefull as i want to be.
for that i would use it by HBox, and i have update the code for my first post
here.
Hope that you could help me in fix that.

Many thanks

[ntsiii]

You have not explained your business requirements for me to be confident in
your approach.

However, if you are certain that dynamic instantiation is what you want, look
at the mx:Loader tag and at the createChild() method on containers.

Tracy