I am new to flex framework.
I have created an application using flex framework 4.1 which is having various components that are shown to the end user in the form of a popup window using <mx:TitleWindow>.
This titlewindow is closed either on the click of the close button (displayed in it's titlebar) or by pressing the "escape key" on the keyboard.
I coded a functionality wherein I close the current TitleWindow whenever an 'escape' button is pressed.
Here is what I did.
On the keydown event of TitleWindow I called this function
private function detectescapekeypress(event:KeyboardEvent):void
{
if(event.charCode == Keyboard.ESCAPE)
PopUpManager.removePopUp(this);
}
But this function does not work when I define it in the main home screen of my application and call it using parentApplication.detectescapekeypress(event) on the keydown event of TitleWindow
I had to repeat this code for every TitleWindow that I have used in the project.
How can I write the above functionality only once and reuse it amongst various TitleWindow and other components so that the code for the same is not repeated across various components?
Note: Every TitleWindow that I am using has different code, scripts and layout in it.
Thanks
Why don't u just extend the TitleWindow component and add that functionality to your new custom component? Then use it everywhere instead of the original TitleWindow.
I assume u're using at least SDK 4.1
Create a new mxml file called for example CustomTitleWindow.mxml and paste the following
http://www.copypastecode.com/68211/
Then change all your title windows to CustomTitleWindow.
P.S. Note that in order for the key event to be dispatched, the component must have focus.
blz
Related
I am migrating an application from Flex/Flash to Flex/AIR 32.
Many years ago I began using the flextenibles SpellCheck module. It creates a custom component for textArea which will underline misspelled words then display misspelled word in a context menu.
I have successfully migrated it, however the only way to get the custom context menu to popup is by very carefully right mouse clicking the squiggly line under the text, not the text itself. When I right click the text it displays a default context menu. It actually never gets to the function to build custom context menu. I have place the following code in a variety of places in the custom class which extends mx.controls.textArea;
private function creationCompleteHandler(event:Event):void
{
this.contextMenu = new ContextMenu;
this.contextMenu.addEventListener(ContextMenuEvent.MENU_SELECT,showMenu);
}
Including in the constructor and its original location createChildren with the same behavior.
In the Flex/flash version right clicking the text would bring up the custom context menu.
Edit:
As I do more debugging, I find "this.textField" from within the component is firing MouseEvent.CONTEXT_MENU, and it is never getting to the "this.contextMenu" event.
Well I found a work around.
I used the following to create the event listener;
this.textField.addEventListener(MouseEvent.CONTEXT_MENU,showMenu);
Then I changed the handler to use the event data from a mouseEvent instead of contextMenuEvent, this seems to work.
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!
I want to be able to show a Spark TitleWindow container as a modal without having to construct it by code via AS3. I tried creating the TitleWindow before-hand manually by dragging and resizing it around and adding objects, etc then hiding it. Then on a button, I set the called function to the ones below:
public function doPopup():void {
testWindow.visible = true;
PopUpManager.addPopUp(testWindow, this, true);
}
Unfortunately, this only shows testWindow but not as a modal. I want it to be like this so that I can freely resize and design the layout of my TitleWindow and only have to call some function to show it as a modal one.
I'm pretty sure the reason you are seeing this behavior is because your TitleWindow (that you've declared within the mxml of the parent container) is already added to the stage even though it is set as not visible. A workaround you could try is to call this.removeElement(testWindow) in a creation complete handler for the parent container. That will get it off the stage so the PopUpManager can add it later properly.
Having said that, I would recommend putting your TitleWindow into a separate mxml file and instantiate it using the PopUpManager. It's cleaner that way and you can still use the design mode to lay it out as you see fit.
Hope that helps.
Try the Cairngorm 3 Popup library :
http://opensource.adobe.com/wiki/display/cairngorm/HowToUseCairngormPopup
In short:
I need an event listener in a custom component so all its instances (without editing them) react at the same time, fired by a dispatched event in its parent container.
In detail:
I have a custom component with Tab navigator. (The tabs are intended to show different preferences for different Languages.)
I have a button bar with buttons for all the languages.
There are a lot of instances of the custom component.
I want to click in a button of the languages bar and get ALL the instances switched to the same tab (the custom component contains the logic to change the tab).
I can do it by adding the event listener for EACH INSTANCE of the custom component, so it calls an internal function that changes the tab. But it seems to be very coupled, isn't it?
I wonder if it can be done in the master CLASS of the component, so it listen for events in its parent container, whichever it is.
In my mind this code shoud work, but it doesn´t (obviously ill'use a custom event to pass the new language value):
this.parent.addEventListener("lang_change", this.change_tab);
This way I can just drop an instance of the component, and see it working for itself.
Thank you in advance
I need an event listener in a custom
component so all its instances
(without editing them) react at the
same time, fired by a dispatched event
in its parent container.
The very thing you want to do, by definition, breaks encapsulation. In an ideal world, a component should know nothing of it's parent. If the component needs to communicate with it's parent, it should dispatch an event. IF a parent needs to communicate to children it should call a public method on that child (or change a public property). From an encapsulation stand point, I cannot recommend that the child listen for events on the parent.
I want to click in a button of the
languages bar and get ALL the
instances switched to the same tab
(the custom component contains the
logic to change the tab).
So, then put a click handler for the button and do something like this:
public function onClick():void{
myCustomTabNavigator1.selectedIndex = 1
myCustomTabNavigator2.selectedIndex = 1
myCustomTabNavigator2.selectedIndex = 1
}
You can also set the selectedItem if you a reference to it. , If you have your custom TabNavigators in an Array, you can loop over them. IF the custom TabNavigators are child of your custom component you can create a method in that custom component to set the defaults and call that method on each component instead of setting selectedIndex directly.
I think you should to use some MVC model like:
Cairngorm
http://code.google.com/p/swizframework/
http://www.robotlegs.org/
http://puremvc.org/
Is it possible to destroy/close open item editor or item renderer of a datagrid in different mxml page?
I heard about the functions editedItemRenderer and destroyItemEditor on Datagrid. Can I use these functions in different mxml page?
Your question is a bit confusing.
Flex Applications do not have the concept of a page in the same way that HTML does. You probably mean different views, or MXML Components.
All itemEditors are created and destroyed as needed. If you are not viewing the itemEditor on screen, then likely something else has focus and the itemEditor was destroyed automatically.
In most cases, two components should not talk to each other using anything other than their defined API. so, you can have one component dispatch an event, then it's parent listen for the event and have that parent call methods on another component [such as a DataGrid].