8 Replies Latest reply on Sep 21, 2010 6:39 AM by flexillu10

    Which method for displaying my image thumbnail should i choose?

    flexillu10

      I have a mySql database with some numerous records one for each of my images. One of the data fields is thumbnail url: i want to to display all the thumbnails on the screen.

       

      Is it best to do A or B:

       

      A

       

      Use a datagrid and make a custom renderer to display each image

       

      or B

       

      get all the data into an array, loop through and display the thumbnails on the screen.

       

      any advice is appreciated, i have already got the thumbnail url string to appear in the data grid, but how do i get the actual thumbnail to appear instead?

        • 1. Re: Which method for displaying my image thumbnail should i choose?
          krafttimd Level 2

          One solution might be to use a TileList of Images. The Image Object has a source propety which you would set to your thumbnail url.

           

          T.K.

          1 person found this helpful
          • 2. Re: Which method for displaying my image thumbnail should i choose?
            flexillu10 Level 1

            krafttimd wrote:

             

            One solution might be to use a TileList of Images. The Image Object has a source propety which you would set to your thumbnail url.

             

            T.K.

             

            thanks that's helpful. So would i have to loop through each tile and set the thumbnail?

            • 3. Re: Which method for displaying my image thumbnail should i choose?
              krafttimd Level 2

              Your TileList might look like this:

                  <mx:TileList id="images" height="400"  width="400"  maxColumns="10" rowHeight="40" columnWidth="40"  dataProvider="{_myImages}"/>

               

              Then in a script block you might have a function like this:

               

                      private function setImages(thumbnailURLs:ArrayCollection) : void {

                             var ac:ArrayCollection =new ArrayColleciton();
                          for each ( var URL:String in thumbnailURLs) {
                              var image:Image = new Image();
                              image.source = URL;

                               ac.addItem(image); 
                          }

                             _myImages = ac;
                      }

               

              with a variable like this:

               

                      [Bindable]
                      private var _myImages:ArrayCollection = new ArrayCollection();

               

              Hope this helps,

              T.K.

              • 4. Re: Which method for displaying my image thumbnail should i choose?
                flexillu10 Level 1

                i have tried your method but the images do not display

                 

                the tile list just displays "image46" image"47" as text.

                 

                Any ideas anyone?

                • 5. Re: Which method for displaying my image thumbnail should i choose?
                  Flex harUI Adobe Employee

                  Create a custom renderer.  If all of the thumbnails are 48x48, then

                      <mx:Image width="48" height="48" />

                   

                  Should work.  The problem gets much harder if the images are not all the

                  same size.

                  • 6. Re: Which method for displaying my image thumbnail should i choose?
                    flexillu10 Level 1

                    Flex harUI wrote:

                     

                    Create a custom renderer.  If all of the thumbnails are 48x48, then

                        <mx:Image width="48" height="48" />

                     

                    Should work.  The problem gets much harder if the images are not all the

                    same size.

                    i can't get at the data, the tile list just shows lots of objects, can anyone give me more info on how to create a custom renderer, when i do i get the following error:

                     

                    : Error #1034: Type Coercion failed: cannot convert thumbrenderer@af6f479 to mx.controls.listClasses.IListItemRenderer.

                    • 7. Re: Which method for displaying my image thumbnail should i choose?
                      krafttimd Level 2

                      flexillu10, here is an image renderer(RequestReportStatusImageRenderer.mxml) that I currently use. It has a some code that will not be of intrest to you, However, it is a working image renderer that varies the image based on the data. Please excuse my coding conventions...

                       

                      <?xml version="1.0"?>
                      <mx:HBox show="reset(event)"
                                  hide="_unregister(event)"
                                  removedFromStage="_unregister(event)"
                                  width="100%"
                                  horizontalAlign="center"
                               horizontalScrollPolicy="off"
                               xmlns:mx="http://www.adobe.com/2006/mxml"
                               implements="mx.controls.listClasses.IDropInListItemRenderer,
                               com.datasltn.groupmanagement.view.requestreport.IReportPollingStatusChange">
                          <mx:Script>
                              <![CDATA[
                              import com.datasltn.groupmanagement.constants.CommonConstants;
                              import com.datasltn.groupmanagement.model.*;
                              import com.datasltn.groupmanagement.util.GlobalUtil;
                              import com.datasltn.groupmanagement.view.reportmanagement.ReportPollingManager;
                              import com.datasltn.groupmanagement.vo.*;

                       

                              import mx.controls.*;
                              import mx.controls.dataGridClasses.DataGridListData;
                              import mx.controls.listClasses.*;
                              import mx.utils.ObjectUtil;

                       

                              protected var _listData:DataGridListData;

                       


                              public function statusChanged(reportVO:ReportVO):void {
                                  unregister(RequestReportOptions(data).reportKey);
                                  data = reportVO.getReportRequestOptions(RequestReportOptions(data).getReportOptionVO());
                              }

                       

                              override public function set data(value:Object):void {
                                  if (!value) {
                                      return;
                                  }
                                  if (value is RequestReportOptions) {
                                      super.data = value;
                                  } else if (_listData.dataField) {
                                      super.data = value[_listData.dataField];
                                  }
                                  this.removeAllChildren();
                                  unregister(RequestReportOptions(data).reportKey);

                       

                                  var imgModel:ImageModel = ImageModel.getInstance();
                                  if (data.reportURL) {
                                      if (data.format.toUpperCase().indexOf("XLS") > -1 || data.format.toUpperCase().indexOf("EXCEL") > -1) {
                                          this.addChild(getIcon(imgModel.excel));
                                      }
                                      if (data.format.toUpperCase().indexOf("PDF") > -1) {
                                          this.addChild(getIcon(imgModel.pdf_small));
                                      }
                                  } else if (data.status == CommonConstants.UNSCHEDULED) {
                                      this.addChild(getIcon(imgModel.unlocked));
                                  } else if (data.status == CommonConstants.UNSUPPORTED) {
                                      this.addChild(getIcon(imgModel.blank));
                                  } else if (data.status == CommonConstants.ERROR) {
                                      this.addChild(getIcon(imgModel.locked));
                                  } else {
                                      this.addChild(getProgressBar());
                                      register(RequestReportOptions(data).reportKey);
                                  }
                              }

                       

                              private function getProgressBar():ProgressBar {
                                  var bar:ProgressBar = new ProgressBar();
                                  bar.height = this.height == 0 ? 22 : this.height;
                                  bar.width = this.width == 0 ? 100 : this.width;
                                  bar.labelPlacement = "center";
                                  bar.indeterminate = true;
                                  bar.setStyle("trackHeight", 16);
                                  bar.setStyle("borderColor", "#000080");
                                  bar.setStyle("fontSize", 10);
                                  return bar;
                              }

                       


                              public function get listData():BaseListData {
                                  return _listData;
                              }

                       

                              public function set listData(value:BaseListData):void {
                                  _listData = DataGridListData(value);
                              }

                       

                              private function handleImgClick(event:MouseEvent):void {
                                  if (dataHasReportURL()) {
                                      navigateToURL(new URLRequest(data.reportURL))
                                  }
                              }

                       

                              private function dataHasReportURL():Boolean {
                                  return !GlobalUtil.stringIsNullOrBlank(data.reportURL);
                              }

                       

                              private function navToReportJob(event:MouseEvent):void {
                                  //todo needs to happen only for scheduled report....
                                  var rqst:URLRequest
                                          = new URLRequest("/wss/ad_report_job_info.cfm?QRJ=" + data.jobKey);
                                  navigateToURL(rqst, "_blank");
                              }

                       

                              private function getIcon(source:Object):Image {
                                  var icon:Image = new Image();
                                  icon.focusEnabled = true;
                                  icon.id = "myIcon";
                                  icon.width = 20;
                                  icon.source = source;
                                  icon.addEventListener(MouseEvent.CLICK, handleImgClick);
                                  icon.toolTip = (
                                          dataHasReportURL()
                                          ) ? "Click to view report" : null;

                       

                                  return icon;
                              }

                       

                              public function register(reportKey:String):void {
                                  var reportVO:ReportVO = getReport(reportKey);
                                  var pollingManager:ReportPollingManager = ReportPollingManager.getInstance();
                                  if (!reportVO) {
                                      pollingManager.unregister(reportKey, this);
                                  } else {
                                      pollingManager.register(reportVO, this);
                                  }
                              }

                       

                              public function unregister(reportKey:String):void {
                                  var pollingManager:ReportPollingManager = ReportPollingManager.getInstance();
                                  pollingManager.unregister(reportKey, this);
                              }

                       

                              private function reset(event:Event):void {
                                  if (!(
                                          data.reportURL
                                                  || data.status == CommonConstants.UNSCHEDULED
                                                  || data.status == CommonConstants.UNSUPPORTED
                                                  || data.status == CommonConstants.ERROR
                                          )) {
                                      register(RequestReportOptions(data).reportKey);
                                  }
                              }

                       

                              private function _unregister(event:Event):void {
                                  unregister(data.reportKey);
                              }

                       

                              private function getReport(reportKey:String):ReportVO {
                                  var erModel:ExistingReportsModel = ExistingReportsModel.getInstance();
                                  return erModel.getReportVO(reportKey);
                              }
                              ]]>
                          </mx:Script>
                      </mx:HBox>

                       

                      Here is an example of where I use it in a data grid:

                       

                                      <mx:DataGridColumn id="dfltLangCol" headerText="{model.configVO.rptLangDefault.toUpperCase()}"
                                                         resizable="false"
                                                         width="66"
                                                         minWidth="66"
                                                         visible="{model.configVO.rptLangDefault.toUpperCase() != model.configVO.rptProcessPersonLangPref.toUpperCase()}"
                                                         dataField="defaultReportRequestOptionsForDefaultRenderFormat"
                                                         itemRenderer="com.datasltn.groupmanagement.view.requestreport.RequestReportStatusImageRen derer"/>

                       

                       

                      Hope this helps,

                      T.K.

                      • 8. Re: Which method for displaying my image thumbnail should i choose?
                        flexillu10 Level 1

                        Ha thanks, i was hoping for something a little less complicated!

                         

                        in my main application i have a list with a tilelayout property and a databinding to an arrayCollection.

                         

                        This arrayCollection stores a number of entries with an id, imageurl, thumburl.

                         

                        I just dont know what to put in my item renderer to display the thumbnail url as an image