1 person found this helpful
There was a discussion of a Catalyst project with similar architecture that you may find englightening. See discussion.
I'd suggest keeping your menu component, but having each webpage be a different main application page. That way, your menu component can target the main application pages.
Thanks for the tip and the link to the other discussion. I didn't follow every detail of that discussion but I downloaded your sample Flash Catalyst project posted there and I now have a better understanding of the issues. Previously, I didn't realize that you can target top-level application states from within a component but now I see that you can do that. That solves half the problem for me. What I need to do is create different page states at the top level of my application. I can then create interactions from within the menu that transition to the appropriate page when a menu button is clicked.
Unfortunately, there is another half of the problem that cannot be addressed in this way. I also want to highlight the currently selected menu item to indicate the current page. I'm doing that by disabling the button for a given page when on that page. I add a highlight behind that menu button for the disabled state. However, I cannot make this change from the top level because I don't have access to the menu component's buttons at the top level. To do that I have to edit the menu component. But then, I no longer have access to the top-level app states. I only see my menu component's states which, by default, is just a single state. So, I have no way to change the button highlighting based on the top-level app's current state.
I can work around this catch-22 by creating a duplicate set of states within the menu component. So, for example, in a two-page site I would have states Page1 and Page2 at the app top level and also within the menu component. At the top level of the app I would change the main page contents. Within the menu, I would disable the Page1 button (and enable the Page2 btn) when the menu's Page1 state is selected and disable the Page2 button (and enable the Page1 btn) when the menu's Page2 state is selected. Each button would have two interactions assigned to it, one to transition to the top-level state and another to transition to the menu component's corresponding state.
This will work but, clearly, it's not great because of the duplication of states and interactions. It seems like what's needed is the ability for a component to inherit the states of its parent. At least, this is my read of the situation. Please let me know if I've missed something.