jQuery MiniUI,快速开发WebUI界面

Sencha Touch 2 在MAC下详细的开发流程

在不久的将来我相信Web App会流行的非常广, 能看到未来才能主宰未来。对于我们开发人员来说我觉得想成就一件伟大的事情,需要过硬的技术和好的想法,再加上决不放弃的精神,一定可以成功的。

以下在Mac下测试成功

安装Web Server

我用的是Apache Tomcat 6.0, 测试是否可以正常试用. 打开你的Terminal.

启动你的Web Server命令如下:
sudo sh startup.sh
当你看到如下图的时候,说明已经启动成功了.

关闭服务的命令是:
sudo sh shutdown.sh

如果遇到文件权限问题,而无法执行命令时。
你需要执行一条:
sudo chmod 755bin/*.sh -à 把文件设置成可读可写
接下来在你的浏览器中输入localhost:8080

这里我们的WebServer就算安装成功了.

安装我们的SenchaCmd

它是一个可装的工具,直接双击就可以安装。安装完成后在你的用户目录下会出现一个bin目录.

然后再一次的打开我们的Terminal.
设置我们的环境变量. 如图

当你能看到上图的时候, 你的SenchaCmd已经成功安装了.这里有一个问题,就是当你关闭Terminal,再打开的时间.要重新设置PATH. 因为我们设置的变量没有存到系统中。
我知道可以存到/etc/profile文件中, 该文件必须有root权限才可以添加. 建议使用vi编辑. 我没有把PATH写到/etc/profile文件中, 而是写到了~/bash_profile文件中

所以我在每次使用Sencha命令时:需要在Terminal中执行一条source~/bash_profile来加载环境变量。
安装SenchaTouch 2 SDK

把我们的SenchaTouch SDK解压后,拷贝到webapps下。如图

然后在浏览器中输入:
localhost:8080/touch-2.2.1/SETUP.html

基本工作已经完成,现在可以创建我们的第一个WebApp.

打开我们的Terminal,cd 到webapps/touch-2.2.1目录下。
执行命令
sencha generate apphello_world ../hello_world如图所示

如果你能看到上面的信息说明你的第一个Web App已经创建成功了。
下面是我们刚才创建的目录:

接下来运行我们的WebApp. 这里需要重启一下我们的ApachaTomcat:

如果你能看到下面的图,说明你已经成功了.

继续完成我们的HelloWorld
在此建议大家把我在Chatter中发的WindowResizer装到你的浏览器中,方便调试窗口的大小。
推荐一个开发js很不错的工具WebStorm

用这个工具打开刚才创建的WebApp

在hell_world目录下创建一个文件叫hello_world.html

我们的第一个Helloworld终于出来了。

我们的第二个比较好看的hello Sencha页面.

代码如下:

到这儿基本上已经完成了Web App的开发。
有两个东西需要提醒一下:
1) 在启动Apache Tomcat出现权限问题时。需要执行一条: sudo chmod 755 *.sh, 对所有的sh加根.
2) 建议大家的用Chrome的浏览器, 然后在Chrome上装一个Window Resizer 的插件,可以调整Chrome的大小.

作者: Samba
原文: http://blog.csdn.net/nihaozhangchao/article/details/9142263