I wanted to get information on the page created using proteus, like the key events that user does with some remote controls.
Is there a possibility to get onKeyUp or onKeyDown events like native code.
onKeyUp(final int keyCode, final KeyEvent event)
You could find the view by it's id and use the Android view anyway you want.
/*
LAYOUT:
{
"type": "TextView",
"id": "some-id"
"singleLine": "#bool/true",
"text": "TextView",
"textColor": "#000000",
"textSize": "12sp"
}
*/
view = layoutInflater.inflate(layout, data, container, 0);
View tv = view.getViewManager().findViewById("some-id"); // See the layout above
assert tv != null; // this is nullable
tv.setOnKeyListener(new View.OnKeyListener() {
#Override
public boolean onKey(View v, int keyCode, KeyEvent event) {
// do something.
return false;
}
});
Related
I am building an ExtJS4 web application and there's a part there where I show a confirmation dialog to a user to confirm if the user wants to push through with the action. I use a programmatically generated MessageBox to ask the user and the user can click Yes or No.
Here is my code:
Ext.MessageBox.show({
title: alertHeader,
msg: alertMessage,
buttons: Ext.MessageBox.YESNO,
icon: Ext.MessageBox.WARNING,
cls: 'msgbox',
fn: function(btn){
//if user clicks yes, ask for override button
console.log('btn value = ' + btn);
if(btn ==='yes'){
//more code here
}
});
This works as intended, the program follows through with the appropriate actions based on the user selection (Yes or No). However, I want to add functionality wherein the user can simply press Y or N in the keyboard and the program will still execute as if Yes or No was actually pressed in the dialog.
However, I don't know how to go about adding a KeyEvent Listener to a MessageBox and the documentation is of little help.
Check Ext.util.KeyMap (and Ext.EventObject for key constants), also we have to set focus on our window to listen keyup events on it.
I create simple fiddle to illustrate how it works - Key map with message window.
Its not complete solution, but I guess rest you can do on your own.
As simple example you can do your logic directly on keypress and destroy myConfWindow or myConfWindow.down() to certain button and "click" it. But I guess that you want to use this message box in multiple places in your app, so its better to extend Ext.MessageWindow and add keymap there.
Attach this getKeyMapForKeyPressSubmit() method to your message box
'afterrender' : function() {
var map = this.getKeyMapForKeyPressSubmit();
}
And Method
getKeyMapForKeyPressSubmit : function (target, scope) {
var me = this;
return new Ext.util.KeyMap({
target : target,
binding : [{
key : 89, //Key for Y button - Ext.EventObject.Y
fn : function (key, e) {
//your logic for Yes button
}
}, {
key : 78, //Key for N button - Ext.EventObject.N
fn : function (key, e) {
//your logic for NO button
}
}
],
scope : scope
});
},
You can get a key map of MessageBox through getKeyMap. Add a new key listener to it in afterrender listener.
var myMsg = Ext.create('Ext.window.MessageBox', {
closeAction: 'destroy',
listeners: {
afterrender: function() {
this.getKeyMap().on(Ext.event.Event.Y, function() {
console.log("Yes");
}, this);
this.getKeyMap().on(Ext.event.Event.N, function() {
console.log("No");
}, this);
}
}
}).show({
title: 'Custom MessageBox Instance',
message: 'I can exist along with Ext.Msg'
});
I need to change the ordinary title part of window the be editable for a moment. I tried the following approach, but it seems to fail in several ways. Could someone suggest me a better approach?
var header = window.getHeader();
header.setTitle(''); // Get rid of the original for now
var field = Ext.create('Ext.form.field.Text', {
name: 'Title',
allowBlank: false,
cls: 'myInput',,
value: 'Meh, just some text for now',
listeners : {
el : {
delegate : 'input',
click : function() {
field.focus(false); // Focus but do not select the text
field.selectText(0,0); // The previous failed, try to deselect like this
}
}
}
});
header.insert(0, field); // First, before the tools (several buttons there)
My problems with this are the following;
Without the listener part it is impossible to select the input field at all, all that happens is triggering the moving of the window. With the listener implementation though the contents of the input field get still selected for some reason (without the selectText from 0 to 0). Also it is impossible to use mouse to select parts of the contents because dragging still applies to the whole window, AND the listener implementation's "click" probably also ruins that approach. It is also impossible to move the cursor to specific spot by using mouse click.
So, how should one really go around implementing a usable html input field that replaces window title?
I've tried the following strategy that seems to work: when the mouse cursor enters the input field, disable window drag & drop, and restore it when it leaves.
Here's what it would give with your code:
var killDrag = true;
// Found this by looking into the code: window.dd is an Ext.util.ComponentDragger
// Someone had the good idea to comment that, in there...
window.dd.on({
// Ext.util.ComponentDragger has a beforedragstart event that can cancel the drag.
// Apparently no one had the good idea to mention this event in the API doc.
beforedragstart: function(dd, e) {
if (killDrag) {
return false;
}
}
});
var header = window.getHeader();
header.setTitle(''); // Get rid of the original for now
var field = Ext.create('Ext.form.field.Text', {
name: 'Title',
allowBlank: false,
cls: 'myInput',
value: 'Meh, just some text for now',
listeners : {
el : {
delegate : 'input',
mouseout: function() {
killDrag = false;
},
mouseenter: function() {
killDrag = true;
}
}
}
});
header.insert(0, field); // First, before the tools (several buttons there)
I have a numberfield input which I want to lose focus when the user hits the enter key.
Here's the current config:
{
xtype: 'numberfield',
minValue: 0,
maxValue: 99999,
hideTrigger: true,
keyNavEnabled: false,
mouseWheelEnabled: false,
enableKeyEvents: true,
listeners: {
specialkey: function(f, e) {
if (e.getKey() == e.ENTER)
f.blur();
}
}
}
The specialkey handler works, calling blur() as expected, but the only result is that the caret disappears from the input (indicating that the DOM text input element has been blurred). The field still has all the x-form-focus etc css classes, and examining the object shows that the private hasFocus property is still true.
Any suggestions?
I have tried calling f.onBlur() explicitly after the blur() call, but it made no difference.
(btw the field does not belong to a form so there is no form to submit.)
The fix. The issue is caused by a weird behavior in the Ext.form.field.Trigger class where they don't trigger 'triggerBlur()' when the regular 'blur()' function is called. Very interesting:
listeners: {
specialkey: function(f, e) {
if (e.getKey() == e.ENTER)
{
f.triggerBlur();
f.blur();
}
}
}
This works for me :
specialkey: function(field,events) {
if (events.getKey() == events.ENTER) {
var nextfld = field.nextSibling();
nextfld.focus(true,100);
}
}
specialkey - is a listener of component like textfield,textare,datefield etc,
events.getKey - gets the user keyboard input
events.ENTER - i used this for that will be triggered when "ENTER" in keyboard
field.nextSibling - field refers to current component, and nextSibling property of component to tell who will be the next component
lastly is the nextfld.focus to focus the next component
I am trying to make a live search combo box and everything is working great except for one small detail. I want to call a search method as the user presses the down and up keys through the combo box. This does trigger a select event but the piker has no selection. When I select a combobox item with my mouse or by pressing enter the select event does get a selection. I want to launch queries using the value selected with the down and up keys while navigating the box.
Combo code
searchField = new Ext.form.ComboBox({
id:'searchField',
store: queryCacheStore,
pageSize:0,
width: 780,
triggerAction:'all',
typeAhead:false,
mode:'remote',
minChars:2,
forceSelection:false,
hideTrigger:true,
enableKeyEvents:true,
queryDelay:200,
queryMode:'remote',
queryParam:'query',
queryCaching:false,
displayField:'query',
autoSelect:false,
listConfig:{
loadingText: 'Searching...',
// Custom rendering template for each item
getInnerTpl: function() {
return '<div class="search-item">' +
'{query}' +
'</div>';
}
},
listeners: {
specialkey:function (field, e) {
if (e.getKey() == e.UP || e.getKey() == e.DOWN) {
}
},
select:function (combo, selection) {
var post = selection[0];
searchField.setValue(post.get('query'));
requestAccessList.runSearch();
},
focus:function (combo, event, opts) {
combo.store.proxy.extraParams = {
'lcm':true,
'type':RequestAccess.OBJECT_TYPE
}
}
}
});
So when
select:function (combo, selection) {
gets called with down arrow key or up arrow key then selection is null. When it gets called with enter key or mouse click it has the highlighted combobox selection. So the question is how can I get the value of the combo box from arrow key events?
OK I figured this out myself. You have to override the highlight event of the BoundListKeyNav
Ext.view.BoundListKeyNav.override({
highlightAt:function (index) {
// this.callOverridden(index); For some reason this does not work
var boundList = this.boundList,
item = boundList.all.item(index);
if (item) {
item = item.dom;
boundList.highlightItem(item);
boundList.getTargetEl().scrollChildIntoView(item, true);
searchField.setValue(boundList.getNode(index).textContent);
searchService.runSearch();
}
}
});
I added the following listConfig to a combobox to accomplish something similar:
listConfig: {
listeners: {
highlightitem: function(view, node, eOpts) {
combo.setValue(node.innerText);
}
}
}
It updates the combo box text field value on mouse over and key up/down.
In ExtJS 4, selecting a row in a Grid Panel (by clicking it), and pressing the spacebar selects and de-selects the row. It was not like this in ExtJS 3, and I would like to disable this feature.
Any ideas? I've begin looking into Ext.util.KeyMap to see if I could override it somehow. Thanks in advance.
You have to override the onKeyPress method of the Ext.selection.RowModel. The shipped implementation is
onKeyPress: function(e, t) {
if (e.getKey() === e.SPACE) {
e.stopEvent();
var me = this,
record = me.lastFocused;
if (record) {
if (me.isSelected(record)) {
me.doDeselect(record, false);
} else {
me.doSelect(record, true);
}
}
}
}
Unfortunately there currently is no configuration switch to turn off that behavior.