stopEventPropagation beyond current component - apache-flex

I have a TextInput inside a spark Item Renderer. I need to undo some behavior in a library I'm using by stopPropagation of the mouseDown and mouseUp event for the TextInput. However, I would like the TextInput itself to handle such events normally - otherwise the caret to cursor transitions don't seem to be properly handled. I'm ashamed to admit, I'm not sure how to do this - seems simple but I have been stuck on it for some time.
thank you!
Edit: ok, here's some code to explain what's going on (although it's completely unrelated from what I'm doing, so it's not an exact depiction of my specific situation). As I mentioned above I need to be able to stop the propagation of mouseDown and mouseUp from the TextInput to a component up the food chain - event.stopPropagation() in mouseDown and mouseUp for the TextInput does the trick. However, it messes up the caret / cursor handling for the TextInput itself. Try the code below with or without the event.stopPropagation() and you should see what I mean.
Main
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/19/using-a-custom-item-renderer-function-with-the-fxlist-control-in-flex-gumbo/ -->
<s:Application name="Spark_List_itemRendererFunction_test"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
import mx.core.ClassFactory;
import spark.skins.spark.DefaultItemRenderer;
private function list_itemRendererFunc(item:Object):ClassFactory {
var cla:Class = DefaultItemRenderer;
switch (item.type) {
case "employee":
case "manager":
cla = EmployeeItemRenderer;
break;
default:
break;
}
return new ClassFactory(cla);
}
]]>
</fx:Script>
<s:List id="list"
labelField="name"
itemRendererFunction="list_itemRendererFunc"
horizontalCenter="0" verticalCenter="0">
<s:dataProvider>
<s:ArrayList>
<fx:Object name="Employee 1" type="employee" />
<fx:Object name="Employee 2" type="employee" />
<fx:Object name="Employee 3" type="employee" />
<fx:Object name="Employee 4" type="employee" />
<fx:Object name="Manager 1" type="manager" />
<fx:Object name="Manager 2" type="manager" />
<fx:Object name="Employee 5" type="employee" />
<fx:Object name="Manager 3" type="manager" />
<fx:Object name="Consultant 1" type="consultant" />
</s:ArrayList>
</s:dataProvider>
</s:List>
</s:Application>
and EmployeeItemRenderer.mxml
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/19/using-a-custom-item-renderer-function-with-the-fxlist-control-in-flex-gumbo/ -->
<s:ItemRenderer name="EmployeeItemRenderer"
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="true">
<fx:Script>
<![CDATA[
protected function TI_mouseDownHandler(event:MouseEvent):void
{
event.stopPropagation();
}
protected function TI_mouseUpHandler(event:MouseEvent):void
{
event.stopPropagation();
}
]]>
</fx:Script>
<s:HGroup>
<s:Label id="labelDisplay" left="4" right="4" top="4" bottom="4" />
<s:TextInput id="TI" mouseDown="TI_mouseDownHandler(event)" mouseUp="TI_mouseUpHandler(event)"/>
</s:HGroup>
</s:ItemRenderer>

Can you post what you've tried so far?
I think all you would need to do is register listeners for the mouseDown, mouseUp, and click events and then use http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/events/Event.html#stopPropagation() to stop the events from bubbling further from the currentTarget out to the parents, stopImmediatePropagation would stop the event from triggering listeners on the current object.
Shaun
PS I'll edit if you post some code and I can clarify.

OK, Sounds like this is only an issue for Flex 4.01 (thank you JAX). In such case I got what I wanted by stopping propagation on the mousedown event but not on the mouseUp. This is a very specific case that applies to my code, so I'm not sure if it'll be really useful for anyone else. I guess the interesting lesson for me, here, is that mouseUp is the event that is related to caret / system cursor management.

Related

Flex Spark DataGrid GridItemEditorSessionSave Event issue

