PDA

View Full Version : Create Android apps with Sencha Touch, PhoneGap and Eclipse



paulb777
6 Jan 2011, 1:27 PM
Yesterday, we updated our PhoneGap Android Eclipse plug-in to include support for Sencha Touch.

The project wizard asks you to point at a downloaded Sencha Touch directory on your computer.

Then, you can create the Sencha Kitchen Sink, a Sencha Touch version of the default PhoneGap example, or point at a local directory including an index.html.

More details here (http://www.mobiledevelopersolutions.com/home/announce-1/mds11eclipsepluginforphonegaponandroidreleasestoday-jquerymobileandsenchatouchadded)

I'd appreciate any feedback

davidkaneda
6 Jan 2011, 2:03 PM
Cool!

steve1964
7 Jan 2011, 3:54 AM
Thanks, very well done, especially for the clear example of how to integrate sencha touch with phonegap. I've also installed the plugin for Eclipse, thanks a lot also for this...

growler
8 Jan 2011, 3:42 PM
Thanks guis.
Your production is wery high quality level!
You have best oranized documentation I ever seen!!!
ExtJS - Sencha - Sencha animatior are avesome.
I wery like code All Your products using javascript+CSS/Ajax/PHP/MySQL => javascriph
And now I can do it on Android =)
Great RIA. Thanks!!!
=======================================
Sorry for my english

spidermanit
11 Jan 2011, 11:36 PM
Thanks you, it save me alot of time to get starting.

by the way I have a question, I have already a website that using Extjs, now I wnat to add it to phonegap, so my question is "how can I make an ajax call to my host to get value to show?"

Thanks!!!

paulb777
12 Jan 2011, 9:04 AM
See http://stackoverflow.com/questions/3709315/phonegap-cookie-based-authentication-php-not-working-webview. Also, several other examples come up stackoverflow and the phonegap mailing list on Ajax searches.

MarrsAttax
20 Jan 2011, 4:18 PM
This is my first stab at writing an Android App.

I'm trying to get the Kitchen Sink example working but I get an error 'The connection to the server was unsuccessful' 'file:///android_asset/www/index.html' - does it only work with a specific version of Android? I am using 1.6.

I've previously created and got working a new Hello World project with an index.html file under the same assets/www directory (but under that project obviously) without problem, so I'm not sure what I'm doing wrong.

Any ideas?

paulb777
20 Jan 2011, 4:54 PM
I'm able to build for 1.6 and run successfully on a 2.2 device. I don't have a device running 1.6. However, on a 1.5 device, I get the title (Sink) and a blank screen under it. Other PhoneGap apps run ok on 1.5 so there may be something about Sencha that needs a higher version.

You may have something else going on since file:///android_asset/www/index.html should get loaded by the PhoneGap glue code no matter what.

