3 Replies Latest reply on Jan 20, 2010 8:12 AM by jimmyoneshot

    Using HTML component Images within a tilelist

    jimmyoneshot Level 1

      I have a very complicated problem and I'm not sure it's even within my ability to achieve if at all but basically in my AIR application I currently have a tilelist populated by a data provider of images which are essentially thumbnail snapshots I've made of websites. When each of these images is clicked within the tilelist they take the user to that specific site. I now however want these images to be live i.e. they change as the site changes.

       

      I've decided to use html components for all of these sites to get these images but I now want these images to be set up as a dataprovider for a tilelist. It's hard to explain so to show what I mean I've made the following code. Basically I want the 2 images/displays that are displayed within the 2 html components to be static i.e. the user can't interact with the sites through them but can simply click on them to go to the site and to be put within a dataprovider somehow that will act as the dataprovider for the imageDisplay tilelist Complicated I know but the guy I'm making the app for wants the images of sites to update themselves and this is the easiest way to do it I've heard :-

       

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

      <mx:WindowedApplication

       

       

      xmlns:mx="http://www.adobe.com/2006/mxml">

       

       

      <mx:Canvas width="100%" height="100%">

       

       

      <mx:HTML id="content1" location="http://www.adobe.com/" width="300" height="300"/>

       

       

      <mx:HTML id="content2" location="http://www.google.com/" x="308" width="300" height="300"/>

       

      <mx:TileList x="0" y="308" width="772" height="300" id="imageDisplay"></mx:TileList>

       

       

      </mx:Canvas>

       

      </mx:WindowedApplication>

        • 1. Re: Using HTML component Images within a tilelist
          msakrejda Level 4

          Don't use TileList--use Tile. Tile is like Canvas (in that it lays out child UI components), but with TileList-like layout. To prevent interactivity you may need to overlay the HTML components each with an unclickable, transparent Canvas.

          1 person found this helpful
          • 2. Re: Using HTML component Images within a tilelist
            jimmyoneshot Level 1

            Yep but it's getting those images into the tilelist/tile by assigning them to a dataprovider that seems tricky. I'll then need to set this dataprovider as the dataprovider of the tile. I assume you mean once the tile is populated by the html images to place a transparent layer over it with clickable sections on which will link to each site? The only problem with this is in my full app I have a lot of sites so users need to scroll up and down the tile/tilelist.

            • 3. Re: Using HTML component Images within a tilelist
              jimmyoneshot Level 1

              To show you what I mean better here is a partial bit of my code from my existing app in which I've just used static images in the tilelists. The real app is much more advanced but this is to just give you an idea. Users can drag site icons displayed in a tilelist into their own tilelist and then click the save button so these icons will still be in their tilelist when they restart the app. I used the shared object method for this to get it to save these details. As you can see in my code starting at around line 33 I've used an array collection for this. What I need is to somehow get these html live images into that array collection as opposed to the static jpgs I have at the moment.

               

               

               

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

              <mx:WindowedApplication

               

              xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initprofile1NewsAndSportSO();">

               

               

              <mx:Script>

              <![CDATA[

               

              [

              Bindable]

              [

              Embed(source="assets/images/bbcnews_small.png")]

               

              public var image5:Class;

               

              [

              Bindable]

              [

              Embed(source="assets/images/itv_small.png")]

               

              public var image7:Class;

               

              [

              Bindable]

              [

              Embed(source="assets/images/skynews_small.png")]

               

              public var image10:Class;

               

              ]]>

               

              </mx:Script>

               

               

              <mx:Script>

              <![CDATA[

               

              private function profile1NewsAndSportAddButtonClickHandler():void{

               

              for each(var a:uint in profile1NewsAndSportAddLinksTilelist.selectedIndices){

               

              if(profile1NewsAndSportLinkChoice.dataProvider != null){

               

              if(!ArrayCollection(profile1NewsAndSportLinkChoice.dataProvider).contains(ArrayCollection(pr ofile1NewsAndSportAddLinksTilelist.dataProvider).getItemAt(a))){

              ArrayCollection(profile1NewsAndSportLinkChoice.dataProvider).addItem(ArrayCollection(profi le1NewsAndSportAddLinksTilelist.dataProvider).getItemAt(a));

              ArrayCollection(profile1NewsAndSportAddLinksTilelist.dataProvider).removeItemAt (a);

              }

              }

              else{

              profile1NewsAndSportLinkChoice.dataProvider.addItem(ArrayCollection(profile1NewsAndSportAd dLinksTilelist.dataProvider).getItemAt(a));

              ArrayCollection(profile1NewsAndSportAddLinksTilelist.dataProvider).removeItemAt(a);

              }

              }

              }

               

              private function profile1NewsAndSportRemoveButtonClickHandler():void{

               

              for each(var a:uint in profile1NewsAndSportLinkChoice.selectedIndices){

              ArrayCollection(profile1NewsAndSportAddLinksTilelist.dataProvider).addItem(ArrayCollection (profile1NewsAndSportLinkChoice.dataProvider).getItemAt(a));

              ArrayCollection(profile1NewsAndSportLinkChoice.dataProvider).removeItemAt(a);

              }

              }

              ]]>

               

              </mx:Script>

               

               

              <mx:Script>

              <![CDATA[

               

              import mx.collections.*;

               

              import flash.net.SharedObject;

               

              public var profile1NewsAndSportSO:SharedObject;

               

              private var profile1NewsAndSportaddLinksFullAC:ArrayCollection = new ArrayCollection([

              {link:

              "www.bbcnews.com", label:"BBC News", icon:"image7", largeImage:"assets/images/bbcnews_small.png", title:"BBC News", description:"BBC News description will go here"},

              {link:

              "www.itv.com/", label:"ITV", icon:"image5", largeImage:"assets/images/itv_small.png", title:"ITV", description:"ITV Description will go here"},

              {link:

              "www.skynews.com", label:"Sky News", icon:"image10", largeImage:"assets/images/skynews_small.png", title:"Sky News", description:"Sky News Description will go here"}

              ]);

               

               

              private var profile1NewsAndSportaddLinksAC:ArrayCollection = new ArrayCollection([

              {link:

              "www.bbcnews.com", label:"BBC News"},

              {link:

              "www.itv.com/", label:"ITV"},

              {link:

              "www.skynews.com", label:"Sky News"}

              ]);

               

              private function profile1NewsAndSportReset():void{

              resetprofile1NewsAndSportAC();

              profile1NewsAndSportAddLinksTilelist.dataProvider

              = profile1NewsAndSportaddLinksAC;

              profile1NewsAndSportLinkChoice.dataProvider =

              new ArrayCollection([]);

              }

               

               

              private function resetprofile1NewsAndSportAC():void{

              profile1NewsAndSportaddLinksAC.removeAll();

               

              for each(var obj:Object in profile1NewsAndSportaddLinksFullAC){

              profile1NewsAndSportaddLinksAC.addItem(obj);

              }

              }

               

               

              private function initprofile1NewsAndSportSO():void{

              profile1NewsAndSportLinkChoice.dataProvider =

              new ArrayCollection();

              profile1NewsAndSportAddLinksTilelist.dataProvider =

              new ArrayCollection();

              profile1NewsAndSportSO = SharedObject.getLocal(

              "profile1NewsAndSport");

               

              if(profile1NewsAndSportSO.size > 0){

               

              if(profile1NewsAndSportSO.data.profile1NewsAndSportaddList){

               

              if(profile1NewsAndSportSO.data.profile1NewsAndSportaddList != "empty"){

               

              var profile1NewsAndSportaddList:Array = profile1NewsAndSportSO.data.profile1NewsAndSportaddList.split(",");

               

              var profile1NewsAndSporttempAC1:ArrayCollection = new ArrayCollection();

               

              for each(var str:String in profile1NewsAndSportaddList){

               

              for each(var obj1:Object in profile1NewsAndSportaddLinksAC){

               

              if(str == obj1.label){

              profile1NewsAndSporttempAC1.addItem(obj1);

               

              continue;

              }

              }

              }

               

              if(profile1NewsAndSporttempAC1.length > 0){

              profile1NewsAndSportAddLinksTilelist.dataProvider = profile1NewsAndSporttempAC1;

              }

              }

              }

               

              if(profile1NewsAndSportSO.data.profile1NewsAndSportchoiceList){

               

              var profile1NewsAndSportchoiceList:Array = profile1NewsAndSportSO.data.profile1NewsAndSportchoiceList.split(",");

               

              var profile1NewsAndSporttempAC2:ArrayCollection = new ArrayCollection();

               

              for each(var str2:String in profile1NewsAndSportchoiceList){

               

              for each(var obj2:Object in profile1NewsAndSportaddLinksAC){

               

              if(str2 == obj2.label){

              profile1NewsAndSporttempAC2.addItem(obj2);

               

              continue;

              }

              }

              }

               

              if(profile1NewsAndSporttempAC2.length > 0){

              profile1NewsAndSportLinkChoice.dataProvider = profile1NewsAndSporttempAC2;

              }

              }

              }

              else{

              profile1NewsAndSportReset();

              }

              }

               

              private function saveprofile1NewsAndSport(event:MouseEvent):void{

               

              var profile1NewsAndSportaddList:String = "";

               

              if(profile1NewsAndSportAddLinksTilelist.dataProvider){

               

              if(ArrayCollection(profile1NewsAndSportAddLinksTilelist.dataProvider).length > 0){

               

              for each(var obj1:Object in

              profile1NewsAndSportAddLinksTilelist.dataProvider){

              profile1NewsAndSportaddList += obj1.label +

              ",";

              }

              }

              else{

              profile1NewsAndSportaddList =

              "empty";

              }

              }

              profile1NewsAndSportSO.data.profile1NewsAndSportaddList = profile1NewsAndSportaddList;

               

              var profile1NewsAndSportchoiceList:String = "";

               

              for each(var obj2:Object in

              profile1NewsAndSportLinkChoice.dataProvider){

              profile1NewsAndSportchoiceList += obj2.label +

              ",";

              }

              profile1NewsAndSportSO.data.profile1NewsAndSportchoiceList = profile1NewsAndSportchoiceList;

              profile1NewsAndSportSO.flush();

              }

              ]]>

               

              </mx:Script>

               

              <mx:Button click="profile1NewsAndSportReset()" id="reset"

              label="

              Reset" y="5" height="25" x="5"/>

               

              <mx:TileList id="profile1NewsAndSportLinkChoice" fontWeight="bold"

              dragEnabled="

              true" dragMoveEnabled="true" dropEnabled="true" height="129"

              width="

              650" top="10" left="519" columnCount="5" rowHeight="145"

              columnWidth="

              125" backgroundColor="#000000" color="#FFFFFF"

              creationComplete="profile1NewsAndSportLinkChoice.selectedIndex=0"

              />

               

              <mx:TileList id="profile1NewsAndSportAddLinksTilelist" fontWeight="bold"

              dragEnabled="

              true" dragMoveEnabled="true" dropEnabled="true" height="129"

              width="

              385" top="10" left="126" columnCount="3" rowHeight="145" columnWidth="125"

              backgroundColor="

              #000000" color="#FFFFFF"

              creationComplete="profile1NewsAndSportAddLinksTilelist.selectedIndex=0"

              />

               

              <mx:Button click="saveprofile1NewsAndSport(event)" id="save" label="Save Changes"

              x="

              5" y="38" width="113" height="25.5"/>

               

              <mx:Button x="126" y="147" label="Add" id="profile1NewsAndSportAddSelectedLinkButton" click="profile1NewsAndSportAddButtonClickHandler()"/>

               

              <mx:Button x="519" y="147" label="Remove" id="profile1NewsAndSportRemoveSelectedLinkButton" click="profile1NewsAndSportRemoveButtonClickHandler()"/>

               

              </mx:WindowedApplication>