I have a flex list, nothing fancy:
<s:List id="list" left="0" right="0" top="0" bottom="0" borderVisible="false"
dataProvider="{data}" labelField="1" textAlign="left"
itemRenderer="MXML.ItemRenderers.ListItemRenderer" horizontalScrollPolicy="off">
<s:layout>
<s:VerticalLayout horizontalAlign="left"/>
</s:layout>
</s:List>
The following ActionScript code snippets are used to automatically scroll to the bottom of the list when the content does not fit in the visible area. Note that only 1 of these code snippets is used at any given time, but they both have the same effect.
Snippet 1:
list.validateNow();
list.ensureIndexIsVisible(data.length-1);
Snippet 2:
list.validateNow();
list.layout.verticalScrollPosition += list.layout.getVerticalScrollPositionDelta(NavigationUnit.END);
The problem is that these snippets do not scroll completely to the bottom of the list. To illustrate this, I have attached an image: the result on the list after the execution of the above snippets (they both give the same result).
Any help with this problem would be appreciated.
Scrolling to the bottom of a List can be tricky especially when renderers are of different heights, see this blog post for an example of how to accomplish this: http://flexponential.com/2011/02/13/scrolling-to-the-bottom-of-a-spark-list/
Related
I'm using the following code to load an image to the screen:
<s:Scroller xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
width="100%"
height="100%">
<s:VGroup width="100%" horizontalAlign="center" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" verticalAlign="top">
<s:Label width="100%" text="Being Active" fontSize="14" fontFamily="Black"/>
<s:Image fillMode="scale" smooth="true" scaleMode="letterbox" verticalCenter="0" horizontalCenter="0" width="100%" source="#Embed('assets/img/q3/q3c1all.png')"/>
....
....
</s:VGroup>
</s:Scroller>
In the attached image, it has three images
1. Builder view
2. final design (what designer expects)
3. rendered output (what users will see)
Because of the scaleMode letterbox, there is lots of space above and below image is blanked. And this breaks out the layer. Can someone suggest how can I make the out put looks like design preview (titled Requirement)
How to scale the image proportionately without distorting (like its done in CSS).
To those who struggle with this issue - the solution is to use which will give you full control over the bitmap. One thing to note is - if you are planning to use interaction / events with the image, wrap it inside a container and add click event to it.
I dont know if this is best solution, but it worked for me :)
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.
In a Flex Mobile project I have a simple itemRenderer where I'm trying to create an "bubble" texting effect, similar to ichat or iphone (just so you get what im going for). But if the text is longer than the screen it runs off, rather than just going down a line.
If I set Group thats holding the rectangle(to create the bubble effect) and the label to 100% it works and keeps it from exceeding the list containers bounds, BUT the group is always at 100% and looks bad, I'm trying to keep the "bubble" JUST AROUND the text.
Anyway so, at the top of my itemRenderer I tried specifying:
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" width="100%" height="100%">
And here's my layout I figured since msg_container has a width of 100% I was hoping bubble_lable_group would just not exceed that but...it doesnt...it just runs off. I tried setting a max width but that does not allow you to input percents. And just to say it 1 more time. I know if i set bubble_lable_group width to 100% it works, and keeps it from going off the edge, but then the rectangle "bubble" stretches all the way across and just looks bad.
<s:VGroup id="main_container" horizontalAlign="left" paddingBottom="10" paddingTop="10"
verticalAlign="top" width="100%">
<s:VGroup id="name_container" width="100%">
<s:Label id="name_label" fontSize="20" fontWeight="bold" text="Name: " />
</s:VGroup>
<s:VGroup id="msg_container" width="100%" paddingLeft="20">
<s:Group id="bubble_lable_group">
<s:Rect id="the_bubble_shape" width="100%" height="100%" radiusX="15" radiusY="15" >
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="{grOne}"/>
<s:GradientEntry color="{grTwo}"/>
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Label id="msg_txt" width="100%" text="msg text here"
fontSize="18" color="#FFFFFF" paddingTop="15" paddingRight="15" paddingBottom="15" paddingLeft="15"/>
</s:Group>
</s:VGroup>
</s:VGroup>
Any Ideas or tricks I could pull to achieve the effect i'm going for and keep it all inside the parent List container? I'm stumped.
EDIT:
Here's some screenshots to help illustrate the issue:
Well, it looks like you want to set the maxWidth property. Only, you can only set that with pixels, not percents. I am guessing that since you are on mobile, you don't want to be setting absolute pixels. Soooo, what if you did something a bit tricky? Data bind the max width to be the width of the renderer minus the padding of your message container...
<s:Group id="bubble_lable_group" maxWidth="{width - msg_container.paddingLeft}" >
Feels like a hack, but it works for me :)
NOTE: Using the standard ItemRenderer class is quite inefficient in Mobile. It may not be an issue for you, but just be aware of it. See this presentation from 360Flex for more info on that: http://zaa.tv/2011/06/360flex-denver-2011-flex-performance-tips-and-tricks/
I was looking for a different question, but this might be helpful to clipAndEnableScrolling="true"
I have an AdvancedDataGrid component, which has AdvancedDataGridColumn's that are rendered using MXAdvancedDataGridItemRenderer. When user stretches any columns, I want all rows to adjust it's height. So, I set variableRowHeight to true and wordWrap to true.
The problem is that it doesn't always readjust its height. Stretching a column will cause it to overflows into another row. Now, if i just click on the column separator, it will readjust. So basically, first stretching it and then just clicking on column separator solves the overflow problem.
Anyone encounter this overflow issue before?
Update
Step1 (Initial):
Step2 (After first re-size):
Step3 (After clicking on column separator):
ItemRenderer:
<fx:Component className="nameRenderer">
<s:MXAdvancedDataGridItemRenderer width="100%">
<s:layout>
<s:HorizontalLayout />
</s:layout>
<mx:Image source="application/documentManager/mimeTypeIcons/{data.img}" toolTip="{data.tooltip}"
horizontalCenter="0" verticalCenter="0" />
<mx:Text top="5" left="5" right="5" bottom="5" text="{data.data.name}" toolTip="{data.tooltip}" width="100%" />
</s:MXAdvancedDataGridItemRenderer>
</fx:Component>
in my last project, i did a lot with the adg.
But i never had this issue. Can you give me a Screenshot?
I had some probems with the scrollbars. After installing FlashBuilder Burrito with the hero-SDK, this issue gone away.
They did a few things with adg and the dg is now also available as a spark.
Probably this will solve your issue?
BR
Frank
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.