Sencha是什么?
Sencha是第一个基于Html 5的移动设备的开发框架。
Sencha是将Html 5+Css3+JavaScript结合起来的框架。Sencha使用最新的Html 5,可以灵活使用音频、视频的组件及离线保存数据的localStorage。加上Css3,可以使表现更加丰富。
Sencha能为我们做些什么?
Sencha可以帮忙我们开发移动设备的Web应用,Sencha可以让Web应用在苹果的iOS与谷歌的Android系统上都能得到极好体验。
Sencha优势
1.跨平台
乔布斯对Flash的封锁,让Flash无法进入到iOS平台上。虽然现在flash对android系统支持已经很不错了。但对于开发者还是有些遗憾。
随着Webkit在移动设备上的流行,可以让Sencha开发出的Web应用顺利的运行于苹果的iOS与谷歌的Android。
2.触控体验佳
针对触屏设计,让应用读的懂手势,如单击/双击、抓捏、拖动、旋转等。
3.便捷的数据集成
可以方便的使用AJAX、JSON、YQL,以及离线存储localStorage。
开始使用Seacha进行开发:
1. 设置开发环境
下载Seacha开发框架库。下载地址 [Seacha目前的版本0.92]
下载后的目录结构如下:
2.开始第一个Sencha应用
创建Html
我使用的是DW(Dreamweaver),创建了一个Html页面。
注:第10行,引用的是一个debug版的Sencha JS库,开发时方便调试。正式上线时,可更换为优化版ext-touch.js
创建JavaScript
- Ext.setup({
- tabletStartupScreen: 'tablet_startup.png',
- phoneStartupScreen: 'phone_startup.png',
- icon: 'icon.png',
- glossOnIcon: false,
- onReady: function() {
- var pnl = new Ext.Panel({
- layout: {
- type: 'vbox',
- pack: 'center'
- },
- items: [{
- xtype: 'video',
- url: 'space.mp4',
- loop: true,
- width: 500,
- height: 400,
- poster: 'Screenshot.png'
- }],
- fullscreen: true
- })
- }});
感觉Hello word!没有意思,就搞一下视频吧!直接从example中找段代码。具体后面慢慢消化吧。
3.测试自己的成果
使用Safari浏览一下index.html
注:目前火狐及Chrome目前支持的都不太理想,IE大家先不用想了。如果之前有过手机的开发经验,可以直接用iPhone或Android的模拟器进行测试。
4. 将index.html中的ext-touch-debug.js更换为ext-touch.js
5. 上传服务器完成我第一个煎茶