You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@flex.apache.org by "Merten P. (JIRA)" <ji...@apache.org> on 2013/02/06 18:21:13 UTC
[jira] [Updated] (FLEX-33383) List is Flickering on mobile when
different number of lines in message
[ https://issues.apache.org/jira/browse/FLEX-33383?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]
Merten P. updated FLEX-33383:
-----------------------------
Description:
On a List with an IconItemRenderer in it. When beginning to scroll on mobile, the list is flickering on the first time (gets white for one frame). This only happens when the messageField/messageFunction is set and there is a different number of lines in the message areas.
Sample Code:
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView">
<s:actionContent>
<s:Button label="Set List" click="btn_click(event)"/>
</s:actionContent>
<s:List width="100%" height="100%" id="list">
<s:itemRenderer>
<fx:Component>
<s:IconItemRenderer messageField="text"/>
</fx:Component>
</s:itemRenderer>
</s:List>
<fx:Script>
<![CDATA[
import mx.collections.ArrayList;
protected function btn_click(event:MouseEvent):void
{
var al:ArrayList = new ArrayList;
var obj:Object;
var str:String = "blablablablablablablablablablablablablablablablablablablablabblablablablablablablablablablablablablablablablablablablablabblablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla";
for(var i:int = 0; i < 20; i++) {
obj = new Object;
obj.text = str.substr(0, Math.random()*str.length);
al.addItem(obj);
}
list.dataProvider = al;
}
]]>
</fx:Script>
</s:View>
Workaround:
(Reset the layout in the initialize event)
<s:List xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
initialize="initializeHandler(event)">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import spark.layouts.HorizontalAlign;
import spark.layouts.VerticalLayout;
//init
protected function initializeHandler(e:FlexEvent):void
{
//reset datagroup layout
var layout:VerticalLayout = new VerticalLayout();
layout.requestedMinRowCount = 5;
layout.horizontalAlign = HorizontalAlign.JUSTIFY;
layout.gap = 0;
dataGroup.layout = layout;
}
]]>
</fx:Script>
</s:List>
See: http://stackoverflow.com/questions/10490117/flex-mobile-list-flickers/14714690 for more info
was:
On a List with an IconItemRenderer in it. When beginning to scroll on mobile, the list is flickering on the first time (gets white for one frame). This only happens when the messageField/messageFunction is set and there is a different number of lines in the message areas.
Sample Code:
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView">
<s:actionContent>
<s:Button label="Set List" click="btn_click(event)"/>
</s:actionContent>
<s:List width="100%" height="100%" id="list">
<s:itemRenderer>
<fx:Component>
<s:IconItemRenderer messageField="text"/>
</fx:Component>
</s:itemRenderer>
</s:List>
<fx:Script>
<![CDATA[
import mx.collections.ArrayList;
protected function btn_click(event:MouseEvent):void
{
var al:ArrayList = new ArrayList;
var obj:Object;
var str:String = "blablablablablablablablablablablablablablablablablablablablabblablablablablablablablablablablablablablablablablablablablabblablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla";
for(var i:int = 0; i < 20; i++) {
obj = new Object;
obj.text = str.substr(0, Math.random()*str.length);
al.addItem(obj);
}
list.dataProvider = al;
}
]]>
</fx:Script>
</s:View>
Solution:
Either in the list component:
<s:List xmlns:s="library://ns.adobe.com/flex/spark"
initialize="initializeHandler(event)" horizontalScrollPolicy="off">
<fx:Script>
<![CDATA[
import spark.layouts.HorizontalAlign;
import spark.layouts.VerticalLayout;
//init
protected override function initializeHandler(e:FlexEvent):void
{
(dataGroup.layout as VerticalLayout).horizontalAlign = HorizontalAlign.CONTENT_JUSTIFY;
}
]]>
</fx:Script>
</s:List>
Or via Skinning:
package skins
{
import spark.layouts.HorizontalAlign;
import spark.layouts.VerticalLayout;
import spark.skins.mobile.ListSkin;
public class MyListSkin extends ListSkin
{
public function MyListSkin()
{
super();
}
//create children
override protected function createChildren():void
{
super.createChildren();
//change align on vertical layout
if(dataGroup && dataGroup.layout && dataGroup.layout is VerticalLayout)
{
var layout:VerticalLayout = dataGroup.layout as VerticalLayout;
layout.horizontalAlign = HorizontalAlign.CONTENT_JUSTIFY;
}
}
}
}
with CSS:
s|List
{
skinClass: ClassReference("skins.MyListSkin");
horizontalScrollPolicy: off;
}
See: http://stackoverflow.com/questions/10490117/flex-mobile-list-flickers/14714690 for more info
> List is Flickering on mobile when different number of lines in message
> ----------------------------------------------------------------------
>
> Key: FLEX-33383
> URL: https://issues.apache.org/jira/browse/FLEX-33383
> Project: Apache Flex
> Issue Type: Bug
> Components: Mobile: List
> Affects Versions: Apache Flex 4.9.0
> Reporter: Merten P.
> Labels: flicker, list, listskin, mobile, solution
> Original Estimate: 168h
> Remaining Estimate: 168h
>
> On a List with an IconItemRenderer in it. When beginning to scroll on mobile, the list is flickering on the first time (gets white for one frame). This only happens when the messageField/messageFunction is set and there is a different number of lines in the message areas.
> Sample Code:
> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
> xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView">
> <s:actionContent>
> <s:Button label="Set List" click="btn_click(event)"/>
> </s:actionContent>
> <s:List width="100%" height="100%" id="list">
> <s:itemRenderer>
> <fx:Component>
> <s:IconItemRenderer messageField="text"/>
> </fx:Component>
> </s:itemRenderer>
> </s:List>
> <fx:Script>
> <![CDATA[
> import mx.collections.ArrayList;
> protected function btn_click(event:MouseEvent):void
> {
> var al:ArrayList = new ArrayList;
> var obj:Object;
> var str:String = "blablablablablablablablablablablablablablablablablablablablabblablablablablablablablablablablablablablablablablablablablabblablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla";
> for(var i:int = 0; i < 20; i++) {
> obj = new Object;
> obj.text = str.substr(0, Math.random()*str.length);
> al.addItem(obj);
> }
> list.dataProvider = al;
> }
> ]]>
> </fx:Script>
> </s:View>
> Workaround:
> (Reset the layout in the initialize event)
> <s:List xmlns:fx="http://ns.adobe.com/mxml/2009"
> xmlns:s="library://ns.adobe.com/flex/spark"
> initialize="initializeHandler(event)">
> <fx:Script>
> <![CDATA[
> import mx.events.FlexEvent;
> import spark.layouts.HorizontalAlign;
> import spark.layouts.VerticalLayout;
> //init
> protected function initializeHandler(e:FlexEvent):void
> {
> //reset datagroup layout
> var layout:VerticalLayout = new VerticalLayout();
> layout.requestedMinRowCount = 5;
> layout.horizontalAlign = HorizontalAlign.JUSTIFY;
> layout.gap = 0;
> dataGroup.layout = layout;
> }
> ]]>
> </fx:Script>
> </s:List>
> See: http://stackoverflow.com/questions/10490117/flex-mobile-list-flickers/14714690 for more info
--
This message is automatically generated by JIRA.
If you think it was sent incorrectly, please contact your JIRA administrators
For more information on JIRA, see: http://www.atlassian.com/software/jira