Sencha touch 2.4 appLoadingIndicator stack on android 2.3 - android

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

Related

AdaptiveCard button with Action.submit not working on android device

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.

React Native App renders nothing without errors

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.

Problems to capture pictures through Sencha Touch

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

Sencha Touch 2 - Carousel initialize event firing in Chrome but not on Android-smartphone

In my ST2-app i create a panel which contains a carousel-element.
This carousel has to be filled dynamically with images from my store.
My problem is that the code shown below works fine in Chrome, but when i package my app and install it on my Galaxy S2, the initialize-event wont fire.
Has anyone a suggestion what could be the problem here?
I thought the browser androis is using is based on googles chrome-browser, so it should work the same.
Code:
createPanelBalloonSelect: function() {
panelBalloonSelect = Ext.Viewport.add({
xtype: 'panel',
centered: true,
styleHtmlContent: true,
width: '90%',
height: '70%',
modal: true,
scope: this,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{
xtype: 'toolbar',
title: 'Auswahl Ballon',
docked: 'top'
},
{
xtype: 'carousel',
id: 'myCarousel',
flex: 1,
items: [],
config: {
initialize: function() {
console.log('ich initialisiere!');
drawingsStore = Ext.getStore('drawingsStore');
data = drawingsStore.getRange();
console.log('data: ' + data);
for(var i=0;i<data.length;i++){
console.log('ich adde');
this.add({
xtype: 'image',
src: data[i].data.canvasData,
cls: 'card'
});
}
}
},
defaults: {
listeners: {
activate: function(newActive, self, oldActive, opt) {
choosenBalloon = self.getActiveIndex();
console.log(choosenBalloon);
}
}
}
},
{
xtype: 'button',
text: 'OK',
name: 'btnAcceptTemplate',
scope: this,
handler: function() {
this.setBalloonSrc(data[choosenBalloon].data.canvasData);
//this.drawBalloon();
this.initSzeneryCanvas();
panelBalloonSelect.destroy();
}
}
]
});
},

How to dispatch from view to controller in Sencha Touch2 with Phonegap

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.

Categories

Resources