2 Replies Latest reply on May 4, 2011 8:22 AM by Scaljeri

    reuse a MXML component

    Scaljeri

      Hi All

       

      I have setup (not complete yet) a mxml component (see code below), which I want to implementhe multiple times in s:Application.

      Within the s:Script tag (currently empty) I want to reference the VideoDisplay, Buttons, etc. To do this I use the ID, but the problem is that I need to implement this component multiple times ? An other problem is that each instance should have a different video url. Any suggestions ?

       

      Cheers

       

       

       

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

      <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"

      xmlns:s="library://ns.adobe.com/flex/spark"

      xmlns:mx="library://ns.adobe.com/flex/mx">

      <s:layout>

      <s:BasicLayout/>

      </s:layout>

      <fx:Declarations>

      <!-- Place non-visual elements (e.g., services, value objects) here -->

      </fx:Declarations>

       

      <fx:Script>

      <![CDATA[

       

      ]]>

      </fx:Script>

       

      <mx:DateFormatter id="dateFormatter" formatString="NN:SS" />

      <mx:Panel title="{videoDisplay.source.split('/').pop()} ({videoDisplay.state})">

      <mx:VideoDisplay id="videoDisplay" visible="false" width="400" height="100"

      playheadUpdate="videoDisplay_playheadUpdate('')"

      ready="videoDisplay_ready('')"

      rewind="videoDisplay.play()"

      source="./Android_Demo.flv" />

      <mx:ControlBar id="controlBar" visible="false">

      <mx:Button id="play" name="play" label="Play" click="videoDisplay.play()"></mx:Button>

      <mx:Button id="pause" name="pause" label="Pause" click="videoDisplay.pause()"></mx:Button>

      <mx:HSlider id="slider" width="100%"

      allowTrackClick="false"

      invertThumbDirection="true"

      liveDragging="false"

      maximum="{videoDisplay.totalTime}"

      minimum="0"

      thumbPress="slider_thumbPress('')"

      thumbRelease="slider_thumbRelease('')"

      tickInterval="1"

      value="{videoDisplay.playheadTime}" />

      <mx:Label id="timeLabel" textAlign="right" />

      </mx:ControlBar>

      </mx:Panel>

       

      </s:Group>

        • 1. Re: reuse a MXML component
          David_F57 Level 5

          Hi,

           

          You just create bindable vars(public) in the component, then you can reference them as a component property, this property can be any type string,int, array etc....

           

          David

           

          simple app using the same component twice

           

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

          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

             xmlns:s="library://ns.adobe.com/flex/spark"

             xmlns:mx="library://ns.adobe.com/flex/mx"

             xmlns:components="components.*"

             minWidth="955" minHeight="600">

          <fx:Declarations>

          <!-- Place non-visual elements (e.g., services, value objects) here -->

          </fx:Declarations>

          <components:MyComponent x="45" y="161" caption="Hello World" icon="img1.jpg" description="picture 1">

          </components:MyComponent>

          <components:MyComponent x="479" y="161" caption="Another Component" icon="img2.jpg" description="picture 2">

          </components:MyComponent>

          </s:Application>

           

          the simple component -

           

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

          <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"

          xmlns:s="library://ns.adobe.com/flex/spark"

          xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">

          <fx:Declarations>

          <!-- Place non-visual elements (e.g., services, value objects) here -->

          </fx:Declarations>

          <fx:Script>

          <![CDATA[

          [Bindable] public var caption:String;

          [Bindable] public var icon:String;

          [Bindable] public var description:String;

          ]]>

          </fx:Script>

          <s:Panel left="0" right="0" top="0" bottom="0" title="{caption}">

          <s:VGroup verticalCenter="0" horizontalCenter="0">

          <s:Image width="140" height="140" horizontalCenter="0" source="{icon}"/>

          <s:Label text="{description}" width="100%" textAlign="center"/>

          </s:VGroup>

          </s:Panel>

          </s:Group>

          1 person found this helpful
          • 2. Re: reuse a MXML component
            Scaljeri Level 1

            thanks a lot!!

             

            cheers