sencha touch 2与phonegap结合开发web app
1、下载sencha-touch-2-pr3和phonegap-1.3.0；
2、在assets（Java EE IDE）下面创建www, 然后在www下面创建js文件夹,如下所示：
3、把sencha-touch-all.js和phonegap-1.3.0.js复制到js文件夹下面；
4、在工程目录下创建libs,把phonegap-1.3.0.jar复制到/libs下面；
5、把phonegap-1.3.0/Android下面的xml复制到/res下面；
6、下面修改代码,修改后的代码如下：
1 package huang.namespace; 2 3 /*import android.app.Activity*/; 4 import android.os.Bundle; 5 import com.phonegap.*; 6 public class FirstAppActivity extends DroidGap { 7 /** Called when the activity is first created. */ 8 @Override 9 public void onCreate(Bundle savedInstanceState) { 10 super.onCreate(savedInstanceState); 11 // setContentView(R.layout.main); 12 super.loadUrl("file:///android_asset/www/index.html"); 13 } 14 }
(1)继承Activity改成继承DroidGap；
(2)注释掉setContentView(R.layout.main);
(2)注释掉setContentView(R.layout.main);
添加一行：super.loadUrl("file:///android_asset/www/index.html");
(3)注释掉import android.app.Activity
(4) 添加一行: import com.phonegap.*;
7、 在AndroidManifest.xml中添加xml代码，可以参考博文：http://www.apkbus.com/android-19083-1-1.html；
(3)注释掉import android.app.Activity
(4) 添加一行: import com.phonegap.*;
7、 在AndroidManifest.xml中添加xml代码，可以参考博文：http://www.apkbus.com/android-19083-1-1.html；
8、在js文件夹下面再创建一个LocatCam.js，结果如下图所示：
LocatCam.js
1 /**
2 * @author huanghuang
3 */
4 Ext.application({
5 // name:'LocatCam',
6 launch:function(){
7 Ext.create('Ext.Container', {
8 fullscreen: true,
9 padding: 4,
10 // width:'50%',
11 items: [
12 {
13 xtype:'button',
14 ui: 'normal',
15 text: 'photo',
16 width:80,
17 handler:function(){
18 // alert('hello my name is huanghuang!');
19 // 等待加载PhoneGap
20 document.addEventListener("deviceready", onDeviceReady, false);
21
22 // PhoneGap加载完毕
23 function onDeviceReady() {
24 // 空
25 }
26
27 // 警告对话框被忽视
28 function alertDismissed() {
29 // 进行处理
30 }
31 navigator.notification.alert(
32 'You are the winner!', // 显示信息
33 alertDismissed, // 警告被忽视的回调函数
34 'Game Over', // 标题
35 'Done' // 按钮名称
36 );
37 }
38 }
39 ]
40 });
41 }
42 });
9、在www下面再创建index.html
index.html
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2
3 "http://www.w3.org/TR/html4/strict.dtd">
4
5 <html>
6
7 <head>
8 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
9 <title>Capture Photo</title>
10
11 <!--import touch css and js -->
12 <link rel="stylesheet" href="resources/css/android.css" type="text/css" />
13
14 <script type="text/javascript" src="js/sencha-touch-all.js"></script>
15
16 <script type="text/javascript" charset="utf-8" src="js/phonegap-1.3.0.js"></script>
17
18 <script type="text/javascript" src="js/LocatCam.js"></script>
19
20 </head>
21
22 <body>
23
24 </body>
25
26 </html>
10、把sencha touch 2 下面的resources复制到www下面；
11、最后运行，可以看到结果
