Setting up Sencha Touch with Phonegap on Blackberry

561 views
Skip to first unread message

jason rogers

unread,
Sep 28, 2011, 12:54:44 PM9/28/11
to phonegap
Hi all,

I manage to run Phonegap on the simulator using ant.

I also manage to run my sencha examples on IOS and a webbrowser.

What I can't figure out (mainly because I know nothing of ant
projects) is how to integrate sencha touch to work in phonegap for
Blackberry.

Ideally I would love to have a helloworld file with sencha and
phonegap1 set correctly but more realistically can someone share
their experience on what are the main steps.

Cheers

Jason Rogers

Nanomo

unread,
Sep 28, 2011, 11:31:36 PM9/28/11
to phonegap
Hi,

It's easy, let's go :)

1. if you can run the sample project with ant load-simulator, then to
make a new project copy the sample folder (this folder comes with the
phonegap), and rename to mybbproject :)
2. go to mybbproject\www and open the index.html with your favourite
html editor like notepad++ (i have a pc with very low resources!)
3. replace the content of the index.html for this code:

************************************************* A BUNCH OF ASTERIX
TO SEPARATE THE CODE ***************************
<!--
PhoneGap is available under *either* the terms of the modified BSD
license *or* the MIT License (2008).
See http://opensource.org/licenses/alphabetical for full text.

Copyright (c) 2005-2011, Nitobi Software Inc.
Copyright (c) 2010-2011, IBM Corporation

website: http://phonegap.com
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<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"
/>


<script src="json2.js" type="text/javascript"></script>
<script src="phonegap.1.0.0.js" type="text/javascript"></script>

<!-- Sencha The Ultimate Short Cut, seen on:
http://www.sencha.com/learn/sencha-touch-quick-start/
-->

<script src="http://cdn.sencha.io/touch/1.1.0/sencha-touch.js"
type="text/javascript"></script>
<link href="http://cdn.sencha.io/touch/1.1.0/resources/css/sencha-
touch.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" charset="utf-8">

// Wait for PhoneGap to load
//
// register PhoneGap event listeners when DOM content loaded
function init() {
document.body.style.height = screen.height;
console.log('init()');
document.addEventListener("deviceready", onDeviceReadyOT, true);
}

// PhoneGap is ready
//
function onDeviceReadyOT() {
// Empty
document.body.style.height = screen.height;
checkConnection();
}

function alertDismissed() {
// Empty
}



function checkConnection() {
var networkState = navigator.network.connection.type;
if(networkState=='none')
{
/// this is a phonegap funcs.
navigator.notification.alert(
'You must be connected to internet in order to use this app', //
message
alertDismissed, // callback
false, // title
'Ok' // buttonName
);
}
}


// Here is the Hello world example of Sencha :)
//
new Ext.Application({
launch: function() {
new Ext.Panel({
fullscreen: true,
dockedItems: [{xtype:'toolbar', title:'My First App'}],
layout: 'fit',
styleHtmlContent: true,
html: '<h2>Hello World!</h2>I did it!'
});
}
});
</script>


</script>


</head>
<body onLoad='init()'> </body>
</html>
************************************************* A BUNCH OF ASTERIX
TO SEPARATE THE CODE ***************************

4. Save the edited file go to a console, go to the directory of the
project and run ant load-simulator (is not necesary run ant build and
later ant load-emulator....)
5. if every go OK, you will see this screen:
http://src.sencha.io/636/http://img3.sencha.com/files/learn/h18.png

This is a quickly way to test sencha on BB, you can add the sencha SDK
to resources folder and then make the calls on local.

Good luck!

jason rogers

unread,
Sep 29, 2011, 7:44:18 AM9/29/11
to phonegap
Hi there

THanks for the information

I didn't I could run the sencha from the net directly (At least for
now I can focus on getting this working and I worry about including
sencha to the local later lol)

I run your example in a browser and it works fine but I can't get it
to run in the simulator.

I launches
takes for ever to get to init()
but then doesn't display anything

I checked that I can get to internet with the simulator because I can
load google on the browser

Any ideas ?

jason rogers

unread,
Sep 29, 2011, 6:50:52 AM9/29/11
to phonegap
Hi

thanks for the code sample

I didn't know I could run sencha form their server like that (it solve
the problem of adding sencha to the local ressources)

unfortunately I try to run your example and after waiting (for what
feels like forever lol) nothing happens on the device

I get the init() log but nothing on the simulator

Any ideas ?

