一起来玩WebApp第1篇---配置开发环境(下)

最新推荐文章于 2021-04-22 16:47:18 发布

西瓜皮

最新推荐文章于 2021-04-22 16:47:18 发布

阅读量3.1k

点赞数 1

分类专栏： HTML5 Sencha Touch 文章标签： webapp eclipse stylesheet tomcat 框架 jdk

本文链接：https://blog.csdn.net/terry823/article/details/6917282

版权

HTML5 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

Sencha Touch

4 篇文章 0 订阅

订阅专栏

在《一起来玩WebApp第1篇---配置开发环境(上)》中，我们已经介绍了如何在本机安装j2ee的JDK以及tomcat的安装和
设置。这篇文章主要介绍如何在你的Web App中使用Sencha Touch 2.0。否则大家还是两眼一抹黑啊。

建议用Eclipse来进行Sencha Touch2的开发。在网上找一个Eclipse For J2ee的解压缩版即可。
打开Eclipse开发环境，首选需要制定一个WorkSpace，字面意思为设置工作环境，可以理解为项目存放的文件夹。
然后在主界面依次点击：“File”-》“New”-》“Project”，如下图所示：

在打开的窗口中选择“General”-》“Project”，创建一个空项目：

在这里，我们对我们的第一个项目命名为：“mynotes01”,然后手动将Sencha Touch2的JDK，解压缩后的文件夹拷贝
到项目文件夹中，并将该文件夹重命名为touch，主要是为了方便，避免在程序中路径写的太长。
项目的目录树如下图，其中app.js和index.html是自己添加的：

app.js代码如下，app.js中使用Sencha Touch2框架的语法后续文章陆续介绍：
Ext.application({
   name: 'Sencha',
   launch: function() {
   var panel = Ext.create('Ext.Panel', {
   html: 'This is my panel'
   });
   Ext.Viewport.add(panel);
   }
});

index.html代码如下，主要起到引用框架的作用：
<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
   <title>我的笔记</title>
   <link rel="stylesheet" href="touch/resources/css/sencha-touch.css" type="text/css">
   <script type="text/javascript" src="touch/sencha-touch-all.js"></script>
   <script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

完成上述代码保存后，记得重新启动Tomcat服务。
然后在自己电脑上输入地址：
http://localhost:8080/mynotes01/index.html
即可访问。
当你在页面中看到：
“This is my panel”字样，那么你的开发环境就完全配置好了。
你已经完成了你的第一个Sencha Touch2框架下的程序，类似于大家初学编程时的“Hello World！”

呵呵