PDA

View Full Version : [OPEN] Blackberry Webworks Issues



pagameba
17 Oct 2011, 8:03 AM
Two issues so far.

1. when using Sencha Touch 2.0 packaged as a Blackberry WebWorks application using bbwp.exe on a Torch simulator and inspecting using debug.phonegap.com weinre, the viewport ends up with a height of 6px. In the simulator's browser, it works fine and fills the device height correctly. Other pages and jQuery Mobile also work fine when packaged using bbwp.exe.

2. this happened also with 1.x, again when packaged using bbwp.exe on a Torch simulator the resulting app will scroll horizontally regardless of scroll settings on the viewport and various components. Since I am trying to embed an Ext.Map component, the sideways scrolling of the viewport causing drag-pan of the map not to work or to be very erratic.

Jamie Avins
17 Oct 2011, 9:08 AM
Thank you for the report, please note that we haven't done much testing on BB as of yet.

pagameba
17 Oct 2011, 9:38 AM
I just wanted to make sure I noted them for you guys when you get a chance to test on blackberry ... I'm sure that's high on your list ;)

Jamie Avins
17 Oct 2011, 9:42 AM
Indeed.

guillaumebadin
3 Feb 2012, 5:00 AM
Hello everybody, someone has an idea to have a Workaround for blackberry webworks viewport TOUCH-894 ?
Can I set the viewport size manually in sencha 2b1 ?

composer47
8 Feb 2012, 1:47 PM
Here is a work around I came up with. This code actually addresses two seperate problems:
1) The Blackberry does not like the viewport height of 100%. As the first poster found out, it renders 6px.
2) When running in webworks, OS7 browser incorrectly reports the height of the window. If you use window.innerHeight, webworks reports the height thinking the address bar is there, and it's not. I found that adding additional height solves for this. Note, this change is only needed when running in webworks. If you have this change under the regular browser, it will cause additional height that breaks the viewport.

Give this a try and let me know if it works for you. I have tested this on Sencha Touch 2 PR3.


// Define a blackberry viewport
Ext.define('Ext.viewport.Blackberry', {
extend: 'Ext.viewport.Default',
constructor: function (config) {

// Blackberry does not like height: 100%
this.superclass.config.height = this.getWindowHeight() + 'px';
this.callParent([config]);
return this;
},
getWindowHeight: function () {
if (Ext.os.version.lt('7.0')) {
return window.innerHeight;
}
else {
// OS7 needs more browser height ONLY when running in webworks.

return window.innerHeight + 39;
}
}

}, function () {

});


// Insert a new Blackberry specific viewport
Ext.override(Ext.viewport.Viewport,
{
constructor: function (config) {
var osName = Ext.os.name,
viewportName, viewport;

switch (osName) {
case 'Android':
viewportName = 'Android';
break;
case 'BlackBerry':
viewportName = 'Blackberry';
break;
case 'iOS':
viewportName = 'Ios';
break;

default:
viewportName = 'Default';
}

viewport = Ext.create('Ext.viewport.' + viewportName, config);

return viewport;
}
});

guillaumebadin
13 Feb 2012, 3:51 AM
Thank you very much, I tested and it work very well!!!

dash74
28 Feb 2012, 7:31 AM
Hi all,

That's ok, I can define my BB viewport as "viewport = new Ext.viewport.Blackberry...."
and be able to see my app correctly either in Ripple and Torch 9800 simulator.

Many Thanks!

David

uddinr
13 Mar 2012, 4:33 AM
Is there a workaround for sencha touch 1.1?

APPealing
13 Mar 2012, 6:03 AM
I can confirm the fix by composer47 related to the viewport problem, thumbs up!

When using the simlator everythings seems to work fine now, only the icons are not loaded. It works fine using the ripple emulator(http://ripple.tinyhippos.com/) but not for the blackberry simulator.
I did find a post at the blackberry forums(http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/Sencha-Touch-icons-not-displaying-on-Playbook-Simulator/td-p/962873) saying it should work fine on a device instead of an emulator. I don't have a blackberry device (yet) so can anyone confirm this?

(http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/Sencha-Touch-icons-not-displaying-on-Playbook-Simulator/td-p/962873)

shanesmith
15 Mar 2012, 9:52 AM
I can confirm that the fix works on BB6 (Torch 9800) and BB7 (Torch 9810), the viewport does take the full screen.

But! I've uncovered another bug. The soft keyboard seems to displace the viewport in certain conditions. Here's a link to images of my simple test: http://imgur.com/a/1NHX5

The first picture shows a container with a textarea and button docked at the bottom, the second is with the soft keyboard exposed by tapping on the textarea, then the last picture shows the keyboard removed and the viewport shifted to the top and the bottom part being blank.

Here's where it gets weird, to tap on the button it doesn't work tapping on where it's shown, but rather on where it's supposed to be at the bottom of the screen....

It does sound more like a BlackBerry bug instead of Sencha Touch 2, but it's something to look out for...

Jamie Avins
15 Mar 2012, 9:57 AM
Thank you for the update.

Metameister
3 May 2012, 11:12 AM
I'm new to Sencha and Ext development. I tried a few times but still not sure - where do you put the mentioned code fix in a sencha touch app?

Thanks.

donnacc
14 Jul 2012, 8:42 PM
Looks like changing the meta tag for view port to the following will work with out the workaround.

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width, height=device-height, target-densitydpi=device-dpi">

aabluedragon
23 Jul 2012, 7:58 AM
Here is a work around I came up with. This code actually addresses two seperate problems:
1) The Blackberry does not like the viewport height of 100%. As the first poster found out, it renders 6px.
2) When running in webworks, OS7 browser incorrectly reports the height of the window. If you use window.innerHeight, webworks reports the height thinking the address bar is there, and it's not. I found that adding additional height solves for this. Note, this change is only needed when running in webworks. If you have this change under the regular browser, it will cause additional height that breaks the viewport.

