Search code examples
apache-flexformsmxmlparenthierarchy

Flex+MXML: Getting parent form from textfield "enter" event


I'm not sure what the best practice is when attempting to "do something" with a form as a result of a user interaction - I'm certainly open to an alternative if it's the best practice.

There's an MXML event property called "enter" that applies to s:TextInput which calls an AS event handler when the user presses the Enter key within a TextInput field (imagine a Search field - you type in your search term and press Enter).

Now, within that event handler, I need to get at the parent Form object. Since we're talking best practices here, I'm not interested in referring to the Form by ID, in case my "enter" handler must be able to work with different forms.

My question is - what is the best way to get a handle on the event target's parent form in Flex? The parent-child hierarchy in Flex is absolutely ludicrous (eg: FileSyncFB0.WindowedApplicationSkin2.Group3.contentGroup.TabNavigator7.NavigatorContent10.SkinnableContainerSkin11.contentGroup.Group17.Panel18.PanelSkin23._PanelSkin_Group1.contents.contentGroup.directoryForm_A.FormSkin32.contentGroup.FormItem34.FormItemSkin36.contentGroup).

Seriously.

Who can make any sense of that?

In the chain of gibberish above, the object I'm looking for happens to be directoryForm_A but look just how nested it is! Surely there must be some property of a FormItem that refers to its parent form?

The MXML structure is much more meaningful semantically:
<s:Form id="directoryForm_A" width="100%">
 <s:FormItem width="100%" label="URI">
  <s:layout>
   <s:BasicLayout/>
  </s:layout>
  <s:helpContent>
   <s:Label text="Help String"></s:Label>
  </s:helpContent>
  <s:TextInput left="0" right="0" enter="handleUserSetRootDirectory(event)"/>
 </s:FormItem>
</s:Form>

The TextInput is initiating the event, and is the event.target. Following my MXML hierarchy, a logical chain might be event.target.parent.parent taking me from TextInput to FormItem to Form, but as you can see, the lovely skinnable Spark architecture puts all these other display objects and containers in-between.

Is there some other hierarchy I can exploit that has a much more semantically pure structure to traverse? Or is there a built in property or method of FormItems (at least) that allow you to access their logical parent containers?

Or am I still thinking too much like a Flash/AS3 developer and there's a different paradigm I should just hike up my jeans an adopt?


Solution

  • You shouldn't be trying to refer to event.target.parent.parent. Never try to establish a reference chain like that, since it is likely to change and when you do change it it will break things. Instead, have a handler for your TextInput that handles the ENTER event and dispatches another (perhaps custom) event that is listened for by whatever event.target.parent.parent refers to, be it a form, a container, or the application itself. If necessary, have the event bubble. Then do whatever you want in that handler.