I have an old android app developed with cordova and i was not too familiar with it as native java. In my app case when it opened it was displaying a login screen with username, password and Login button and i found the file that handles this functionality was signin.js and code was as below
Ext.define('GBMob.view.Signin',{
extend: 'Ext.form.Panel',
requires: [
'Ext.data.JsonP',
'Ext.field.Password',
'Ext.form.FieldSet',
'GBMob.view.GBHome'
],
config: {
items: [
{
xtype: 'fieldset',
title: 'User Info',
instructions: 'Enter Username/Email and Password.',
maxWidth: 550,
items: [
{
xtype: 'textfield',
name: 'username',
label: 'Username'
},
{
xtype: 'passwordfield',
name: 'password',
label: 'Password'
},
{
xtype: 'button',
text: 'Sign in',
ui: 'confirm',
padding: 2,
margin: 15,
flex: 0.3,
handler: function() {
var loadingMask = {
xtype: 'loadmask',
message: 'Signing in ...'
};
Ext.Viewport.setMasked(loadingMask);
var softkeyboard = window.cordova.plugins.SoftKeyBoard;
softkeyboard.hide();
username = SigninView.getValues().username;
password = SigninView.getValues().password;
Ext.data.JsonP.request({
url: 'https://xxxxxx.com/api/login/',
scope: this,
params: {
data: base64.encode(username.toLowerCase() + ':' + password)
},
success: function(result) {
........
........
........
console.log("Signing in with Username: " + username + " and password: " + password);
}
}
]
}]
}
});
So as of now the code was working perfectly, but the problem was after the user entered username and password and clicked on the Sign in button the keyboard was not disappearing and due to which after redirecting to dashboard half of the dashboard page was disappearing(vanishing), i mean only half of the page was visible and half page was blank(may be the previous login screen keyboard portion was making the dashboard half screen invisible/blank white background). So i decided to hide the keyboard immediately after clicking on the Sign in button and hence done the following
Searched the keyboard plugin as cordova plugin search keyboard
Installed the SoftKeyboard plugin as cordova plugin add org.apache.cordova.plugin.softkeyboard
Added the following two lines in signin.js file as mentioned in the above code
var softkeyboard = window.cordova.plugins.SoftKeyBoard;
softkeyboard.hide();
but after add the above two lines i was not able to login at all and the app was displaying just the signing in .... mask continuosly.
So whats wrong with above added two lines of code and what need to do to hide the keyboard immediately after clicking on the button in cordova ?
Does anyone had any idea on how to hide keyboard in cordova ?
Found this function somewhere on stackoverflow to hide the keyboard in android
We need to create a javascript function as below
function hideKeyboard() {
//this set timeout needed for case when hideKeyborad
//is called inside of 'onfocus' event handler
setTimeout(function() {
//creating temp field
var field = document.createElement('input');
field.setAttribute('type', 'text');
//hiding temp field from peoples eyes
//-webkit-user-modify is nessesary for Android 4.x
field.setAttribute('style', 'position:absolute; top: 0px; opacity: 0; -webkit-user-modify: read-write-plaintext-only; left:0px;');
document.body.appendChild(field);
//adding onfocus event handler for out temp field
field.onfocus = function(){
//this timeout of 200ms is nessasary for Android 2.3.x
setTimeout(function() {
field.setAttribute('style', 'display:none;');
setTimeout(function() {
document.body.removeChild(field);
document.body.focus();
}, 14);
}, 200);
};
//focusing it
field.focus();
}, 50);
}
And just call this anywhere in your js file when needed like
hideKeyboard();
Related
i am creating option dialog which contains radio buttons on right .this i saw in kitchensink i tried to create my own in other project but it showing error like applybutton(); undefined on button click ,i know that applybutton(); is function we have to define it but in kitchensink it directly shows how is that.
if i have to define function how could i go further,should i use images? please help me i am new to titanium appcelerator
Ti.UI.setBackgroundColor('white');
var win = Ti.UI.createWindow({
title: 'Click window to test',
backgroundColor: 'white',
exitOnClose: true,
fullscreen: false
});
var opts = {
cancel: 2,
options: ['Confirm', 'Help', 'Cancel'],
selectedIndex: 2,
destructive: 0,
title: 'Delete File?'
};
var dialog = Titanium.UI.createOptionDialog(opts);
dialog.addEventListener('click',function(e)
{
label.text = 'You selected ' + e.index;
if (e.button) {
label.text += ' button';
} else {
label.text += ' option';
}});
var button1 = Titanium.UI.createButton({
title:'Show Dialog 1',
height:40,
width:200,
top:10
});
button1.addEventListener('click', function()
{
dialog.androidView = null;
applyButtons();
dialog.show();
});
win.add(button1);
win.open();
the function applyButtons() was originally defined in the KitchenSink example code, be it at the top of the file or imported in via a commonjs module with a require statement.
If you want to call and use this method, place it at the top as a function expression eg.
var applyButtons = function() {
// Do something
};
You are getting a undefined error on the click eventLister as it can't find reference to this function.
Either remove / delete the call to the function or add it at the top of the code with whatever you want applyButtons to do.
Following is my Sencha code of a simple registration form:
xtype: 'fieldset',
items: [
{
name: 'name',
id: 'rename',
xtype: 'textfield',
placeHolder: 'Name*',
tabIndex: 1
},
{
name: 'emailfield',
id: 'reemailid',
xtype: 'emailfield',
placeHolder: 'email#example.com*',
tabIndex: 2
},
{
name: 'password',
id: 'repassword',
xtype: 'passwordfield',
placeHolder: 'Password*',
tabIndex: 3
},
{
name: 'confpassword',
id: 'reconfpassword',
xtype: 'passwordfield',
placeHolder: 'Confirm Password*',
tabIndex: 4
},
{
name: 'address',
id: 'readdress',
xtype: 'textareafield',
placeHolder: 'Address*',
tabIndex: 5
},
{
name: 'dob',
id: 'redob',
placeHolder: 'Date Of Birth',
xtype: 'datepickerfield',
destroyPickerOnHide: true,
picker: {
yearFrom: 1960
},
tabIndex: 6
}
]
When I am filling up the form in Android keyboard there is a 'Go' button in bottom right corner of the android keyboard, which helps us to submit the form. But I want a 'Next' button which will take me to the next field, I mean if I filled the name and press the 'Next' button on Android keyboard then it should take me to email.
The action event is triggered on a textfield whenever the "Return" or "Go" key is pressed. You should leverage that to call the focus method on the next field.
Something like this will work on Android, didn't test it on iOS though
Ext.define('Fiddle.view.Main', {
extend: 'Ext.Container',
config: {
fullscreen: true,
styleHtmlContent: true,
items: [
{
xtype: 'textfield',
label: 'First field',
listeners: {
action: function() {
Ext.getCmp('field_2').focus();
}
}
},
{
id: 'field_2',
xtype: 'textfield',
label: 'Second field'
}
]
}
});
Working example at: https://fiddle.sencha.com/?fiddle=b3o#fiddle/b3o
[EDIT]
Previous solution remains valid but I found this linked question:
How to change the Android softkey keyboard "Go" button to "Next".
This is done on the native Android project and modifies the behavior of the "Go" button application wide. Check it out.
i'm trying to capture pictures in a app using by Sencha Touch 2.3.1 and Cordova 3.4.1-0.1.0.
Reading the docs (http://docs.sencha.com/touch/2.3.1/#!/api/Ext.device.Camera-method-capture) it looks very easy and simple, but i'm having a very weird experience.
First i create a Sencha Touch app and initialize Cordova on in it
sencha app generate MyApp ./MyApp
cd ./MyApp
sencha cordova init
At this point, when i try to build, it works fine on a real device, android emulator or even on browser.
Then, i changed Main.js to add the capture feature.
Ext.define('CameraTest.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar',
'Ext.device.*'
],
config: {
tabBarPosition: 'bottom',
items: [
{
title: 'Welcome',
iconCls: 'home',
styleHtmlContent: true,
scrollable: true,
items: {
docked: 'top',
xtype: 'titlebar',
title: 'Welcome to Sencha Touch 2'
},
html: [
"You've just generated a new Sencha Touch 2 project. What you're looking at right now is the ",
"contents of <a target='_blank' href=\"app/view/Main.js\">app/view/Main.js</a> - edit that file ",
"and refresh to change what's rendered here."
].join("")
},
{
title: 'Camera',
iconCls: 'action',
layout: {
type:"vbox",
pack:"center",
align:"center"
},
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'CameraTest'
},
{
xtype: 'panel',
html: '<img style="height: 200px; width: 200px;" src="http://placehold.it/200x200" />'
},
{
xtype: "button",
text: "Photo",
handler: function() {
function success(image_uri) {
var img = Ext.ComponentQuery.query("image")[0];
img.setSrc(image_uri);
}
function fail(message) {
Ext.Msg.alert("Failed: " + message);
}
Ext.device.Camera.capture({
sucess: success,
failure: fail,
quality: 50,
destination: 'data',
source: 'camera'
});
}
}
]
}
]
}
});
Done, the app stops loading. It stucks in the appLoadingIndicator and doesn't reach the tab panel component.
However, if i open it in a browser it works just fine.
I don't know even how to debug this.
This is the screen that the app gets stuck
It appears that you may be mixing up some of the parameters.
capture( options, scope, destination, encoding, width, height )
options = an object, which in your case would have {success:, failure:, quality:, source}, ...
and, destination: is not part of the options object, but its own parameter (as are, scope, encoding, width, and height)
I just solved it!
Reading these Cordova docs: http://cordova.apache.org/docs/en/3.0.0/guide_cli_index.md.html i discovered that i need to install the plugins before using the APIs =P.
Doing this solved everything:
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git
My View (MyFormPanel)
var controllers = Ext.define("MyApp.controller.formcontroller", {
extend: "Ext.app.Controller",
config: {
refs: {
username: "username"
},
},
launch: function () {
alert('Controller launched');
},
init: function () {
alert('Controller init');
},
myaction : function (options) {
alert('options');
var username = options.username;
this.render ({
xtype: 'MyATM',
username: username})}
});
var formPanel = Ext.create('Ext.form.Panel', {
fullscreen: true,
scrollable: 'vertical',
layout: {
align: 'center',
type: 'vbox'
},
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'Login Form'
},
{
xtype: 'fieldset',
items: [
{
xtype: 'fieldset',
title:'Enter user name & password',
defaults: {
required: true,
labelAlign: 'left',
labelWidth: '50%'
},
items: [
{
xtype: 'textfield',
name : 'username',
label: 'User Name',
allowBlank:false,
useClearIcon: true
}, {
xtype: 'passwordfield',
name : 'password',
label: 'Password',
allowBlank:false,
useClearIcon: false
},
{
xtype: 'checkboxfield',
required:false,
id: 'RememberMe',
name: 'RememberMe',
label: 'Remember Me',
labelWidth: '50%'
},
{
xtype: 'button',
ui: 'confirm-round',
text: 'Log In' ,
handler: function() {
//Ext.Msg.alert('Form Values', JSON.stringify(formPanel.getValues(), null, 2));
Ext.ControllerManager.get('formcontroller').ControllerMethod({myaction: myaction});
}
}
]
}],
}]
});
formPanel.add({
xtype: 'toolbar',
docked: 'bottom',
layout: { pack: 'center' },
});
My controller (FormController)
Ext.define("MyApp.controller.formcontroller", {
extend: "Ext.app.Controller",
config: {
refs: {
username: "username"
},
},
launch: function () {
alert('Controller launched');
},
init: function () {
alert('Controller init');
},
myaction : function (options) {
alert('options');
var username = options.username;
this.render ({
xtype: 'MyATM',
username: username})}
});
I am using Sencha touch2 with Phonegap 1.4 on android 2.3. When i try to move view to controller on Login button click on handler function to invoke controller , i am getting error , Ext.dispatch is not defined as function .
Tell me the actual way how to move view to controller and vice versa.
Thanks
Ext.dispatch is not the recommended way to use in Sencha Touch 2. It might be removed...
Anyway, the best way to listen to & handle events on your views from controllers is:
Ext.define("MyApp.controller.formcontroller", {
extend: "Ext.app.Controller",
config: {
refs: {
loginButton: "#login-button" // set an id for your login button and this ref works
},
control: {
loginButton: {
tap: 'handleLogin',
}
handle_login: function(){whatever you want to do here}
}
And in Architect...
a. you go to the button's config, and
b. search for Event Handlers, and
c. you press the [+] button on the right.
d. Add a "basic handler"
e. Choose the TAP event
f. Give it a name (onButtonSendTap or whatever)
g. press DONE
h. right mouse
i. Convert to action
j. Choose [New Controller] or an existing controller
k. If you chose new controller give it a name
and voilla, you have your handler in the controller.
And in Architect...
a. you go to the button's config, and
b. search for Event Bindings, and
c. you press the [+] button on the right.
d. Add a "basic handler"
e. Choose the TAP event
f. Give it a name (onButtonSendTap or whatever)
g. press DONE
h. right mouse
i. Convert to action
j. Choose [New Controller] or an existing controller
k. If you chose new controller give it a name
and voilla, you have your handler in the controller.
Hello friends I am creating an app in sencha touch 2.0 in which i have added a search button to the toolbar.Now i want open a search field with transparent background like the below image.
While i run my project the logcat indicates me that error is in controller file.Below i am adding my controller class.
Ext.define('MyApp.controller.search',{
extend: 'Ext.app.Controller',
config: {
refs: {
groupList: "groupList"
},
control: {
groupList: {
searchField: "searchField"
}
}
},
searchField: function(){
// console.log("SearchField Tapped");
if ( ! this.searchView)
{
this.searchView = this.render({
xtype: 'searchView',
});
var cancelSearchBtn = this.searchView.query('#'+cancelSearchBtn)[0];
cancelSearchBtn.setHandler(function(){
this.searchView.hide();
}, this);
}
this.searchView.show({
type: 'slide',
direction: 'up',
duration: 500,
});
},
launch: function(){
alert('Hello search');
},
});
I am getting the following error in logcat:-
TypeError: Result of expression 'this.render' [undefined] is not a function. at
file:///android_asset/www/app/controller/SearchController.js:18
Help me to get rid of the problem.
Thanx in advance.
There is no render method inside the controller. You need to create an instance of that component and then add it to the container you want it visible in (normally called Main).