Remove focus from input on click outside - actionscript-3

I'm using Flex 4.6 with spark components. I have form with DropDownList, and I want to achieve next behaviour:
user clicks on text input in DropDownList -> DropDownList get focus
user clicks outside (on background Rect, for example) -> DropDownList lose focus
Suddenly, second part doesn't work from box. DropDownList still in focus when user clicks outside the text input. How to implement required behaviour?
Example:
<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script><![CDATA[
]]></fx:Script>
<s:TextInput />
</s:Application>
If you click on TextInput it gets focus. And you cannot remove this focus by clicking outside TextInput.

I found solution at the official forum. There is a post with same problem.
And working solution in the end:
textInput.addEventListener(FocusEvent.MOUSE_FOCUS_CHANGE, textInputMouseFocusChange, false, 0, true);
// basically the above Event will dispatch when ever the user clicked outside of textinput when the current focus in in textInput.
private function textInputMouseFocusChange(event:FocusEvent):void {
// basically u dont need this first line if u are not calling any function on textInput focusout.
textInput.dispatchEvent(new FocusEvent(FocusEvent.FOCUS_OUT));
// the remaing peice of code will remove the current focus from textInput to the area where the user had clicked.
// this piece of code i have taken from one of the comments in the blog : http://blog.flexexamples.com/2008/09/23/setting-focus-in-flex-using-the-focus-manager/
var focusPoint:Point = new Point();
focusPoint.x = stage.mouseX;
focusPoint.y = stage.mouseY;
var i:int = (stage.getObjectsUnderPoint(focusPoint).length);
stage.focus=InteractiveObject(stage.getObjectsUnderPoint(focusPoint)[i-1].parent);
}

First of all, I think that you are speaking about the ComboBox spark component and not the DropDownList because you have mentioned the TextInput of the component which is a Label control in the case of a DropDownList.
Then, to remove the focus from the ComboBox component, you can set the stage.focus to null when the change event of your component is fired :
<s:ComboBox change="on_Change(event)" />
And
protected function on_Change(event:Event):void
{
stage.focus = null;
}
Hope that can help.

Related

How to disable the default context menu on a text area in Actionscript 3?

By default the spark TextArea has a built in ContextMenu with 'Cut', 'Copy', 'Paste', 'Delete' etc. options.
I want to replace this ContextMenu with a custom one but I'm having a problem with disabling the default one.
After adding a custom one also in first time I am getting the default ContextMenu then from second time I am getting the custom ContextMenu.
I am using the following codes for textarea :
<s:TextArea id="txtArea" width="100%" height="100%" borderVisible="false" focusAlpha="0.01"
verticalScrollPolicy="off" selectionHighlighting="always" styleName="TextBox"
needsSoftKeyboard="true" focusRect="false" buttonMode="true" useHandCursor="true" mouseChildren="true"/>
And using the following codes for adding custom ContextMenu to text area at right mouse down :
eventMap.mapListener( view.txtArea , MouseEvent.RIGHT_MOUSE_DOWN ,onRightMouseDown);
private function onRightMouseDown(e:MouseEvent):void
{
var item1:ContextMenuItem = new ContextMenuItem("Cancel", true);
var item2:ContextMenuItem = new ContextMenuItem("Select", true);
var contextMenu:ContextMenu = new ContextMenu();
contextMenu.hideBuiltInItems();
contextMenu.customItems.push(item1);
contextMenu.customItems.push(item2);
view.txtArea.contextMenu = contextMenu;
}
But I don't know why default ContextMenu is coming at first time.
So anybody have an idea why it is happening or where I am doing wrong ?
The reason you're getting the original context menu the first time is because you're not turning it off until after the first right click has happened. You're also needlessly rebuilding the context menu every time there is a right click.
To fix this, you need to take the code you have in your onRightMouseDown function, and put it into your class constructor or, if you don't have one, anywhere it will be run as soon as the swf is run. This only needs to happen once.
The Following codes resolved my problem:
var contextMenu = new ContextMenu();
contextMenu.hideBuiltInItems();
contextMenu.clipboardMenu = false;
contextMenu.addItem(new ContextMenuItem("Start Select"));
contextMenu.addItem(new ContextMenuItem("Start Copy"));
(txtArea.textDisplay as RichEditableText).contextMenu = contextMenu;
Instead of putting custom context menu directly into textArea control, if we will put on richEditableText as above then that will solve this problem.
I've added on whole application
addEventListener(MouseEvent.RIGHT_CLICK, function (... rest):void
{
})
and defaultContextMenu was disabled.

How can I import opening component at default package?

