Flex TitleWindow (or NativeWindow) skinned as a Fancybox? - apache-flex

The customer I am working for wants to display popup in an AIR application (designed in Flex 4).I will therefore use TitleWindow and PopupManager for this (or NativeWindow could be an option too).
Pretty basic, I can handle this.
Trouble is, this customer would like this popup to be looking as a Fancybox, that is, with the close button, slightly out of the popup.
Do you know how to do this ?

Easy enough. Just create a custom skin based for your TitleWindow which you can then change the appearance and location of the close button (among other things). The setup is fairly straightforward, but you should look up how to skin in Flex 4.

Related

Flash Builder 4.6 - Why am I not able to select anything in a spark Window component in design mode?

In my Flash Builder (Flex) 4.6 app, I just noticed for some reason all my "s:Window" components will not allow me to click and select anything in design mode in flash builder!
My other non-window type components are fine - I can open a TitleWindow or Group for example and click on the various fields and labels no problem.
In my Window components, I can select an item in the 'outline' window, but not using the mouse and actually clicking on the component in the visual design window. When I click in there, it looks like it's selecting the actual 'window' box. Almost like it needs to be 'sent to back' or something.
Any idea how to fix this?
That used to happen to me when I have a container in front of all components.
<s:Button/>
<s:Button/>
<s:Button/>
<s:Group width=100% height=100%/>
I am facing the same problem, there's someone asking the same question here:
AIR: components in window-based mxml component are frozen
My suggestion so far is to use a <mx:Window> instead of <s:Window>
I hope that helps...I'm still looking for an appropriate answer on how to do it "the spark way"

flex windowedApplication skin - how to add close button

I am skinning WondowedApplication to get the following functionality:
Close, Minimize, Maximise Buttons with custom skins of their own
Setting and back button which change states in the main application
Resizing bars on 4 sides and drag functionality
Can I achieve this by skinning WindowedApplication? If not how should I go about this?
I have resizing functionality already by default but not the drag functionality (I think it should work by default or not?).
Buttons also appear but they seem to loose their skin which is set by css (s:Button{...}), why is this? Also How could I access states of the skins host component (so I can exclude settings button from setting state for example)?
How can I access / add close,min,max buttons? I tried adding buttons but I can't use "this.nativeWindow.maximize();" as I couldi n host application.
Any help highly appreciated, I am very confused and annoyed with the lack of info on the issue...
use FlexGlobals.topLevelApplication.minimize() and maximize() for minimize & maximize window and NativeApplication.nativeApplication.exit() used for close window

Indicating that a window is "active" inside a regular Flex (not AIR) application

I have an Flex 4 application (not AIR) which has some floating windows that act essentially as modeless dialogs.
Right now, if two of these are open at once they function as siblings which are both active and whose controls are enabled for user interaction.
I now need to maintain some notion of which one is "active" in the application. I don't want to /disable/ the non-active ones so as to blur them or prevent input on their controls.
I basically want to replicate basic OS window management: when you click or type into a control in one window it comes to the front and its title bar looks "active" and the others then look "inactive". Just like with a bunch of explorers in Windows.
Can anyone clue me in on an approach?
Assuming that your pop up windows extend UIComponent, you should be able to listen to the FocusIn event to make your window active and the focusOut to make your window inactive.
Now containers do not usually dispatch the focus events; however children of the containers will. And since the focus event bubble, you can listen for them as part of your popup.
Personally I would handle this with what we call a Mediator... essentially a singleton UI controller, along with a slightly custom component and custom skin. On Popup, each window registers itself with the Mediator, so the mediator knows all the windows that are open, on close each de-registers itself, OnFocusIn on each component it notifies the mediator of this event, the mediator calls a method on every other panel to does the blurring or whatever.
The custom component can extend TitleWindow and add a property IsActiveWindow, then the custom skin can change it's appearance based on this property.
For pro points use RobotLegs to to inject the reference to the mediator into the components.
Good luck!

How do I create a "closed" Flex Accordian control?

I'm trying to create a navigation panel based on the Flex Accordion control. The 2 things I'm trying to figure out are how to:
modify the Accordion so that all of the of "panels" are closed by default. (normally one of the panels is open by default)
treat some of the Accordian headers as just simple buttons (ie you click and an event is triggered instead of an accordion panel opening)
Does anyone have any pointers on implementing these 2 items or know of any existing components that could yield this behavior?
Thanks!
Flexlib has CanvasButtonAccordionHeader, which would help implement the button functionality.
This SO question suggests starting with flexlib's WindowShade component instead, which might make the "none-selected" case easier.

Flex: Cannot tab between controls on a modal popup

Steps to reproduce:
Create a modal popup to popup with popupmanager (mine is a group with a skinnable container inside of it)
Put field components (textinputs) on the modal popup
Attempt to tab between controls
Tab switches to controls behind the modal-popup and ignores the fact that the modal is there. The tab loop only contains controls behind the modal.
I've tried everything from setting tabChildren, to hasFocusableChildren. I can't implement IFocusManager as it's Halo and my modal is a Spark group, but would that work in some capacity? It really seems like Flex just ignores the modal in its focusmanager.
This is not a bug, I'm assuming it's by design.
Group is supposed to be a lightweight container -- just for grouping things together. Group does not implement the IFocusManagerContainer interface.
SkinnableContainer (or more correctly SkinnableContainerBase) implements that interface, and that's why tabbing works when you use it w/PopupManager.
Solution can be found here (if you want to use a Group):
http://googolflex.com/?p=650
Can you try using TitleWindow instead of group with a skinnable container? We use TitleWindow all the time and it does tab correctly.

Resources