I am writing an application for Arduino.There are a lot of buttons in the application that are in MovieClip. I can click on any one using the keyboard or mouse, everything works correctly. But the application will use control from the array. For example, if Data[5]=100, then the TAB keyboard button should be pressed. If Data[5]=600, then Enter should be pressed. At the moment, pressing TAB turns on the FocusManager. The next time you click, the FocusManager moves to the next button. But if Data[5]=600, when I click on the button that is in MovieClip, I get an error.
3 buttons (Btn1,Btn2,Btn3) are on the main stage.
This code works well
this[BtnCurentName].dispatchEvent(new MouseEvent(MouseEvent.CLICK, true, false));
3 buttons (Btn4,Btn5,Btn6) are inside MovieClip "Prop".I can only press them like this.
this[BtnCurentName].dispatchEvent(new MouseEvent(MouseEvent.CLICK, true, false));
This is my test code.
package
{
import flash.events.*;
import fl.managers.*;
import flash.display.*;
dynamic public class Main extends MovieClip
{
public var fm:FocusManager;
public var myBtnFocus:InteractiveObject;
public var myBtnName:String = "";
public var BtnCurentName:String = "";
public var Prop:MovieClip;
//# /////////////////////////////////////////////////////////////
//# Main code and supporting functions...
//# /////////////////////////////////////////////////////////////
public function Main()
{
addFrameScript(0, this.frame1);
fm = new FocusManager(this);
fm.setFocus( this ); //# manually set your button as default //# fm.setFocus( your button );
this.myBtnFocus = fm.getFocus(); //# update the reference to know currently focused
this.myBtnName = this.myBtnFocus.name; //# extract name from focused
}
public function Rendering() : void
{
this.Connect.Status.text = String( this.Data[5] ); // view arduino Data[5]
if (this.Data[5] > 0) //# if the button is pressed
{
if( ! Boolean(this.chkBtn))//# if the button is not pressed
{
//# press mouse click (Enter)
if ( this.Data[5] > 950 )
{
//# it works perfectly, BUT if my buttons are inside MovieClip, when pressing Data[5]=600 I get an error
//# TypeError: Error #1010: A term is undefined and has no properties.
trace (">> Name for Click is : " + BtnCurentName);
this[BtnCurentName].dispatchEvent(new MouseEvent(MouseEvent.CLICK, true, false));
this.chkBtn = true;
/*
//# results of Trace...
>> Got TAB ... Focus is now changed to : Btn1
>> Name for Click is : Btn1
>> Got Click ... Button name is : Btn1
>> Got TAB ... Focus is now changed to : Btn2
>> Name for Click is : Btn2
>> Got Click ... Button name is : Btn2
>> Got TAB ... Focus is now changed to : Btn3
>> Name for Click is : Btn3
>> Got Click ... Button name is : Btn3
>> Got TAB ... with Parent ... Focus is now changed to : Prop.Btn4
>> Name for Click is : Prop.Btn4
TypeError: Error #1010: A term is undefined and has no properties.
//# end of results
*/
}
//# TAB = go to next button (component)
//# if ( (this.Data[5] == 100) || (this.Data[5] == "100") )
if ( this.Data[5] > 820 && this.Data[5] < 860 )
{
//# it works perfectly
this.myBtnFocus = fm.getNextFocusManagerComponent(); //# find it as next one
fm.setFocus( this.myBtnFocus ); //# then set as current selection (focused)
this.chkBtn = true;
}
}
}
else //# if the button is pressed and Data[5]==0, deleting variables
{
if( Boolean(this.chkBtn))
{
delete this.chkBtn;
}
}
return;
}
public function onMouseClick (event:MouseEvent = null) :void
{
if( event.currentTarget.name != null)
{ this.myBtnName = event.currentTarget.name; }
trace( ">> Got Click ... Button name is : " + this.myBtnName );
}
public function onFocusedBtn (event:FocusEvent) :void
{
if(event.target.parent.name == "root2")
{
BtnCurentName = String(event.target.name);
trace (">> Got TAB ... Focus is now changed to : " + BtnCurentName)
}
else
{
BtnCurentName = String(event.target.parent.name + '.' + event.target.name);
trace (">> Got TAB ... Focus is now changed to : " + BtnCurentName);
}
return;
}
function frame1()
{
this.Btn1.addEventListener( MouseEvent.CLICK, this.onMouseClick );
this.Btn2.addEventListener( MouseEvent.CLICK, this.onMouseClick );
this.Btn3.addEventListener( MouseEvent.CLICK, this.onMouseClick );
//# Buttons into MovieClip
this.Prop.Btn4.addEventListener( MouseEvent.CLICK, this.onMouseClick );
this.Prop.Btn5.addEventListener( MouseEvent.CLICK, this.onMouseClick );
this.Prop.Btn6.addEventListener( MouseEvent.CLICK, this.onMouseClick );
//# Focus listener
this.addEventListener( FocusEvent.FOCUS_IN, onFocusedBtn );
return;
}
} //end Class Main
} //end Package
how can I determine in which MovieClip the button is located so that I can press it?
Try:
public function onFocusedBtn (event:FocusEvent) :void
{
if(event.target.parent.name == "root2")
{
this.BtnParent = event.target.parent.name;
this.BtnName = event.target.name;
trace (">> Got TAB ... Focus is now changed to : " + this.BtnName)
}
else
{
this.BtnParent = event.target.parent.name;
this.BtnName = event.target.name;
trace (">> Got TAB ... with Parent ... Focus is now changed to : " + this.BtnParent + "." + this.BtnName);
}
return;
}
Then in your function Rendering you can check as:
//# press mouse click (Enter)
if ( this.Data[5] > 950 )
{
if(this.BtnParent == "root2")
{
trace (">> Name for Click is : " + this.BtnName);
this[this.BtnName].dispatchEvent(new MouseEvent(MouseEvent.CLICK, true, false));
}
else
{
trace (">> Name for Click is : " + this.BtnParent + "." +this.BtnName);
this[this.BtnParent][this.BtnName].dispatchEvent(new MouseEvent(MouseEvent.CLICK, true, false));
}
this.chkBtn = true;
}
Solved. I get such a trace
>> Got TAB ... Focus is now changed to : Btn1
>> Name for Click is : Btn1
>> Got Click ... Button name is : Btn1
>> Got TAB ... Focus is now changed to : Btn2
>> Name for Click is : Btn2
>> Got Click ... Button name is : Btn2
>> Got TAB ... Focus is now changed to : Btn3
>> Name for Click is : Btn3
>> Got Click ... Button name is : Btn3
>> Got TAB ... with Parent ... Focus is now changed to : Prop.Btn4
>> Name for Click is : Prop.Btn4
>> Got Click ... Button name is : Btn4
>> Got TAB ... with Parent ... Focus is now changed to : Prop.Btn5
>> Name for Click is : Prop.Btn5
>> Got Click ... Button name is : Btn5
>> Got TAB ... with Parent ... Focus is now changed to : Prop.Btn6
>> Name for Click is : Prop.Btn6
>> Got Click ... Button name is : Btn6
Related
I made a custom htmleditor that extends HTMLEditor.
I removed some buttons and added some.
Now i want to add a couple buttons that change the text typed to 1 specific color.
But i cant find a way to change the text color in the setOnAction of the button.
I tryed a couple ways.
1 : html that i insert at the cursor position
2 : setting the colorpicker's of the htmleditor's color
(jsCodeInsertHtml string allows html at cursor)
String jsCodeInsertHtml = "function insertHtmlAtCursor(html) {\n" +
" var range, node;\n" +
" if (window.getSelection && window.getSelection().getRangeAt) {\n" +
" range = window.getSelection().getRangeAt(0);\n" +
" node = range.createContextualFragment(html);\n" +
" range.insertNode(node);\n" +
" } else if (document.selection && document.selection.createRange) {\n" +
" document.selection.createRange().pasteHTML(html);\n" +
" }\n" +
"}insertHtmlAtCursor('####html####')";
// add a custom button to the top toolbar.
Node nodetop = editor.lookup(".top-toolbar");
if (nodetop instanceof ToolBar) {
ToolBar topbar = (ToolBar) nodetop;
//var1 color
ImageView graphic = new ImageView(var1pic);
Button colorVar1Button = new Button("", graphic);
colorVar1Button.setFocusTraversable(false);
colorVar1Button.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent arg0) {
WebView webView=(WebView)editor.lookup("WebView");
WebEngine engine= webView.getEngine();
//try 1
engine.executeScript(jsCodeInsertHtml.replace("####html####","<p><span style=\"color: rgb(200, 200, 200); caret-color: rgb(200, 200, 200);\">"));
//the HTML is inserted , but no colorchange. i tryed some htmlvariants aswel
//try 2
Node color = editor.lookup(".html-editor-foreground");
((ColorPicker)color).setValue(Color.rgb(200,200,200));
// i notice the button change in the colorpicker ,
// but no change in color happens
topbar.getItems().addAll(colorVar1Button);
Found the solution. i just had to fire the actionevent of the colorpicker to make it work
colorVar1Button.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent arg0) {
Node color = editor.lookup(".html-editor-foreground");
((ColorPicker)color).setValue(Color.HOTPINK);
color.fireEvent(new ActionEvent());
}
});
topbar.getItems().addAll(colorVar1Button);
Here is the js method:
scope.onTheClick = function(source, item, $event) {
if (!_.isUndefined(scope.helpers) && !_.isUndefined(scope.helpers.onTheClick)) {
scope.helpers.onTheClick(item);
} else if (source) {
if ($event.metaKey) {
window.open('/'+ source + '/' + item.id);
} else {
window.location.href = '/'+ source + '/' + item.id;
}
}
};
right now it works like ng-click="onTheClick(source, item, $event)" ng-class="[helpers.onTheClass(item)]"
How can I add right or middle clicked to open in a new tab or window?
In your case $event.button stores the mouse button, which has been pressed.
https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
I have a button and i give the label value dynamically. And button width=100;
If i give btn.label = "Good Morning Have a nice day"; it shows
But i need to remove the dots. and i have a different function to marquee.
var t:Timer = new Timer(500);
btn1.label += " ";
t.addEventListener(TimerEvent.TIMER,function(ev:TimerEvent): void
{
btn1.label = btn1.label.substr(1) + btn1.label.charAt(0);
}
);
t.start();
i have another button as btn2.
Click event on btn2 calls the above code and the label text start to move towards left. But i need to remove the dot.
any help???
I got my answer.
private var str:String;
str = "Text To Display" + " ";
str = str.substr(1) + str.charAt(0);
btn1.label = updateLabel(str);
private function updateLabel(str:String):String
{
return new String(str).substr(0,10);
}
it works for me. if any one have any other solutions then please share your views. Thank you
Many times when I am being tab to switch fields, some times it entered into a text area where pressing tab indent your text. How can I get out these textareas using keyboard so I can continue switching fields.
...here is a fiddle that does the same.
If the websites themselves are overriding this default/expected behaviour then they are breaking a standard UI feature (and possibly lessening site accessibility - although that may depend on the particular application) and it is really up to the site to implement some kind of alternative. There is no other "built-in" keyboard shortcut to move focus to the "next page element".
If, however, you just want to get focus out of that textarea, then you could perhaps use another shortcut, such as Ctrl+L which moves focus to the address bar. From their you can start TABing again to move focus.
You can use the following to do what you need:
http://postcode.cf/support-tabs-in-text-areas.html
/* Support Tabs within your textarea */
HTMLTextAreaElement.prototype.getCaretPosition = function () { //return the caret position of the textarea
return this.selectionStart;
};
HTMLTextAreaElement.prototype.setCaretPosition = function (position) { //change the caret position of the textarea
this.selectionStart = position;
this.selectionEnd = position;
this.focus();
};
HTMLTextAreaElement.prototype.hasSelection = function () { //if the textarea has selection then return true
if (this.selectionStart == this.selectionEnd) {
return false;
} else {
return true;
}
};
HTMLTextAreaElement.prototype.getSelectedText = function () { //return the selection text
return this.value.substring(this.selectionStart, this.selectionEnd);
};
HTMLTextAreaElement.prototype.setSelection = function (start, end) { //change the selection area of the textarea
this.selectionStart = start;
this.selectionEnd = end;
this.focus();
};
var textarea = document.getElementsByTagName('textarea')[0];
textarea.onkeydown = function(event) {
//support tab on textarea
if (event.keyCode == 9) { //tab was pressed
var newCaretPosition;
newCaretPosition = textarea.getCaretPosition() + " ".length;
textarea.value = textarea.value.substring(0, textarea.getCaretPosition()) + " " + textarea.value.substring(textarea.getCaretPosition(), textarea.value.length);
textarea.setCaretPosition(newCaretPosition);
return false;
}
if(event.keyCode == 8){ //backspace
if (textarea.value.substring(textarea.getCaretPosition() - 4, textarea.getCaretPosition()) == " ") { //it's a tab space
var newCaretPosition;
newCaretPosition = textarea.getCaretPosition() - 3;
textarea.value = textarea.value.substring(0, textarea.getCaretPosition() - 3) + textarea.value.substring(textarea.getCaretPosition(), textarea.value.length);
textarea.setCaretPosition(newCaretPosition);
}
}
if(event.keyCode == 37){ //left arrow
var newCaretPosition;
if (textarea.value.substring(textarea.getCaretPosition() - 4, textarea.getCaretPosition()) == " ") { //it's a tab space
newCaretPosition = textarea.getCaretPosition() - 3;
textarea.setCaretPosition(newCaretPosition);
}
}
if(event.keyCode == 39){ //right arrow
var newCaretPosition;
if (textarea.value.substring(textarea.getCaretPosition() + 4, textarea.getCaretPosition()) == " ") { //it's a tab space
newCaretPosition = textarea.getCaretPosition() + 3;
textarea.setCaretPosition(newCaretPosition);
}
}
}
I tried to use the CustomMessageBox with a listpicker in PickerMode.Expanded but I'm having problems.
The same problems can be seen running the CustomMessageBoxSample after changing the ItemsSource = new string[] { "5 minutes", "10 minutes", "1 hour", "4 hours", "1 day", "2 days", "10 day" } , that is with more than 5 elements so it will open in FullMode by default.
In this case, leaving the other code example as it is, clicking the listpicker opens the fullMode selecting page but, after a selection, the whole CustomMessageBox is closed (you cannot decide to press its left or right button).
I tried to change the code as follows, but in this case the fullMode selecting page is opened behind the messageBox and cannot be seen and no selection can be done (you can see it, in greyed, if you put many items so it has a long list of items so some of them can be displayed in background below the foreground messagebox.
messageBox.Dismissing += (s1, e1) =>
{
//if ((listPicker.ListPickerMode == ListPickerMode.Expanded)
if ((listPicker.ListPickerMode == ListPickerMode.Expanded) || (listPicker.ListPickerMode == ListPickerMode.Full))
{
e1.Cancel = true;
}
};
I tried also with the following code but the fullMode selecting page, even though is now visible, it is not enabled, so no selection can be done ....
messageBox.Dismissing += (s1, e1) => {
if (listPicker.ListPickerMode == ListPickerMode.Expanded)
{
e1.Cancel = true;
}
else if (listPicker.ListPickerMode == ListPickerMode.Full)
{
e1.Cancel = true;
messageBox.Visibility = Visibility.Collapsed;
//listPicker.IsEnabled = true; //???
// listPicker.Focus(); //???
// listPicker.UpdateLayout(); //???
}
};
listPicker.SelectionChanged += (s3, e3) => {
if (listPicker.ListPickerMode == ListPickerMode.Full) {
messageBox.Visibility = Visibility.Visible;
}
};
Any suggestion?
Thanks
Enzo Contini