Sencha Touch开发实例:记事本应用(一)

移动开发 移动应用
在本文中,将介绍目前一个著名的移动跨平台开发框架Sencha Touch, 该框架是世界上第一个基于HTML 5的Mobile App框架,Sencha的前身其实大名鼎鼎的AJAX框架EXT JS,Sencha Touch目前是其下面的一个子框架项目,可以让你的Web App看起来像Native App。美丽的用户界面组件和丰富的数据管理,全部基于最新的HTML 5和CSS3的 WEB标准,全面兼容Android和Apple iOS设备。

目前,移动应用开发如火如荼,比如Android、iOS开发的应用已越来越多。开发者在开发这些基于不同操作平台上的无线应用时,都面临要熟悉所用平台的技术知识的挑战。因此,目前有不少基于HTML 5标准的跨移动开发框架出现,开发者只需要掌握HTML 5,CSS及Javascript及相关框架的开发技巧就可以了。

在Sencha Touch的项目下载地址里,我们可以下载其中的***版本。本系列教程将分四篇,将讲解如何使用Sencha Touch设计一个记事本小应用,用户可以在上面简单记录便条笔记,并将其保存在移动设备中。

Sencha Touch开发实例

应用示意图

系统的主要功能有

1) 新建记事内容

2) 编辑记事内容

3) 删除记事内容

4) 在移动设备应用中保存记事的内容。

本系列的教程,希望读者具有一定的EXT JS框架的开发基础知识为佳。在***讲中,先讲解如何对应用进行框架的设计。

设计主页面

首先,我们先来看如何设计用户用于创建和编辑记事的表单,可以大概设计成如下的样子:

Sencha Touch开发实例

可以看到,这个页面中,有保存按钮,以及一个删除按钮(一个垃圾图标),对应到Sencha Touch框架中的元素如下图所示:

Sencha Touch开发实例

接下来是记事列表的界面,框图如下:

Sencha Touch开发实例

其对应Sencha Touch中的框架元素如下:

Sencha Touch开发实例

此外,还需要使用一个布局文件,它是沟通记事列表页面和记事页面登记的桥梁,这里我们使用EXT的card layout布局进行布局,两个界面的关系如下图:

Sencha Touch开发实例#p#

构建程序基本结构

首先,在程序中的结构如下图所示,其中有三个主要的文件:index.html,app.js和app.cs。

在index.html中,主要功能是启动整个应用程序并且引用相关的类库,如下代码:

  1. <script class="hiddenSpellError"></script> 
  2. <script src=”senchatouch/1.1.0/sencha-touch.css" rel="stylesheet" type="text/css" /> 
  3. <link href="app.css" rel="stylesheet" type="text/css" /> 
  4. <script src="app.js" type="text/javascript"></script> 

这里,首先引入了sencha touch本身的类库JS代码,然后再引入app.css和app.js两个文件,其中app.css为样式文件,app.js文件为程序的核心功能JS文件。

下面我们介绍app.js中的具体代码,首先是在app.js中进行初始化:

  1. var App = new Ext.Application({ 
  2.     name : 'NotesApp'
  3.     useLoadMask : true
  4.     launch : function () { 
  5.  
  6.     } 
  7. }) 

