I have a Flex app with a viewport that loads a series of other swfs. I would like to place a context menu over top of the SWFs when the user right-clicks. To that end, I have set up a fairly standard context menu where each item has a ContextMenuEvent.MENU_ITEM_SELECT event handler. One problem: The eventHandler never gets called.
If I place the context-menu code anywhere else in the app, i.e. not on top of a loaded SWF, everything works fine. However, when I place the exact same code on the SWF viewport, the context menu items appear, but the eventHandlers are never called. Any ideas?
I'm not sure I understand your problem, but this is my insight.
The SWF is embedded and can only be expected to change the visual appearance of your Flex app, but you cannot expect the embedded SWF to do the work of dispatching events as well. You will need to "bubble out" the events into the SWF's parent(s) and let the parent deal with the event.
http://www.adobe.com/devnet/flex/articles/itemrenderers_pt1.html
Let me know, thanks!
i think is because the event doesn't bubble up to your app where you have the listeners.
Related
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.
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.
In an accessible flex app, the user can navigate through the control by using the TAB key.
The flex app pops up on top of the html page aftert the user activate a particular link, and is loaded using swfobject.embedSWF.
It works well in most cases, but there are some instances where either or both these happen:
a) The flex app loads ok, the "flex focus" is set on the intro text label to read out loud, but pressing tab seems to still cycle through the links on the page behind. (Now Fixed, see Edit 2)
b) The focus worked well and pressing tab cycle through the controls ok, but after going through them it then tabs out of the flex app and onto the address bar.. it becomes a nightmare to even try to get back to the flex app without clicking on it.. which isn't exactly accessibility friendly.
Is there any way to prevent these from happening?
EDIT: The target browser is IE. Seems to be the most used with Jaws
EDIT: I managed to fix problem (a). The trick was to call focus on the swf object, but after a slight time out - must be something to do with flash/js ready state.
setTimeout(function(){
document.getElementById('swfobject').focus()
},25);
Problem (b) is still an issue though...
In your mx:Application component, add an event listener for the keyFocusChange and add this code :
protected function application1_keyFocusChangeHandler(event:FocusEvent):void
{
event.preventDefault();
focusManager.getNextFocusManagerComponent(event.shiftKey).setFocus();
}
b) Try to place some focusable element after swf in html. When focus leaves flex app, see if onfocus handler of that element gets called. If it is, you can refocus flex app from there or redirect it where you want.
When a user clicks a button, I need a separate browser window to popup. How can I set the modal property of the application? (ie, when a popup window opens, the main application is disabled until that popup is closed ... I need to use a browser window rather than a popup window, but can't figure out how to disable the main application)
PopUpManager.createPopUp (this, navigateToURL( url, "http://www.google.com" ) , true );
thanks!
[[Updated Answer]]
Ok, my modal dialog looks like so:
cg = mx.managers.PopUpManager.createPopUp(this, ChoiceGrid, true) as ChoiceGrid;
PopUpManager.centerPopUp(cg);
But, what I would do instead of what you're asking, is embed an IFrame in the modal popup. This is exactly what we're doing in our app to collect CC data (well, not the popup part, just the IFrame bit. http://code.google.com/p/flex-iframe/
This way, you have the standard modal dialog you're looking for, AND an internally managed 'view' out to your checkout server. Something like this:
<code:IFrame id="iFrameWithJSfunctions"
src="{checkoutURL}" />
The flex-iframe is pretty easy to work with, for the most part. You shouldn't have many problems with it.
[[Original Answer]]
I'm not sure you need a PopUp to do this.
Why don't you simply do:
navigateToURL(urlRequest,"_blank");
instead?
You should think of a Flex App as a self contained entity. The PopUpManager is designed to create Windows (Panels / any UIComponent) that reside over another component inside the SWF. It does not create items that pop up out of the SWF or in new browser windows.
navigateToURL could be used to create a HTML pop-up from your Flex application. However, there is very little--if any--communication between the SWF and the browser pop up. And there is no way to make a modal pop-up.
You might investigate performing an ExternalInterface call and creating your new pop up in JavaScript. Here is an article about creating modal windows in JavaScript. Before going too far down that road, I would think carefully about your requirements. How would feel if one browser window popped open another browser window and prevented you from doing any browsing until you addressed the issues in that window. Or to put it another way, how would you feel if Microsoft Word opened a word document and wouldn't let you edit any other document until you shut down the first one? I'd be pretty upset.
Modal application dialogs are one thing. And the PopUpManager allows you to create those. I would consider Model application windows a bad UI decision.
I want to change the view states in my flex app when it resizes in the browser window.
I have the swf embedded at 100% x 100%. So when the user resizes the window below a certain width, I want to switch to a different state. I tried adding an event listener like this, but it only fires the event when I resize the swf outside the browser, not inside. I used:
this.addEventListener(ResizeEvent.RESIZE, SizeChanged);
I want this to work within the browser. I even tried using fixed dimensions in the embed code, instead of percentages, but that didn't help either.
You want to add the listener to the stage.
this.stage.addEventListener( Event.RESIZE, resizeHandler ); //from your Main.mxml creationComplete handler
Or you can add a listener via:
Application.application.stage.addEventListener( Event.RESIZE, resizeHandler)
Also, keep in mind that this event fires a lot as the view is resizing, so you will want to account for that.