You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@flex.apache.org by bilbosax <wa...@comcast.net> on 2018/01/12 19:55:27 UTC
Button in ItemRenderer on Android
Interesting quirk in Android that I can't figure out. I have an itemRenderer
in a mobile AIR project that contains a button called "viewButton". On iOS,
when this button is clicked, two things happen 1) The itemRender enters its
"selected" state and causes an overlay to appear over the entire renderer
and 2) an event is dispatched when the viewButton is clicked. This is
exactly what I want to happen.
On Android, the itemRender enters its "selected" state and causes the
overlay to appear, but the viewButton does not fire a clicked event EVEN
THOUGH ITS SKIN STATE CHANGES STATE SO YOU CAN TELL IT WAS CLICKED. I
actually have to to click the button a second time on every renderer to get
it to recognize that the button was clicked. If I put a trace in my button
skin, it shows that it entered the "down" state even though no click event
is fired by the button. How is this possible?
I suppose I could dispatch my event from within the button skin, but that
feel like a hack that should be unnecessary. Here is the code for my
itemRenderer. Please let me know if you can see any reason why my button
would have to be clicked a second time before it fires a click event.
Thanks!!
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="false" dataChange="setValues(event)"
xmlns:fxgAssets="fxgAssets.*" initialize="initializeHandler(event)">
<fx:Script>
</fx:Script>
<fx:Declarations>
<s:Fade id="fadeIn" duration="3000" target="{noImage}" alphaFrom="0"
alphaTo="1"/>
</fx:Declarations>
<s:states>
<s:State name="normal" enterState="normalEnterStateHandler(event)"/>
<s:State name="hovered" />
<s:State name="selected" enterState="selectedEnterStateHandler(event)"/>
</s:states>
<s:BitmapImage id="noImage" source="@Embed('assets/noPhoto.jpg')"
smooth="true" smoothingQuality="high"/>
<s:BitmapImage id="propertyImage" smooth="true" smoothingQuality="high"/>
<s:Rect id="highlightRect" x="0" y="0">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="#515151" alpha=".8" ratio="0"/>
<s:GradientEntry color="#515151" alpha=".8" ratio=".3"/>
<s:GradientEntry color="#000000" alpha="0" ratio="1"/>
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Rect id="overlayRect" x="0" y="0" alpha=".3" visible="false">
<s:fill>
<s:SolidColor color="#A30000"/>
</s:fill>
</s:Rect>
<s:Label id="statusLabel" color="#FFFFFF" paddingLeft="10"
paddingRight="10" paddingTop="5" paddingBottom="5"/>
<s:HGroup id="textGroup" gap="0">
<s:VGroup id="priceGroup" gap="0">
<s:Label id="priceLabel" color="#FFFFFF" styleName="titleMedium"
fontWeight="bold" paddingLeft="5"/>
<s:Label id="addressLabel" color="#FFFFFF" styleName="titleSmall"
maxDisplayedLines="1" paddingLeft="5"/>
<s:Label id="cityLabel" color="#FFFFFF" styleName="titleSmall"
maxDisplayedLines="1" paddingLeft="5"/>
</s:VGroup>
<s:Label id="sqftLabel" color="#FFFFFF" textAlign="right"
styleName="titleSmall" paddingRight="5"/>
<fxgAssets:propertySplitter id="splitter1"/>
<s:Label id="bedsLabel" color="#FFFFFF" textAlign="right"
styleName="titleSmall" paddingRight="5"/>
<fxgAssets:propertySplitter id="splitter2"/>
<s:Label id="bathsLabel" color="#FFFFFF" textAlign="right"
styleName="titleSmall" paddingRight="5"/>
</s:HGroup>
<s:Label id="mlsLabel" color="#FFFFFF" textAlign="right"
styleName="titleSmall" paddingRight="5"/>
<s:Button id="viewButton" skinClass="skins.viewButtonSkin"
click="viewButtonClickHandler(event)"/>
</s:ItemRenderer>
--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/
Re: Button in ItemRenderer on Android
Posted by bilbosax <wa...@comcast.net>.
In addition, I have removed all the states and components from the
itemrenderer except for the button, so now it is just an itemRenderer with a
viewButton, and even that didn't help.
So now, I feel like it either has to be a setting in my actual list, I have
something configured wrong for Android, or there is a bug of some sort. (Or
I could be a total moron and just don't see the problem , that is definitely
a likely possibility)
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="false" dataChange="setValues(event)"
xmlns:fxgAssets="fxgAssets.*" initialize="initializeHandler(event)">
<fx:Script>
</fx:Script>
<s:Button id="viewButton" skinClass="skins.viewButtonSkin"
click="viewButtonClickHandler(event)"/>
</s:ItemRenderer>
--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/
Re: Button in ItemRenderer on Android
Posted by bilbosax <wa...@comcast.net>.
Great suggestion Erik! Tried it, but no luck.
I have tried removing the overlayRect entirely also - no luck.
I have tried changing the z-index of the button - no luck.
I have tried removing States since the state changes when the itemRenderer
is clicked, thinking that the state change might be eating the click event -
no luck.
When I click the viewButton in any renderer, I have to click it a second
time to trigger the click event. If I move to another renderer, I have to
click it twice. If I return to the original renderer, I have to click it
twice. And the button skin is tracing that it is changing state when it is
clicked, but apparently that does not translate into a click event.
Any other thoughts???
--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/
Re: Button in ItemRenderer on Android
Posted by bilbosax <wa...@comcast.net>.
So I found the problem. I have been working on this project so long, I had
forgotten that I created a custom List based on a suggestion I found on the
internet. With the List, for some reason, there is a single-frame white
flash that happens the first time that you touch it. It is all over the
forums. A guy created a solution by dispatching a fake touch event to hide
this scenario. When I switched over back to the regular list, my button
problem totally disappeared. So yes, it turns out I am an idiot.
So now I am left trying to figure out how to hide this single frame flash on
first touch LOL. Here is the code that he gave for the custom list:
package classes
{
import mx.events.FlexEvent;
import mx.events.TouchInteractionEvent;
import spark.components.List;
public class MyList extends List
{
public function MyList()
{
super();
//add event listeners
addEventListener(FlexEvent.UPDATE_COMPLETE, updateCompleteHandler);
}
//update complete
protected function updateCompleteHandler(event:FlexEvent):void
{
//fake touch start
fakeTouchEvent(TouchInteractionEvent.TOUCH_INTERACTION_START);
callLater(endTouch);
}
//quit touch event
protected function endTouch():void {
//fake touch end
fakeTouchEvent(TouchInteractionEvent.TOUCH_INTERACTION_END);
}
//fake touch event
protected function fakeTouchEvent(type:String):void {
var evt:TouchInteractionEvent = new TouchInteractionEvent(type);
evt.relatedObject = scroller;
scroller.dispatchEvent(evt);
}
}
}
--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/
Re: Button in ItemRenderer on Android
Posted by "Erik J. Thomas" <er...@linqto.com>.
Try adding an includeInLayout property in overlayRect. The way you have it, the overlay is there, just not visible and on Android it may be "eating" the tap event.
Erik
Erik Thomas
Chief Architect
Office: 541.247.2995 / Mobile: 303.304.1466
http://linqto.com <http://linqto.com/>
This email may contain confidential and privileged material for the sole use of the intended recipient. Any review or distribution by others is strictly prohibited. If you are not the intended recipient, please contact the sender and delete all copies.
On Jan 12, 2018, at 11:55 AM, bilbosax <wa...@comcast.net> wrote:
Interesting quirk in Android that I can't figure out. I have an itemRenderer
in a mobile AIR project that contains a button called "viewButton". On iOS,
when this button is clicked, two things happen 1) The itemRender enters its
"selected" state and causes an overlay to appear over the entire renderer
and 2) an event is dispatched when the viewButton is clicked. This is
exactly what I want to happen.
On Android, the itemRender enters its "selected" state and causes the
overlay to appear, but the viewButton does not fire a clicked event EVEN
THOUGH ITS SKIN STATE CHANGES STATE SO YOU CAN TELL IT WAS CLICKED. I
actually have to to click the button a second time on every renderer to get
it to recognize that the button was clicked. If I put a trace in my button
skin, it shows that it entered the "down" state even though no click event
is fired by the button. How is this possible?
I suppose I could dispatch my event from within the button skin, but that
feel like a hack that should be unnecessary. Here is the code for my
itemRenderer. Please let me know if you can see any reason why my button
would have to be clicked a second time before it fires a click event.
Thanks!!
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="false" dataChange="setValues(event)"
xmlns:fxgAssets="fxgAssets.*" initialize="initializeHandler(event)">
<fx:Script>
</fx:Script>
<fx:Declarations>
<s:Fade id="fadeIn" duration="3000" target="{noImage}" alphaFrom="0"
alphaTo="1"/>
</fx:Declarations>
<s:states>
<s:State name="normal" enterState="normalEnterStateHandler(event)"/>
<s:State name="hovered" />
<s:State name="selected" enterState="selectedEnterStateHandler(event)"/>
</s:states>
<s:BitmapImage id="noImage" source="@Embed('assets/noPhoto.jpg')"
smooth="true" smoothingQuality="high"/>
<s:BitmapImage id="propertyImage" smooth="true" smoothingQuality="high"/>
<s:Rect id="highlightRect" x="0" y="0">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="#515151" alpha=".8" ratio="0"/>
<s:GradientEntry color="#515151" alpha=".8" ratio=".3"/>
<s:GradientEntry color="#000000" alpha="0" ratio="1"/>
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Rect id="overlayRect" x="0" y="0" alpha=".3" visible="false">
<s:fill>
<s:SolidColor color="#A30000"/>
</s:fill>
</s:Rect>
<s:Label id="statusLabel" color="#FFFFFF" paddingLeft="10"
paddingRight="10" paddingTop="5" paddingBottom="5"/>
<s:HGroup id="textGroup" gap="0">
<s:VGroup id="priceGroup" gap="0">
<s:Label id="priceLabel" color="#FFFFFF" styleName="titleMedium"
fontWeight="bold" paddingLeft="5"/>
<s:Label id="addressLabel" color="#FFFFFF" styleName="titleSmall"
maxDisplayedLines="1" paddingLeft="5"/>
<s:Label id="cityLabel" color="#FFFFFF" styleName="titleSmall"
maxDisplayedLines="1" paddingLeft="5"/>
</s:VGroup>
<s:Label id="sqftLabel" color="#FFFFFF" textAlign="right"
styleName="titleSmall" paddingRight="5"/>
<fxgAssets:propertySplitter id="splitter1"/>
<s:Label id="bedsLabel" color="#FFFFFF" textAlign="right"
styleName="titleSmall" paddingRight="5"/>
<fxgAssets:propertySplitter id="splitter2"/>
<s:Label id="bathsLabel" color="#FFFFFF" textAlign="right"
styleName="titleSmall" paddingRight="5"/>
</s:HGroup>
<s:Label id="mlsLabel" color="#FFFFFF" textAlign="right"
styleName="titleSmall" paddingRight="5"/>
<s:Button id="viewButton" skinClass="skins.viewButtonSkin"
click="viewButtonClickHandler(event)"/>
</s:ItemRenderer>
--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/