(译)如何创建一个Sencha Touch 2应用:part 1

发布网友发布时间：2022-05-04 01:28

共2个回答

热心网友时间：2022-05-04 02:57

此系列的第一部分中，我们将定义该应用的特性，包括外观样式，我们将开始建立应用主窗口。记事本应用的特性我们希望该应用能够让用户可做以下事情：创建笔记编辑已存在的笔记删除笔记以列表方式显示当前设备上的笔记通过浏览器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框架。  <title>My Notes</title> <link href="../Lib/ST2/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" /> <script src="../Lib/ST2/sencha-touch-debug.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script>   注意，我们将该框架文件防止在Lib/ST2文件夹下创建一个Sencha Touch应用实例第一步我们将在app.js中创建一个Sench Touch应用类的实例，如下定义一个应用实例：Ext.application({ name: "NotesApp", launch: function () { console.log("App launch"); } }); application()方法将在页面准备就绪后加载一个应用实例，它将使用给定的配置设置该应用。对我们而言，只是简单的给定了一个程序名、并定义了launch()函数。application()函数有一个重要的作用就是出发Models,Views，Controllers，Stores和Profiles的加载。当我们定义好了相关部分的依赖，这些出发都将自动产生。在此教程中，我们将看到这一特性。launch()函数当程序加载依赖以及实例化Controllers时被调用。若我们在模拟器中进入此页面，将看到下面这些：在Sencha Touch中继承类我们已经了解，主屏幕将以列表形式展现已经缓存在设备中的记录列表。构建此屏，我们需要使用一个Container类的实例，该实例将集成一个工具栏和一个列表首先，我们需要在view目录下创建NotesListContainer.js文件：在此js文件中，我们将如下定义NotesListContainer 视图：Ext.define("NotesApp.view.NotesListContainer", { extend: "Ext.Container", config: { items: [{ xtype: "toolbar", docked: "top", title: "My Notes", items: [{ xtype: "spacer" }, { xtype: "button", text: "New", ui: "action", id:"new-note-btn" }] }] } }); 这里我们将使用Ext.define()来定义一个Ext.Container类的扩展，将在此视图中添加一个Toolbar实例，让其停靠在顶部，该Toolbar将依次包含一个New按钮，该按钮将激活NoteEditor视图来创建新的记事。请注意我们如何将一个Spacer组件添加在该按钮之前。这能使New按钮放置于Toolbar的右端。同时，ui=“action”设置如何让该button拥有特别的外观样式，该设置定义了在该视图上的的button的默认样式。在Sench Touch指定应用的依赖在定义好NotesListContainer类后，是让程序注意到它的时候了。我们回到app.js文件，在application()函数中添加视图设置：Ext.application({ name: "NotesApp", views: ["NotesListContainer"], launch: function () { var notesListContainer = Ext.create("NotesApp.view.NotesListContainer"); Ext.Viewport.add(notesListContainer); } }); 我们使用以下视图配置来通知程序在NoteListContainer视图上有一个依赖：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定义:Ext.define("NotesApp.controller.Notes", { extend: "Ext.app.Controller", launch: function () { this.callParent(); console.log("launch"); }, init: function () { this.callParent(); console.log("init"); } }); 控制器包含一些方法，如init()与launch()，这些方法将在应用处理的不同时刻运行。init()将在应用运行launch()函数钱调用，而控制器的launch()函数将在应用运行launch()后调用。在控制器设置中添加相关依赖使得程序能识别到Notes控制器类：Ext.application({ name: "NotesApp", controllers: ["Notes"], views: ["NotesListContainer"], launch: function () { var notesListContainer = Ext.create("NotesApp.view.NotesListContainer"); Ext.Viewport.add(notesListContainer); } }); 众所周知，在控制器设置中添加Notes Controller Class将使得应用自动实例化该控制器并保持对它的引用。如何处理Sencha Touch控制器中的视图事件我们已经创建好了控制器，准备好向其添加特性。首先Notes控制器需要的是处理New按钮的点击。我们可以通过如下代码修改控制器定义来完成此功能：Ext.define("NotesApp.controller.Notes", { extend: "Ext.app.Controller", config: { refs: { newNoteBtn: "#new-note-btn" }, control: { newNoteBtn: { tap: "onNewNote" } } }, onNewNote: function () { console.log("onNewNote"); } // init and launch functions omitted. }); 看到变化了吗？是的，就在refs与control设置上。他们是控制器引用其他组件的机制基础，并为他们定义事件处理。refs 是的控制器能够找到应用中的组件，使用ComponetQuery类的类似于样式选择器的语法来检索组件。在Notes Controller中，我们使用newNoteBtn ref来创建一个id为#new-note-btn组件的应用，这便是New按钮。refs: { newNoteBtn: "#new-note-btn" } 基于次ref，框架将生成一个getter函数让我们能够随时获取该New按钮。Ref- 衍生的getter方法将以如下简单格式命名，它由get与大些名字组成，该函数名即为getNewNoteBtn()。Refs同时能在某组件应用不存在的情况下实例化次组件。即使在本代码中我们并未采用此方法，当时建议研究一下次特性。