How to make a window show up outside the app? - apache-flex

In our Flex AIR app, we have the problem that our main app window is fairly narrow. This means Alert dialog boxes are chopped on both side, while the right click menu is cropped. How can we get these windows to not get cropped by our main window?

Turn your main AIR window into an invisible transparent window and make your app's primary working window a child of the invisible one. Then when you AIR app starts, make the invisible window the size that encompasses the desktop. You'll then be able to position as many windows and dialogs as you want on this desktop area without worrying about them getting clipped as is happening to you now.
If you want to support multiple screen displays - such that your visible app window can be drug around from display to display, then make your invisible window the size of the entire graphics coordinate system such that it encompasses any and all display screens.
Once you go with the invisible window approach, you'll be able to achieve windowing behaviors that are like that of native applications.

How are you showing the Alerts? If you are using Alert.show(), it will use the default width. However, you can get around this by creating an Alert Object, setting the width manually (or even dynamically), and then using the PopUpManager to show it, place it where you want, and hide it. It takes a little more code, but gives you a lot more flexibility.
Here's a small sample:
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="creationCompleteHandler();">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.managers.PopUpManager;
private function creationCompleteHandler():void
{
var alert:Alert = new Alert();
alert.width = 100;
alert.text = "this Alert is\n100px wide";
PopUpManager.addPopUp(alert, this);
PopUpManager.centerPopUp(alert);
Alert.show("this Alert uses the default width");
}
]]>
</mx:Script>
</mx:WindowedApplication>

With flex applications running inside of the flash player, windows cannot be shown outside of the stage. So the only way to make this work would be to make your app larger.
You could though use the flex/ajax bridge and call a javascript alert box instead, they would not be bound by the stage. But it would not be skinned like the rest of the application though and would take some more work to get hooked in, especially if you are listening for the user to click the okay button...

I believe the dojo extensions for adobe air should be able to do what you are after. Never used it myself and not sure what the trade off will be but it might be worth looking at.
http://sitepen.com/labs/dair/

Related

Nonexclusive Borderless Fullscreen with QML

I need a fullscreen window in QML. However, it must not be exclusive fullscreen. My application must work with accessible applications such as Windows On-screen Keyboard and Magnifier. If my application runs in exclusive fullscreen, it will stay on top of other accessible applications making them useless.
With QWidget, I can call showFullscreen() and get what I needed (a window that cover the entire screen while letting other accessible applications stay on top of it.
With QML, there are a few few ways to make the window fullscreen. However, all of the methods I've tried result in exclusive fullscreen.
I've tried all answers suggested here. To summarize I've tried setting visibility: "FullScreen". I've tried manually setting the width and height to match the screen resolution.

Adobe Flex Content Disappears in IE8

I am having an interesting bug in MSIE8, only.
I have also tested this in MSIE7, MSIE9 and Chrome and could not reproduce it in those environments.
I have a flex application which is embedded in a webpage. The application has a few top level components. One is a mx:ViewStack which contains a number of different icons. The other is a mx:Canvas which contains a number of child mx:Canvas elements (which are used as layers to hold other UIComponents).
<mx:Canvas backgroundColor="#FFFFFF" id="drawing_area" borderColor="#000000" borderStyle="solid" horizontalScrollPolicy="off" verticalScrollPolicy="off" width="728" x="10" height="522.8889" y="10">
...
</mx:Canvas>
The error occurs when I perform the following steps.
Load the page with the component
Let the component fully load
Scroll down so that the top of the flex content goes outside the bounds of IE8's content window.
When I do the above, the mx:Canvas with the border disappears. It can still be interacted with, but any content moved into one of the child elements also disappears.
In this first image you can observe my starting state, there is a border around the drawing area, and the drawing area can be interacted with.
This second image shows the issue, after additional scrolling down. The border disappears and all UIComponents placed into the drawing_area also disappear.
Unfortunately IE8 is still a popular browser in the organization this was designed for.
Anyone have any clues as to what might be happening. I have tried different wmodes for flash. I am currently using window, but have tried transparent as well, and have the same issue.
I have tried a number of different things to get a work-around for this bug without much success.
I am using Rails on the backend and this issue is tied to only the "new" action, and does not appear on the "edit" action. Both pages use a shared partial to render the content.
Because of this I am doing browser detection using the rails gem browser. When a user is using IE8 I provide a recommendation to upgrade. On the page that has this error occurs I am providing instructions to enter data for the required fields and then save their report. This will take the user to the "edit" action and they will be able to interact with the flash content without issue.

Flex - Subclassing VBox in MXML to use as a base component, advice needed

I'd like to extend VBox to add some "defaults" and a bit of boilerplate-ish code (let's call it "VBoxSub" here), the idea being that "pages" in the application would extend this VBox subclass.
This seems to work fine except that the final classes extending "VBoxSub" don't inherit the width/height settings set in VBoxSub when in Flash Builder's design mode. When switching to design mode with the component empty, all it shows is a tiny plain box instead of a larger 1000x700 working area with the default VBox css background color. What's going on here? (Yeah I've tried refreshing/restarting design view.)
I'd like to have each of these components all be exactly the same size so that when laying out the UI I know exactly how much space I have to work with - preferably without having to copy/paste the width and height attributes into every darn mxml file (and having to worry about updating each one if the w/h ever change!). (Using Flash Builder 4, SDK 4.1)
I've tried doing this to get it to work, but still no good in Design View:
override protected function measure():void {
super.measure();
measuredWidth=1000;
measuredMinWidth=1000;
measuredHeight=700;
measuredMinHeight=700;
}
Do I really need to hard code width/height in every component "page" within the application?
Flash Builder doesn't execute Actionscript in design mode. Since the AS code doesn't get executed, the VBox doesn't get measured in design mode.
You need to use declarative MXML in such a situation.

