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
Related
I have developed a bot that has an invite card when the user did not add the bot yet, it will return the following JSON to render the AdaptiveCard:
{
body: [
{
text: translations['MsTeams::AdaptiveCardBodyLooksLikeTryToUseApp'],
wrap: true,
type: 'TextBlock',
},
{
text: translations['MsTeams::AdaptiveCardBodyNeedToInviteApp'],
wrap: true,
type: 'TextBlock',
},
],
actions: [
{
data: {
actionId: 'INSTALL_BOT_SUBMIT',
cancel: true,
},
title: translations['MsTeams::Cancel'],
type: 'Action.Submit',
},
{
data: {
msteams: {
justInTimeInstall: true,
},
actionId: 'INSTALL_BOT_SUBMIT',
},
title: translations['MsTeams::Invite'],
type: 'Action.Submit',
},
],
type: 'AdaptiveCard',
version: '1.0',
}
And it's working fine on desktop, browser, and iOS devices, but not working on Android devices.
Here is the device & app info:
Android device version: 8.0.0
MS teams app version: 1416/1.0.0.2021010802
This is just an idea, but I see lots of hanging commas (e.g. type: 'TextBlock',). It might be that the Android parser is stricter on this - try remove them and test again.
I am building react native app and when I run it on android it renders nothing, as well it doesn't throw any errors...
I don't know which piece of code to put here so please tell me in the comments what should I add from the code here.
This is App.js file(react-native-navigation is being used here!):
Navigation.startTabBasedApp({
tabs:[
{
screen:"APB.ChoosePlatformScreen",
label: "Log In",
title:"Log In",
icon: HomeIcon,
},
{
screen: "APB.ResgisterScreen",
label: "Register",
title:"Register",
icon: HomeIcon
},
],
appStyle: {
tabBarBackgroundColor: "#e8e8e8",
tabBarButtonColor: "#555",
tabBarSelectedButtonColor: 'black',
tabBarSelectedBackgroundColor: "#e8e8e8",
forceTitlesDisplay: true,
showLabel: true,
},
tabBarOptions: {
showLabel: true
}
})
Above all of this are all the file imports an all screens are registered, I didn't put it in so the code is not too long.
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();
I have just downloaded sencha touch 2.4 and created a test android app. I am able to compile and run the app on android 4+ without problems. However, when I try to run it on android 2.3, the app doesn't go past the app loader indicator and I logged the process no errors are being displayed. Following is the code:
Ext.application({
name: 'Voice',
requires: [
'Ext.MessageBox'
],
views: [
'Main'
],
icon: {
'57': 'resources/icons/Icon.png',
'72': 'resources/icons/Icon~ipad.png',
'114': 'resources/icons/Icon#2x.png',
'144': 'resources/icons/Icon~ipad#2x.png'
},
isIconPrecomposed: true,
startupImage: {
'320x460': 'resources/startup/320x460.jpg',
'640x920': 'resources/startup/640x920.png',
'768x1004': 'resources/startup/768x1004.png',
'748x1024': 'resources/startup/748x1024.png',
'1536x2008': 'resources/startup/1536x2008.png',
'1496x2048': 'resources/startup/1496x2048.png'
},
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('Voice.view.Main'));
},
onUpdated: function() {
Ext.Msg.confirm(
"Application Update",
"This application has just successfully been updated to the latest version. Reload now?",
function(buttonId) {
if (buttonId === 'yes') {
window.location.reload();
}
}
);
}
});
and the main code:
Ext.define('Voice.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar',
'Ext.Video'
],
config: {
tabBarPosition: 'bottom',
items: [
{
title: 'Welcome',
iconCls: 'home',
scrollable: true,
items: [{
docked: 'top',
xtype: 'titlebar',
title: 'Welcome to Sencha Touch 2'
}]
},
{
title: 'Get Started',
iconCls: 'action',
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'Getting Started'
},
{
xtype: 'video',
url: 'http://av.vimeo.com/64284/137/87347327.mp4?token=1330978144_f9b698fea38cd408d52a2393240c896c',
posterUrl: 'http://b.vimeocdn.com/ts/261/062/261062119_640.jpg'
}
]
}
]
}
});
I think it must be a bug in the 2.4 sencha touch release
We also had the same issue and it seems that it is a bug introduced in Sencha Touch 2.4.
And the reason is the usage of bind() method which is a part of ECMAScript 5 not supported on android 2.3
So to fix it you can find the file touch\src\event\publisher\TouchGesture.js and replace the following lines
if (Ext.feature.has.Touch) {
// bind handlers that are only invoked when the browser has touchevents
me.onTargetTouchMove = me.onTargetTouchMove.bind(me);
me.onTargetTouchEnd = me.onTargetTouchEnd.bind(me);
}
with these
if (Ext.feature.has.Touch) {
// bind handlers that are only invoked when the browser has touchevents
me.onTargetTouchMove = Ext.Function.bind(me.onTargetTouchMove, me);
me.onTargetTouchEnd = Ext.Function.bind(me.onTargetTouchEnd, me);
}
This solution helped us to avoid the problem
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.