如何创建一个Sencha Touch 2应用
发布网友
发布时间:2022-04-12 00:30
我来回答
共3个回答
热心网友
时间:2022-04-12 02:00
在此系列中,我们将创建一个Sencha Touch 2版本的记事本应用,用来记录用户的笔记并存储在该运行设备上。在这个过程中,我们将深入一下几个区域:
建立一个Sencha Touch 应用的区块
如何实现一个应用多视图的导航栏
如何使用Sencha Touch表单元素编辑数据
如何利用列表视图呈现数据
如何使用HTML5本地存储保存数据
此系列的第一部分中,我们将定义该应用的特性,包括外观样式,我们将开始建立应用主窗口。
记事本应用的特性
我们希望该应用能够让用户可做以下事情:
创建笔记
编辑已存在的笔记
删除笔记
以列表方式显示当前设备上的笔记
通过浏览器sessions将此设备上的笔记持久化
应用的用户界面
该记事本应用的主界面将以列表形式显示已有记录。我们将次视图命名为NotesListContainer。此处是它的模型,描述了怎样利用Sencha Touch组件来构建。
正如你看到的,NoteListContainer 视图是一个Ext.Container组件,它集成了一个工具栏组件和一个列表组件。我们将把Ext.List组件作为一个独立的视图:NotesList视图。
第二屏NoteEditor视图,用户可以在此创建、编辑和删除记事。该视图就像如下模型:
该NoteEditor视图是一个Ext.form.Panel组件,它包含了一组工具栏和表单元素以编辑记录的属性。
同时,我们也需要一种在不同屏幕中导航的机制。由于每个Sencha Touch应用已启动变获取了一个Viewport,我们可以利用它来呈现NotesListContainer 和NoteEditor 视图,同时也可以利用它管理两视图间的导航:
该Viewport很适用于当前任务,它继承自Container类,默认全屏卡片布局,这正是我们所需要的。
一个Sencha Touch 应用在目录与文件上如何组织
我们已经定义好了应用的特性以及用户界面,接下来,我们将开始编写源代码,我们将如下组织源代码文件目录:
将文件放在NotesApp目录下,一并包含着该应用的启动代码(app.js中)。
我们同样需要一个app目录,其下放置controller,model,profile,store,view目录。程序中用的控制器、模型等将分别放置在对应的目录下。
index.html文件将启动该应用,此文件中,将包含Sench Touch框架。
view sourceprint?
01.
<!--<!DOCTYPE html>
02.
<html>
03.
<head>--> <!--Remove comments!-->
04.
<title>My Notes</title>
05.
<link href="../Lib/ST2/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
06.
<script src="../Lib/ST2/sencha-touch-debug.js" type="text/javascript"></script>
07.
<script src="app.js" type="text/javascript"></script>
08.
<!--</head>
09.
<body>
10.
</body>
11.
</html>--> <!--Remove comments!-->
注意,我们将该框架文件防止在Lib/ST2文件夹下
创建一个Sencha Touch应用实例
第一步我们将在app.js中创建一个Sench Touch应用类的实例,如下定义一个应用实例:
view sourceprint?
1.
Ext.application({
2.
name: "NotesApp",
3.
launch: function () {
4.
5.
console.log("App launch");
6.
}
7.
});
application()方法将在页面准备就绪后加载一个应用实例,它将使用给定的配置设置该应用。对我们而言,只是简单的给定了一个程序名、并定义了launch()函数。
application()函数有一个重要的作用就是出发Models,Views,Controllers,Stores和Profiles的加载。当我们定义好了相关部分的依赖,这些出发都将自动产生。在此教程中,我们将看到这一特性。
launch()函数当程序加载依赖以及实例化Controllers时被调用。
若我们在模拟器中进入此页面,将看到下面这些:
在Sencha Touch中继承类
我们已经了解,主屏幕将以列表形式展现已经缓存在设备中的记录列表。构建此屏,我们需要使用一个Container类的实例,该实例将集成一个工具栏和一个列表
首先,我们需要在view目录下创建NotesListContainer.js文件:
在此js文件中,我们将如下定义NotesListContainer 视图:
view sourceprint?
01.
Ext.define("NotesApp.view.NotesListContainer", {
02.
extend: "Ext.Container",
03.
config: {
04.
items: [{
05.
xtype: "toolbar",
06.
docked: "top",
07.
title: "My Notes",
08.
items: [{
09.
xtype: "spacer"
10.
}, {
11.
xtype: "button",
12.
text: "New",
13.
ui: "action",
14.
id:"new-note-btn"
15.
}]
16.
}]
17.
}
18.
});
这里我们将使用Ext.define()来定义一个Ext.Container类的扩展,将在此视图中添加一个Toolbar实例,让其停靠在顶部,该Toolbar将依次包含一个New按钮,该按钮将激活NoteEditor视图来创建新的记事。
请注意我们如何将一个Spacer组件添加在该按钮之前。这能使New按钮放置于Toolbar的右端。同时,ui=“action”设置如何让该button拥有特别的外观样式,该设置定义了在该视图上的的button的默认样式。
在Sench Touch指定应用的依赖
在定义好NotesListContainer类后,是让程序注意到它的时候了。我们回到app.js文件,在application()函数中添加视图设置:
view sourceprint?
01.
Ext.application({
02.
name: "NotesApp",
03.
views: ["NotesListContainer"],
04.
05.
launch: function () {
06.
07.
var notesListContainer = Ext.create("NotesApp.view.NotesListContainer");
08.
Ext.Viewport.add(notesListContainer);
09.
}
10.
});
我们使用以下视图配置来通知程序在NoteListContainer视图上有一个依赖:
view sourceprint?
1.
views: ["NotesListContainer"]
该应用类默认models, views, controllers, stores 和 profiles放置在app/model, app/view, app/controller, app/store, 和 app/profile目录下。在此约定下,我们可以使用它们名称的后部分来定义models, views, controllers, stores 和profiles。如果我们使用了不同的目录结构,便需要指明它们的完整命名。
是时候看看这个视图的模样了。在模拟器中,你将看到类似下面的外观:
不错对吧,让我们继续构建Controller,我们需要一个Controller类来管理用户输入,模型修改,以及试图间的切换。
创建Sencha Touch 控制器
让我们先创建一个简单的Notes控制器类,将此类放置在Notes.js文件中,并将此文件放在controller目录下:
如下为Controller定义:
view sourceprint?
01.
Ext.define("NotesApp.controller.Notes", {
02.
extend: "Ext.app.Controller",
03.
launch: function () {
04.
this.callParent();
05.
console.log("launch");
06.
},
07.
init: function () {
08.
this.callParent();
09.
console.log("init");
10.
}
11.
});
控制器包含一些方法,如init()与launch(),这些方法将在应用处理的不同时刻运行。init()将在应用运行launch()函数钱调用,而控制器的launch()函数将在应用运行launch()后调用。
在控制器设置中添加相关依赖使得程序能识别到Notes控制器类:
view sourceprint?
01.
Ext.application({
02.
name: "NotesApp",
03.
controllers: ["Notes"],
04.
views: ["NotesListContainer"],
05.
06.
launch: function () {
07.
08.
var notesListContainer = Ext.create("NotesApp.view.NotesListContainer");
09.
Ext.Viewport.add(notesListContainer);
10.
}
11.
});
众所周知,在控制器设置中添加Notes Controller Class将使得应用自动实例化该控制器并保持对它的引用。
如何处理Sencha Touch控制器中的视图事件
我们已经创建好了控制器,准备好向其添加特性。首先Notes控制器需要的是处理New按钮的点击。我们可以通过如下代码修改控制器定义来完成此功能:
view sourceprint?
01.
Ext.define("NotesApp.controller.Notes", {
02.
extend: "Ext.app.Controller",
03.
config: {
04.
refs: {
05.
newNoteBtn: "#new-note-btn"
06.
},
07.
control: {
08.
newNoteBtn: {
09.
tap: "onNewNote"
10.
}
11.
}
12.
},
13.
onNewNote: function () {
14.
console.log("onNewNote");
15.
}
16.
17.
// init and launch functions omitted.
18.
});
看到变化了吗?是的,就在refs与control设置上。他们是控制器引用其他组件的机制基础,并为他们定义事件处理。
refs 是的控制器能够找到应用中的组件,使用ComponetQuery类的类似于样式选择器的语法来检索组件。
在Notes Controller中,我们使用newNoteBtn ref来创建一个id为#new-note-btn组件的应用,这便是New按钮。
view sourceprint?
1.
refs: {
2.
newNoteBtn: "#new-note-btn"
3.
}
基于次ref,框架将生成一个getter函数让我们能够随时获取该New按钮。Ref- 衍生的getter方法将以如下简单格式命名,它由get与大些名字组成,该函数名即为getNewNoteBtn()。
Refs同时能在某组件应用不存在的情况下实例化次组件。即使在本代码中我们并未采用此方法,当时建议研究一下次特性。
control设置项定义了应用组件的事件处理,可使用refs或ComponentQuery选择器定义control中的时间处理。在Notes Controller中,我们使用newNoteBtn来定义New按钮的单击处理:
view sourceprint?
1.
control: {
2.
newNoteBtn: {
3.
tap: "onNewNote"
4.
}
5.
}
很明显,我们需要定义处理函数,我们将在Controller的代码中做进一步的工作:
view sourceprint?
1.
onNewNote: function () {
2.
console.log("onNewNote");
3.
}
onNewNote()函数只是简单的信息输出到控制台而已,不久我们就会添加打开NoteEditor视图的代码。
在模拟器中检查程序,如果单击New按钮,将会输出一条消息。
如果你的控制器需要处理某个组件的特定事件,你可以参考一下步骤:
为组件创建引用(ref)
在控制器的control 设置中为ref创建实体
使用该control设置中的实体指定你感兴趣的时间处理方法
热心网友
时间:2022-04-12 03:18
1、Sencha Touch项目(简称ST项目)、Phonegap项目、Android项目(或iOS项目)是三个不同的概念
2、ST项目和eclipse没关系;
Android项目和eclipse有点关系(可以用eclipse调试和导出apk包);
iOS项目和xcode有点关系(可以用xcode调试和上架)
3、ST项目用phonegap(或cordova)init之后,会出现给一个Phonegap目录,这个目录下是Phonegap项目
4、sencha app build native生成的Android项目(或iOS项目),在Phonegap目录下,是Phonegap项目的一部分
5、ST项目用sencha cmd也能生成原生安装包(如Android的APK),不过官方不再推荐用sencha cmd 生成原生安装包,而推荐用Phonegap,因为它可以使用各种原生插件实现特殊的功能(摄像头,定位,等等)
如何把Sencha Touch 2.0框架打包成iOS本地应用
需要用到AppID和Appname。在Mac系统上打包iOS系统应用程序的步骤前期准备:进入AppleiOSprovisioningportal完成开发者授权。安装打包程序部分:SenchaSDKTools2.0创建一个配置文件用于打包IOS应用.运行packager打包工具,创建一个App.Step1:在AppleiOSprovisioningportal完成iOS程序开发者授权可查看开发者授权系统Apple...
如何能让 Sencha Touch 2 加载更快一些
一、首先提前下载使用的软件:二、软件安装 三、Sencha Architect创建项目 四、Sencha Architect开发一个List列表 4.1从左侧工具箱拖一个Panel到设计窗体 4.2拖一个List控件到Panel 4.3设置Panel布局fit 4.4拖拉store到右侧项目结构中的Stores 4.5设置List的数据源 4.6设置list的item显示模板 4.7切...
Sencha Touch权威指南内容简介
对于模型关联,书中讲解了一对多、多对一和一对一关系的定义,以及在模型内部建立关联的方法。同时,也详细讲解了Sencha Touch 2.0的Ext Direct API、样式与主题设定。最后,本书还涵盖了自定义组件的开发以及MVC模式在实际应用中的应用,为开发者提供了丰富的实战指导。
JavaScript搜狐页面设计?
四、SenchaArchitect2 在开发移动和桌面应用的工具中,Sencha的定位是HTML5可视化应用开发。开发团队可以在一个单一集成的环境中完成应用的设计、开发和部署。开发者还可以开发SenchaTouch2和ExtJS4JavaScript应用,并实时预览。 五、SenchaTouch2 SenchaTouch2是移动应用框架,也被看作是Sencha的HTML5平台。开发者可以用它开...
SenchaArchitect2的介绍
通过联合使用Sencha Touch 2与ExtJS 4,Sencha Architect 2旨在提升开发者的生产率并驱动应用设计模式上的最佳实践。Senchca Architect 2提供了一个可视化的画布与代码编辑平台,并且使用了拖放的方式,旨在快速实现移动与桌面应用的装配。开发好应用后,开发者就可以通过Sencha Architect 2打包应用以部署到Web...
用什么开发sencha touch
去年8月开始开发的吧 你可以看看我的提问记录 spket这个插件可以提示EXTJS的代码。sencha是基于这个的 但是这个提示并不准确。。。 有个好处就是比默认的写JS格式要好看,而且逗号啥的有错误都能标出来。
如何能让 Sencha Touch 2 加载更快一些
2,sencha-touch.css和app.css内容重复了!debug 看下就知道,所有的css都有两份。不知道你是怎么编译sass的,正确的做法是配置好config.rb,然后使用compass compile来编译压缩,最后会生成一个app.css的压缩文件,我的大小是200k。只有这一个css文件,没有另外一份。最后,可以检查下app.scss,不必要...
h5页面制作工具
可参考以下制作步骤:1、打开微传单,注册账号2、登录注册时的邮箱,激活注册的账号3、进入管理微传单界面,点击上图中的“+”号图标4、在弹窗中选择一个样板或空白样板,点击【创建】,直接复制样板进入编辑页面 5、复制样板后,对h5页面的各个栏目进行编辑,例如增加新页面、编辑显示区的内容、调整属性...
h5海报制作-新手如何制作简单的h5页面?
三、AdobeColdFusion10ColdFusion是用来开发企业Web程序的服务器端技术,通过Websockets、互动表单、视频和地理标签等HTML5技术创建富媒体用户体验。四、SenchaArchitect2在开发移动和桌面应用的工具中,Sencha的定位是HTML5可视化应用开发。开发团队可以在一个单一集成的环境中完成应用的设计、开发和部署。开发者还...
Sencha TouchSencha简介
这个转变标志着Web应用开发进入了一个全新的时代,开发者们可以借助Sencha Touch,轻松创建出功能强大、界面美观的移动应用,无需离开HTML5和JavaScript的世界。总的来说,Sencha Touch的诞生,是ExtJS对移动市场的一次有力回应,也是JavaScript技术在移动端的一次重大突破。它为开发者们提供了一个强大的工具,...