从零开始学习Sencha Touch MVC应用之二

从零开始学习Sencha Touch MVC应用之二

现在开始最有趣的部分-编码:

首先,我们需要在index.html中增加如下内容:

<!DOCTYPE html>
 <html>
 <head>
 <title>MvcTouch</title>
 
 <!-- Sencha Touch work -->
 <link rel="stylesheet" type="text/css" href="lib/sencha-touch-1.1.0/sencha-touch.css" />
 < type="text/java" src="lib/sencha-touch-1.1.0/sencha-touch.js"></>
 
 < type="text/java" src="/app/app.js"></>
 
 </head>
 <body></body>
 </html>

这步很简单,我们仅仅增加了Sencha Touch所需的文件(包括js文件和css文件),同时也包括我们自己建立的app.js文件。

接着让我们来写些javascrpt代码:

打开app.js,让我们来添加如下内容。

Ext.regApplication({
    name: 'App',
    launch: ()
    {
        alert("Yay, it's working!");
    }
});

太好了,但这些code能做什么?!好,它们创建了我们应用。

我们通过传递被我们命名的应用的配置对象来调用Ext.regApplication功能(ext是Sencha touch使用的命名空间),并且功能的执行是在所有的东西都被加载完后,应用可以完成它所该完成的职责,这里我们只添加了消息提示框的功能,来验证是否程序加载运行正常。

请注意,应用名称是非常重要的,因为在我们的命名空间上,将要附加我们常用的视图、控制器等,下面就是sencha touch文档中一段节选。

Instantiating a new application automatically creates a global variable using the configured name property and sets up namespaces for views, stores, models and controllers within the app.”

//this code is run internally automatically when creating the app

Ext.ns('MyApp', 'MyApp.views', 'MyApp.stores', 'MyApp.models', 'MyApp.controllers');

 

所以,在我们的后续例子代码中,将要有像App.views.HomeMainView.等类似东西出现。

好,那么为何我们的项目工程名称是App而不是MvcTouch

App更简短并且因为一贯性是名称更有意义,如果我们命名像MvcTouch这样的工程名称,我们就必须也会有MvcTouch.views.HomeMainView等类似的名称,再以后,当我们需要写另外的App,你将不得不像工程名称一样再命名另外的应用实例,如:AnotherApp.views.HomeView.无论如何,如果我们在我们的项目中总是用App命名应用实例,我们将发现实行变得更快;视图将总是以App.views.*,控制器总是以App.controllers.*等面貌出现。

现在,我们用Safari 或Google Chrome打开index.html ,看提示的消息框是否出现。

为什么是Safari 或Google Chrome,而不是Firefox

Sencha touch的作用是建立在移动设备上建立web apps应用,而不是桌面的浏览器。至于Safari 或Google Chrome为何能够处理Sencha Touch app应用的原因,是因为这些浏览器是像其他移动设备上的浏览器一样建立在webkit的引擎基础上。

到此为止,第一部分已经介绍完了,您如果想下载当前阶段工程文件,请点击(here.)下载。

你可能感兴趣的:(Sencha Touch)