其中,Ext.Application的实例的初始化,意味者一个sencha touch应用的建立,具体的可以参考(http://dev.sencha.com/deploy/touch/docs/?class=Ext.Application)中对该类的说明,这个类的实例化后,会自动创建一个全局的变量NotesApp,并且同时建立了如下的命名空间:

◆NotesApp

◆NotesApp.views、

◆NotesApp.controllers

◆NotesApp.models

◆NotesApp.stores

而launch的方法只会运行一次,在这里可以创建应用程序的viewport界面视图,代码如下:

  1. launch: function () { 
  2.  
  3.     NotesApp.views.viewport = new Ext.Panel({ 
  4.         fullscreen: true
  5.         html:'This is the viewport' 
  6.     }); 

我们将整个界面布局设置为使用Panel面板,并且设置了fullscreen属性为true,同时也会设置monitorOrientation属性的值为true,这个是很有用的一个属性,因为它可以让panel面板监听屏幕方向发生变化时候的事件。当我们运行后,显示如下的界面:

Sencha Touch开发实例#p#

创建记事列表界面

当我们的这个应用一启动后,首先显示的是记事列表页面,其中页面结构如下图:

Sencha Touch开发实例

可以看到,是在一个pannel面版中,存在一个list列表控件和一个toolbar工具条列表。下面是pannel的代码:

  1. NotesApp.views.notesListContainer = new Ext.Panel({ 
  2.     id : 'notesListContainer'
  3.     layout : 'fit'
  4.     html: 'This is the notes list container' 
  5. }); 

此时,我们结合之前的代码,看下目前的代码应该是如下的样子:

  1. var App = new Ext.Application({ 
  2.     name: 'NotesApp'
  3.     useLoadMask: true
  4.     launch: function () { 
  5.  
  6.         NotesApp.views.notesListContainer = new Ext.Panel({ 
  7.             id : 'notesListContainer'
  8.             layout : 'fit'
  9.             html: 'This is the notes list container' 
  10.         }); 
  11.  
  12.         NotesApp.views.viewport = new Ext.Panel({ 
  13.             fullscreen : true
  14.             layout : 'card'
  15.             cardAnimation : 'slide'
  16.             items: [NotesApp.views.notesListContainer] 
  17.         }); 
  18.     } 
  19. }) 

可以看到,在viewport中的items属性,我们将新的这个panel加入进去了。

并且请注意cardAnimation中,说明了面板的使用效果是slide的动画展现效果。在模拟器中运行后,会看到如下图的效果:

Sencha Touch开发实例

接下来,我们再为其增加工具条,代码如下:

  1. NotesApp.views.notesListToolbar = new Ext.Toolbar({ 
  2.  
  3.   id: 'notesListToolbar'
  4.  
  5.   title: 'My Notes' 
  6.  
  7.   }); 

将工具条粘附到记事列表的面板中是很简单的,只需要dockedItems 属性即可:

  1. NotesApp.views.notesListContainer = new Ext.Panel({ 
  2.  
  3.   id: 'notesListContainer'
  4.  
  5.   layout: 'fit'
  6.  
  7.   html: 'This is the notes list container'
  8.  
  9.   dockedItems: [NotesApp.views.notesListToolbar] 
  10.  
  11.   }); 

下图就是添加工具条后的运行效果:

Sencha Touch开发实例

到目前为止,本讲的内容结束,主要是讲解了如何架构应用的流程和页面,并给出了启动界面中的记事列表的界面设计原型,目前的完整代码如下:

  1. var App = new Ext.Application({ 
  2.     name: 'NotesApp'
  3.     useLoadMask: true
  4.     launch: function () { 
  5.  
  6.         NotesApp.views.notesListToolbar = new Ext.Toolbar({ 
  7.             id: 'notesListToolbar'
  8.             title: 'My Notes' 
  9.         }); 
  10.  
  11.         NotesApp.views.notesListContainer = new Ext.Panel({ 
  12.             id: 'notesListContainer'
  13.             layout: 'fit'
  14.             html: 'This is the notes list container'
  15.             dockedItems: [NotesApp.views.notesListToolbar] 
  16.         }); 
  17.  
  18.         NotesApp.views.viewport = new Ext.Panel({ 
  19.             fullscreen: true
  20.             layout: 'card'
  21.             cardAnimation: 'slide'
  22.             items: [NotesApp.views.notesListContainer] 
  23.         }); 
  24.     } 
  25. }) 

在《Sencha Touch开发实例:记事本应用(二)》中,我们将继续学习,如何实现新建立和编辑记事的功能。

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

2011-07-26 10:44:15

Sencha Touc

2023-09-21 11:30:11

2011-09-02 15:18:49

Sencha Touc

2011-07-26 09:58:24

2011-09-02 16:42:51

Sencha ToucWeb应用

2011-07-25 16:21:22

Sencha touc

2012-01-10 14:10:26

Sencha Touc

2011-08-15 09:51:45

Sencha TouciPad

2011-09-05 10:49:14

Sencha ToucjQuery MobiHTML5

2009-09-03 13:08:43

C#调用记事本

2011-09-05 11:23:26

EclipseSencha Touc框架

2024-01-10 09:50:58

AI 写作功能CoWriterChatGPT

2011-09-01 10:09:04

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-12-20 15:59:28

2011-09-05 10:27:02

Sencha Touc手机应用Android

2011-09-05 14:17:54

Sencha ToucMVC

2011-09-05 11:27:17

Sencha Touc框架HTML5
点赞
收藏

51CTO技术栈公众号