ok so I have a TitleWindow that I open up... and I have 6 states defined. I am using the Presentation model pattern for all of my views. I have discovered a frustrating nuance. When I tell my window to go to XXX state, the controls have to initialize since the states in flex use lazy loading. so... my PM code that says myTextArea.text bombs out and say "cannot access..." so as a work around, I made some creationComplete events on my controls to register the control with the PM. So when the state changes, the textarea finally initializes and on creationComplete calls PM.registerTextArea() which sets a reference to it. then in that function I run my code... myTextArea.text.. etc.
This seems like such a ugly hack that I hate it. Is there any way to wait until the entire state in created then call code on the PM? I have tried enterstate... but this event seems to fire before the state controls are ready.
I tried to add a comment, but I guess editing is the only way I can do this...
to everyone: thanks for the great feedback. I am doing something slightly off straight PM. Every view has a viewController (as I call them). Its kinda my own hybrid of a delegate / dataprovider. But this is moot. It's the flex component lifecycle when dealing with states that is the pain. if you change state.. there is no event to say "all my components in this state are ready". only event to say "we changed state". so my code that fires on state change is trying to talk to components that aren't ready yet. So from what I see, there seems to be no design pattern or perfect way to ensure that all components are created in a state unless using creationComplete on every component in the state to register it is ready... if you don't, you get a race condition. Regardless of frameworks or design patterns, this seems to be a root issue.
The textarea is an easy PM fix.. just bind it to the pm value. But there are other times I can't.
Specifically, I am trying to attach video to a display once I get to that state. This is done via addchild. regardless of where I do it.. I need to know that the videoDisplay is done loading before I call addchild. I even tried currentStateChange event since docs say that fires last... but alas.. the components in the state are still initializing. So it seems that creationComplete is my only option. Maybe the only sane way to keep to clean code is to create the entire thing (videodisplay and video) using as once the state is entered. I just hoped the flex framework had events to ehlp me here rather than buiilding everything on the fly in as.
Since your PM has a reference to a visual component (myTextArea), this isn't a completely pure form of a presentation model. It appears to be more of a supervising presenter / controller type of setup.
That being said, the way I would fix your problem would be to use a complete presenter outright ( no knowlege of the view at all ) or use a complete controller ( view implements an interface through which the controller communicates ). The advantage of using a presenter in Flex is that you can create a bindable value such as text or selectedItem, and the view will bind to that variable whenever it comes online so the issues dealing with the lifecycle of Flex components go away.
Related
I'm fairly experienced with Flex 4, but I still haven't needed frameworks yet (I like to do everything myself) and don't want to use them either, I know it's advantages and have learned how to use one of them, but still, no.
How can I dispatch an event in the main application and have a component inside a popupmanager to react to that event? All this dispatching the event within the main app and NOT aiming it to the popupmanager or the component instance, I want to be able to fire the event and not care about who gets it or if anyone reacts to it at all so if that is possible then I wouldn't care about keeping track of said popups.
I already dispatch an event from the component and receive it in the main application by bubbling the event and therefore being agnostic of each other, now I want it backwards.
Note: I have used singletons, but it's not the approach I need this time.
It sounds to me you are in desperate need of RobotLegs, you seem to be asking how to to create/use an event bus system in order to de-couple your components which is exactly what robotlegs is amazing at.
One thing you should definitely also look at is ActionScript 3 Signals. Signals is an approach to make strongly typed events like .NET Framework, instead of the magic strings event system, and is a fantastic easy bolt on addition to any Flash/Flex project.
Another way that is common is a mediator/controller singleton pattern. Let's say this is an automotive application, and we have a service layer that behind the scenes is receiving some data from the server, whilst at the same time our popup is behind displayed. One way we solve this problem is create a singleton based controller for our data like PartsController. It also has some public const Signals like SingalDataUpdated. The popup can now do something like PartsController.SignalDataUpdated.add(OnPartsUpdated). OnPartsUpdated is a local method inside the popup that can now react to the event as necessary and has no coupling to any other UI component. This is typically the approach we take and ensure that no UI component has explicit knowledge of any other UI component, and instead only talk to the controllers. One thing you need to ensure though is when the popup is closed remove the signal lister.
Again though, RobotLegs does most of all these for you and encourages some very great architecural best-pracitces. I would highly recommend you read through their documenation and get familiar with it. It will change your life when you realize how modular and maintainable it helps make your code.
Good luck!
Update regarding context and singletons
The idea regarding a context is to create a single singleton known as your application's context that stores the instances of what would be your other singletons. Inversion of control (IoC) and RobotLegs just wires things together so it dosen't look like absolute crap to work with, but you can just use a simple IoC injector like Swiz or SwiftSuspenders which RobotLegs is built upon. So, for example, you might hit a particular controller like:
AppContext.Instance.ProductController.SignalProductAdded.add(OnProductAdded);
But that is a bit ridiculous to try to access everything this way. Here comes RobotLegs to the rescue. Instead define injection rules in your RobotLegs context, so if a component asks for a UserController via an inject metadata tag, everything would get the same UserController. Exactly like a singleton, but correctly so in your component define;
[Inject] public var _objProductController:ProductController;
Now your component can work with the controller object as if it was its own, but instead it was injected in by RobotLegs on construction. For me and and most of my products I build a few base objects like GroupBase, PanelBase, PopupPanelBase, etc. that extend the proper component and already have all the controller injection properties so any component derived from these already connect to the proper controllers as needed.
For your simple project, it's like easier to roll your own and just create a single singleton for your context to hold your controllers and communicate with application's context that way. These are all pretty high level architecural decisions and everyone works differently at this level based on their experience, preference, or whatever. The most important thing is that it works for you, and you are comfortable with the architecture. RobotLegs helps make everything very decoupled which has some amazing unforseen benefits later.
Good luck!
If I understand the question:
how can I dispatch an event in the
main application and have a component
inside a popupmanager to react to that
event
Inside your pop up component, you can do something like this:
var app:Application = FlexGlobals.topLevelApplication as Application;
app.addEventListener('myCustomEvent',onMyCustomEvent);
Now any instances of the myCustomEvent that are dispatched by the main Application class will fire the handler in the popup. Also, any instance of the myCustomEvent that bubble up to to the main Application class will fire the handler in the popup.
I'm not sure if this is a good idea. Accessing the topLevelApplication will add external dependencies to your pop up which may reduce re-use of said component in the long term. Accessing the topLevelApplication is not a decision I would take on without thought.
If you were trying to ask a different question; it is unclear to me from your post, which I found kind of confusing.
Looking further into what Flextras.com said (Jeffry Houser I presume), this feat is impossible, events never bubble to children, only to parents.
Therefore, this has to be done in a central event repository approach, which is the way frameworks do it mostly.
This is indeed one of the problems solved by dependencies injection found in some frameworks as robotlegs.
I have an application in flex, it has some components out of the box and quite a few of custom components and events.
I want to get all event listeners on a specific component in runtime, I know how to do it with monkey-patching the framework but I do not want to use a monkey patch nor can I rely on this in production.
Is there a way?
The EventDispatcher has a pretty slim public interface:
addEventListener
dispatchEvent
hasEventListener
removeEventListener
willTrigger
This means the list of listeners isn't exposed. You can only tell if there is at least one event listener for a particular type of event.
I would re-examine why you need to do what you want to do. In a typical Observer Pattern the listener list isn't meant to be exposed. I have a strong feeling if you are trying to get that list then you are approaching a higher level problem from the wrong direction.
You can't. You could simply use custom components only and override addEventListener to gather the information. I don't really see why monkey patching wouldn't work. Flex is powerful in features but poor in design and I guess you'll have to just live with that.
this is a very basic question but I could not figure out.
My flex application gets some parameters from URL when the application opens for the first time(ex: layout=<1,2,3,4> ). Based on layout(1,2,3,4) value I have to change the layout. However the problem is the application is already drawn(Layout is initialized) by the time the control reaches the point where it reads the values from the URL.
I was wondering how can I redraw once I read the values from URL. Some thing like refresh.
Or is there a better approach to my problem.
thank you
I am not sure if this is the right approach but I fixed my problem my calling the function which is responsible for layout in applicationComplete.
It works great now.
The better approach would be to wait for the URL to be parsed and then create your view based on that value.
This means that your Main.mxml should be empty when the application loads and when you parse the URL add your MainView to the application.
Something like
- CreationComplete
- ParseURL
- AddMainViewElement
According to the adobe documentation:
"After all components are created and drawn, the Application object dispatches an applicationComplete event. This is the last event dispatched during an application startup."
( http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7ee6.html)
so "applicationComplete" event fired after all the components created.
When I try to access the hidden TABs of my tab navigator control in action script, it returns a null error. But it works OK if I just activate the control in the user interface once. Obviously the control is not created until I use it. How do I make all the tabs automatically created by default ?
<mx:TabNavigator creationPolicy="all"/>
That should do it. Deferred instanciation is a feature, but sometimes it is a hassle.
The Flex framework is optimizing creation be default (creationPolicy="auto") so if you have a configuration dialog with a lot of tabs, for example, and the most useful tab is the first one, your application does not spend time and memory initializing the tabs that the user never sees.
This makes a lot of difference when dialogs like this never release, and is a good default to go with.
One thing to look at is using a private variable in your dialog/form instead of pushing the data to the control on the hidden page. This style treats the whole form as if it were a component, which it sort of is. To repeat: the MXML form/dialog/canvas is a class, and it can have data and methods in addition to containing other components.
Cheers
On a side note, I've run into the deferred-loading policy in a multi-state application, and circumvented it by forcing all elements to be included and invisible in the initial state. Something to consider, but only as a hack.
An MXML component can be quite complex, containing many nested controls, including asynchronously loaded content such as Image/SWFLoader.
Is there one event I can watch for on my component that will only be raised when every control and sub-component has loaded, including SWFs and Images?
CreationComplete will NOT do the trick if you are talking about loading swf content or anything really external like that. CreationComplete gets fired when the MXML components have been laid out as defined in MXML (IE nested components, buttons, boxes, canvasses, etc.), so content that needs to get loaded externally (an image, a swf) does not count.
What you need to do is keep track of everything that you're waiting for and fire off a custom event once all of those elements have loaded.
One possible hackish way to do it would be to listen for whatever load complete event is relevant for each element, then have them call back to the same function that increments a value equal to the number of components you're waiting for. This means you have to pay more attention if you're modifying it, but it also means you don't have to check a boolean for every element that needs to load (IE "if (image1Loaded && image2Loaded && swfLoaded)" etc.)
The onApplicationComplete event?
The creationComplete event should do the trick - creationComplete is called on the parent component after it is called on the children.
You can get some more info on the component lifecycle in the Adobe docs.
In some complex cases, like when your component is considered "finished" only when some data has been retrieved via HTTP or something like that, custom event is your best bet.