5 Replies Latest reply on May 27, 2009 8:49 PM by cjdierkens@gmail.com

    Image gallery issues...

    cjdierkens@gmail.com Level 1

      This image gallery uses the HTTPService control to populate an array which is then used to populate thumbnails and a full image however it does not display properly on the first load. Thumbnails do show up upon a refresh but are not very consistant. I could really use some suggestions on how to make this gallery more stable and support all browsers.

       

      Here is the link to the site

      http://www.michael-willett.com/test/newwork.html

       

      and the source

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

       

      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
              layout="vertical"
              verticalAlign="top"
              backgroundColor="black" viewSourceURL="srcview/index.html"
              preinitialize="preInit()"
              backgroundAlpha="0"
              color="white" >

       

          <mx:Script>
              <![CDATA[
                  import mx.collections.XMLListCollection;
                  import mx.rpc.events.FaultEvent;
                  import mx.rpc.events.ResultEvent;
                  import mx.controls.Alert;
             
                  [Bindable]private var xmlListCol:XMLListCollection = new XMLListCollection;
                  [Bindable]private var imageArray:Array = new Array;
             
                  private function preInit():void {
                  xmlService.send();       
                  }
                 
                  private function xmlHandler(event:ResultEvent):void {
                      var xmlList:XMLList = event.result.image;
                      xmlListCol.source = xmlList;
                      for each (var image:XML in xmlListCol){
                          var myOBJ:Object = new Object;
                          myOBJ.label = image.picDescription.text();
                          myOBJ.thumbnailImage = image.url.text();
                          myOBJ.fullImage = image.big_url.text();
                         
                          imageArray.push(myOBJ);           
                      }
                     
                  }
                 
                  private function complete():void {
                     
                  }
                 
                  private function xmlLoadFault(event:FaultEvent):void {
                      Alert.show("Could not load XML file");
                  }
              ]]>
          </mx:Script>

       

          <mx:HTTPService id="xmlService"
              url="data/newwork.xml"
              resultFormat="e4x"
              result="xmlHandler(event)"
              fault="xmlLoadFault(event)"
              showBusyCursor="true" />

       

          <mx:Panel title="{horizontalList.selectedItem.label}"
                  height="100%"
                  horizontalAlign="center"
                  backgroundColor="#CCCCCC"
                  backgroundAlpha="0"
                  borderColor="#CCCCCC" >
              <mx:Image id="img"
                      source="{horizontalList.selectedItem.fullImage}"
                      maintainAspectRatio="true"
                      horizontalAlign="center"
                      verticalAlign="middle"
                      width="{horizontalList.width}"
                      height="100%"
                      />
              <mx:ControlBar horizontalAlign="center">
                  <mx:HorizontalList id="horizontalList"
                          labelField="label"
                          iconField="thumbnailImage"
                          dataProvider="{imageArray}"
                          itemRenderer="CustomItemRenderer"
                          columnCount="5"
                          columnWidth="125"
                          rowCount="1"
                          rowHeight="125"
                          selectedIndex="0"
                          horizontalScrollPolicy="on"
                          backgroundAlpha="0" />
              </mx:ControlBar>
          </mx:Panel>

       

      </mx:Application>

        • 1. Re: Image gallery issues...
          Michael Borbor Level 4

          You're making your app, more complex than it should be. If you use XML than just use an XMLListCollection,

          1 person found this helpful
          • 2. Re: Image gallery issues...
            cjdierkens@gmail.com Level 1

            I updated the source  following your suggestion and it does seam to be working better. Is there any other things I could change to make it load more smoothly?

             

             

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

             

            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                    layout="vertical"
                    verticalAlign="top"
                    backgroundColor="black" viewSourceURL="srcview/index.html"
                    preinitialize="preInit()"
                    backgroundAlpha="0"
                    color="white" >

             

                <mx:Script>
                    <![CDATA[
                        import mx.collections.XMLListCollection;
                        import mx.rpc.events.FaultEvent;
                        import mx.rpc.events.ResultEvent;
                        import mx.controls.Alert;
                   
                        [Bindable]private var xmlListCol:XMLListCollection = new XMLListCollection();

             

                   
                        private function preInit():void {
                        xmlService.send();       
                        }
                       
                        private function xmlHandler(event:ResultEvent):void {
                            var xmlList:XMLList = event.result.image;
                            xmlListCol.source = xmlList;               
                        }

                                  
                        private function xmlLoadFault(event:FaultEvent):void {
                            Alert.show("Could not load XML file");
                        }
                    ]]>
                </mx:Script>

             

                <mx:HTTPService id="xmlService"
                    url="data/newwork.xml"
                    resultFormat="e4x"
                    result="xmlHandler(event)"
                    fault="xmlLoadFault(event)"
                    showBusyCursor="true" />

             

                <mx:Panel title="{horizontalList.selectedItem.picDescription.text()}"
                        height="100%"
                        horizontalAlign="center"
                        backgroundColor="#CCCCCC"
                        backgroundAlpha="0"
                        borderColor="#CCCCCC" >
                    <mx:Image id="img"
                            source="{horizontalList.selectedItem.big_url.text()}"
                            maintainAspectRatio="true"
                            horizontalAlign="center"
                            verticalAlign="middle"
                            width="{horizontalList.width}"
                            height="100%"
                            />
                    <mx:ControlBar horizontalAlign="center">
                        <mx:HorizontalList id="horizontalList"
                                labelField="label"
                                iconField="thumbnailImage"
                                dataProvider="{xmlListCol}"
                                itemRenderer="CustomItemRenderer"
                                columnCount="5"
                                columnWidth="125"
                                rowCount="1"
                                rowHeight="125"
                                selectedIndex="0"
                                horizontalScrollPolicy="on"
                                backgroundAlpha="0" />
                    </mx:ControlBar>
                </mx:Panel>

             

            </mx:Application>

            • 3. Re: Image gallery issues...
              Michael Borbor Level 4

              Well you probably know this, in case you don't Flash Player  works asynchronously so probably your app will load first and a few secs, millisecs depending on your bandwith, so probably if you want to create an smoother app, you'll use a loader to control when the images are loaded, use a transition to create a visual effect showing that something has changed, or a ProgressBar to indicate that something is being load. A good place to see all this will be TourDeFlex, lots of examples and code.

              • 4. Re: Image gallery issues...
                cjdierkens@gmail.com Level 1

                So there isn't much more I can do to streamline the code itself. But, I should give it more user interaction and response.

                • 5. Re: Image gallery issues...
                  Michael Borbor Level 4

                  Yep, the user always needs feedback.