RE: [flexcoders] Canvas and Panels

vnice Cute Tue, 06 Sep 2005 12:50:49 -0700

Hello Abdul Qabiz

Many thanks for all your help and advice, but i still have problem with the following Error

1 Error found.

The class 'UIComponent' could not be loaded.

****************** 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 InputPanel;
    //import smetPanel;
   // import reportPanel;
    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 ()
    {
        //smetCanvas.createChild(smetPanel, "");
  createLeftPanel(SmetPanelLeft);
    }

    function addInputPanel ()
    {
        //inputCanvas.createChild(InputPanel, "");
  createLeftPanel(InputPanelLeft);
    }

    function addreportPanel ()
    {
        //reportCanvas.createChild(reportPanel, "");
  createLeftPanel(ReportPanelLeft);
    }

function createLeftPanel(componentClass:UIComponent)
    {
        var hbox = leftHBox.createChild(componentClass, ""); //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:Panel id="inputCanvas" height="100%" textAlign="center" fontSize="14" title="Home"/>

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

                <mx:TabNavigator id="tn" width="100%" height="100%" selectedIndex="0" change="addInputPanel();">

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

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

      <mx:Canvas label="Reports" id="reportCanvas">
            </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>

Abdul Qabiz <[EMAIL PROTECTED]> wrote:

If I am correct, you want to show two panels (on left as well as on right) when any of tab is clicked on right side?

If that is the case, you can do this following way, see the modified code.

***************** 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 InputPanel;
    import SmetPanel;
    import ReportPanel;

    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 ()
    {
        smetCanvas.createChild(SmetPanel, "");

        createLeftPanel(SmetPanelLeft);

    }

    function addInputPanel ()
    {
        inputCanvas.createChild(InputPanel, "");

        createLeftPanel(InputPanelLeft);
    }
    function addReportPanel ()
    {
        reportCanvas.createChild(ReportPanel, "");

        createLeftPanel(ReportPanelLeft);

   }

    function createLeftPanel(componentClass:UIComponent)

    {

        var hbox = leftHBox.createChild(componentClass, ""); //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 id="leftHBox" width="100%" height="100%">

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

                <mx:TabNavigator id="tn" width="100%" height="100%" selectedIndex="0" change="addInputPanel();">

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

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

      <mx:Canvas label="Reports" id="reportCanvas">
            </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:Panel>

        </mx:HBox>

    </mx:Canvas>

</mx:Application>

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

The imorting file

1) **************  SmetPanel.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>

2) ************** InputPanel.mxml *****************

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

3) ************** ProjectForm.mxml ***************

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

4) ****************** SmetPanelLeft.mxml ***************************

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

Hope that helps...

-abdul

From: [email protected] [mailto:[EMAIL PROTECTED] On Behalf Of vnice Cute
Sent: Tuesday, September 06, 2005 5:56 PM
To: [email protected]
Subject: RE: [flexcoders] Canvas and Panels

Hi,

Here is my code for :

***************** 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 InputPanel;
    import smetPanel;
    import ReportPanel;

    function addsmetPanel ()
    {
        smetCanvas.createChild(smetPanel, "");
    }

    function addInputPanel ()
    {
        inputCanvas.createChild(InputPanel, "");
    }
    function addReportPanel ()
    {
        reportCanvas.createChild(ReportPanel, "");
    }

</mx:Script>

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

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

  <mx:Panel id="smetPanel" title="Home" width="210" height="100%" textAlign="center" fontSize="14">
   <mx:Form>
    <mx:Label text="About SMET Team"/>
   </mx:Form>
  </mx:Panel>
( Imorting here the smetPanel )

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

                <mx:TabNavigator id="tn" width="100%" height="100%" selectedIndex="0" change="addInputPanel();">

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

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

      <mx:Canvas label="Reports" id="reportCanvas">
            </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:Panel>

        </mx:HBox>

    </mx:Canvas>

</mx:Application>

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

The imorting file

1) ************** smetPanel.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>

2) ************** InputPanel.mxml *****************

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

3) ************** ProjectForm.mxml ***************

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

Abdul Qabiz <[EMAIL PROTECTED]> wrote:

Hi,

You can do that. Could you please post a working code here? Make a simple but complete example and post here. I will probably make changes in the code to show how this can be achieved.

-abdul

