sencha_touch在移动设备的应用

SenchaTouch在移动设备的应用,制作人:孙琪,目录,WhatsSenchaTouch?WhySenchaTouch?FeaturesSenchaTouchMVCSenchaArchitectureExtDesignerDemo,Sencha简介,Sencha，翻译意为“煎茶”，是指一种在日本很流行的绿茶品种，“我们之所以选择这个名字，因为它会唤醒下一代软件开发并且它很容易记忆、拼写和发音”，在Java开发的传统中，它代表了软件开发的一个新水平阶段。,WhatsSenchaTouch?,Sencha和SenchaTouch简介,SenchaTouch是ExtJS整合JQTouch、Raphal库而推出的适用于最前沿Touchweb的框架。SenchaTouch框架是世界上第一个基于HTML5的MobileApp框架。它基于HTML5和CSS3的web标准，全面兼容Android和AppleiOS，通过SenchaTouch框架用户可以创建非常像移动设备native应用的web应用。它提供了丰富的华丽的控件和强大的功能，包括对触控事件的增强，数据整合。,Sencha的前身是ExtJS,2010年ExtJS改名为Sencha。ExtJS是一个基于JavaScript编写的Ajax框架。它功能强大，界面美观，是基于Ajax、DHTML、DOM等技术开发web应用的一个非常成熟的框架。,HTML5简介,HTML5是用于取代1999年所制定的HTML4.01和XHTML1.0标准的HTML标准版本。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务（plug-in-basedrichinternetapplication，RIA)，如AdobeFlash、MicrosoftSilverlight，与OracleJavaFX的需求，并且提供更多能有效增强网络应用的标准集。,语义化本地存储和离线应用程序获取地理信息位置WebSocketsCanvas,WhySenchaTouch?,WhySenchaTouch?,BuiltwithWebStandardsCross-platformLooksnative,feelsnativeFlexibleDeploymentHighlycustomisableTheWorldsBestDevices,next,Cross-platform,乔布斯对Flash的封锁，让Flash无法进入到iOS平台上。虽然现在flash对android系统支持已经很不错了。但对于开发者还是有些遗憾。随着Webkit在移动设备上的流行，可以让Sencha开发出的Web应用顺利的运行于苹果的iOS与谷歌的Android。,Back,Web无需安装，对设备碎片化的适应能力优于App，它只需要通过XHTML、CSS和JavaScript就可以在任意移动浏览器中执行。随着iPhone带来的WebKit浏览体验升级，使得专为iPhone等有WebKit浏览内核的移动设备开发的Web应用，也有了如App一般流畅的用户体验。,图1谷歌Voice和谷歌Gmail是WebApp的设计典范,WebApp,优势：1.开发成本低2.适配多种移动设备成本低3.跨平台和终端4.迭代更新容易5.无需安装成本,图2街旁和百度小说，采用HTML5实现了接近Native的体验效果,WebApp,劣势：1.浏览的体验短期内还无法超越原生应用2.不支持离线模式（html5将会解决这个问题）3.消息推送不够及时4.调用本地文件系统的能力弱,而App因为位于平台层上方，向下访问和兼容的能力会比较好一些，可以支持在线或离线，消息推送或本地资源访问，摄像拨号功能的调取。但是由于设备碎片化，App的开发成本要高很多，维持多个版本的更新升级比较麻烦，用户的安装门槛也比较高。但是比较乐观的是，Appstore培养了一种比较好的用户付费模式，所以在Apple的生态圈里，开发者的盈利模式是一种明朗状态，其他market也在往这条路上靠拢。,图3Gowalla和AwesomeNote，是移动客户的经典设计案例,NativeApp,优势：1.提供最佳的用户体验，最优质的用户界面，最华丽的交互2.针对不同平台提供不同体验3.可节省带宽成本4.可访问本地资源5.盈利模式明朗,NativeApp,劣势：1.移植到不同平台上比较麻烦2.维持多个版本的成本比较高3.需要通过store或market的确认4.盈利需要与第三方分成,发展趋势,乔布斯有一次谈到这个问题，他说Web是未来，虽然现阶段Native给了用户更好的体验。如果现在的开发者不有效的利用Web技术，那他就落伍了。但如果过分依赖Web，完全不用Native那也未必就是好事。IOS平台上的App有三类：WebApp，通过浏览器访问；NativeApp，通过Appstore安装；第三类叫HybridApp，它虽然看上去是一个NativeApp，但只有一个UIWebView，里面访问的是一个WebApp，比如街旁网最开始的应用就是包了个客户端的科，其实里面是HTML5的网页，后来才推出真正的原生应用。再彻底一点的，如掌上百度和淘宝客户端Android版，走的也是HybridApp的路线，不过掌上百度里面封装的不是WebView，而是自己的浏览内核，所以体验上更像客户端，更高效。,图4掌上百度和Naver客户端都是WebApp+NativeApp的架构,Back,Features,Features,EnhancedTouchEventsDataIntegrationVideo、AudioFormsComponentsMore,TouchEvents,TapDoubletapTapandholdSwipeRotatepinchDrag,Ext.regStore(messageStore,model:message);,Multipleviewscanexistforasinglemodel,Views,Rendersthemodelintoaformsuitableforinteraction,app.views.Viewport=Ext.extend(Ext.Panel,id:viewport,fullscreen:true,initComponent:function();,ReceivesinputInstructsthemodelandviews,Controllers,newExt.Controller(model:message,onSelected:function(selectionModel,records),show:function(),save:function();,SenchaArchitect2,SenchaArchitect2是个可视化的应用构建器，它使用SenchaTouch2来构建移动应用，使用ExtJS4来构建桌面应用。SenchaArchitect2构建在该公司的HTML5布局工具ExtDesigner之上，并扩展了其功能以为桌面与移动Web应用的构建提供更为广泛的应用设计环境。1通过联合使用SenchaTouch2与ExtJS4，SenchaArchitect2旨在提升开发者的生产率并驱动应用设计模式上的最佳实践。SenchcaArchitect2提供了一个可视化的画布与代码编辑平台，并且使用了拖放的方式，旨在快速实现移动与桌面应用的装配。开发好应用后，开发者就可以通过SenchaArchitect2打包应用以部署到Web上或是发布到原生的应用商店中。,SenchaArchitect2特性,1、通过拖拽组件来创建富用户界面并连接到后端的数据源。2、支持通过SenchaTouch2来构建移动Web应用以及通过ExtJS4来构建桌面Web应用。其提供的代码编辑功能可以在SenchaArchitect中创建整个应用。3、支持模型视图控制器模式。内置的针对iOS与Android的一键式原生打包功能。,ExtJSDesigner,ExtDesigner（Ext可视化设计器）是用来帮助开发人员快速构建基于Ext的富客户端应用的客户端程序，它有易于使用和通过拖拽方式进行开发的特点。,新特性复制组件改造组件撤消/重做配置搜索自动更新截图,ExtJSDesigner,复制组件无论是复制与粘贴一组组的源代码，还是修改其配置项的内容是比较累的一件事情。设计师现在允许用户轻松地复制一批批的组件然后修改其中的配置项。请看看下面这个简单快速的例子，我透过duplicate复制的功能很快地就构建起一个表单，不需要拖动组件，也不需要一次又一次地配置那些都一样的参数。创建一个简单的Form：,ExtJSDesigner,变形组件TransformingComponents,当你为新的组件编写代码的时候，你可选择以原有的组件为基础扩展一个新类，或者就实例化这个组件，实例化过程中加入新的配置项内容。,例如：,设计师的开发过程就有点不同。假设已经创建好一个GridPanel然后打算转为一个EditorGridPanel。我的操作就是，在inspector中右击组件，观察哪个变形的选项是可以选的。GridPanel就转换到EditorGridPanel，反之亦然。,ExtJSDesigner,接着我们装配好这个GridPanel。我们拖出一个field作为Grid的列，设计师会自动辨认出应该使用TextField，然后到EditorGrid的时候就会转换可输入的TextField。设计师都会帮您做好变形的工作。,ExtJSDesigner,另外一个有趣的变形是，转换TabPanel为Panel后，又将其转换为accordion，都是没问题的。Fields对象可以在这两种类型的切换中顺利变形。,ExtJSDesigner,组件的撤销/重做当组合这些UI的时候，觉得有不对的话，使用顶部工具条的Undo和Redo的按钮，就可以把上一次的操作撤销或重做。该版本当前的限制就是，当你执行位于顶层组件转换（transform）的时候，undo/redo的历史就会重新来过，复位了。,配置项定位,组件被选择了，就应该可搜索一下欲知的配置项。这个关键的功能在早期的释出版本没有加上。这样的话查询配置项起来就会十分麻烦！视频中就如右边的截图所示，敲入“la”便会自动将匹配的结果排序排在前面。配置项右边的叉叉就是复位用的，按默认的排序。当您觉得想移除某个配置项又不想只是设为空字符串，那么这个特性挺方便的。,示例展示:,HelloWorld!,Index.html,helloworld,demo.js