现在开始最有趣的部分-编码:
首先,我们需要在index.html中增加如下内容:
MvcTouch < type="text/java" src="lib/sencha-touch-1.1.0/sencha-touch.js"> < type="text/java" src="/app/app.js">
这步很简单,我们仅仅增加了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的引擎基础上。