5 Replies Latest reply on Aug 20, 2007 1:35 AM by Newsgroup_User

    creating template component

    Level 7
      I am trying to create a template component that can be used elsewhere in
      an mxml file.

      I thought his would work for the component definition:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml"
      width="{frameworkWidth}"
      height="{frameworkHeight}"
      x="{frameworkX}"
      y="{frameworkY}"
      creationComplete="init()">

      <mx:Script>
      <![CDATA[

      //width and height of the component
      [Bindable]
      public var frameworkWidth:int = 800;
      [Bindable]
      public var frameworkHeight:int = 600;

      //x and y positions of the framework
      [Bindable]
      public var frameworkX:int = 0;
      [Bindable]
      public var frameworkY:int = 0;

      import mx.core.UIComponent;
      import mx.containers.ViewStack;

      [ArrayElementType("mx.core.UIComponent")]
      public var frameworkContent:Array;

      private function init():void
      {
      //add the viewstack 'framework'
      var framework:ViewStack = new ViewStack();
      framework.percentHeight = 100;
      framework.percentWidth = 100;
      this.addChild(framework);

      //loop through the array and add content to the framework as set in
      the array of UI components
      for(var i : int =0 ; i < this.frameworkContent.length; i++)
      {
      framework.addChild(this.frameworkContent );
      }

      }

      ]]>
      </mx:Script>
      </mx:Canvas>

      with the following being the main mxml file for testing currently:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml"
      xmlns:eLearning ="components.*" backgroundColor="#FFFFFF"
      layout="absolute" width="800" height="600">

      <eLearning:Framework frameworkWidth="800" frameworkHeight="600">

      <mx:Canvas width="100%" height="100%">
      <mx:Image source="assets/menu.jpg" x="40" y="50"/>
      </mx:Canvas>

      <mx:Canvas>
      <mx:Image source="assets/exit.jpg" x="40" y="100"/>
      </mx:Canvas>

      </eLearning:Framework>
      </mx:Application>

      But this doesn't seem to be working. Can someone point me at what I am
      doing wrong please?

      Thanks

      Mark
        • 1. Re: creating template component
          USawIt
          Mark,

          I changed the code of your component in two places (wrapped a type'ing of DisplayObject in the for loop in the init function and set your declaration of frameworkContent = new Array(), and the UI loaded without compile-time or runtime errors.

          Hope this helps,

          Mike Givens :-)

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml" width="{frameworkWidth}"
          height="{frameworkHeight}"
          x="{frameworkX}"
          y="{frameworkY}"
          creationComplete="init()">

          <mx:Script>
          <![CDATA[
          import mx.core.UIComponent;
          import mx.containers.ViewStack;

          //width and height of the component
          [Bindable] public var frameworkWidth:int = 800;
          [Bindable] public var frameworkHeight:int = 600;

          //x and y positions of the framework
          [Bindable] public var frameworkX:int = 0;
          [Bindable] public var frameworkY:int = 0;


          [ArrayElementType("mx.core.UIComponent")] public var frameworkContent:Array = new Array();

          private function init():void
          {
          //add the viewstack 'framework'
          var framework:ViewStack = new ViewStack();
          framework.percentHeight = 100;
          framework.percentWidth = 100;
          this.addChild(framework);

          //loop through the array and add content to the framework as set in the array of UI components
          for(var i:int=0; i < this.frameworkContent.length; i++)
          {
          framework.addChild(DisplayObject(this.frameworkContent));
          }

          }

          ]]>
          </mx:Script>
          </mx:Canvas>
          • 2. Re: creating template component
            Level 7
            USawIt wrote:
            > Mark,
            >
            > I changed the code of your component in two places (wrapped a type'ing of
            > DisplayObject in the for loop in the init function and set your declaration of
            > frameworkContent = new Array(), and the UI loaded without compile-time or
            > runtime errors.
            >
            > Hope this helps,
            >
            > Mike Givens :-)
            >
            > <?xml version="1.0" encoding="utf-8"?>
            > <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml" width="{frameworkWidth}"
            > height="{frameworkHeight}"
            > x="{frameworkX}"
            > y="{frameworkY}"
            > creationComplete="init()">
            >
            > <mx:Script>
            > <![CDATA[
            > import mx.core.UIComponent;
            > import mx.containers.ViewStack;
            >
            > //width and height of the component
            > [Bindable] public var frameworkWidth:int = 800;
            > [Bindable] public var frameworkHeight:int = 600;
            >
            > //x and y positions of the framework
            > [Bindable] public var frameworkX:int = 0;
            > [Bindable] public var frameworkY:int = 0;
            >
            >
            > [ArrayElementType("mx.core.UIComponent")] public var
            > frameworkContent:Array = new Array();
            >
            > private function init():void
            > {
            > //add the viewstack 'framework'
            > var framework:ViewStack = new ViewStack();
            > framework.percentHeight = 100;
            > framework.percentWidth = 100;
            > this.addChild(framework);
            >
            > //loop through the array and add content to the framework as set
            > in the array of UI components
            > for(var i:int=0; i < this.frameworkContent.length; i++)
            > {
            > framework.addChild(DisplayObject(this.frameworkContent));
            > }
            >
            > }
            >
            > ]]>
            > </mx:Script>
            > </mx:Canvas>
            >

            That does help a lot thanks, but now I realise it doesn't do what I
            intended. I am trying to set up a ViewStack and each element in the
            main app ending up as a child of the ViewStack so:

            <eLearning:Framework frameworkWidth="800" frameworkHeight="600">

            <mx:Canvas width="100%" height="100%">
            <mx:Text text="Hello world"/>
            <mx:Image source="assets/menu.jpg" x="40" y="50"/>
            </mx:Canvas>

            <mx:Canvas>
            <mx:Image source="assets/exit.jpg" x="40" y="100"/>
            </mx:Canvas>

            </eLearning:Framework>

            would make 2 children on the ViewStack as there are 2 Canvas components.
            I thought my approach would work. Any ideas?

            Also, how can I then access the ViewStack (framework). I wanted to add
            some buttons to the component for navigation but I don't seem to be able
            to reference the ViewStack. I did expect to be able to call
            framework.selectedIndex++ etc, but that doesn't seem to be in scope either??

            Thanks for any help

            Mark
            • 3. Re: creating template component
              Level 7
              Mark Tomlinson wrote:
              > USawIt wrote:
              >> Mark,
              >>
              >> I changed the code of your component in two places (wrapped a
              >> type'ing of DisplayObject in the for loop in the init function and set
              >> your declaration of frameworkContent = new Array(), and the UI loaded
              >> without compile-time or runtime errors.
              >>
              >> Hope this helps,
              >>
              >> Mike Givens :-)
              >>
              >> <?xml version="1.0" encoding="utf-8"?>
              >> <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml"
              >> width="{frameworkWidth}"
              >> height="{frameworkHeight}"
              >> x="{frameworkX}"
              >> y="{frameworkY}"
              >> creationComplete="init()">
              >>
              >> <mx:Script>
              >> <![CDATA[
              >> import mx.core.UIComponent;
              >> import mx.containers.ViewStack;
              >>
              >> //width and height of the component
              >> [Bindable] public var frameworkWidth:int = 800;
              >> [Bindable] public var frameworkHeight:int = 600;
              >>
              >> //x and y positions of the framework
              >> [Bindable] public var frameworkX:int = 0;
              >> [Bindable] public var frameworkY:int = 0;
              >>
              >>
              >> [ArrayElementType("mx.core.UIComponent")] public var
              >> frameworkContent:Array = new Array();
              >>
              >> private function init():void
              >> {
              >> //add the viewstack 'framework'
              >> var framework:ViewStack = new ViewStack();
              >> framework.percentHeight = 100;
              >> framework.percentWidth = 100;
              >> this.addChild(framework);
              >>
              >> //loop through the array and add content to the framework
              >> as set in the array of UI components
              >> for(var i:int=0; i < this.frameworkContent.length; i++)
              >> {
              >>
              >> framework.addChild(DisplayObject(this.frameworkContent));
              >> }
              >>
              >> }
              >>
              >> ]]>
              >> </mx:Script>
              >> </mx:Canvas>
              >>
              >
              > That does help a lot thanks, but now I realise it doesn't do what I
              > intended. I am trying to set up a ViewStack and each element in the
              > main app ending up as a child of the ViewStack so:
              >
              > <eLearning:Framework frameworkWidth="800" frameworkHeight="600">
              >
              > <mx:Canvas width="100%" height="100%">
              > <mx:Text text="Hello world"/>
              > <mx:Image source="assets/menu.jpg" x="40" y="50"/>
              > </mx:Canvas>
              >
              > <mx:Canvas>
              > <mx:Image source="assets/exit.jpg" x="40" y="100"/>
              > </mx:Canvas>
              >
              > </eLearning:Framework>
              >
              > would make 2 children on the ViewStack as there are 2 Canvas components.
              > I thought my approach would work. Any ideas?
              >
              > Also, how can I then access the ViewStack (framework). I wanted to add
              > some buttons to the component for navigation but I don't seem to be able
              > to reference the ViewStack. I did expect to be able to call
              > framework.selectedIndex++ etc, but that doesn't seem to be in scope
              > either??
              >
              > Thanks for any help
              >
              > Mark

              and in fact adding this to the component after the script:

              <mx:Button click="doNavigate('Next')" x="723" y="363"/>

              Throws another error?? Error: Multiple sets of visual children have
              been specified for this component (component definition and component
              instance).

              Now I AM confused!

              Mark
              • 5. Re: creating template component
                Level 7
                peterent wrote:
                > This might be what you want:
                > http://weblogs.macromedia.com/pent/archives/2006/03/component_templ.cfm
                >
                >

                Yes, that looks very similar to what I am trying to do thanks, but I
                can't see how to customise this so that I can add multiple 'pages'
                (children) to a ViewStack.

                Mark