《SenchaTouch入门.ppt》由会员分享，可在线阅读，更多相关《SenchaTouch入门.ppt（55页珍藏版）》请在三一办公上搜索。
1、第11讲 Sencha Touch入门,请到 240FTP./HTML5移动Web开发下载第11讲文件夹,主要内容,概述（ExtJS、Sencha、Sencha Touch）Sencha Touch基础知识,1、概述-ExtJS,Ext是基于Web的富客户端框架，其完全是基于标准W3C技术构建的，使用到的都是HTML、CSS、DIV等相关技术。Ext最杰出之处，是开发了一系列非常简单易用的控件及组件，我们只需要使用这些组件就能实现各种丰富多彩的UI的开发。无论组件有多少配置属性、还是事件、方法等等，其最终都会转化为HTML在浏览器上显示出来，而每一个HTML页面都有一个层次分明的DOM树模型，
2、浏览器中的所有内容都有相应的DOM对象，动态改变页面的内容，正是通过使用脚本语言来操作DOM对象实现。,1、概述-ExtJS,仅仅有DOM是不够的，比如要把页面中的某一个节点移到其它位置，要给某一个节点添加阴影效果，要隐藏或显示某一个节点等，我们都需要通过几句 javascript才能完成。因此，Ext在DOM的基础上，创建了Ext Element，可以使用Element来包装任何DOM，Element对象中添加了一系列快捷、简便的实用方法。,1、概述-ExtJS,对于终端用户来说，仅仅有Element是不够的，比如用户要显示一个表格、要显示一棵树、要显示一个弹出窗口等。因此，除了Elemen
3、t以外，Ext 还建立了一系列的客户端界面组件Component，我们在编程时，只要使用这些组件Component即可实现相关数据展示及交互等，而 Component是较高层次的抽象，每一个组件在渲染render的时候，都会依次通过Element、DOM来生成最终的页面效果。,1、概述-sencha,Sencha是由ExtJS、jQTouch 以及 Raphael 三个项目合并而成的一个开源项目。Sencha Touch 是全球领先的应用程序开发框架，其设计旨在充分利用HTML5、CSS3 和Javascript 来实现最高级别的功能、灵活性和优化。Sencha Touch 是针对下一代具有触
4、摸屏设备的跨平台框架。,1、概述,Sencha 特性,1.基于最新的WEB标准 HTML5，CSS3，JavaScript。整个库在压缩和gzip后大约80KB，通过禁用一些组件还会使它更小。2.支持世界上最好的设备。3.增强的触摸事件。在touchstart、touchend等标准事件基础上，增加了一组自定义事件数据集成，如tap、swipe、pinch、rotate等。4.数据集成。提供了强大的数据包，通过Ajax、JSONp、YQL等方式绑定到组件模板，写入本地离线存储。,访问官网,https:/,下载资源,邮箱里面会收到下载链接,Here are some resources to h
5、elp you get started:Join the Sencha community forums.View our robust documentation for Touch.Sign up for online or on-site training.Questions?Feedback?Please contact us.Purchase a support subscription for direct access to Sencha technical support.Note:You can find the Sencha Touch Commercial License
6、 Agreement and Maintenance and Support Agreement on our website.Thank you for being a part of the Sencha community.The Sencha Team,下载得到的文件夹,课件文件夹中有下载好的资源,2、sencha touch基础知识,引例配置对象和配置选项应用程序的命名和启动面板组件对DOM访问和控制,第一个例子 新建文件 example1.html,添加代码,基本信息,ready函数,panel容器,运行界面,调试程序在开发者模式和调试js代码一样,例2,在代码的第20行后面加一句
7、代码,我们把前面的例子改为如下形式，这是更为规范的写法。见 example2,example2.html 中 body 是空的页面是由example2.js创建的。,tabletStartupScreen 属性.指定图标文件的名称,用作平板电脑上应用程序的开始屏幕.phoneStartupScreen 属性.指定图标文件的名称,用作手机设备上应用程序的开始屏幕.icon 属性.指定应用程序的默认图标文件名,icon.png.glossOnIcon 属性.指定是否要被应用到默认图标的光泽效果。在这种情况下，该值设置为false，表示默认图标不增加光泽.onReady 方法（launch方法）.指
8、定函数来运行,当浏览器的文档对象模型（DOM）准备好之后,应用程序的HTML文件已加载.,2、sencha touch基础知识,引例配置对象和配置选项应用程序的命名和启动面板组件对DOM访问和控制,下面详细解释一下前面的代码,b)配置对象和配置选项,过去，我们习惯于使用预先定义好的参数来调用函数。这表示当调用函数时，必须记住传入参数的顺序。代码如下：var test=new TestFuntion(LuLingNiu,38,);这种方式可能会带来以下3个问题：需要函数调用者记住且不能改变传入参数的顺序。不描述参数代表什么含义。在实现可选参数时缺少灵活性。,使用配置对象，可以具有更大程度的灵活性
9、，传入参数的顺序不再重要，可以以任何顺序来设置传入参数，并且代码阅读者也可以对参数的含义一目了然。代码如下：var test=new TestFunction(Name:LuLingNiu,Age:38,Email:);,这种方法允许函数的参数可以无限扩展，使用更少的传入参数或添加新的传入参数的处理变得更加简单。使用这种方法的另一个好处是，在第一次调用了函数之后，添加或减少传入参数对第一次的函数调用不产生任何影响。代码如下：/第一次调用 var test=new TestFunction(Name:LuLingNiu);/第二次调用 var test=new TestFunction(Name
10、:LuLingNiu,Age:38,Email:);,举例来说，看如下代码：var panel=Ext.create(Ext.Panel,/以下3行代码的作用为对面板使用配置选项 fullscreen:true,id:myPanel,style:color:red,html:一个简单的示例面板);这个示例代码中的配置对象初看起来有些复杂，但它是一种最快的配置组件的方法，因为每一个Sencha Touch的组件都使用一个配置对象，所以它是一个必须习惯使用的对象。,当使用配置对象时，有以下几点必须要记住：,在所有配置选项的最外层使用大括号，代表大括号内部为一个配置对象。每个配置选项由选项名与选项值
11、组成，选项名与选项值之间用冒号分隔，配置选项与配置选项之间用逗号分隔。配置选项值可以为任何类型的数据，包括布尔类型、数组类型、函数类型，甚至可以包含另一个配置对象类型。,当使用配置对象时，有以下几点必须要记住：,方括号代表一个数组，例如name:one,two,three,一个数组中同样可以包含多个配置对象。使用配置对象及其配置选项来配置组件的最大好处是：可以在需要的时候随意添加配置选项，而不像一个典型的函数调用那样必须固定参数的个数（除非使用可选参数），配置选项的顺序是不重要的，配置选项的数量也是可以变化的。,c)应用程序的命名和启动,Sencha Touch中使用Ext.app.Appli
12、cation类来定义应用程序，可以使用应用程序的name配置选项来定义应用程序的名称，该配置选项值中不能包含空格。使用方法如下：Ext.application(name:MyApp);,c)应用程序的命名和启动,在使用iOS操作系统的设备中，用户可以将应用程序添加在主屏幕上以方便访问。在Sencha Touch 2.0中，可以通过应用程序的配置选项来定制应用程序在主屏幕上的图标与应用程序启动时的图标。代码如下：Ext.application(name:MyApp,icon:images/icon.png,glossOnIcon:false,phoneStartupScreen:images/p
13、hone_startup.png,tabletStartupScreen:images/tablet_startup.png);,可以在应用程序的launch配置选项中指定当应用程序准备好被加载时所调用的函数，通常使用该函数来渲染应用程序的初始界面。使用方法如下：Ext.application(name:MyApp,/其他配置选项代码略 launch:function()/代码略);,d)面板组件,Sencha Touch 2.0中提供了很多组件，例如消息框组件、面板组件等。这些组件通常都提供了一个特殊的用户界面及其内部功能，可以通过配置选项来定义组件的界面显示及其所执行的内部处理。,面板组件
14、,面板组件是Sencha Touch 2.0中最常使用的容器组件，该组件以div元素的形式显示在页面上。在Sencha Touch 2.0中可以使用两种方法创建组件。,其中第一种方法为使用Ext.create方法，代码如下：,var panel=Ext.create(Ext.Panel,/或var panel=Ext.create(Ext.lib.Panel,fullscreen:true,id:myPanel,style:color:red,html:一个简单的示例面板);其中第一个参数定义该组件的类名或类的别名;第二个参数为一个配置对象，可以在该配置对象中指定该组件所使用的配置选项，这些配
15、置选项将被传入该组件类的构造器中。,第二种方法为使用new方法，代码如下：,var panel=new Ext.Panel(/或var panel=new Ext.lib.Panel(id:myPanel,fullscreen:true,style:color:red,html:一个简单的示例面板);在使用第二种方法的时候，需要在new关键字的后面书写类名或类的别名，同时在方法的参数中传入该组件的配置对象。,这段代码中为面板组件使用的配置选项说明如下。fullscreen:使用布尔值进行指定。指定面板组件的尺寸是否被自动扩展为浏览器窗口的尺寸。id：用于指定元素id。当根据Sencha Tou
16、ch 2.0的脚本代码生成页面中的HTML代码时页面中面板元素所生成的div元素的id即为id配置选项的选项值。请记住元素的id是唯一的，所以一旦使用了mypanel作为某个面板的id，就不能再在页面中使用这个id，否则可能导致一些意想不到的行为发生，而通常情况下这些行为将被视为应用程序的一个Bug。在你的页面中如果存在重复的元素id可能会导致一些奇怪的行为，例如一个部件总是出现在浏览器的左上角，所以要避免这种现象。style：用于指定面板组件在被渲染时所使用的样式代码。当styleHtmlContent配置选项值为false时，style配置选项被忽略（不使用该选项值中设定的样式代码）。st
17、yleHtmlContent配置选项值的作用为，设置是否对面板组件中的HTML代码使用CSS样式。在Sencha Touch 2.0中，如果面板组件的html配置选项被使用，则styleHtmlContent配置选项值默认为true。html：用于指定面板组件中的HTML代码，当根据Sencha Touch 2.0的脚本代码生成页面中的HTML代码时，这段HTML代码将被插入根据面板组件所生成的div元素中。在Sencha Touch 2.0中，Ext.Panel类继承Ext.Container类（定义容器组件），此处的4个配置选项均为容器组件的配置选项，所有直接或间接继承了容器组件的其他组件
18、都具有这些配置选项，使用方法大致相同。,Viewport组件,在Sencha Touch 2.0中，使用Ext.Viewport类Viewport组件可以在该组件中添加其他组件。例如将前面例子中launch函数中的代码修改为如下形式，其页面显示效果完全相同。launch:function()var panel=Ext.create(Ext.Panel,id:myPanel,style:color:red,html:一个简单的示例面板);Ext.Viewport.add(panel);,Viewport组件,Sencha Touch 2.0中的Viewport组件是一个类似于面板组件的容器组件，
19、在HTML代码中，该组件同样以div元素的形式显示在页面中。它与面板组件的区别为，在调用应用程序的launch函数之前该组件已被自动创建，且该组件的fullscreen配置选项的选项值默认为true。,e)对DOM访问和控制,Sencha Touch之所以能够非常好地完成工作，是因为它可以实现对DOM的访问，并且提供了对DOM进行控制的方法。在这些方法中，Ext.get方法是最常用的。,Ext.get方法的使用,Ext.get方法如以下代码所示：Ext.get(myPanel)修改代码example2，修改后的代码如代码example3（注意删除面板组件的style配置选项）。,这段代码在执行
20、了Ext.get方法之后执行了addCls方法，作用是为面板组件生成的元素添加使用一个CSS样式类，类名为colorRed，因此，在index.html文件的head标签中临时加入一个colorRed样式类。代码如下：.colorRed color:red;在浏览器中访问修改后的页面，页面中“一个简单的示例面板”文字将变为红色。,需要注意的是，Ext.get方法并不返回组件，而是返回封装了组件所生成元素的Ext.dom.Element对象，该对象可实现组件所提供的对元素进行操作的方法中的一部分。如果需要返回组件的话，需要使用Ext.ComponentManager.get方法，该方法返回组件本
21、身。现在通过实例看这两个方法的区别。,Ext.ComponentManager.get方法的使用,继续修改代码中的launch函数中，在该函数中创建一个面板，使用Ext.Comonent-Manager.get方法获取id选项值为myPamel的面板组件，然后使用该面板组件的add方法将第二个面板添加成为子面板。代码见example4，修改代码显示效果图1。将Ext.ComponentManager.get方法替换成为Ext.get方法并访问示例页面，子面板将不能被添加，显示效果同图2所示。,图1 图2,Ext.fly方法的使用,Ext.fly方法使用Ext.js 4中的flyweight技术
22、，该技术在浏览器中为使用Ext.fly方法的元素节点开辟一块内存，下一次使用Ext.fly方法的元素节点将占据相同地址的内存，即覆盖前一次使用Ext.fly方法的元素节点。因为这些元素节点在浏览器中共享一块内存，所以可以提高一部分应用程序在使用时的性能。,请注意，第18行使用Ext.get方法获取父面板生成的div元素，第19行使用Ext.fly方法将子面板元素的节点存入浏览器的共享内存中，第20行为父面板元素添加使用colorRed样式类，所以父面板及其子面板中的文字颜色均变为红色。,现在将第18行代码修改为如下代码：,var newPanel=Ext.fly(myPanel);经过修改后，
23、newPanel变量的地址指针变为指向浏览器中的共享内存，所以虽然在第18行中newPanel变量引用父面板所生成的元素节点，但是在第19行中由于对子面板使用Ext.fly方法，所以浏览器的共享内存中保存子面板所生成的元素节点，即newPanel变量引用子面板所生成的元素节点，所以在第20行中对newPanel变量所引用的元素节点添加使用colorRed样式类后，只有子面板中的文字颜色变为红色。,修改前 修改后,注意：应该针对在代码中只引用一次、之后不再引用的元素 使用Ext.fly方法。如果程序中需要多次引用某个元素，应该为该元素使用Ext.get方法，这样可以避免浏览器共享内存的频繁使用（
24、避免一些意想不到的Bug），同时也可以让该元素使用Ext.dom.Element对象所享有的浏览器中的缓存。,即将以上代码书写成如下形式：var newPanel=Ext.fly(myPanel);newPanel.addCls(colorRed);/应用程序中这段代码之后不再引用id为myPanel的元素 var newPanel=Ext.fly(subPanel);newPanel.addCls(colorBlue);/应用程序中这段代码之后不再引用id为subPanel的元素,总结,介绍了什么是Sencha Touch框架Sencha Touch框架中所使用的配置对象与配置选项，如何定义应用程序的名称及其启动界面，如何使用launch方法定义应用程序在打开后在浏览器中所显示的初始化界面。Sencha Touch 2.0中的面板组件以及Viewport组件的基本概念及其配置选项的使用方法，介绍了Sencha Touch 2.0中Ext.get方法、Ext.ComponentManager.get方法、Ext.fly方法的作用以及这些方法的区别。,