How to reference the image used as icon for a button in Adobe Flex?

I am developing a Flex application in which I would like to simulate roughly what we get when we serach Google for images. When we pass the mouse pointer over an image, it enlarges a little bit so we can see it better and click it if we want.
I know I could just use an image and increase its size via mouseOver/ mouseOut events, but the thing is that it is much easier for users to realise that they're clickable when I use a button with an icon (as opposed to a plain image).
So here's the question. Is there any way to alter (in this case, its height and width) the button icon through the button methods/ properties?
I can explain it a little further if this is too confusing.
Thank is advance.
P.S.: The way I'm doing it now is by changing the src property of the icon to switch to another (larger) version of the same picture (that requires two versions of each pictures to be stored). However, I'm using the setStyle method to achieve that, which, according to the documentation itself, is not very good performance-wise. And it's so much easier to adjust the size than to have to load another picture which is just an old version of the previous one.
If your picture is enlarged only 'a little bit', you can get away with one (larger) version (just set smoothing = true on underlying Bitmap.) This also enables smooth transition from small to larger version. And hand cursor would be fine way to indicate clickableness, while very large buttons will look strange.
The question was already asked in these threads
Create a button with an icon in actionscript
Set the icon of a Flex button with a Sprite in runtime
According to them there is no graceful solution, but the task can be done via setStyle() or using this snippet:
http://blog.benstucki.net/?p=42
The another way is to use a hack like this (Transparent button over image):
<s:Group width="100" height="20">
<mx:Image source="picture_you_need.jpg" width="100%" height="100%" scaleContent="true" maintainAspectRatio="false"/>
<s:Button id = "test_button" width="100%" height="100%" alpha="0.0"}"/>
</s:Group>

Strange behaviour when dynamically resizing Flash / Flex embed object

I have a simple Flex application that is a panel with a repeater inside of it; albeit a little simplified, it is like such:
<mx:Panel id="pnl">
<mx:Repeater id="rp">
<mx:Label text = "foo" />
&lt/mx:Repeater>
&lt/mx:Panel>
I am then embedding this Flex application into an HTML wrapper. I am then attempting to dynamically re size the embedded Flash object in the HTML as the Flex panel changes size (thus allowing the Flex application to consume as much of the HTML page as it needs).
I am doing this by doing the following actionscipt:
pnl.addEventListener(ResizeEvent.RESIZE,function(event:Event):void {
ExternalInterface.call("resize",event.target.height);
});
which in turn calls this javascript function:
function resize(height) {
// the embed or object that contains the flex app
var e = document.getElementById('flex_object');
if(e) e.height = height;
}
This seems to work perfect in IE, however I get strange results in Firefox / Safari, the repeater works for n number of times, and then the text seems to get cut off / disappear in the repeater, see the attached image:
alt text http://img528.imageshack.us/img528/9538/rpre0.jpg
Can anyone explain why this is happening, and if there are any workarounds / ways of doing the same thing?
I'm currently working in the same thing (a swf that dynamically changes it's height depending on the content it's currently holding). I also had a similar problem to yours trying to make a multi-line button.
I'm new to flex but I managed to solve the problem manually invoking the updateDisplayList() of the container... I think it "forces" a render somewhere... it's parameters are the width and height of some area where the changes happen. Sorry for not knowing the details... But it worked for me.
Why not simply using percent width and height on your HTML page for your Flash object ? This way you event don't have to do anything to resize your SWF...
That's very strange - it looks like Firefox/Safari are expanding the draw area of the embed, but somehow Flash is not getting the message that it needs to render the new pixels.
You could probably work around this by doing something to force Flash to update itself, but since the communication between the browsers and the embed seems to be confused it would probably be less hackish to take a different approach, that fits into the browsers' event flow without bugging.
For example, instead of resizing the embed, you might try putting Flash inside a DIV, setting the Flash's size to 100%, and then resizing the DIV. That seems a lot less likely to misbehave.
My experience is that Flex's resizing abilities are... funny. Sometimes they work the way one would expect, other times they do not. There are a couple of things you could try: first, trace the value you expect to get in Flex for the height or even ExternalInterface.call("alert",event.target.height); This will let you know if it is a JavaScript or a Flex problem for sure (but I suspect it is Flex).
Your problem might have to do with the scaling of the component:
Setting [the height] property causes a resize event to be dispatched. See the resize event for details on when this event is dispatched. If the component's scaleY property is not 100, the height of the component from its internal coordinates will not match. Thus a 100 pixel high component with a scaleY of 200 will take 100 pixels in the parent, but will internally think it is 50 pixels high.
If it is Flex and that does not help, I would try using callLater in front of the ExternalInterface call, often that will allow Flex enough time to figure out what the heck it is doing. Occasionally, setTimeout is needed, but I find that awkward.

Resources