On 1.5 DDMS confirms a success :
01-20 16:48:23.840: INFO/System.out(384): loadUrl(file:///android_asset/www/index.html)
01-20 16:48:23.840: INFO/System.out(384): url=file:///android_asset/www/index.html baseUrl=file:///android_asset/www

An approach would be to incrementally adding to your working Hello World project or incrementally removing from the failing Kitchen Sink example until you see a switch.

MarrsAttax
21 Jan 2011, 12:38 AM
Thanks paulb777! I changed to version 2.1 and it just worked :D

appy
6 Feb 2011, 11:39 PM
Hey !!

I have to start working on PhoneGap and develop a few applications to be wrapped up in PhoneGap for
android.
I would really appreciate it if someone would let me know each and
every single step to build a basic "HelloWorld" app for android using
PhoneGap.

Thanks

steve1964
7 Feb 2011, 12:00 AM
Start from here: http://www.phonegap.com/start#android

paulb777
7 Feb 2011, 7:59 AM
Alternatively, for a shorter setup, check out http://wiki.phonegap.com/w/page/34483744/PhoneGap-Eclipse-PlugIn-for-Android

appy
9 Feb 2011, 2:04 AM
Thanks a lot Steve and Paul.

My basic application is working all fine.
I have included the following code in my index.html file:-
<html>
<head>
<title>Hello World!</title>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
var msgbox = function()
{
navigator.notification.alert("Hello World !");
}
function init()
{
document.addEventListener("deviceready", msgbox, true);
}
</script>
</head>
<body onload="init();" >
</body>
</html>

The problem I am facing now is though my output is running, I cant see any alert on the android emulator screen. How should I see my desired output on the screen with an alert on it ????

paulb777
9 Feb 2011, 6:59 AM
@appy Your example works fine for me both on the emulator and on my phone.

I used the PhoneGap Eclipse wizard to create the standard example project. And then replaced the index.html source with your source.

appy
9 Feb 2011, 7:42 AM
hey paul !!!!

its working now. thank you....

appy
17 Feb 2011, 5:10 AM
hey steve and paul

can i know how to develop basic login form with database on android phonegap application? i also want to know which database to use? It would be really helpful of you if you can provide me with sequence of each and every step.

thanks

paulb777
17 Feb 2011, 7:42 AM
Check out http://westcoastlogic.com/lawnchair/

estherB
19 Sep 2011, 10:17 PM
Well, creating Android apps is cool. An Android application is defined using one or more of Android's four core application components. Two such application components are defined in this package: Activity and Service. The other two components are from the android.content package: BroadcastReceiver and ContentProvider.

Make your life much easier with this “1 Touch Love You” text messaging application. You don’t have to fumble around with texting when you are in a hurry or in your car. Just open the app and click “Pick-N-Send” or “Send Random.” Making your loved ones day is as simple as that! You can earn 7 love conversation libraries with 50 or so versions of each so you don’t have to type so much. You can check out Search Engine Optimization Spokane (http://optimizationtutor.com/2011/02/one-touch-i-love-you-android-mobile-phone-application/) for more tips and information. This app will not only save you time but it will strengthen your relationship with your loved one. Making saying “I love you” as hassle free as you can will make it so you do it more often. Who couldn’t use more “I love you” text messages from you? This will improve your life if you use it enough.

MarrsAttax
19 Sep 2011, 10:35 PM
And they say romance is dead 8-|

niveditaWebbee
2 Feb 2012, 9:46 PM
I have created a form with the help of Ext Designer and import the files in eclipse IDE for android application but it does not contain index.html
but i created that but it is still showing the error. Did i have made any mistake while importing the files???

paulb777
2 Feb 2012, 10:20 PM
If you're using Sencha Touch 2, there is a bug (http://code.google.com/a/eclipselabs.org/p/mobile-web-development-with-phonegap/issues/detail?id=63) in the Eclipse plugin triggered by the new directory structure. It will be fixed in the next week. In the meantime, the workaround is to copy sencha-touch-all-debug-w-comments.js to sencha-touch-debug-w-comments.js In the Sencha install.

If you're using Sencha Touch 1, make sure you can build and run the example project. If you're still stuck, post the source and/or more info about any error messages here or create an issue at http://code.google.com/a/eclipselabs.org/p/mobile-web-development-with-phonegap/issues/list

Sameer Khan
2 Feb 2012, 10:51 PM
HI, Go through this link...

http://phonegap.com/start#android
(http://phonegap.com/start#android)
It will help you to create Hello world application with sencha touch




Hey !!

I have to start working on PhoneGap and develop a few applications to be wrapped up in PhoneGap for
android.
I would really appreciate it if someone would let me know each and
every single step to build a basic "HelloWorld" app for android using
PhoneGap.

Thanks

xnese
14 Feb 2012, 10:07 AM
This sounds super cool...can't wait to develop my first app

mrunal
28 Feb 2012, 8:52 PM
hey, this tutorail uses mac sdk i'm using android-sdk-windows.
So, this tutorial says i have to make some changes when i use the windows sdk,
can anyone please help me what changes?

Thanks

Sameer Khan
29 Feb 2012, 6:24 AM
NO prob...On windows safar browser is enough for sencha applicaion development..Bcz it it webtoolkit s/w in that...

sadagopan
7 Mar 2012, 5:18 AM
Hi All,
I have installed phonegap and sencha in my windows system. I am able to work on sencha when it gets deployed in apache server root directory but i dont know how to use it and develop in eclipse and phone gap .. can anyone help me with this please ..

rschiavi
17 Apr 2012, 9:54 AM
Does Android work for anyone, and if so, can someone post a quick sample project.

My current apps works flawlessly on iphone, everything from start to finish in all documentation/tutorials worked.

Android. Nothing but pain. Dependencies errors, white screens, nothing. What's lame is the browser will load the same app, but in phonegap it doesn't. I realize I might hit up the phonegap forums, but phone gap on it's own does seems to work and I have a feeling they will send me here.

So, I ended up creating a new bare bones project with this, to "start from stratch"

http://www.mobiledevelopersolutions.com/home/download


I continue to get errors, whenever any js includes Ext:

file:///android_asset/www/phonegapdemo-w-sencha.js: Line 251 : Uncaught TypeError: undefined is not a function, which is this line.

"new Ext.Application({ launch : function() {
var panel = new Ext.Panel(cfg);
}
});"

ANy help before I abandon and just write a native android app. At this point, would have been done.

