Flex textField causing touch touch_out to fire incorrectly - apache-flex

Question

I am currently working on a graphic design program for the iPad and have ran into a little problem using the textField with touch events.
I have to use the textField object to display text on the screen since it is the ONLY text object which I can disable anti-aliasing. (If you know of a way to do it with Spark, it would seriously change my life.)
The scope of my problem is the following:
I have a spark group which contains all the objects the end user adds to the screen (text, images).
Images added are spark:Image
Text added is flash.text.textField
I wrap the textField in a UIComponent then containingGroup.addElement(UIComponent)
Everything works really well until I get to movement.
I am using a view to hold the objects.
I created a spark label called touchPlatform, to which I have added my Begin, Move, End, and Touch_Out events to. I did this so I would not have to add an event listener to each object I add to the screen (performance hit). Below is the basic MXML setup:
<View>
<ContainerGroup/>
<TouchPlatform/>
</View>
Whenever I do something to the TouchPlatform, I mirror those changes to the selected object (Users have a list of objects which are on the screen they can select).
Down to the problem:
It seems the textFields are not reacting to the touch events correctly (not surprising since they are older components). When I drag my finger on the screen, everything works file until I hit a textField. When I enter or exit a text field, it throws a touch_out event.
Reasons why this should not happen:
I am touching the touchPlatform (its higher, it takes up the entire
screen)
Handlers are only on the touchPlatform, not on the textFields themselves
The fired event never tells me the e.target or e.currentTarget is anything other than the touchPlatform. I am doing specific tests asking for the exact object or if the object "is" a textField/label/image/other.
That is my major point of concern. If I could receive a touch_out event where I would receive a textField object as my target, I could simply ignore it. In this case, the return is as valid as possible; it says the event was triggered by the touchPlatform.
I have set the textField.selectable = false.
I have been noticing a problem which I think is a clue to this issue. When a GUI component is added to the screen (lets say a Spark:TextInput), unless I set the skinClass to a mobile version, it will still be selectable and editable even if it has been set enabled=false, its container has been disabled, groups and labels have overlayed it, etc. If you can see it, you can interact with it. The moment I set it to a mobile skin, everything starts working. I'm wondering if this flash component is disrupting the touch event in a similar way.
If anyone knows a solutions to this situation I would greatly appreciate it.
If someone has another simple solution to accomplishing this task, please let me know as well. I need to have this done on Monday, which is in 2.5 days.
Thank you in advance for the help
CODE:
Where Touch Platform gets created and how it is over Workbench Container (the thing that holds all the objects on the screen):
<s:Group height="600" width="100%" creationComplete="touchPlatform_creationCompleteHandler(event)">
<Components:WorkbenchContainer id="wrkBenchContainer">
</Components:WorkbenchContainer>
<s:VGroup>
<s:HGroup id="grpLoading" visible="{properties.loading}">
<s:BusyIndicator id="bsyLoading" symbolColor="#FFFFFF"/>
<s:Label id="lblLoading" text="Loading..." color="#FFFFFF"/>
</s:HGroup>
</s:VGroup>
<s:Label id="touchPlatform" width="100%" height="100%" creationComplete="touchPlatform_creationCompleteHandler(event)"/>
</s:Group>
EVENT HANDLER RESULT FOR TOUCH_OUT ATTACHED TO touchPlatform
public function handleTouchEnd(e:TouchEvent):void{
if(m_layersPanel.lstLayers.selectedIndex == -1)
return;
/*
var stopTouch:Boolean = false;
var reason:String = "";
if(e.stageX > (m_workbenchContainer.width + m_workbenchContainer.x) || e.stageX < 0 || e.stageY < 0 || e.stageY > (m_workbenchContainer.height + m_workbenchContainer.y)){
reason+= "OUT OF BOUNDS X:" + e.stageX + " Y:" + e.stageY + " WX:" + m_workbenchContainer.x + " WY:" + m_workbenchContainer.y + " MaxX:" + m_workbenchContainer.x + m_workbenchContainer.width + " MaxY:" + m_workbenchContainer.y + m_workbenchContainer.height;
stopTouch = true;
}
for(var z:int = 0; z < m_workbench.grpLayers.numElements; z++){
if(e.target == m_workbench.grpLayers.getElementAt(z)){
stopTouch = true;
reason += "TOUCHING OBJECT: " + e.target.toString();
}
}
*/
properties.bounds = "BOUNDS: ID: " + e.touchPointID + " X:" + e.stageX + " Y:" + e.stageY + " WX:" + m_workbenchContainer.x + " WY:" + m_workbenchContainer.y + " MaxX:" + m_workbenchContainer.x + m_workbenchContainer.width + " MaxY:" + m_workbenchContainer.y + m_workbenchContainer.height;
var stopTouch:Boolean = false;
if(e.currentTarget is Label){
reason += "Touched Label";
stopTouch = true;
}else if(e.currentTarget is TextField){
reason += "Touched TextField";
}else{
reason += "Unknown: " + e.currentTarget.toString();
}
if(!(e.currentTarget is Label))
{
properties.status = "TRIP OBJECT: " + e.touchPointID + "- " + reason;
//e.preventDefault();
//e.stopImmediatePropagation();
return;
}else if(e.stageX > (.95 * (m_workbenchContainer.width + m_workbenchContainer.x)) || e.stageX < 10 || e.stageY < 10 || e.stageY > (.95 * (m_workbenchContainer.height + m_workbenchContainer.y))){
properties.status = "OUTSIDE BOUNDS" + reason + e.currentTarget.toString();
}else{
properties.status = "VALID? " + reason + e.currentTarget.toString();
}
/* if(e.target is DoodleText || e.target is DoodleImage)
properties.status = "TOUCHED IMAGE OR TEXT";
else if(e.target is UIComponent){
properties.status = "Touched UI Component";
}else
properties.status = "Out Of Bounds";
else
properties.status = "END TOUCH";
*/
//Primary finger removed
if(primTouchID == e.touchPointID){
primTouchID = -1;
secTouchID = -1;
properties.primaryStatus = "RESET";
properties.secondaryStatus = "RESET";
var obj:DoodleInterface = DoodleInterface(m_layersPanel.lstLayers.selectedItem);
m_undoHandler.addUndo(m_layersPanel.lstLayers.selectedItem,"TRANSFORM",(originalX + "," + originalY + "," + originalWidth + "," + originalHeight), (obj.getActualX() + "," + obj.getActualY() + "," + obj.getActualWidth() + "," + obj.getActualHeight()));
}
//Secondary finger removed
if(secTouchID == e.touchPointID){
secTouchID = -1;
properties.secondaryStatus = "RESET";
}
//Stop Stretching if both primary and secondary fingers have been removed
if(primTouchID == -1 && secTouchID == -1){
stretching = false;
//Ensure Object is Snapped to Grid
var endobj:DoodleInterface = DoodleInterface(m_layersPanel.lstLayers.selectedItem)
endobj.setX(int(endobj.getActualX()));
endobj.setY(int(endobj.getActualY()));
endobj.setWidth(int(endobj.getActualWidth()));
endobj.setHeight(int(endobj.getActualHeight()));
}
m_workbench.refreshSelection();
}

