sencha touch 开发准备
这是本人第一次写博客教程,没什么经验,文笔也不是很好,写这教程一方面为了巩固自己这段时间的学习成果,一方面帮助大家解决问题,欢迎大家多提建议,指出问题。接下来我们就开始我们的sencha touch开发之旅了。
首先,我们开始搭建sencha touch的开发环境,我这讲的环境搭建主要是针对windows平台的:
1.选择一款能够兼容并调试sencha touch的浏览器:
sencha touch之前是针对webkit内核进行设计的,所以chrome或safari浏览器可以很好的展现基于sencha touch的webapp,不过sencha touch的最新版本也提供了对ie10和ie11的支持,所以在开始开发之前,确保你的系统上已经安装了上述浏览器之一(我这里演示使用的是chrome浏览器,除去firefox的firebug工具外,我最喜欢的就是chrome的开发者工具了,不仅可以查看dom元素,调试js,还能实时监控,cpu使用率,触发事件,内存占用等,是js开发的强力工具);
2.下载sencha touch的sdk工具包:
http://www.sencha.com/products/touch/download/,这是官方的下载地址,你可以输入你的邮箱下载免费的商业版本(Free Commercial Version),系统会将下载链接发送到你的邮箱中
你也可以点击这个链接 http://cdn.sencha.com/touch/sencha-touch-2.3.1-gpl.zip,下载官方的gpl(General Public License)版本,gpl版本比免费商业版本多了sencha chart,不过基于gpl协议的项目需要对外公开自己的源代码
在下载sdk包的同时,我们可以把sencha touch的官方离线文档也下载下来,
点击链接http://docs.sencha.com/,如下所示:
这里是sencha touch各个版本的官方文档,点击版本号可以查看在线文档,如果需要下载离线文档,点击版本号后面的zip即可;
3.sencha cmd 工具的下载及环境配置
sencha cmd 是官方提供的一款功能强大的命令行工具,使用它你可以自由地创建sencha touch的app项目,对你项目中的js及css文件进行压缩,以及将项目打包成相应移动平台的安装程序,对于使用了sencha touch 的native api的,sencha cmd 会在打包安装程序中使用sencha packaging自动集成相关设备的本地函数入口,相当好用,在后面的教程中我们会介绍如何使用它进行项目开发,我们先将cmd的安装程序包下载下来,点击链接http://www.sencha.com/products/sencha-cmd/download进入下载页面,目前cmd已经更新到cmd 4.0,根据你自己的系统选择相应的安装程序安装即可;
由于cmd工具是用java写的,所以它的运行需要java 1.7版本环境以及ruby(用来编译项目的css)的支持,所以我们还需要安装java的jdk和ruby:
3.1 java jdk的安装:
对于jdk的安装,我想做java开发的同学再熟悉不过了,首先点击链接http://www.java.com/zh_CN/download/chrome.jsp?locale=zh_CN,进入jdk的下载界面,
注明:目前java官网安装的java程序已经不带jdk了,所以大家可以到oracle的官网去下载java的jdk,
这里是下载地址,大家可以根据自己的系统进行下载http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html
,一般情况下该站点会根据你的系统自动判断你需要下载的版本,如果下载的版本跟你的系统不匹配,你可以点击下面的链接http://www.java.com/zh_CN/download/manual.jsp,选择与你系统匹配的jdk包进行下载,下载完成后进行安装即可,
安装完jdk包后,我们还有件重要的事情要做,就是配置jdk的环境变量,这里仅针对windows平台进行讲解
xp的系统右击我的电脑 ==》属性 ==》环境变量,
win7的系统可以在开始菜单中右击计算机==>属性==》高级系统设置==》环境变量,进入环境变量设置界面,如图
在“系统变量”中,设置3项属性,JAVA_HOME,PATH,CLASSPATH(大小写无所谓),若已存在则点击“编辑”,不存在则点击“新建”:
JAVA_HOME指明JDK安装路径,就是刚才安装时所选择的路径C:\Program Files\Java\jdk1.6.0_21,
Path项下添加:;%JAVA_HOME%\bin; %JAVA_HOME%\jre\bin,注意前面用分号隔开,(当你在命令行界面执行java指令的时候,操作系统会到path下去查找这个执行文件)
在CLASSPATH项添加:.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar (要加.表示当前路径)
(classpath是类文件路径,当你执行java xxx指令时,系统会根据这个classpath设置的路径去查找java的class文件)
这样我们的环境变量就配置完毕了,点击开始==》运行,cmd,进入命令行工具,输入java -version,这时会出现java的当前版本号,代表环境配置成功;
接着我们再键入sencha,同样也会显示sencha cmd的版本信息,如图:
3.2 ruby的安装:
对于我们用sencha cmd创建sencha touch的项目来说,ruby并不是必须的,不过在打包项目的时候我们必须用到它,cmd在打包压缩项目的时候会使用ruby来编译项目的css文件,如果没有安装ruby,那么打包将会报错失败,所以在这里我们将ruby一起安装起来,
点击下面的链接http://rubyinstaller.org/downloads/进行下载安装,这里我们只介绍windows系统下的情况,cmd 4.0以下的版本对ruby 2.0版本不兼容,不过在官方文档航上看到4.0版本好像没这个问题了,具体没测试过,我这里使用的还是ruby 1.9.3版本的安装程序,
点击开始安装,安装的时候可以选择英文或者日文,听说ruby是日本人写的,
安装的过程中记得勾选下面的项,自动配置ruby的环境变量,
安装成功,我们测试下ruby是否安装成功:
点击开始==》运行==》键入cmd,在命令行工具中输入ruby -v,如图,会显示ruby的版本信息
自此我们的ruby安装成功
4.web服务端环境
万事俱备,只欠东风,最后一个必备的工作就是配置我们的服务端环境,虽然我是做java的,不过项目的服务端一直都是c#写的,所以我这里用的是iis服务器,使用iis服务的话,要给iis服务配置MiME,添加 application/x-json,如果你做的webapp准备发布web版本的话,还需要添加text/cache-manifest,这个是用来设置webapp离线缓存的,tomcat,apache都不用做额外的设置
5.开发工具(IDE)的选择
开发工具根据个人的喜好来使用,我使用的是传说中的js神奇webstorm,大爱,呵呵,你可以根据自己的使用习惯来选择ide,vs,eclipse,aptana,也是不错的选择,
sencha touch官方还推出了自己的开发工具Sencha Architect,官网上可以直接下载,不过是收费的,免费试用30天,可以破解无限试用,该工具可以对视图直接进行拖拽,所见即所得
其中只有controller部分的代码可以进行编辑,并且没有代码提示功能跟格式化功能,如果大家有需要,以后可以专门开篇教程介绍这款工具的使用
完成以上的工作,我们的准备工作就完成了,下一节我们将开始创建我们的第一个sencha touch项目
sencha touch 开发准备的更多相关文章
- sencha touch 入门系列 (二)sencha touch 开发准备
这是本人第一次写博客教程,没什么经验,文笔也不是很好,写这教程一方面为了巩固自己这段时间的学习成果,一方面帮助大家解决问题,欢迎大家多提建议,指出问题.接下来我们就开始我们的sencha touch开 ...
- Sencha Touch开发完整流程快速讲解
1.目录 移动框架简介,为什么选择Sencha Touch? 环境搭建 创建项目框架,框架文件简介 创建简单Tabpanel案例 自定义图标的方式 WebApp产品测试和发布 HTML5离线缓存 发布 ...
- 使用ASP.Net MVC5 Web API OData和Sencha Touch 开发WebAPP
使用ASP.Net MVC5 Web API OData和SenCha Touch 开发WebAPP Demo 效果 第一步 创建数据库 创建表 第二步 搭建MVC,并导入OData 第三步,写入We ...
- 【翻译】为Ext JS和Sencha Touch开发人员准备的应用程序监测(App Inspector)
和其他的Sencha开发人员一样,我会花费大约半天的时间在我喜欢的IDE工具上编写JavaScript,而另一半时间则是在浏览器上测试和调试我的应用程序.在过去几年,每一个主要的浏览器都已大为改善.现 ...
- 【翻译】使用Sencha Touch开发Google Glass应用程序
原文:Developing for Google Glass with Sencha Touch 作者:Ross Gerbasi Ross Gerbasi is a Senior Engineer a ...
- sencha touch 开发环境搭建(视频)
图文文章参见: http://www.cnblogs.com/mlzs/p/3420900.html 视频共享链接 百度:http://pan.baidu.com/s/1mg5DpS8
- Sencha Touch开发环境搭建及ext插件Spket安装
第一步:JAVA SDK(JDK)的安装 以去问百度下载JDK,也可以到官方下载JDK. 下载地址: http://www.oracle.com/technetwork/java/javase/dow ...
- 跟我一起玩转Sencha Touch 移动 WebApp 开发1
跟我一起玩转Sencha Touch 移动 WebApp 开发(一) 1.目录 移动框架简介,为什么选择Sencha Touch? 环境搭建 创建项目框架,框架文件简介 创建简单Tabpanel案例 ...
- sencha touch打包成安装程序
为了更好地向大家演示如何打包一个sencha touch的项目,我们用sencha cmd创建一个演示项目,如果你的sencha cmd环境还没有配置,请参照 sencha touch 入门系列 (二 ...
随机推荐
- 如何处理JSON数据中含有双引号
{"quality": "B"A"D"} 实际上要 value.replace("\"","\\\& ...
- HBase(二): c#访问HBase之股票行情Demo
上一章完成了c#访问hbase的sdk封装,接下来以一个具体Demo对sdk进行测试验证.场景:每5秒抓取指定股票列表的实时价格波动行情,数据下载后,一方面实时刷新UI界面,另一方面将数据放入到在内存 ...
- VMware 虚拟机Red Hat 5.9 交换区及硬盘空间调整
首先要通过VMware设置简单实现内存扩大.但是系统中的/swap应该如何设置呢? 1. 创建swap 文件 使用如下命令: #dd if=/dev/zero of=/swap/swapfile bs ...
- Oracle维护常用SQL
--查询表空间.表空间大小及表空间对应物理路径 select a.tablespace_name,b.file_name,a.block_size,a.block_size,b.bytes/1024 ...
- 【linux】linux如何进入单人维护模式修改root密码
- Python基础教程【读书笔记】 - 2016/8/3
希望通过博客园持续的更新,分享和记录Python基础知识到高级应用的点点滴滴! 第十一波:第11章 文件和素材 本章更进一步,让程序能够接触更多的领域:文件和流.接下来介绍的函数和对象可以让你在程序 ...
- 51nod 1314 定位系统
一个国家有N个城市(标号为0~N-1),这N个城市恰好由N-1条道路连接在一起(即N个城市正好构成一个树状结构).这个国家的所有道路的长度都是1个长度单位.定义:两个城市间的距离是两个城市间的最短路的 ...
- Configure Puppet Master with Passenger and Apache on Centos
What is Passenger? Passenger (AKA mod_rails or mod_rack) is an Apache 2.x module which lets you run ...
- android学习笔记17——对话框(PopupWindow)
PopupWindow ==> PopupWindow可创建类似对话框的窗口,使用其创建对话框窗口的操作步骤: 1.调用PopupWindow构造器构造PopupWindow对象: 2.调用Po ...
- SVN在团队项目中的使用技巧:[2]Tag操作
SVN是Subversion的简称,是一个开放源代码的版本控制系统 本节讲述SVN使用中的TAG操作 文中若有错误或不足之处,欢迎留言指正 工具/原料 电脑 SVN 方法/步骤 1.认识SVN中T ...