I have list for which I require some space between the items and the list margin. The items inside the list are rendered from some other file. But when I add padding I cannot see any difference.
Something like this:
<mx:List id="List" selectionColor="red" itemRenderer="renderers.List"
doubleClick="Handler()" width="500" cornerRadius="4"
textAlign="center" height="335">
Also when mouse is rolled over only the item has to be highlighted excluding the padding.
Any suggestions? A sample code will be very useful.
Thanks
You are looking for useRollOver for, well, adding roll overs.
<mx:List useRollOver="true" />
As for the padding, you will need to do that in a custom item renderer.
Here is a good article to help you get started on making a custom item renderer:
http://www.adobe.com/devnet/flex/articles/itemrenderers_pt1.html
The below already has space between the left and right edges of the list and the items in the list, with them being laid out in the centre of the list. This is using the default itemRenderer.
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:List id="List" selectionColor="red" width="500" cornerRadius="4"
textAlign="center" height="335">
<mx:Array >
[1,2,3,4]
</mx:Array>
</mx:List>
</mx:WindowedApplication>
Are you rendering text or images?
As for the selection of only the item and not the extra space, I'm not too sure about that one.
Related
Is there a Flex layout class that wraps to the next line and does not size all the items the same size?
I've tried using TileLayout but the problem with that is that all the items are sized to the largest item. I want to set the gap between each to be consistent. Basically a variableColumnWidth type of feature.
<s:List id="exampleList"
selectedIndex="0"
width="100%"
dataProvider="{examplesCollection}"
change="exampleList_changeHandler(event)"
height="250"
>
<s:layout>
<s:TileLayout verticalGap="0" horizontalGap="0" />
</s:layout>
</s:List>
I'm using Apache Flex 4.12.
I think that the quickest way would be to implement an item renderer, like this example. The other option is to implement your own layout which you can adapt to what you need, for this you need to understand very well how layouts work.
I am using an mx:DataGrid with a dataProvider to display Rows. I have checked the no of rows in my array ( which is 8 ) and the no of rows in the dataGrid. They both match, however I always get an extra blank row at the end of my data grid. How can I remove this row?
Regards
Aparna
try this :
How can I make datagrid height is equal to data content in Adobe Flex
an example based on the answer I found there:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:DataGrid x="31" y="157" id="dg" rowCount="{dg.dataProvider.length}">
<mx:dataProvider>
<mx:ArrayCollection>
<mx:Object name="name1" date="25/11/2010" />
<mx:Object name="name2" date="24/11/2010" />
<mx:Object name="name3" date="23/11/2010" />
</mx:ArrayCollection>
</mx:dataProvider>
</mx:DataGrid>
</mx:Application>
One more thing ,dont specify the height of the grid explicitly in the mx:DataGrid tag.
Keep changing the size of your data grid in the design view so that it must be able to accomodate only fixed number of rows. Keep scroll policy false.
The new spark DataGrid control appears to solve this problem.
ive been pondering how to create the same type of resizing that acrobat connect does. i did read the documentation of percentage sizing. and i have implemented it. but its not how i want it to look.
to see an example : https://admin.na3.acrobat.com/_a204547676/flextras/
sorry Jeffrey to use you as an example. :)
just try to resize your window and see it... thats what im looking for .
any hints guys?
Given your code sample; the button is not given a height or width; so Flex sizes it automatically used a fixed width. Give the button a percentage width or height and it should resize appropriately as the screen changes.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" backgroundColor="#FFFFFF">
<s:BorderContainer width="40%" height="70%" y="10" horizontalCenter="0">
<mx:Image height="100%" width="100%" id="img" source="http://upload.wikimedia.org/wikipedia/en/thumb/a/ab/Apple-logo.png/125px-Apple-logo.png" horizontalCenter="0"/>
</s:BorderContainer>
<s:Button y="543" horizontalCenter="0" label="start" width="40%" height="30%"/>
</s:Application>
ok i have tried it. but its not the result i am looking for. if you keep resizing back and forth the acrobat app you can see the entire app resizing compared to the above example.
its not quite the same.
In the following example there is no horizontal scrollbar shown. As soon as I change horizontalScrollPolicy="auto" width horizontalScrollPolicy="on" it works fine. Anyone an idea whats wrong with this example?
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:ArrayCollection id="ac">
<mx:Array>
<mx:Object name="Text Text Text Text"/>
<mx:Object name="Text Text Text Text"/>
</mx:Array>
</mx:ArrayCollection>
<mx:List id="myList" width="100" height="100" horizontalScrollPolicy="auto" maxWidth="100"
dataProvider="{ac}"
labelField="name"/>
<mx:Tree width="100" height="100" horizontalScrollPolicy="auto" maxWidth="100"
dataProvider="{ac}" labelField="name" x="128" y="66"/>
</mx:Application>
thanks and regards
cyrill
Check this blog post: autoscrolling for flex tree
Quoting it:
The problem was that in a Tree (and other List-based components), when you set the horizontalScrollPolicy to auto, the scrollbars actually don't come out when they should. This seems like a bug at first, but we did this by design for performance reasons. In order to display the scrollbar properly, we need to measure the width of all the items (on-screen or not) and this would just take too much time to do by default. So instead, to get a scrollbar to show up, you need to set maxHorizontalScrollPosition, which is how much the user can scroll.
I'm currently learning Flex, and am having the hardest time getting scroll bars to work. In short, I'm making a giant form for users to fill out, contained within a viewstack component. The user will type up information in one view, and it will be displayed in the other. But right now in the first canvas I have components that run off the screen and flex doesn't automatically add a scroll bar, so I added 'verticalScrollPolicy="on"' to my canvas. Now, while it gives me a scroll bar, it gives me an empty scroll bar. I still cannot move it up or down, meaning components are still trapped off the bottom of my screen. Am I missing something simple?
Edit - I'm using Adobe Flex Builder 3, and the components it lets you drag in. http://img12.imageshack.us/img12/218/problem1f.jpg This is a picture of the problem, and i guess relavent code would be.
<mx:Application xmlns:mx="adobe.com/2006/mxml" layout="absolute" width="830" height="835">
<mx:ViewStack x="10" y="72" id="viewstack1" width="790" height="751" >
<mx:Canvas label="Design Mode" width="100%" height="100%" verticalScrollPolicy="on" horizontalScrollPolicy="on" >
(Components inside)
</mx:Canvas>
I think the problem is in the way the content in your canvas determines it's height.
If I do this:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:ViewStack width="500" height="500">
<mx:Canvas width="100%" height="100%">
<mx:Canvas width="100" height="1000" backgroundColor="#ededed" />
</mx:Canvas>
</mx:ViewStack>
</mx:Application>
I get scrollbars - Canvas has a default horizontalScrollPolicy and verticalScrollPolicy of auto, meaning it'll show the scrollbars as needed. I think, for whatever reason, the outer canvas isn't detecting that the content is taller than it should be.
if it can help some one : some related problem