From: [email protected] [mailto:[EMAIL PROTECTED] On Behalf Of vnice Cute
Sent: Tuesday, September 06, 2005 5:04 PM
To: [email protected]
Subject: RE: [flexcoders] Canvas and Panels

Hi Abdul Qabiz;

Thanks again, but to now it didn't work and load the Panel page.

I mean that i have more than one Panel for every Canvas.

For example: in my example i have 8 Canvas and each Canvas has own Panel = 8 Panels

So when i click on any canvas i like that this call the panel in the left side (Instead of the Left Panel) and not as a child panel.

I hope now it is more clearly what i am meaning.

Thanks

Abdul Qabiz <[EMAIL PROTECTED]> wrote:

Hi,

You can handle the TabNavigator's change event and based on the selectedIndex you can show the panels inside both(left and right) Panel.

But what do you mean by "the extra panel for this canvas" ?

-abdul

From: [email protected] [mailto:[EMAIL PROTECTED] On Behalf Of vnice Cute
Sent: Tuesday, September 06, 2005 4:41 PM
To: [email protected]
Subject: RE: [flexcoders] Canvas and Panels

Thanks Abdul Qabiz for your fast replay.

but i still have the problem.

i have two Panel, one is on the lift side and the other is on the right side.

I want the left Panel to use it as SiteNav.

When i click on any Canvas i want the extra panel for this canvas to be displayed on the left Panel side. the Panel which have the "Home" title.

I have added the "SnapShot.gif" image to exaplin more what i want to do.

Abdul Qabiz <[EMAIL PROTECTED]> wrote:

Hi,

1) Canvas and VBox both are containers but with following difference:

- VBox container lays out its children in a single vertical column. Where as a Canvas layout container defines a rectangular region in which you place child containers and controls. It is the only container that lets you explicitly specify the location of its children within the container by using the x and y properties of each child.

2) So you mean, when click on Canvas you want to add Panel as child ? You can create a custom MXML component and add it as child when canvas is clicked.

##InputPanel.mxml##

<mx:Panel xmlns:mx=http://www.macromedia.com/2003/mxml width="100%" height="100%">

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

                    </mx:TabNavigator>

</mx:Panel>

And you can create instance of above component like this:

<mx:Script>

    import InputPanel;

    function addInputPanel ()

    {

        inputCanvas.createChild(InputPanel, "");

    }

</mx:Script>

<mx:Canvas id="inputCanvas" />

Does that make sense?

-abdul

From: [email protected] [mailto:[EMAIL PROTECTED] On Behalf Of vnice Cute
Sent: Tuesday, September 06, 2005 2:28 PM
To: [email protected]
Subject: [flexcoders] Canvas and Panels

Hi all;

I have two questions for this example please.

The first Q1 is:-

what is the different in the case where in tag <mx:TabNavigator> to be used

tag      <mx:VBox label="The Team VBox">
      </mx:VBox>

or tag      <mx:Canvas label="The Team">
         </mx:Canvas>

Q2) I want to include a panel from exect file, for example:

when i click on          <mx:Canvas label="Inputs"></mx:Canvas>

i want to get the the panel from other file instead of the following

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

                <mx:TabNavigator id="tn" width="100%" height="100%">
      <mx:VBox label="The Team VBox">

the same for other Canvas till logout.

Hope that i got a help in those questions.

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

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

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

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

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

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

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

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

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

      <mx:Canvas label="The 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>

__________________________________________________
Do You Yahoo!?
Tired of spam? Yahoo! Mail has the best spam protection around
http://mail.yahoo.com

__________________________________________________
Do You Yahoo!?
Tired of spam? Yahoo! Mail has the best spam protection around
http://mail.yahoo.com

__________________________________________________
Do You Yahoo!?
Tired of spam? Yahoo! Mail has the best spam protection around
http://mail.yahoo.com

__________________________________________________
Do You Yahoo!?
Tired of spam? Yahoo! Mail has the best spam protection around
http://mail.yahoo.com

__________________________________________________
Do You Yahoo!?
Tired of spam? Yahoo! Mail has the best spam protection around
http://mail.yahoo.com

-- Flexcoders Mailing List FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt Search Archives: http://www.mail-archive.com/flexcoders%40yahoogroups.com

SPONSORED LINKS

`Web site design development`	`Software design and development`	`Macromedia flex`
`Software development best practice`

YAHOO! GROUPS LINKS

Visit your group "flexcoders" on the web.
To unsubscribe from this group, send an email to: [EMAIL PROTECTED]
Your use of Yahoo! Groups is subject to the Yahoo! Terms of Service.

RE: [flexcoders] Canvas and Panels

Reply via email to