Does Flex fire an event after a chart is rendered in UI? - apache-flex

I am looking for an event which is fired (if any) after a chart is rendered (visible in UI) in Flash, we are using Flex SDK 3.0. We have to capture the screenshot after the chart is rendered, current implementation adds a huge delay in update_complete event callback, this is slowing down the whole job of generating images.
I tried to use EXIT_FRAME event, but this doesn't seem to serve the purpose. Any help to resolve this issue is highly appreciated.
Regards,
Dan

Adobe use this event : mx.events.FlexEvent.TRANSFORM_CHANGE
But if you want to use it, you are obligate to inherit from Chart Component classes. Take a look at DataTransform Class.
http://help.adobe.com/es_ES/FlashPlatform/reference/actionscript/3/mx/charts/chartClasses/DataTransform.html

I suggest you to look at the DisplayObject liveDoc, where there are several types of events. Some are fired before the rendering (Event.RENDER), some are fired after specific operation (ResizeEvent, for instance). But if you really want to know when you chart has been rendered, why don't you watch for the validation methods (updateDisplayList(), commitProperties()) by overriding them in a child class and fire a custom event in there ?

Related

Flex Cairngorm 3 Presentation Model Initializations

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.

Gesture Events and StageWebView

Greetings! I have a Flex 4.5 Mobile project rolling, and I've hit a pretty crazy snag. I'm using a StageWebView object to render web pages, embedded within the rest of my spark layouts. I'm trying to add a gesture event to the component that contains the StageWebView, but since the StageWebView object doesn't belong to the Flex stack (it inherits from EventDispatcher, not UIComponent) all of my events seem to be getting eaten. Any mouse based event (click, gesture, etc) doesn't seem to register, and I'm not sure how to get around it. The gesture events work if I use the area where the browser is not rendered. How can I get the gesture event from the outer SkinnableContainer?
StageWebView Reference:
http://help.adobe.com/en_US/FlashPlatform/beta/reference/actionscript/3/flash/media/StageWebView.html
UIComponent Wrapped StageWebView:
http://soenkerohde.com/2010/11/air-mobile-stagewebview-uicomponent/
Thanks!
I guess you might have to wire up the gesture events yourself, just doing a quick digging in UIComponent.as, it has these:
[Event(name="touchInteractionStarting", type="mx.events.TouchInteractionEvent")]
[Event(name="touchInteractionStart", type="mx.events.TouchInteractionEvent")]
[Event(name="touchInteractionEnd", type="mx.events.TouchInteractionEvent")]
it's not a bug, from what i understand any mouse interaction over a stagewebview means an interaction with the html currently loaded in itself. you should capture events there and trigger it back to the swf.
surely there are some jquery plugins or something that have gestures to help achieving that.
it's a bit of a bummer that you cant overlay stuff over them though.

Best way to do loaders in a flex application?

What is the best way to do a loader in a flex application? I have an animated .gif that is to be used as our loader (whenever I need to wait for an action to complete), and I am not sure the best way to do it.
This is how I am thinking:
Have the loader be a custom component.
On the parent application, add an event listener for my custom event AceEvent.SHOW_LOADER.
In the event listener, use the PopUpManager to show the loader.
Listen for AceEvent.HIDE_LOADER.
Get rid fo the loader via PopUpManager.
What do you think about this? Is there a better way to do it?
Thanks!
Andrew
Well, last I checked, animated gifs don't work in Flex unless you have a workaround. Still, I wouldn't use an animated gif to create an animation because of their low quality. I would just recreate it using Flash.
The way I would do the loader however would be very different. personally, I don't believe in 'system loaders' unless it's your application's preloader. The reason for this is that there could be more than one thing loading at the same time (which might not know about each other) which means that the loader popup could disappear before everything is loaded (first one loads, dispatches event and removes popup, while the other is still loading).
What I like to do is create a custom component for the popup loader (since it will be reused quite a bit) and from there I can either use states the are appropriate for my view or have a boolean flag binded to show the popup when true (this can easily be done using frameworks like Parsley). The popup would only cover the part of the system that's actually loading data (since I doubt that your whole app is loading data at the same time) which makes for a better UX.
I ended up using as3gif (until I can get this recreated as a .swf). The way I do this is by using my custom event class (AceEvent.SHOW_LOADER and AceEvent.HIDE_LOADER), which bubbles up to the top. I then use the PopUpManager to add/remove this with modal to disable the application.

Adobe flex layout redraw

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.

ASP.NET Ajax ReOrderList - Any way to disable specific items from being dragged and dropped?

I have an ajax controltoolkit reorderlist within an asp.net application.
I need to disable certain specific steps from being reordered. This has to be done dynamically. All steps are consecutive and start from the beginning, but it's not known until runtime how many need to be disabled from being reordered any further.
I tried the e.item.enabled = false for reorderlist_itemdatabound but this just disabled links. I need to disable the drag handler.
Any help is greatly appreciated. Thanks!
To be honest, I'm not too familiar with this control, but...
You need to hide the drag handler div (or whatever is in the 'DragHandleTemplate' I believe) and/or change its class. Two suggestions:
1) Add a javascript startup script to disable the divs in question.
2) Subclass this control... Override the Render() method. Replace it with original code from ReorderList, but check the Item to see if you should render the drag handle.
as a workaround to disable drag'n'drop for some item - you can set width=0 to the control inside <DragHandleTemplate> </DragHandleTemplate>. Thus user won't be able to pick the item for dragging.
Suppose you have an image with id dragme in DragHandleTemplate; you can do this in the ItemDataBound handler:
Image dragMe = (Image)((TableRow)e.Item.Controls[0].Controls[0]).Cells[0].Controls[0].FindControl("dragMe");
dragMe.Style.Add(HtmlTextWriterStyle.Visibility, "hidden");
This way you preserve the alignment.

Resources