9 Replies Latest reply on Jan 29, 2010 11:59 AM by Dazed&Flashed

    Costum Component

    hitesh.rawat Level 1

      Hi,

       

      I created a custom component which contains a Label component to show the caption and another is an Image component which will show the picture. I want to bind the value of text and image to the xml attributes definded in the xml file.

       

      I can create the component and able to use it in my main.mxml file ......however...i'm don't know how to bind the text and image attribute of the xml file to it.......especially when i'm trying to make it random....like choosing one from 10 avaiable options.....

       

      can anybody direct me to some useful info???

        • 1. Re: Costum Component
          hitesh.rawat Level 1

          how can we bind custom components to XML data????????

          • 2. Re: Costum Component
            Gregory Lafrance Level 6

            How are you currently trying to do this? Are you populating some other control with the XML, and then executing the binding upon click?

            • 3. Re: Costum Component
              hitesh.rawat Level 1

              Hi Greg,

               

              Here's what i was doing.......

               

              I made a custom component - with one text and image component-

              __________________________________________________________________________________

              <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="200" height="200">

               

              <mx:XML id="data" source="questions.xml" xmlns=""/>

               


                  <mx:Label x="10" y="10" text="{data.questions[0].quest}" width="180" height="22"/>
                  <mx:Image x="10" y="40"
                      source="{data.questions[0].image}"
                      width="180" height="150"/>
                 
              </mx:Canvas>

              __________________________________________________________________________________

               

              then added this component to my main.mxml........

               

              <mx:Panel x="10" y="10" width="523" height="385" layout="absolute" title="Practice problem" id="panel2">
                                  <ns1:caption_image x="21" y="27">
                                  </ns1:caption_image>
                              </mx:Panel>

              __________________________________________________________________________________

               

              however when i tried to run it.......it didn't show the component on the panel........

              didn't get because if i was putting simple text and image component without using the custom component....it worked

              • 4. Re: Costum Component
                Dazed&Flashed

                try using xmlarraycollection id="xmlcol"

                 

                xmlcol = {data.image}    suppose your xml looks like <image id=1

                                                                                                          <text>text1</text>

                                                                                                             <path>axa.jpg</path> </image>

                 

                you can make a HBOX as custom component which is quite good for these type of efforts

                 

                remember to use dataprovider = {xmlcol} in HBox tag

                 

                inside that put this block provide

                 

                <mx:Label x="10" y="10" text="{data.text}" width="180" height="22"/>

                                        <mx:Image x="10" y="40"

                                            source="{data.path}"

                                            width="180" height="150"/>

                 

                now call this component in your main application you will able to see that.

                 

                For your random indexing purpose in your panel you can use Math.Random and Math.Round methods inside a function which returns an integer.Pass this in place of index but I don't know if this can be useful.

                 

                Everything is worth giving a try.

                • 5. Re: Costum Component
                  hitesh.rawat Level 1

                  thanks will be trying it .....first thing in the morning......will reply ASAP

                   

                  thanks again to all

                  • 6. Re: Costum Component
                    hitesh.rawat Level 1

                    Hi,

                     

                    Well using Array Collection is new to me so i think i'm doing something wrong here........here's the component...


                    _______________________________________________________________________________________

                     

                    <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="200" height="200" backgroundColor="white"
                        paddingBottom="3" paddingLeft="3" paddingRight="3" paddingTop="3"    >   
                       
                        <mx:Model id="data" source="Questions.xml"/>
                        <mx:ArrayCollection id="XMLCol" source="{data.questions}" />   
                       
                        <mx:Label text="{XMLCol.getItemAt(0)}" width="197" height="39" />
                        <mx:Image width="193" height="145" source="{XMLCol.getItemAt(0)}" />
                       
                    </mx:VBox>
                    ________________________________________________________________________________________

                     

                    i checked and found out that HBox doesn't have a DATAPROVIDER property

                     

                     

                    However, it's still not working........and can it be done with the XML only ...... i think i can work with that better......

                     

                    thanks

                    • 7. Re: Costum Component
                      Dazed&Flashed Level 1

                      In your main application put :-

                       

                      <mx:XML id="xml" source="gallery.xml" />
                          <mx:XMLListCollection id="xmlListColl" source="{xml.image}" />

                      <mx:VBox="tileList"
                                          dataProvider="{xmlListColl}"
                                          itemRenderer="CustomItemRenderer"
                                          columnCount="4"
                                          columnWidth="125"
                                          rowCount="2"
                                          rowHeight="100"
                                          themeColor="haloSilver"/>

                       

                      Make a CustomItemRenderer.mxml this will be your custom component:-

                       

                       

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

                      <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
                              horizontalAlign="center"
                              verticalAlign="middle" >

                       

                          <mx:Image source="{data.@thumbnailImage}" width="100%" height="100%"/>

                       

                          <mx:Label text="{data.@title}" width="100%" height="100%"/>

                       

                      </mx:VBox>

                       

                      My xml looked like:-

                       

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

                      <gallery>
                          <image title="Flex"
                              thumbnailImage="assets/stock.JPG"
                              fullImage="assets/stock.JPG" />      
                      </gallery>

                       

                      You need to use itemrenderer in your main class.

                      Modify the above code according to your need.


                                       

                      • 8. Re: Costum Component
                        hitesh.rawat Level 1

                        Error :- Cannot resolve attribute 'columnCount' for component type mx.containers.VBox.

                         

                        It gave the same error for all the attribute of VBox mentioned.

                        • 9. Re: Costum Component
                          Dazed&Flashed Level 1

                               I am sorry use horizontallist or tilelist instead that will solve atleast this problem.