sadagopan
17 Apr 2012, 1:34 PM
Hi
Its working very fine in Android .. Im developing projects for android now .. I have simple idea for you .. Try developing your project and debug it with chrome or any web browser . If its working fine load it in phonegap add the required sencha JS files and pack it ..

rhonnel francisco
22 Jun 2012, 1:34 AM
Hi
Its working very fine in Android .. Im developing projects for android now .. I have simple idea for you .. Try developing your project and debug it with chrome or any web browser . If its working fine load it in phonegap add the required sencha JS files and pack it ..

Hi, Have you ever tried installing your app in android 4.0? If it works, well can you share some sample project that works??? My project is working fine in iPhone and android lower than 4.0 version..

Thanks in advance,

sadagopan
22 Jun 2012, 1:42 AM
Hi
I tested my app in all versions from 2.3 to 4.0 . it is working fine. if develop the app in a lower version n try installing it in 4.0 . it fail to work .

rhonnel francisco
22 Jun 2012, 2:03 AM
Hi
I tested my app in all versions from 2.3 to 4.0 . it is working fine. if develop the app in a lower version n try installing it in 4.0 . it fail to work .

Are you using eclipse? i tried so many ways but it doesn't work for me. I also tried compressing the app, remove the SDK. it fixes the reference error but now a new error occurred. The error says "OpenGL" something like that.

sadagopan
22 Jun 2012, 2:20 AM
Hi
yeah i'm using eclipse . it works fine . if you try updating your MDS plugin . i think it will work

rhonnel francisco
22 Jun 2012, 6:00 AM
Hi
yeah i'm using eclipse . it works fine . if you try updating your MDS plugin . i think it will work

Hi,

Thanks for the reply. Can you share a link where can i update or download the new MDS? Sorry im a newbee in android app dev ,. because im an iOS dev originally.

Thanks in advance..

sadagopan
22 Jun 2012, 11:04 AM
http://www.mobiledevelopersolutions.com/

krishnaveniv
6 Jul 2012, 4:52 AM
Hi.,

Follow these tutorial..it is useful for all:
http://miamicoder.com/2011/writing-a-sencha-touch-application-part-4/


Application features is:We’re after this simple feature set:


Ability to create notes
Ability to edit existing notes
Ability to delete notes
Ability to persist notes on the device running the application, across browser sessions.



Thank You.

ridasfa1
23 Jul 2012, 4:24 AM
Hello,
is the application structure created by this phone gap plugin applies for sencha touch 2 structure
or sencha 1?
Thank you

mrcprasad5
5 Nov 2013, 11:23 PM
hi,

I am new to sencha touch. I want to develop applications using sencha-touch. Can anyone tel me detailed procedure for developing sencha applications and deploy into android device or iphone.





Thanks in Advance,
M.R.C.Prasad

Selka
11 May 2014, 2:37 AM
Hi!
With android eclipse adt, I installed the plugin phonegap, and I created a phonegap library project including sencha touch.
structure:

48970

was generated:

index.html


<!DOCTYPE HTML><html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>PhoneGap Demo with Sencha Touch</title>
<link rel="stylesheet" href="sencha/resources/css/sencha-touch.css" type="text/css">
<script type="text/javascript" src="sencha/sencha-touch.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<script type="text/javascript" charset="utf-8" src="main.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegapdemo-w-sencha.js"></script>
</head>
<body></body>
</html>



phonegapdemo-w-sencha.js


var cfg = {
fullscreen : true,
dockedItems : [
{
dock : 'top',
xtype : 'toolbar',
title : 'PhoneGap w/ Sencha Touch'
},
{
dock : 'bottom',
xtype : 'toolbar',
ui : 'small',
styleHtmlContent : true,
html : '<p style="font-size:13px;text-align:center;">This file is located at<br /><b>assets/www/phonegapdemo-w-sencha.js</b></p>'
} ],


layout : {
type : 'vbox',
pack : 'center',
align : 'stretch'
},
cls : 'card1',
scroll : 'vertical',
defaults : {
layout : {
type : 'hbox'
},
padding : 16,
flex : 1,
defaults : {
xtype : 'button',
cls : 'demobtn',
flex : 1
}
}
};