I have a strange problem in Flex s:DataGrid/>. The gridItemEditorSessionSave event triggers two times for me. The minimum code to recreate this issue is below:
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
<s:ArrayCollection id="dp">
<fx:Object test="Test"/>
</s:ArrayCollection>
</fx:Declarations>
<fx:Script>
<![CDATA[
import spark.events.GridItemEditorEvent;
protected function onGridItemEditorSessionSave(event:GridItemEditorEvent):void
{
trace("Edited >>>", event.columnIndex);
}
protected function onGridItemEditorSessionStart(event:GridItemEditorEvent):void
{
trace("Edit Start >>>", event.columnIndex);
}
]]>
</fx:Script>
<s:DataGrid dataProvider="{dp}" width="100%" height="100%" editable="true"
gridItemEditorSessionSave="onGridItemEditorSessionSave(event)"
gridItemEditorSessionStart="onGridItemEditorSessionStart(event)">
<s:columns>
<s:ArrayCollection>
<s:GridColumn dataField="test"/>
</s:ArrayCollection>
</s:columns>
</s:DataGrid>
</s:WindowedApplication>
When I edit the cell, the trace statement is as below :
Edit Start >>> 0
Edited >>> 0
Edited >>> 0
Which indicates onGridItemEditorSessionSave triggers twice! Not sure I am missing anything.
Any help appreciated, thanks in advance!
Yes, it seems like a bug. There are other reports for this : http://apache-flex-users.2333346.n4.nabble.com/spark-Datagrid-GridItemEditorEvent-firing-twice-td3582.html
As mentioned in this discussion I have done a workaround by setting a flag _goForCellEdit=true in the ItemListEditStart event and checked this in gridItemEditorSessionSave event. Hope will help if some one ran into the same problem.

How to change labels in a ButtonBar - simple test case and screenshot attached

