mx:TileList image and text in same line

Hello,

Is it possible to put images and icons of every cell in one line??  By defult in every cell of TileList icon is shown on top and text below. I need it in one line...

Tnx!
DidicaAsked:
Who is Participating?
 
lexxwernConnect With a Mentor Commented:
Hi,
Try the code attached below. You will see the creation of a custom itemRenderer with the HBox container used.

<?xml version="1.0"?>
<!-- Simple example to demonstrate the TileList Control. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 
    <mx:Script>
        <![CDATA[
             
             [Bindable]
             [Embed(source="assets/1.jpg")]
             public var phone1:Class;
             
             [Bindable]
             [Embed(source="assets/2.jpg")]
             public var phone2:Class;
             
             [Bindable]
             [Embed(source="assets/3.jpg")]
             public var phone3:Class;
         
             [Bindable]
             [Embed(source="assets/4.jpg")]
             public var phone4:Class;
 
             [Bindable]
             [Embed(source="assets/5.jpg")]
             public var phone5:Class;
        ]]>
    </mx:Script>
 
    <mx:Panel title="TileList Control Example" height="100%" width="100%" 
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
 
        <mx:Label width="100%" color="blue" 
            text="A TileList control displays items in rows and columns."/>
 
        <mx:TileList id="CameraSelection" height="250" width="600" >
            <mx:dataProvider>
                <mx:Array>
                    <mx:Object label="Nokia 6630" icon="{phone1}"/>
                    <mx:Object label="Nokia 6680" icon="{phone2}"/>
                    <mx:Object label="Nokia 7610" icon="{phone3}"/>
                    <mx:Object label="Nokia LGV" icon="{phone4}"/>
                    <mx:Object label="Nokia LMV" icon="{phone5}"/>
                </mx:Array>
            </mx:dataProvider>
            <mx:itemRenderer>
            	<mx:Component>
            		<mx:HBox>
            			<mx:Image source="{data.icon}"/>
            			<mx:Text text="{data.label}"/>
            		</mx:HBox>
            	</mx:Component>
            </mx:itemRenderer>
        </mx:TileList>
 
    </mx:Panel>
</mx:Application>

Open in new window

0
 
lexxwernCommented:
You should use an HBox inside the TileList. See this: http://livedocs.adobe.com/flex/3/langref/mx/containers/HBox.html
<mx:HBox borderStyle="solid" paddingTop="10" paddingBottom="10" 
               paddingLeft="10" paddingRight="10"> 
            <mx:Button label="Button 1"/>
            <mx:Button label="Button 2"/>
            <mx:Button label="Button 3"/>
            <mx:ComboBox/> 
        </mx:HBox>

Open in new window

0
 
DidicaAuthor Commented:
Tnx for answer, but i think that that is not what i am looking for.

I need items to be listed vertical, so i need this TileList or VList.
I am making my menu of 5 verticaly listed cells, in which i have one icon and text. Problem is that by default icon is above text in every cell.

Maybe this helps -  i would like my TileList elements looks like this:
|-----------------------|                    
|     [Icon] [Text 1]    |
|---------------------- |
|-----------------------|                    
|     [Icon2] [Text 2]  |
|---------------------- |
|-----------------------|                    
|     [Icon3] [Text 3]  |
|---------------------- |

instead of

|-----------------------|                    
|          [Icon]            |
|         [Text 1]          |
|-----------------------|
|-----------------------|                    
|          [Icon2]          |
|         [Text 2]          |
|-----------------------|
|-----------------------|                    
|          [Icon3]          |
|         [Text 3]          |
|-----------------------|
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
lexxwernCommented:
Exactly .. so inside the TileList you have to place the Icon and Text inside an HBox which will render them in the same Horizontal Line.

If you can paste your code, I can give you an example.
0
 
DidicaAuthor Commented:
Ok , this is code of tile list


<mx:TileList x="10" y="57" width="155" height="575" columnWidth="155" columnCount="1" id="menu_lista" click="menu_display()"  >
	
	<mx:dataProvider>
		<mx:Array>
		    <mx:Object label="Single" icon="{menu1}" id="m1" />
		    <mx:Object label="Multiple" icon="{menu2}" id="m2"/>
		    <mx:Object label="Help" icon="{menu3}" id="m3"/>
		 </mx:Array>
	</mx:dataProvider>
 
</mx:TileList>

Open in new window

0
 
ashishgupta97065Commented:
Hey Lex,

The solution you proposed was fantastic and really helped us out.

Unfortunately, I just encountered another problem. In cases where the text length is large and image height is also running into multiple lines the text wraps in a strange manner.

I want the wrapped text to come below the image (i.e. there would be a gap between the line that contains my image and the next line).

regards
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.