Give this a try and let me know if it works for you. I have tested this on Sencha Touch 2 PR3.


// Define a blackberry viewport
Ext.define('Ext.viewport.Blackberry', {
extend: 'Ext.viewport.Default',
constructor: function (config) {

// Blackberry does not like height: 100%
this.superclass.config.height = this.getWindowHeight() + 'px';
this.callParent([config]);
return this;
},
getWindowHeight: function () {
if (Ext.os.version.lt('7.0')) {
return window.innerHeight;
}
else {
// OS7 needs more browser height ONLY when running in webworks.

return window.innerHeight + 39;
}
}

}, function () {

});


// Insert a new Blackberry specific viewport
Ext.override(Ext.viewport.Viewport,
{
constructor: function (config) {
var osName = Ext.os.name,
viewportName, viewport;

switch (osName) {
case 'Android':
viewportName = 'Android';
break;
case 'BlackBerry':
viewportName = 'Blackberry';
break;
case 'iOS':
viewportName = 'Ios';
break;

default:
viewportName = 'Default';
}

viewport = Ext.create('Ext.viewport.' + viewportName, config);

return viewport;
}
});

Where would it be best to put these 2 blocks in a sencha touch 2 app?

izak18
15 Aug 2012, 8:34 AM
You can put the blocks in the top of your *.js, before all code of your app.

kush297
23 Aug 2012, 11:10 AM
I got my app running on torch. Next target, BOLD and curve. When i run the same app on bold the app happens to scroll beyond its viewport but it does not go totally out of the screen. any suggestions for bold viewport???? Take a look at this : http://www.youtube.com/watch?v=ELtrumsZK9I

swarnendude
23 Nov 2012, 1:19 AM
I am facing the the same problem. In my case the apps is running fine first time after using the patch of setting viewport height with "windows.innerHeight" but Second time its not coming ,only 6px is rendering. Any Idea why this is happening ?

Any help is much appreciated.

Ocelyn
26 Nov 2012, 7:53 AM
Hello there,

I'm facing the same issue with the 6px height bug, I tried all the fix but nothing seems to work or I forgot something :

I'm using Phonegap 2.2.0 and Sencha Touch 2.1.0

In my index.html, I have my style describe like that

<style type="text/css">
html, body {
background-color: #ff00ff
}
body {
background: url(resources/img/low/bg.jpg) no-repeat center center;
background-size: 100% 100%;
}
</style>

and in the Sencha integration I update the meta viewport like that :


k.write('<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">');

In my first view added to viewport I had a fullscreen : true, attribute, in config.

I updated viewport.Viewport class with :



Ext.define("Ext.viewport.Viewport", {
requires: ["Ext.viewport.Ios", "Ext.viewport.Android", "Ext.viewport.Blackberry"],
constructor: function (b) {
var c = Ext.os.name,
d, a;
switch (c) {
case "Android":
d = (Ext.browser.name == "ChromeMobile") ? "Default" : "Android";
break;
case 'BlackBerry':
d = 'Blackberry';
break;
case 'iOS':
d = 'Ios';
break;
default:
d = 'Blackberry'; //just in case the OS is not reconize
}
a = Ext.create("Ext.viewport." + d, b);
return a
}
});


And I have my class Blackberry here :


// Define a blackberry viewport
Ext.define("Ext.viewport.Blackberry", {
extend: "Ext.viewport.Default",
constructor: function (config) {

// Blackberry does not like height: 100%
this.superclass.config.height = this.getWindowHeight() + 'px';
this.callParent([config]);
return this;
},
getWindowHeight: function () {
if (Ext.os.version.lt('7.0')) {
return window.innerHeight;
}
else {
// OS7 needs more browser height ONLY when running in webworks.

return window.innerHeight + 39;
}
}
}, function () {
});


In app.js, this one appear between Android and iOS class, so it should be ok.

I don't know what to do more, if you have some ideas on how to fix it,

Thank you,

Ocelyn

Betsy_Robert
12 Dec 2012, 12:22 AM
Here is a work around I came up with. This code actually addresses two seperate problems:
1) The Blackberry does not like the viewport height of 100%. As the first poster found out, it renders 6px.
2) When running in webworks, OS7 browser incorrectly reports the height of the window. If you use window.innerHeight, webworks reports the height thinking the address bar is there, and it's not. I found that adding additional height solves for this. Note, this change is only needed when running in webworks. If you have this change under the regular browser, it will cause additional height that breaks the viewport.