0:13:52.534: PhoneGap Sample [2011-09-29 10:48:01.378]: Logger
enabled: GUID=5723276149, name=PhoneGap Sample
0:13:52.539: PhoneGap Sample [2011-09-29 10:48:01.383]: Found plugin
Camera = com.phonegap.camera.Camera
0:13:52.540: PhoneGap Sample [2011-09-29 10:48:01.385]: Found plugin
Network Status = com.phonegap.network.Network
0:13:52.541: PhoneGap Sample [2011-09-29 10:48:01.386]: Found plugin
Notification = com.phonegap.notification.Notification
0:13:52.545: PhoneGap Sample [2011-09-29 10:48:01.387]: Found plugin
Accelerometer = com.phonegap.accelerometer.Accelerometer
0:13:52.545: PhoneGap Sample [2011-09-29 10:48:01.390]: Found plugin
Geolocation = com.phonegap.geolocation.Geolocation
0:13:52.557: PhoneGap Sample [2011-09-29 10:48:01.391]: Found plugin
File = com.phonegap.file.FileManager
0:13:52.558: PhoneGap Sample [2011-09-29 10:48:01.403]: Found plugin
FileTransfer = com.phonegap.http.FileTransfer
0:13:52.561: PhoneGap Sample [2011-09-29 10:48:01.405]: Found plugin
Contact = com.phonegap.pim.Contact
0:13:52.563: PhoneGap Sample [2011-09-29 10:48:01.408]: Found plugin
MediaCapture = com.phonegap.media.MediaCapture
0:13:52.568: PhoneGap Sample [2011-09-29 10:48:01.412]:
com.phonegap.PhoneGapExtension: invoking PhoneGap.onNativeReady.fire()
0:13:52.615: FD Turned Off;
0:13:52.720: PhoneGap Sample [2011-09-29 10:48:01.563]: Logger
enabled: GUID=5723276149, name=PhoneGap Sample
0:13:55.733: BRM:IDL+
0:13:55.734: BRM:SR+
0:13:55.735: BRM:NMC:6295552
0:13:55.736: BRM:JFR:13662788
0:13:55.737: BRM:SR:RTE:
0:13:55.738: BRM:SR-
0:13:55.738: BRM:NMC:6295552
0:13:55.738: BRM:JFR:13662788
0:13:55.739: BRM:IDL-
0:14:02.614: VM:PISVt=0,h=4e33,id=d5cc5fdc4f24346a
0:14:02.643: VM:PISVt=0,h=4e33,id=d5cc5fdc4f24346a
0:14:02.687: VM:PISVt=0,h=4e33,id=d5cc5fdc4f24346a
0:14:02.690: VM:PISVt=0,h=4e33,id=d5cc5fdc4f24346a
0:14:02.738: VM:PISVt=0,h=4e33,id=d5cc5fdc4f24346a
0:14:15.715: VM:PISVt=0,h=4c40,id=d15a33128dfbb5d9
0:14:15.718: VM:ACGRt=0,c=0
0:14:15.720:
VM:GRRTr=144d0000,t=net.rim.device.api.i18n.DateFormatSymbols
0:14:34.779: No stack trace
0:14:36.279: No stack trace
0:14:42.230: No stack trace
0:14:51.828: FD Back On
0:14:51.976: PhoneGap Sample [2011-09-29 10:49:00.820]:
com.phonegap.api.PluginManagerFunction: Loading plugin class
com.phonegap.media.MediaCapture
0:14:51.990: PhoneGap Sample [2011-09-29 10:49:00.834]:
com.phonegap.media.MediaCapture:
video.snapshot.encodings=encoding=rgb565
encoding=jpeg&width=2048&height=1536
encoding=jpeg&width=1024&height=768 encoding=jpeg&width=480&height=360
0:14:51.999: PhoneGap Sample [2011-09-29 10:49:00.843]:
com.phonegap.media.MediaCapture: video.encodings=encoding=video/
3gpp&mode=mms encoding=video/3gpp&mode=standard encoding=video/
3gpp&mode=HD encoding=video/
3gpp&width=640&height=480&video_codec=MPEG-4&audio_codec=
0:14:52.002: AMR encoding=video/
3gpp&width=176&height=144&video_codec=MPEG-4&audio_codec=AMR
encoding=video/
3gpp&width=640&height=480&video_codec=MPEG-4&audio_codec=NONE
encoding=video/
3gpp&width=176&height=144&video_codec=MPEG-4&audio_codec=NONE
encoding=video/3gpp&w
0:14:52.006: idth=176&height=144&video_codec=H263&audio_codec=AMR
encoding=video/
3gpp&width=176&height=144&video_codec=H263&audio_codec=NONE
0:14:52.066: PhoneGap Sample [2011-09-29 10:49:00.911]:
com.phonegap.api.PluginManagerFunction: Loading plugin class
com.phonegap.network.Network
0:14:52.079: PhoneGap Sample [2011-09-29 10:49:00.921]: init()
0:14:52.249: FocusHistory: Focus lost; App PhoneGapSample; Component
blackberry.web.widgetc533a324246eb8e74887ba6348583ceapackage.loadingScreen.LoadingScreen
0:14:55.749: VM:+GC(f)w=11
0:14:55.818: VM:-GCt=8,b=1,r=0,g=f,w=11
0:14:55.823: VM:+CR
0:14:55.869: VM:-CR t=6
0:14:55.872: WM(finalizeNativeWindowWrapper) - ref=0x152fbc00
0:14:55.873: WM(finalizeNativeWindowWrapper) - ref=0x152ccc00
0:14:55.875: WM(finalizeNativeWindowWrapper) - ref=0x152d1c00
0:14:55.880: WM(finalizeNativeWindowWrapper) - ref=0x14dde400