Answer 1

I found the solution. For anyone encountering the same issue, please note that older flash components don't exactly like to play nice with spark components.
As you can see in my above code, I was using a spark label as my touch area. The textFields within the group below the touch area were pushing through the spark label and causing the touch_out event to fire.
I have resolved this by having everyone play by the same rules. Instead of mixing a spark label and a flash textField, I have created changed the touch area from a Spark Label to a Text Field.
I create the textfield in actionscript, set its x,y,width,height, and selectable=false. Then add the textField to a UIComponent, and then add the UIComponent to the same group as before.
From what I can tell, everything is working well.
Below is my code. If anyone has any questions, please let me know.
Touch Platform Creation:
if(grpContainer.containsElement(touchPlatformContainer))
grpContainer.removeElement(touchPlatformContainer);
touchPlatform = new TextField();
touchPlatform.selectable = false;
touchPlatform.width = 1152;
touchPlatform.height = 600;
touchPlatform.x = 0;
touchPlatform.y - 0;
touchPlatformContainer = new UIComponent;
touchPlatformContainer.addChild(touchPlatform);
grpContainer.addElement(touchPlatformContainer);
Same Assignments of Touch Events as before:
touchPlatform.removeEventListener(TouchEvent.TOUCH_BEGIN, m_controlPanel.handleTouchBegin);
touchPlatform.removeEventListener(TouchEvent.TOUCH_MOVE, m_controlPanel.handleTouchMove);
touchPlatform.removeEventListener(TouchEvent.TOUCH_END, m_controlPanel.handleTouchEnd);
touchPlatform.removeEventListener(TouchEvent.TOUCH_OUT, m_controlPanel.handleTouchEnd);
touchPlatform.addEventListener(TouchEvent.TOUCH_BEGIN, m_controlPanel.handleTouchBegin);
touchPlatform.addEventListener(TouchEvent.TOUCH_MOVE, m_controlPanel.handleTouchMove);
touchPlatform.addEventListener(TouchEvent.TOUCH_END, m_controlPanel.handleTouchEnd);
touchPlatform.addEventListener(TouchEvent.TOUCH_OUT, m_controlPanel.handleTouchEnd);