0 Replies Latest reply on Jun 19, 2009 2:03 PM by BeautifulDistraction

    A few questions on a TileList gallery

    BeautifulDistraction

      Hello all, I am new to this forum. I've been trying to build a gallery for my design work using a flex TileList with a custom render. I have barely any experience with flex. So far, I've gotten the code for this gallery from another site(http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tile list-control/), but I want to change a few things about the way it works. For one, I would like to have the thumbnail images that are in the TileList have a border around them (1px solid #eaeaea). I have no idea how to make this happen. I would also like to make the popup of the full size image, show the title either below or above the image. Again, I have no idea how to make this happen. Another thought (but not as important) would be that when you click on a thumbnail and the fullsize image pops up, that there could be a previous and next button on either side of the fullsize image. Does anyone have suggestions? I know it must seem crazy for me to post this, since I barely know what I am doing with this code, but I would appreciate any help I can get. Thanks!

       

      My Gallery.mxml:

       

      <?xml version="1.0" encoding="utf-8"?>
      <!-- http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tile list-control/ -->
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
              layout="vertical"
              verticalAlign="middle"
              backgroundColor="white">

       

          <mx:Style source="galleryStyle.css"/>

       

          <mx:Script>
              <![CDATA[
                  import mx.effects.Resize;
                  import mx.events.ResizeEvent;
                  import mx.events.ListEvent;
                  import mx.controls.Image;
                  import mx.events.ItemClickEvent;
                  import mx.managers.PopUpManager;

       

                  private var img:Image;

       

                  private function tileList_itemClick(evt:ListEvent):void {
                      img = new Image();
                      // img.width = 300;
                      // img.height = 300;
                      img.maintainAspectRatio = true;
                      img.addEventListener(Event.COMPLETE, image_complete);
                      img.addEventListener(ResizeEvent.RESIZE, image_resize);
                      img.addEventListener(MouseEvent.CLICK, image_click);
                      img.source = evt.itemRenderer.data.@fullImage;
                      img.setStyle("addedEffect", image_addedEffect);
                      img.setStyle("removedEffect", image_removedEffect);
                      PopUpManager.addPopUp(img, this, true);
                  }

       

                  private function image_click(evt:MouseEvent):void {
                      PopUpManager.removePopUp(evt.currentTarget as Image);
                  }

       

                  private function image_resize(evt:ResizeEvent):void {
                      PopUpManager.centerPopUp(evt.currentTarget as Image);
                  }

       

                  private function image_complete(evt:Event):void {
                      PopUpManager.centerPopUp(evt.currentTarget as Image);
                  }
              ]]>
          </mx:Script>

       

          <mx:WipeDown id="image_addedEffect" startDelay="100" />

       

          <mx:Parallel id="image_removedEffect">
              <mx:Zoom />
              <mx:Fade />
          </mx:Parallel>

       

          <mx:XML id="xml" source="assets/pem.xml" />
          <mx:XMLListCollection id="xmlListColl" source="{xml.image}" />
         
          <mx:XML id="xml2" source="assets/web.xml" /><!-- reference gallery(2) and change id -->
          <mx:XMLListCollection id="xmlListColl2" source="{xml2.image}" /> <!-- change id and value of xml(2).img (xml references mx:XML) -->
         
          <mx:XML id="xml3" source="assets/temp.xml" />
          <mx:XMLListCollection id="xmlListColl3" source="{xml3.image}" />
         
          <mx:XML id="xml4" source="assets/other.xml" />
          <mx:XMLListCollection id="xmlListColl4" source="{xml4.image}" />
         
          <mx:TabNavigator width="100%" height="100%">
              <mx:Canvas label="Peabody Essex Museum" width="100%" height="100%">
               <mx:TileList id="tileList"
                      dataProvider="{xmlListColl}"
                      itemRenderer="CustomItemRenderer"
                      rowHeight="150"
                      verticalScrollPolicy="auto"
                      itemClick="tileList_itemClick(event);"   
                      width="100%"
                      height="100%"
                      columnWidth="150"/>        
               </mx:Canvas>
              
              <mx:Canvas label="Website Work" width="100%" height="100%">
              <mx:TileList id="tileList2"
                      dataProvider="{xmlListColl2}"
                      itemRenderer="CustomItemRenderer"
                      rowHeight="150"
                      verticalScrollPolicy="auto"
                      itemClick="tileList_itemClick(event);" 
                      width="100%"
                      height="100%"
                      columnWidth="150"/>
               </mx:Canvas>
              
               <mx:Canvas label="Design Templates" width="100%" height="100%">
               <mx:TileList id="tileList3"
                  dataProvider="{xmlListColl3}"
                  itemRenderer="CustomItemRenderer"
                  rowHeight="150"
                  verticalScrollPolicy="auto"
                  itemClick="tileList_itemClick(event);"  
                  width="100%"
                  height="100%"
                  columnWidth="150"/>
               </mx:Canvas>
              
               <mx:Canvas label="OtherWork" width="100%" height="100%">
               <mx:TileList id="tileList4"
                  dataProvider="{xmlListColl4}"
                  itemRenderer="CustomItemRenderer"
                  rowHeight="150"
                  verticalScrollPolicy="auto"
                  itemClick="tileList_itemClick(event);" 
                  width="100%"
                  height="100%"
                  columnWidth="150"/>
               </mx:Canvas>
          </mx:TabNavigator>      

       

      </mx:Application>

       

      My CustomItemRenderer.mxml

       

       

      <?xml version="1.0" encoding="utf-8"?>
      <!-- http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tile list-control/ -->

       

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

       

          <mx:Image source="{data.@thumbnailImage}" />

       

          <mx:Label text="{data.@title}" 
              fontSize="12"
              fontFamily="Arial"
              fontWeight="normal"/>

       

      </mx:VBox>

       

      Example of one of my XML pages

       

      <?xml version="1.0" encoding="utf-8"?>
      <!-- http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tile list-control/ -->
      <gallery>
          <image title="WoodCarving Poster 1"
              fullImage="assets/PEM/ArtWoodcarving3.png"
              thumbnailImage="assets/PEM/Thumb/ArtWoodcarving3Thumb.png" />
             
              <image title="WoodCarving Poster 2"
              fullImage="assets/PEM/ArtWoodcarving.png"
              thumbnailImage="assets/PEM/Thumb/ArtWoodcarvingThumb.png" />
             
              <image title="WoodCarving Poster 3"
              fullImage="assets/PEM/ArtWoodcarving1.png"
              thumbnailImage="assets/PEM/Thumb/ArtWoodcarving1Thumb.png" />
             
              <image title="WoodCarving Poster 3"
              fullImage="assets/PEM/Stanchion2.png"
              thumbnailImage="assets/PEM/Thumb/Stanchion2Thumb.png" />               
      </gallery>