Give this a try and let me know if it works for you. I have tested this on Sencha Touch 2 PR3.


// Define a blackberry viewport
Ext.define('Ext.viewport.Blackberry', {
extend: 'Ext.viewport.Default',
constructor: function (config) {

// Blackberry does not like height: 100%
this.superclass.config.height = this.getWindowHeight() + 'px';
this.callParent([config]);
return this;
},
getWindowHeight: function () {
if (Ext.os.version.lt('7.0')) {
return window.innerHeight;
}
else {
// OS7 needs more browser height ONLY when running in webworks.

return window.innerHeight + 39;
}
}

}, function () {

});


// Insert a new Blackberry specific viewport
Ext.override(Ext.viewport.Viewport,
{
constructor: function (config) {
var osName = Ext.os.name,
viewportName, viewport;

switch (osName) {
case 'Android':
viewportName = 'Android';
break;
case 'BlackBerry':
viewportName = 'Blackberry';
break;
case 'iOS':
viewportName = 'Ios';
break;

default:
viewportName = 'Default';
}

viewport = Ext.create('Ext.viewport.' + viewportName, config);

return viewport;
}
});


Sorry, but could you please tell me how to include this into my code. Now, should I call my pages using this viewport.

Thanks a million.

Betsy_Robert
12 Dec 2012, 2:49 AM
Sorry, but where exactly do you place these pieces of code???


I modified the Viewport.js file I found under src/viewport folder. I also created a Blackberry.js file and placed it along with Android.js, Ios.js files. Is that the right way to do it????


Or should I place it some place else, like in the app.js file????


Any help would be very much appreciated.


Thanks in advance.

Betsy_Robert
12 Dec 2012, 3:41 AM
Can anyone please tell me your structure of the app.js.....
How and where exactly would this go???
I modified the Viewport.js file and created a blackberry.js file and placed these pieces of code there.
Should I be doiung something different.
In the app.js file I am just calling the 2 pages i want on launch:
launch: function() {
Ext.Viewport.add(
[
{xclass: 'Sencha.view.MBLogin', },
{xclass: 'Sencha.view.MB_Main', },
]);
}
Should I add I be referering the Viewport.js or the Blackberry.js file file here.

I am new to sencha and still trying to learn.

Any kind of help would be appreciated.

Thank you.

Betsy_Robert
12 Dec 2012, 11:03 PM
Thank you for the workaround. It worked beautifully.

Thanks a million:-)

Betsy_Robert
17 Dec 2012, 3:36 AM
Hi,

This workaround worked beautifully when I increased the inner height, for an OS 7 based simulator, but it still displays the same 6 px on the actuall device.

Can you please let me know what I should be changing......

composer47
17 Dec 2012, 1:23 PM
Hey guys, I can confirm the fix I supplied earlier in the year with ST 2.0 doesn't work anymore. I have a new fix that I'm testing out in ST 2.1. I will provide more details in the next day or so.

composer47
31 Dec 2012, 6:10 PM
Please see this thread I created for an update:

www.sencha.com/forum/showthread.php?252232-GUIDE-Deploying-Sencha-Touch-2.1-as-a-Blackberry-native-apps-(Webworks)

rohitsies
7 Oct 2013, 7:38 PM
Thank You Thank You Thank You Thank You Thank You Thank You Thank You Thank You soooo much. I was trying to solve this issues from 2 weeks. Finally it worked!
Wonder why Sencha Team are not interested in updating this in their core!


Here is a work around I came up with. This code actually addresses two seperate problems:
1) The Blackberry does not like the viewport height of 100%. As the first poster found out, it renders 6px.
2) When running in webworks, OS7 browser incorrectly reports the height of the window. If you use window.innerHeight, webworks reports the height thinking the address bar is there, and it's not. I found that adding additional height solves for this. Note, this change is only needed when running in webworks. If you have this change under the regular browser, it will cause additional height that breaks the viewport.

Give this a try and let me know if it works for you. I have tested this on Sencha Touch 2 PR3.


// Define a blackberry viewport
Ext.define('Ext.viewport.Blackberry', {
extend: 'Ext.viewport.Default',
constructor: function (config) {

// Blackberry does not like height: 100%
this.superclass.config.height = this.getWindowHeight() + 'px';
this.callParent([config]);
return this;
},
getWindowHeight: function () {
if (Ext.os.version.lt('7.0')) {
return window.innerHeight;
}
else {
// OS7 needs more browser height ONLY when running in webworks.

return window.innerHeight + 39;
}
}

}, function () {

});


// Insert a new Blackberry specific viewport
Ext.override(Ext.viewport.Viewport,
{
constructor: function (config) {
var osName = Ext.os.name,
viewportName, viewport;

switch (osName) {
case 'Android':
viewportName = 'Android';
break;
case 'BlackBerry':
viewportName = 'Blackberry';
break;
case 'iOS':
viewportName = 'Ios';
break;

default:
viewportName = 'Default';
}

viewport = Ext.create('Ext.viewport.' + viewportName, config);

return viewport;
}
});