Nanomo

unread,
Sep 29, 2011, 12:42:02 PM9/29/11
to phonegap
Hi,

Sencha isn't friendly with Blackberry as jquery mobile is, i mean,
Sencha Touch (as his name says) only works good in Torch+, so if you
test with a old device on simulator it won't work, or if you can make
it work, it will crash the app, or the app not will be dispalyed
(icon) in de device after launch the simulator.

Resuming.... Sencha touch is very good for touch devices, so is
recommended for now to only use on Torch, AND NOT only in devices with
webkit... becouse as example the simulator of the device 9800 doesn;t
work either...

The cause of getting million of years in build and run the app are:
1. you are including ALL the Sencha Touch SDK (more than 800 files,
50MB+) that are copied to a build location every time....
2. Sencha Touch use a function called init() (that is assingned to
addEventListener in the core of exts), so i recommend to use
init_appname, onSuccess_appname, etc!


If you need to use a UI for old devices (before torch) i recommend
Jquery mobile.

Good luck!

jason rogers

unread,
Oct 1, 2011, 11:29:20 AM10/1/11
to phonegap
Ok thanks for the info

as I mentionned I'm no Blackberry dev and I already had tons of
trouble just making the dam thing work lol

Our client wants us to do a cross plateforme project, and for the
proof of concept they want Black berry and Iphone therefore Sencha
seemd like a good option

we found this :

http://resilientcoder.blogspot.com/2011/04/sencha-touch-scrolling-non-touch.html

I already reduced the sencha touch (by removing the docs and the
examples etc.) to its minimum, but it not working.

The guy mentionned in the blog above seems to have managed this is why
I'm trying so hard to get it to work lol

I have a 9800 device also handy so I'll try.

Thanks fo rthe help

jason

Nanomo

unread,
Oct 1, 2011, 11:40:11 AM10/1/11
to phonegap
Hi, start a webserver on the www folder and access trough chrome
browser with the Ripple plugin installed (you can download from here
[1]) then check tin the console if any error is gived and let me know.


[1] https://chrome.google.com/webstore/detail/geelfhphabnejjhdalkjhgipohgpdnoc

On Oct 1, 12:29 pm, jason rogers <jason.s.rog...@gmail.com> wrote:
> Ok thanks for the info
>
> as I mentionned I'm no Blackberry dev and I already had tons of
> trouble just making the dam thing work lol
>
> Our client wants us to do a cross plateforme project, and for the
> proof of concept they want Black berry and Iphone therefore Sencha
> seemd like a good option
>
> we found this :
>
> http://resilientcoder.blogspot.com/2011/04/sencha-touch-scrolling-non...

Nanomo

unread,
Oct 1, 2011, 12:21:45 PM10/1/11
to phonegap
there is a new release of phonegap, use this new build to go ahead
with phonegap!

On Oct 1, 12:40 pm, Nanomo <mariano.monta...@gmail.com> wrote:
> Hi, start a webserver on the www folder and access trough chrome
> browser with the Ripple plugin installed (you can download from here
> [1]) then check tin the console if any error is gived and let me know.
>
> [1]https://chrome.google.com/webstore/detail/geelfhphabnejjhdalkjhgipohg...

jason rogers

unread,
Oct 24, 2011, 9:41:18 AM10/24/11
to phonegap
Hi Nanomo

I solved my problem by basing my program architecture on the MVC
patern ( I found a IOS tutorial and when I tried it in webworks it
worked nicely)

Thanks for your help

Jason

For further reference here is the tutorial I followed

http://www.sencha.com/learn/a-sencha-touch-mvc-application-with-phonegap/

arindam mukherjee

unread,
Jun 27, 2012, 10:20:48 AM6/27/12
to phon...@googlegroups.com
Hi Jason,

I am trying to implement the same. So how i have to change and keep the view, model and controller inside the www folder??  Can you please help me. I go through with the IOS tutorial. But did not get idea. 
Reply all
Reply to author
Forward
0 new messages