Sencha学习手记

移动开发
Sencha是将Html 5+Css3+JavaScript结合起来的框架。Sencha使用最新的Html 5,可以灵活使用音频、视频的组件及离线保存数据的localStorage。加上Css3,可以使表现更加丰富。

Sencha

Sencha是什么?

Sencha是第一个基于Html 5的移动设备的开发框架。

Sencha是将Html 5+Css3+JavaScript结合起来的框架。Sencha使用最新的Html 5,可以灵活使用音频、视频的组件及离线保存数据的localStorage。加上Css3,可以使表现更加丰富。

 

Sencha能为我们做些什么?

Sencha能为我们做些什么?

Sencha可以帮忙我们开发移动设备的Web应用,Sencha可以让Web应用在苹果的iOS与谷歌的Android系统上都能得到极好体验。

Sencha优势

1.跨平台

跨平台

跨平台

乔布斯对Flash的封锁,让Flash无法进入到iOS平台上。虽然现在flash对android系统支持已经很不错了。但对于开发者还是有些遗憾。

随着Webkit在移动设备上的流行,可以让Sencha开发出的Web应用顺利的运行于苹果的iOS与谷歌的Android。

2.触控体验佳

触控体验佳

针对触屏设计,让应用读的懂手势,如单击/双击、抓捏、拖动、旋转等。

3.便捷的数据集成

[[37489]]

[[37490]]

可以方便的使用AJAX、JSON、YQL,以及离线存储localStorage。

开始使用Seacha进行开发:

1. 设置开发环境

下载Seacha开发框架库。下载地址 [Seacha目前的版本0.92]

下载后的目录结构如下:

设置开发环境

2.开始第一个Sencha应用

创建Html

我使用的是DW(Dreamweaver),创建了一个Html页面。

开始第一个Sencha应用

注:第10行,引用的是一个debug版的Sencha JS库,开发时方便调试。正式上线时,可更换为优化版ext-touch.js

创建JavaScript

  1. Ext.setup({  
  2.       tabletStartupScreen: 'tablet_startup.png',  
  3.       phoneStartupScreen: 'phone_startup.png',  
  4.       icon: 'icon.png',  
  5.       glossOnIcon: false,  
  6.       onReady: function() {  
  7.           var pnl = new Ext.Panel({   
  8.              layout: {  
  9.                   type: 'vbox',  
  10.                   pack: 'center' 
  11.               },  
  12.               items: [{   
  13.                  xtype: 'video',  
  14.                   url: 'space.mp4',  
  15.                   loop: true,  
  16.                   width: 500,  
  17.                   height: 400,  
  18.                   poster: 'Screenshot.png' 
  19.             }],  
  20.               fullscreen: true 
  21.         })  
  22.     }});  

感觉Hello word!没有意思,就搞一下视频吧!直接从example中找段代码。具体后面慢慢消化吧。

3.测试自己的成果

使用Safari浏览一下index.html

测试自己的成果

注:目前火狐及Chrome目前支持的都不太理想,IE大家先不用想了。如果之前有过手机的开发经验,可以直接用iPhone或Android的模拟器进行测试。

4. 将index.html中的ext-touch-debug.js更换为ext-touch.js

5. 上传服务器完成我第一个煎茶

责任编辑:佚名 来源: riameeting
相关推荐

2011-09-05 14:17:54

Sencha ToucMVC

2011-09-05 11:27:17

Sencha Touc框架HTML5

2009-12-22 15:28:51

Linux批量重命名文

2011-09-02 15:18:49

Sencha Touc

2011-07-26 09:41:50

Sencha Touc特性HTML 5

2010-11-22 10:31:17

Sencha touc

2011-07-25 15:55:21

Sencha ToucHtml 5

2011-09-05 10:20:21

Sencha ToucAPP

2010-06-17 09:18:57

Ext JSSencha

2011-07-26 09:46:53

Sencha Touc

2011-07-25 16:21:22

Sencha touc

2011-09-02 16:21:08

Sencha Touc自动生成工具

2011-09-05 10:39:03

Sencha Touc离线存储数据库

2011-07-25 16:41:16

Sencha Touc

2011-11-28 13:42:55

Sencha Touc组件选择器

2012-03-30 11:30:58

JavaJProfiler

2011-09-05 13:53:08

Sencha Touc列表

2011-09-05 14:09:06

Sencha Touc函数

2011-09-02 15:12:29

PhoneGapSencha Touc

2012-03-08 22:31:28

Sencha Touc
点赞
收藏

51CTO技术栈公众号