sencha touch 2与phonegap结合开发web app

来源：广州中睿信息技术有限公司官网

发布时间：2012/10/21 23:25:16 编辑：admin 阅读 578 次

1、下载sencha-touch-2-pr3和phonegap-1.3.02、在assets（JavaEEIDE）下面创建www,然后在www下面创建js文件夹,如下所示：3、把sencha-tou

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);

添加一行：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；

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、最后运行，可以看到结果

愿景：成为最专业的软件研发服务领航者
中睿信息技术有限公司广州•深圳	Tel：020-38931912	务实 Pragmatic
广州：广州市天河区翰景路1号金星大厦18层中睿信息	Fax：020-38931912	专业 Professional
深圳：深圳市福田区车公庙有色金属大厦509~510	Tel：0755-25855012	诚信 Integrity
所有权声明：PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。