How to have same component ID in different state (Flex Mobile Project)

Question

For example, in my flex mobile application I have a portrait and a landscape state. Both with the same components, but they are being laid out using different HGroups and VGroups in each state. If i was just putting click handlers on these components it would be easy because i could just simply define the same click listener to them even if they had different IDs. But since im referencing all of these components in several situations many times throughout the application, how can i allow them to have the same id, and only react if they are in the present view?

right now it tells me "identifier 'example_id' used more than once."

edit: also just want to say im aware of how when they're not in a group, you can just do something like x.portrait="25" y.portrait=""25" but when i have them in H and V groups it prevents me from doing that.

Answer 1

You can place a component with an id only once in a container, I'm afraid, and only set its properties based on the state.

this will work (given states "vertical" and "horizontal"):

<s:Group id="test" width="100%" height="100%" visible.vertical="true" visible.horizontal="false"/>

but this won't:

<s:Group id="test" width="100%" height="100%" includeIn="vertical"/>
<s:Group id="test" width="100%" height="100%" includeIn="horizontal"/>

So probably you have to relayout your UI (let it be layouted by Flex?) during runtime. One workaround - put UI components like rectangles etc around your components and turn them on and off based on style forcing your components in the places you want them to be.

Answer 2

As Tomasz mentioned and the documentation states,

... all id properties must be unique within a document.

Your edit indicates a problem with trying to use explicit coordinates in layouts that ignore them (VerticalLayout & HorizontalLayout). Because of this I'm unsure if you really can't use state selectors like Tomasz mentioned or not. Perhaps you need to explain in a little more detail why using state selectors isn't an option for you.

An alternative to using the 'id' property to get references to components declared in MXML is to use the 'name' property. Assigning a name to a component allows you to retrieve it using the getChildByName() method of any DisplayObjectContainer. This method:

Returns the child display object that exists with the specified name. If more that one child display object has the specified name, the method returns the first object in the child list.

Only the named component that is a part of the currentState will be returned using this method (will work best in assuming you won't have two components with the same name in the same state).