There is a button in opening component(welcome page) and it is invisible at the beginning. When user pass to another component, the button is supposed to be visible. However I cannot reach the property.
What is the way of importing opening component at (default package)?
this is the button:
<s:SWFLoader id="btnRepr" x="1790" y="1008.45" source="#Embed('Components/Starter/Assets/Buttons/ButtonReport.swf')" click="ShowReportPage" visible="false"/>
and this is the part I change visible to true:
btnRepr.visible = true;//Access of undefined property 'btnRepr'
Supposed that in your SWFComponent you have your SWFLoader :
<s:SWFLoader id="btnRepr" source="#Embed('ButtonReport.swf')" visible="false"/>
and you have another component called BTNComponent where you have a simple button which will show the SWF loaded in the SWFComponent's instance called swf_component, so you can do like this :
<s:Button click="button_clickHandler(event)"/>
and
protected function button_clickHandler(event:MouseEvent):void
{
mx.core.FlexGlobals.topLevelApplication.swf_component.btnRepr.visible = true;
}
Of course this is just a very simple and limited example if how you can do what you are looking for, you should improve it according to your specific needs ...
Edit :
Supposed that my two components are in MyComponents package, then to create their instances I did :
import MyComponents.*;
public var swf_component:SWFComponent;
public var btn_component:BTNComponent;
then inside the application's creation complete event handler, for example, I added :
swf_component = new SWFComponent();
addElement(swf_component);
btn_component = new BTNComponent();
addElement(btn_component);
then when the button inside the btn_component is clicked, the SWF inside the swf_component` is set visible.
Hope that can help.

AS3 Flash change combobox value cause keydown events are disabled

I'm using Flash Pro CS6.
I created a fla project and put in a ComboBox.
Then i place following code in action:
import flash.events.KeyboardEvent;
this.stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);
this.stage.addEventListener(KeyboardEvent.KEY_UP, onKeyUp);
function onKeyDown(e:KeyboardEvent)
{
trace("Keydown :" + e.charCode);
}
function onKeyUp(e:KeyboardEvent)
{
trace("Keyup :" + e.charCode);
}
both event work fine at the beginning but when i change the ComboBox value, the event KEY_DOWN no longer work.
here is my sample project:
Untitled-1.fla
As Baris said, you should use stage.focus = null after selecting combobox element :
cb.addEventListener(Event.CHANGE, cb_on_change)
function cb_on_change(e:Event):void {
stage.focus = null
}
Click anywhere on the stage dont solve problem if there is no element on the stage that will receive the focus.
When you click on the combobox it gets focus which prevents keyboard events from firing on the stage.
Do they start working again if you click anywhere on the stage. Alternatively you can clear the focus with stage.focus = null.

itemclick event in spark tabbar?

Hallo tabbar supports item click event. However spark tabBar doesnot supports itemClick event.
is there way to listen itemclick event in SPARK TABBAR
thanks all
Spark components inheriting from ListBase no longer dispatch ItemClick events. You can use the IndexChangeEvent event instead though. It has a property newIndex that tells you which is the newly selected item (or tab in this particular case).
<s:TabBar dataProvider="{dp}" change="trace('selected: ' + event.newIndex)" />
One big difference with the old ItemClick is that this event is only dispatched when the selected item actually changes (as opposed to whenever it is clicked). If you really want the behaviour of ItemClick back, you can create a custom ItemRenderer that dispatches an
ItemClick event.
If you want to react on every click there are a few approaches. Here are two of them:
1./ Create a custom ItemRenderer that dispatches an ItemClick event.
.
public class TabBarButton extends ButtonBarButton {
override public function initialize():void {
super.initialize();
addEventListener(MouseEvent.CLICK, fireItemClick);
}
private function fireItemClick(event:MouseEvent):void {
owner.dispatchEvent(new ItemClickEvent(
ItemClickEvent.ITEM_CLICK, false, false, null, itemIndex, null, data
))
}
}
You can now use it like this:
<s:TabBar id="tabBar" dataProvider="{dp}"
itemRenderer="net.riastar.TabBarButton" />
tabBar.addEventListener(ItemClickEvent.ITEM_CLICK, onItemClick);
2./ Another approach would be to just listen for any click event on the TabBar and use event.target to find the clicked tab:
<s:TabBar dataProvider="{dp}" click="trace(event.target)" />
//traces tabBar.TabBarSkin1.dataGroup.TabBarButton1
Note that this is a direct answer to your question, but I actually don't think you should do this. In most cases IndexChangeEvent.CHANGE will do just fine.

dropdownlist event

I have been searching all around for a guide on event handling in flash builder 4.5. I have a dropdownlist that I'd like to activate preferably a action script function. similar to asp.net/js.
cheers!
right out of as3 docs with some comments...
import fl.controls.ComboBox;
import fl.controls.Label;
var myComboBox:ComboBox = new ComboBox();
myComboBox.prompt = "Please select an item...";
myComboBox.addItem({label:"Item 1"});
myComboBox.addItem({label:"Item 2"});
myComboBox.addItem({label:"Item 3"});
myComboBox.addItem({label:"Item 4"});
myComboBox.width = 150;
myComboBox.move(10, 10);
myComboBox.addEventListener(Event.CHANGE, changeHandler); // <- ASSIGN EVENT LISTENER
addChild(myComboBox);
var myLabel:Label = new Label();
myLabel.autoSize = TextFieldAutoSize.LEFT;
myLabel.text = "selectedIndex:" + myComboBox.selectedIndex;
myLabel.move(myComboBox.x + myComboBox.width + 10, myComboBox.y);
addChild(myLabel);
function changeHandler(event:Event):void { // <- ASSIGN FUNCTION
myLabel.text = "selectedIndex:" + myComboBox.selectedIndex;
}
Also from the docs, these are the events...
change
Dispatched when the user changes the selection in the ComboBox component or, if the ComboBox component is editable, each time the user enters a keystroke in the text field. ComboBox
close
Dispatched when the drop-down list is dismissed for any reason. ComboBox
enter
Dispatched if the editable property is set to true and the user presses the Enter key while typing in the editable text field. ComboBox
itemRollOut
Defines the value of the type property of an itemRollOut event object. ComboBox
itemRollOver
Defines the value of the type property of an itemRollOver event object. ComboBox
open
Dispatched when the user clicks the drop-down button to display the drop-down list. ComboBox
scroll
Dispatched when the user scrolls the drop-down list of the ComboBox component. ComboBox