编写 Sencha Touch 应用, Part 1

红薯 发布于 2011/06/08 07:40
阅读 1K+
收藏 7

在这个系列中,我们将创建一个 Sencha Touch 应用程序,并允许用户创建笔记并在手机上存储。主要包含以下几部分内容:

  • 构建 Sencha Touch 应用程序块
  • 通过 List view 列表信息
  • 编辑信息
  • 客户端数据持久化
  • 在多视图的应用中浏览

Sencha Touch Application

应用功能描述:

  • 创建笔记
  • 编辑已有的笔记
  • 删除笔记条目
  • 持久化保存笔记内容

下面是可视化设计过程(内容简单不再翻译):

Designing the main views

The first thing we need is a way for our users to create and edit notes. We can do this with a form, which we will call Note Editor, that will look just like this mock-up:

How would you build the Note Editor using Sencha Touch components? Take a look at this:

We also need a view that renders a list of the existing notes. This Notes List will be the main view of the application, and it will need to be connected with the Note Editor. This is how the Notes List should look:

And these are the Sencha Touch components we will use:

There’s one additional component that, although not visible, is vital to the application. This component will function as the viewport of the app, and it will take care of rendering and managing the navigation between the Notes List and the Note Editor. To play this role, we will choose a Panel configured with a card layout, where the Notes List and the Note Editor will be the layout’s cards:

Building blocks of a Sencha Touch application

Three different files will host the pieces of our application: index.html, app.js and app.cs:

Index.html is the file used to launch the app. In this file we need to include references to the Sencha Touch framework, as well as the app.js and app.cs files:

<script src="../../../senchatouch/1.1.0/sencha-touch-debug.js" type="text/javascript"></script>
<link href="../../../senchatouch/1.1.0/sencha-touch.css" rel="stylesheet" type="text/css" />
<link href="app.css" rel="stylesheet" type="text/css" />
<script src="app.js" type="text/javascript"></script>

App.js and app.css will in turn contain the javascript source and the styles used by the app.

In the app.js file, the very first thing we will do is instantiate an Application:

var App = new Ext.Application({
    name : 'NotesApp',
    useLoadMask : true,
    launch : function () {

    }
})

The Ext.Application class represents a Sencha Touch application. As described in the documentation for the Ext.Application class, instantiating a new application automatically creates a global NotesApp variable, along with the following namespaces:

  • NotesApp
  • NotesApp.views
  • NotesApp.controllers
  • NotesApp.models
  • NotesApp.stores

The launch() function is only run once. This is where we will create our application’s viewport:

launch: function () {

	NotesApp.views.viewport = new Ext.Panel({
		fullscreen: true,
		html:'This is the viewport'
	});
}

Our app’s viewport is an Ext.Panel. This panel will host the Notes List and Note Editor. When we set its fullscreen config option to true, we are instructing the panel to take up all the width and height available. This will also set the monitorOrientation config to true, enabling the panel to listen to orientation change events.

Monitoring orientation changes is a desirable feature for our viewport, as we want it to correctly render the Notes List and the Note Editor when the device’s orientation changes.

If you navigate to the index.html page using a device or simulator, our app will look like this:

Creating the Notes List container

The Notes List is the view that will be presented to our users when they launch the application. As defined in the mock-up, this view will consist of a toolbar and a list of notes. Let’s build it one step at a time.

First, we need the panel that will contain both the toolbar and the list of notes:

We will call this panel notesListContainer, and this is how we will instantiate it:

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

Before we add the toolbar and notes list to this panel, let’s render it within the viewport like so:

var App = new Ext.Application({
    name: 'NotesApp',
    useLoadMask: true,
    launch: function () {

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

        NotesApp.views.viewport = new Ext.Panel({
            fullscreen : true,
            layout : 'card',
            cardAnimation : 'slide',
            items: [NotesApp.views.notesListContainer]
        });
    }
})

Note how we’ve added the layout and cardAnimation config options to the viewport. This is because we will use a card layout, where the Notes List container and the Note Editor are the cards. As in many popular mobile apps, these cards will be displayed using a slide animation.

A quick check on the simulator or device should confirm that the Notes List container is present:

What are we missing in this view? The toolbar and the notes list. We will take care of the toolbar next.

Adding a Sencha Touch toolbar to a panel

We can define the toolbar as follows. This is a plain toolbar, we won’t be adding buttons to it for now:

NotesApp.views.notesListToolbar = new Ext.Toolbar({
    id: 'notesListToolbar',
    title: 'My Notes'
});

Adding the toolbar to our notesListContainer is a simple step. We just need to use the dockedItems config option:

NotesApp.views.notesListContainer = new Ext.Panel({
    id: 'notesListContainer',
    layout: 'fit',
    html: 'This is the notes list container',
    dockedItems: [NotesApp.views.notesListToolbar]
});

Another quick check on the simulator or device should confirm that the toolbar is correctly rendered:

What’s next

In the next article of this series we will add the notes list to the view we just created, and we will move on to adding the ability to create and edit notes.

Here’s the source code for the application as it stands at this point:

var App = new Ext.Application({
    name: 'NotesApp',
    useLoadMask: true,
    launch: function () {

        NotesApp.views.notesListToolbar = new Ext.Toolbar({
            id: 'notesListToolbar',
            title: 'My Notes'
        });

        NotesApp.views.notesListContainer = new Ext.Panel({
            id: 'notesListContainer',
            layout: 'fit',
            html: 'This is the notes list container',
            dockedItems: [NotesApp.views.notesListToolbar]
        });

        NotesApp.views.viewport = new Ext.Panel({
            fullscreen: true,
            layout: 'card',
            cardAnimation: 'slide',
            items: [NotesApp.views.notesListContainer]
        });
    }
})
英文原文:http://miamicoder.com/2011/writing-a-sencha-touch-application-part-1/
加载中
0
Yisen
Yisen
是用Pencil话的原型图吗
易水西风
易水西风
蛮喜欢这个软件,很容易上手用,不过好贵啊,惭愧我用的破解版
红薯
红薯
似乎是 Balsamiq Mockups
0
j
jxufezbz
前辈, 期待您讲下用什么开发工具,项目结构是什么样的?如何用android模拟器看?这对很新很新的手很需要。
返回顶部
顶部