In a Flex Mobile app I would like to have a ButtonBar at the bottom and I need to change the labels of its buttons:
(I don't want to use TabbedViewNavigatorApplication here, because all my logic is in a single View with an ActionBar at its top and ButtonBar at its bottom).
So I have prepared a very simple test case to demonstrate my problem.
Please just create a "blank" Flex mobile project in Flash Builder and put my 2 files (below) into it and you will see my problem - touching the buttons at the bottom doesn't change the label of the very right button).
TestAC.mxml:
<?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"
applicationDPI="160">
<fx:Script>
<![CDATA[
import spark.events.IndexChangeEvent;
import spark.skins.mobile.TabbedViewNavigatorTabBarSkin;
private function handleTabs(event:IndexChangeEvent):void {
trace(_tabBar.selectedIndex);
_tabs[2].label = String(1 + _tabBar.selectedIndex);
}
]]>
</fx:Script>
<fx:Declarations>
<s:MultiDPIBitmapSource id="CHAT"
source160dpi="#Embed('chat.png')"
source240dpi="#Embed('chat.png')"
source320dpi="#Embed('chat.png')" />
<s:ArrayCollection id="_tabs">
<fx:Object label="One" />
<fx:Object label="Two" />
<fx:Object label="Three" icon="{CHAT}" />
</s:ArrayCollection>
</fx:Declarations>
<s:ButtonBar id="_tabBar"
requireSelection="true"
width="100%"
bottom="0"
skinClass="spark.skins.mobile.TabbedViewNavigatorTabBarSkin"
dataProvider="{_tabs}"
change="handleTabs(event)">
</s:ButtonBar>
</s:Application>
chat.png:
Allright, adding _tabs.refresh(); to handleTabs has helped.

How can I access selected items in Adobe Air using the Spinner List?

I am learning Adobe Air and want to get the current selected item in the spinner list I have created, however every time I use selectedItem I keep getting the same value over and over, no matter what option I select. I am trying to make an application for the Playbook and this this my SpinnerList code:
<s:SpinnerListContainer x="10" y="279" width="325" height="266">
<s:SpinnerList width="69" height="100%" enabled="true" labelField="data" selectedIndex="1" id="From">
<s:ArrayList>
<fx:Object data="Time"></fx:Object>
<fx:Object data="KM"></fx:Object>
<fx:Object data="Miles"></fx:Object>
</s:ArrayList>
</s:SpinnerList>
</s:SpinnerListContainer>
No matter what, 'KM' is always shows as the selected item when it is not. This is what I have in the script tags:
var selected = From.selectedItem;
How can I fix this?
Thank you
Using 4.6 SDK this works for me:
<?xml version="1.0" encoding="utf-8"?>
<s:View title="HomeView"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
<![CDATA[
import spark.events.IndexChangeEvent;
protected function From_changeHandler(event : IndexChangeEvent) : void
{
somewhereToDisplaySelected.text = From.selectedItem.data;
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:SpinnerListContainer height="266"
width="325"
x="10"
y="279">
<s:SpinnerList change="From_changeHandler(event)"
enabled="true"
height="100%"
id="From"
labelField="data"
selectedIndex="1"
width="69">
<s:ArrayList>
<fx:Object data="Time">
</fx:Object>
<fx:Object data="KM">
</fx:Object>
<fx:Object data="Miles">
</fx:Object>
</s:ArrayList>
</s:SpinnerList>
</s:SpinnerListContainer>
<s:TextInput id="somewhereToDisplaySelected"/>
</s:View>

how to navigate in spark list control?

I'm building a mobile app, using spark list control. When user tap on a list item, i want it to navigate to that correspondence page
<s:List id="list" width="100%" height="100%" labelField=" label">
<s:dataProvider>
<s:ArrayList>
<fx:Object label="Page One" />
<fx:Object label="Page Two" />
<fx:Object label="Page Three" />
<fx:Object label="Page Four" />
</s:ArrayList>
</s:dataProvider>
</s:List>
 
 
how do i code it so that when user tap on item label="Page One" it will navigate to PageOneView.mxml and if it tap on "Page Two" it will go to PageTwoView.mxml and so on.
 
thanks
The List should dispatch a change event. In that change event handler you can push the new view onto the view stack:
if(list.selectedIndex == 0){
navigator.pushView(viewOne);
} else if (list.selectedIndex == 1){
navigator.pushView(viewtwo);
} else if
etc...
I like the switch statement here as you can default to an action,
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
title="HomeView">
<fx:Script>
<![CDATA[
import spark.events.IndexChangeEvent;
protected function list_changeHandler(event:IndexChangeEvent):void
{
switch(list.selectedItem.label)
{
case "Page One":
{
navigator.pushView(pageOne);
break;
}
case "Page Two":
{
navigator.pushView(pageTwo);
break;
}
case "Page Three":
{
navigator.pushView(pageThree);
break;
}
case "Page Four":
{
navigator.pushView(pageFour);
break;
}
default:
{
navigator.pushView(pageOne);
break;
}
}
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:List id="list" width="100%" height="100%" change="list_changeHandler(event)"
labelField="label">
<s:dataProvider>
<s:ArrayList>
<fx:Object label="Page One"/>
<fx:Object label="Page Two"/>
<fx:Object label="Page Three"/>
<fx:Object label="Page Four"/>
</s:ArrayList>
</s:dataProvider>
</s:List>
</s:View>
Just a different way, suits my logic, created in Flash Builder 4.6.
Jacko

Edit/Delete buttons in Flex Datagrid

I have a flex datagrid with cart items populated from a service. Each row has edit/delete buttons provided by a custom ItemRenderer. When I click each button I send an event from the itemrenderer which calls a service in order to edit/delete the selected item.
How can I get the id of the product form the dataprovider inside the Itemerenderer in order to send it with my custom event?
Thanks in advance
Use the DATA property of the itemRenderer.
The Flex help has a very illustrative example. If your dataProvider is:
<mx:ArrayList>
<fx:Object firstName="Bill" lastName="Smith" companyID="11233"/>
<fx:Object firstName="Dave" lastName="Jones" companyID="13455"/>
<fx:Object firstName="Mary" lastName="Davis" companyID="11543"/>
<fx:Object firstName="Debbie" lastName="Cooper" companyID="14266"/>
</mx:ArrayList>
you can access the data item as follows:
<?xml version="1.0" encoding="utf-8"?>
<!-- containers\spark\myComponents\MySimpleItemRenderer.mxml -->
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:HGroup verticalCenter="0" left="2" right="2" top="2" bottom="2">
<s:Label text="{data.lastName}, {data.firstName}"/>
<s:Label text="{data.companyID}"/>
</s:HGroup>
</s:ItemRenderer>

Resources