cfg.items = [
{
items : [ {
ui : 'round',
text : 'Show device info',
handler : function() {
if (!this.actions) {
this.actions = new Ext.ActionSheet(
{
floating : true,
modal : true,
centered : true,
height : 240,
width : 260,
padding : '15',
html : '<div style="color:white;font-size:19px;"><b>Platform: </b>'
+ device.platform
+ '<br><b>Version: </b>'
+ device.version
+ '<br><b>UUID: </b>'
+ device.uuid
+ '<br><b>PhoneGap Version: </b>'
+ (device.cordova ? device.cordova : device.phonegap)
+ '<br><b>Name: </b>'
+ device.name
+ '<br><b>Screen Width: </b>'
+ screen.width
+ '<br><b>Screen Height: </b>'
+ screen.height
+ '<br><b>Color Depth: </b>'
+ screen.colorDepth + '</div>',
dockedItems : [ {
dock : 'bottom',
text : 'Close',
ui : 'confirm',
scope : this,
handler : function() {
this.actions.hide();
}
} ]
});
}
this.actions.show();
}
} ]
},
{
items : [ {
ui : 'round',
text : 'Toggle Accelerometer',
handler : function() {
toggleAccel();
}
} ]
},
{
html : '<tr id="accel-data">'
+ '<dt><b>&nbsp;&nbsp;X:&nbsp;</b></dt><td id="x">&nbsp;</td>'
+ '<dt><b>&nbsp;&nbsp;Y:&nbsp;</b></dt><td id="y">&nbsp;</td>'
+ '<dt><b>&nbsp;&nbsp;Z:&nbsp;</b></dt><td id="z">&nbsp;</td> </tr>',
flex : 0.5
},
{
items : [ {
ui : 'round',
text : 'Get location',
handler : function() {
if (!this.actions) {
this.actions = new Ext.ActionSheet(
{
floating : true,
modal : true,
centered : true,
height : 320,
width : 280,
padding : '15',
html : '<div style="color:white;font-size:16px;">'
+ '<span id="loclat"></span>'
+ '<br/><span id="loclong"></span>'
+ '<br/><span id="locaccur"></span>'
+ '<div id="mapview" style="display:none;">'
+ '<img style="width:220px;height:180px;" id="mapcanvas" src="" alt="Map of your location" /></div></div>',
dockedItems : [ {
dock : 'bottom',
text : 'Close',
ui : 'confirm',
scope : this,
handler : function() {
closeLocation();
this.actions.hide();
}
} ]
});
}
this.actions.show('pop');
getLocation();
}
} ]
},
{
items : [ {
ui : 'round',
text : '<a href="tel:411" style="color:black;font-size:19px;text-decoration:none;text-align:center;">Call 411</a>'
} ]
},
{
items : [ {
ui : 'round',
text : 'Beep',
handler : function() {
beep();
}
} ]
},
{
items : [ {
ui : 'round',
text : 'Vibrate',
handler : function() {
vibrate();
}
} ]
},
{
items : [ {
ui : 'round',
text : 'Get a picture',
handler : function() {
if (!this.actions) {
this.actions = new Ext.ActionSheet(
{
floating : true,
modal : true,
centered : true,
height : 170,
width : 170,
ui : 'light',
html : '<div id="viewport" class="viewport" style="display:none;">'
+ '<img style="width:105px;height:75px;" id="test_img" src="" /> </div>',
dockedItems : [ {
dock : 'bottom',
text : 'Close',
ui : 'confirm',
scope : this,
handler : function() {
closeviewport();
this.actions.hide();
}
} ]
});
}
this.actions.show('pop');
show_pic();
}
} ]
},
{
items : [ {
ui : 'round',
text : 'Get phone\'s contacts',
handler : function() {
get_contacts();
}
} ]
},
{
items : [ {
ui : 'round',
text : 'Check Network',
handler : function() {
if (!this.actions) {
this.actions = new Ext.ActionSheet(
{
floating : true,
modal : true,
centered : true,
height : 140,
width : 180,
padding : '15',
html : '<div style="color:white;font-size:19px;">'
+ '<span id="networktext">Getting network type . . .</span>'
+ '</div>',
dockedItems : [ {
dock : 'bottom',
text : 'Close',
ui : 'confirm',
scope : this,
handler : function() {
this.actions.hide();
}
} ]
});
}
this.actions.show();
check_network();
}
} ]
},
{
items : [ {
ui : 'round',
text : 'Toggle Compass',
handler : function() {
toggleCompass();
}
} ]
},
{
html : '<tr id="accel-data">'
+ '<dt><b>Compass&nbsp;Heading:&nbsp;</b></dt><td id="h">&nbsp;</td></tr>',
flex : 0.5
} ];


new Ext.Application({
launch : function() {
var panel = new Ext.Panel(cfg);
}
});


when I run the application, I get the blank screen.
attempt to insert something at sencha panel d as:

Ext.Msg.alert('I'm into');

or

panel.add({
xtype: 'label',
html: 'Hello world'
});

but I see nothing, the screen is blank. I do wrong????