3 Replies Latest reply on Aug 28, 2008 7:05 AM by Newsgroup_User

    Images

    Level 1
      Hi All,
      i have a problem regarding "How to get the image from XML file and display in DataGrid".I tried but it is not working.Can u tel me the some example regarding that.

      Here i will send my code:-
      MXML file:

      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute"
      backgroundColor="white" fontSize="12" pageTitle="InviteGuests" initialize="jason.send()">

      <mx:Text x="20" y="10" text="InviteGuests" fontSize="18"/>

      <mx:HTTPService id="jason" url="JasonFriends.xml"/>
      <mx:Panel title="SelectGuest">
      <!--Start Tabs and DataGrid for Select Guests-->
      <mx:TabNavigator>

      <mx:VBox label="Jason's Friends">
      <mx:DataGrid id="select" dataProvider="{jason.lastResult.inviteguests.contact}">
      <mx:columns>

      <mx:DataGridColumn dataField="name" headerText="Name"/>
      <mx:DataGridColumn dataField="email" headerText="Email" width="80"/>
      <mx:DataGridColumn dataField="phno" headerText="SMS" width="80"/>
      <mx:DataGridColumn dataField="phno" headerText="Call" width="80"/>
      <mx:DataGridColumn dataField="evite" headerText="eVite" width="80"/>
      </mx:columns>
      </mx:DataGrid>
      </mx:VBox>
      </mx:TabNavigator>
      <mx:HBox>
      <mx:Button label="Add Guest"/>
      <mx:Button label="Guest Status" click="guestStatus()"/>
      <mx:Button label="Send Invite"/>
      </mx:HBox>

      </mx:Panel>
      </mx:Application>

      and XML file

      <?xml version="1.0" encoding="UTF-8"?>
      <inviteguests>
      <contact>
      <photo>images/Johny.jpg</photo>
      <name>Bharath</name>
      <email>ekumar@edinc.in</email>
      <phno>9739450243</phno>
      <evite>""</evite>
      </contact>
      <contact>
      <photo>images/Jacques.jpg</photo>
      <name>Sankar</name>
      <email>shankar@edinc.in</email>
      <phno>9916712975</phno>
      <evite>""</evite>
      </contact>
      <contact>
      <photo>images/Venkat.jpg</photo>
      <name>Narayana</name>
      <email>narayana@edinc.in</email>
      <phno>9886183200</phno>
      <evite>""</evite>
      </contact>
      <contact>
      <photo>images/images2.jpg</photo>
      <name>Rakesh</name>
      <email>rakesh@edinc.in</email>
      <phno>9986374341</phno>
      <evite>""</evite>
      </contact>
      </inviteguests>

      Thanks & Regards
      edeewan
        • 1. Re: Images
          Ventis85 Level 1
          You didn't make a field yet for your image.

          Within the columns tags add another DataGridColumn tag, like so:

          <mx:DataGridColumn headerText="Photo">
          <mx:itemRenderer>
          <mx:Component>
          <mx:Image
          source="{outerDocument.data.photo}"/>
          </mx:Component>
          </mx:itemRenderer>
          </mx:DataGridColumn >

          I think this should work. Its better practice however to make an external itemRenderer than an inline.

          Make a new component, photoRenderer.mxml for example
          Base it on an HBox for example and add Image tags.

          Your component should look like this:

          <mx:HBox xmlns:mx=" http://www.adobe.com/2006/mxml" verticalScrollPolicy="off" horizontalScrollPolicy="off">
          <mx:Image source="{data.photo}"/>
          </mx:HBox>

          Save, then in your main application file or component in the datagrid add:

          <mx:DataGridColumn headerText="Photo" itemRenderer="photoRenderer">
          • 2. Re: Images
            Level 7

            "edeewan" <webforumsuser@macromedia.com> wrote in message
            news:g962iq$i6b$1@forums.macromedia.com...
            > Hi All,
            > i have a problem regarding "How to get the image from XML file
            > and
            > display in DataGrid".I tried but it is not working.Can u tel me the some
            > example regarding that.

            Try using an Image control as an itemRenderer in one of the columns.

            HTH;

            Amy


            • 3. Re: Images
              Level 7

              "Ventis85" <webforumsuser@macromedia.com> wrote in message
              news:g965td$lec$1@forums.macromedia.com...
              > You didn't make a field yet for your image.
              >
              > Within the columns tags add another DataGridColumn tag, like so:
              >
              > <mx:DataGridColumn headerText="Photo">
              > <mx:itemRenderer>
              > <mx:Component>
              > <mx:Image
              > source="{outerDocument.data.photo}"/>
              > </mx:Component>
              > </mx:itemRenderer>
              > </mx:DataGridColumn >
              >
              > I think this should work. Its better practice however to make an external
              > itemRenderer than an inline.
              >
              > Make a new component, photoRenderer.mxml for example
              > Base it on an HBox for example and add Image tags.
              >
              > Your component should look like this:
              >
              > <mx:HBox xmlns:mx=" http://www.adobe.com/2006/mxml"
              > verticalScrollPolicy="off"
              > horizontalScrollPolicy="off">
              > <mx:Image source="{data.photo}"/>
              > </mx:HBox>
              >
              > Save, then in your main application file or component in the datagrid add:
              >
              > <mx:DataGridColumn headerText="Photo" itemRenderer="photoRenderer">

              You can use images directly as drop in item renderers.

              So

              <mx:DataGridColumn headerText="Photo" dataField="photo"
              itemRenderer="mx.controls.Image" />

              HTH;

              Amy