?
Solved

mx:TileList image and text in same line

Posted on 2009-04-03
6
Medium Priority
?
984 Views
Last Modified: 2012-05-06
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!
0
Comment
Question by:Didica
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
6 Comments
 
LVL 12

Expert Comment

by:lexxwern
ID: 24061903
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
 

Author Comment

by:Didica
ID: 24062109
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
 
LVL 12

Expert Comment

by:lexxwern
ID: 24065753
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
WatchGuard's M Series Appliances - Miecom Approved

WatchGuard's newest M series appliances were put to the test by Miercom.  We had great results and outperformed all of our competitors in both stateless and stateful traffic throghput scenarios! Ready to see how your UTM appliance stacked up? Download the Miercom Report!

 

Author Comment

by:Didica
ID: 24068956
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
 
LVL 12

Accepted Solution

by:
lexxwern earned 1000 total points
ID: 24075357
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
 

Expert Comment

by:ashishgupta97065
ID: 34679366
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

Featured Post

Percona Live Europe 2017 | Sep 25 - 27, 2017

The Percona Live Open Source Database Conference Europe 2017 is the premier event for the diverse and active European open source database community, as well as businesses that develop and use open source database software.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

First things first - Preparation We need all the part for this install and it's much nicer to have them all on hand when you need them so here's what's required. Download Eclipse 3.5 32 bit (I like the Classic flavour) from here. (http://www.e…
The well known Cerber ransomware continues to spread this summer through spear phishing email campaigns targeting enterprises. Learn how it easily bypasses traditional defenses - and what you can do to protect your data.
This tutorial will teach you the special effect of super speed similar to the fictional character Wally West aka "The Flash" After Shake : http://www.videocopilot.net/presets/after_shake/ All lightning effects with instructions : http://www.mediaf…
Sometimes it takes a new vantage point, apart from our everyday security practices, to truly see our Active Directory (AD) vulnerabilities. We get used to implementing the same techniques and checking the same areas for a breach. This pattern can re…
Suggested Courses

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question