3 Replies Latest reply on May 9, 2009 9:18 PM by thedex1

    Image With Title

    thedex1 Level 1

      Hi, how are all of you? I wonder if it is possible to have an Image with Label or Title that display along with the Image itself as a single object.

       

      Thanks

      ...

      .:.Wahab

        • 1. Re: Image With Title
          Gregory Lafrance Level 6

          Sure. In this example the image path and caption are in an XML file, and I am putting the images in:

          1) a HorizontalList

          2) a List

          3) individual Panels using a Repeater

           

          The images I am using are in a folder "images" under the folder containing MainApp.mxml

           

          --------------- data.xml ---------------------

          <?xml version="1.0" encoding="utf-8"?>
          <photos>
              <photo>
                  <image>images/red30_30.JPG</image>
                  <caption>Red Square</caption>
              </photo>
              <photo>
                  <image>images/green30_30.JPG</image>
                  <caption>Green Square</caption>
              </photo>
              <photo>
                  <image>images/blue30_30.JPG</image>
                  <caption>Blue Square</caption>
              </photo>
              <photo>
                  <image>images/black30_30.JPG</image>
                  <caption>Black Square</caption>
              </photo>
          </photos>

           

          ------------------ MainApp.mxml ------------------------

          <?xml version="1.0"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
            creationComplete="photosRequest.send();">
            <mx:Script>
              <![CDATA[
                import mx.rpc.events.ResultEvent;
                import mx.collections.XMLListCollection;
               
                [Bindable] private var xlc:XMLListCollection;
               
                private function photosHandler(evt:ResultEvent):void{
                  xlc = new XMLListCollection(evt.result..photo); 
                }
              ]]>
            </mx:Script>
            <mx:HTTPService id="photosRequest" url="data.xml" result="photosHandler(event)"
              resultFormat="e4x"/>
            <mx:HBox width="100%" horizontalAlign="center" horizontalGap="30">
              <mx:HorizontalList dataProvider="{xlc}" rowHeight="100"
                columnWidth="100">
                <mx:itemRenderer>
                  <mx:Component>
                    <mx:VBox horizontalAlign="center" verticalAlign="middle">
                      <mx:Image source="{data.image}"/>
                      <mx:Text text="{data.caption}"/>
                    </mx:VBox>
                  </mx:Component>
                </mx:itemRenderer>
              </mx:HorizontalList>
              <mx:List dataProvider="{xlc}" rowHeight="100"
                columnWidth="100" height="405" width="110">
                <mx:itemRenderer>
                  <mx:Component>
                    <mx:VBox horizontalAlign="center" verticalAlign="middle">
                      <mx:Image source="{data.image}"/>
                      <mx:Text text="{data.caption}"/>
                    </mx:VBox>
                  </mx:Component>
                </mx:itemRenderer>
              </mx:List>
              <mx:HBox>
                <mx:Repeater id="rp" dataProvider="{xlc}">
                  <mx:Panel title="{rp.currentItem.caption}">
                    <mx:Image source="{rp.currentItem.image}"/>
                    <mx:Text text="{rp.currentItem.caption}"/>
                  </mx:Panel>   
                </mx:Repeater>
              </mx:HBox>
            </mx:HBox>
          </mx:Application>

          • 2. Re: Image With Title
            thedex1 Level 1

            Hi Thanks for the reply. But I guess I was not clear with my environment.

            Actually I am creating Image dynamically and I am using "senocular http://www.senocular.com/" wrapper class to transform any object ... in my case, an image. What actually I want is that the Image label to move along with image when user translate the image along x or y axix.

            I tried it with making custom mxml component but that didn't work.

             

            Suppose this is an image, what I want is that user selects the image with mouse click and when MOVE, the label "My Shape Label" should move also.

             

             

             

                 My Shape Label

                      ............

                      |          |

                      |          |

                      |          |

                      |          |

                      |          |

                      -----------

             

            Thanks for the help. I am also trying hard to get this resolved. I'll post here when I get it resolved so others can get help also.

             

            Thanks

            ...

            .:. WAHAB

            • 3. Re: Image With Title
              Gregory Lafrance Level 6

              Yes, you did not explain yourself sufficiently.

               

              Sorry I can't help out with this.