在MyEclipse和Tomcat下配置Sencha Touch环境

首先要配置开发环境。这个很简单,只要到官方网站下载Sencha Touch压缩包即可http://www.sencha.com/products/touch/

开发工具随便一个编辑器,记事本也可以的。

本人用的是MyEclipse+Tomcat,Sencha Touch用的是1.01版本(使用MyEclipse+Tomcat我为了以后例子可以跟后台交互)

其实可以直接浏览本地静态html文件的。

1,编写messageBox.html文件

Html代码

 
 
  1. <!doctype html>   
  2. <html>   
  3.   <head>   
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">      
  5.     <title>messageBox.html</title>   
  6.     <link rel="stylesheet" href="../../ext/resources/css/sencha-touch.css" type="text/css">   
  7.     <script type="text/javascript" src="../../ext/sencha-touch.js"></script>   
  8.     <script type="text/javascript" src="messageBox.js"></script>   
  9.   </head>   
  10.      
  11.   <body>   
  12.        
  13.   </body>   
  14. </html>  

如果你以前用过Extjs,那么这段代码你很容易明白。

  • 引入sencha-touch.css样式文件。
  • 引入sencha-touch.js核心库文件。
  • messageBox.js是例子用的文件。

2,编写messageBox.js文件

Js代码

 
 
  1. Ext.setup({   
  2.     icon: '../icon.png',   
  3.     tabletStartupScreen: '../tablet_startup.png',   
  4.     phoneStartupScreen: '../phone_startup.png',   
  5.     glossOnIcon: false,   
  6.     onReady: function() {   
  7.         Ext.Msg.alert('提示''第一个SenchaTouch程序!');   
  8.     }   
  9. });   

现在我们只关心onReady函数里面的代码,其他可以copy。

如果你以前做过Extjs那么看API难不到你。你可以在onReady中使用其他组件进行测试的。

3,运行效果

本人使用的是Opera的手机模拟器(支持HTML5),google浏览器也可以的。

在浏览器输入http://localhost:8080/SenchaTouchTest/myExample/messageBox/messageBox.html

当然你可以直接打开html进行浏览而不必要部署到服务器(我为了以后例子可以跟后台交互)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值