在MyEclipse和Tomcat下配置Sencha Touch環(huán)境
作者：czpae86
本文我們將介紹在MyEclipse和Tomcat下如何配置Sencha Touch環(huán)境。只有配置開發(fā)環(huán)境之后，才能進(jìn)行移動web應(yīng)用的開發(fā)。
首先要配置開發(fā)環(huán)境。這個很簡單，只要到官方網(wǎng)站下載Sencha Touch壓縮包即可http://www.sencha.com/products/touch/。
開發(fā)工具隨便一個編輯器，記事本也可以的。
本人用的是MyEclipse+Tomcat，Sencha Touch用的是1.01版本(使用MyEclipse+Tomcat我為了以后例子可以跟后臺交互)
其實(shí)可以直接瀏覽本地靜態(tài)html文件的。
1，編寫messageBox.html文件：
Html代碼
- <!doctype html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>messageBox.html</title>
- <link rel="stylesheet" href="../../ext/resources/css/sencha-touch.css" type="text/css">
- <script type="text/javascript" src="../../ext/sencha-touch.js"></script>
- <script type="text/javascript" src="messageBox.js"></script>
- </head>
- <body>
- </body>
- </html>
如果你以前用過Extjs，那么這段代碼你很容易明白。
- 引入sencha-touch.css樣式文件。
- 引入sencha-touch.js核心庫文件。
- messageBox.js是例子用的文件。
2，編寫messageBox.js文件：
Js代碼
- Ext.setup({
- icon: '../icon.png',
- tabletStartupScreen: '../tablet_startup.png',
- phoneStartupScreen: '../phone_startup.png',
- glossOnIcon: false,
- onReady: function() {
- Ext.Msg.alert('提示', '第一個SenchaTouch程序！');
- }
- });
現(xiàn)在我們只關(guān)心onReady函數(shù)里面的代碼，其他可以copy。
如果你以前做過Extjs那么看API難不到你。你可以在onReady中使用其他組件進(jìn)行測試的。
3，運(yùn)行效果：
本人使用的是Opera的手機(jī)模擬器(支持HTML5)，google瀏覽器也可以的。
在瀏覽器輸入http://localhost:8080/SenchaTouchTest/myExample/messageBox/messageBox.html
當(dāng)然你可以直接打開html進(jìn)行瀏覽而不必要部署到服務(wù)器(我為了以后例子可以跟后臺交互)
責(zé)任編輯：佚名
來源：
ITeye.com
