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();
}
