-
Notifications
You must be signed in to change notification settings - Fork 21
helloworld
Yang G edited this page Sep 30, 2015
·
4 revisions
在开始Hello World之前,先来看看web-app的目录结构
web-app
+ bin
config
index.html
bin : 包含了所有的框架代码和第三方库代码
config : 包含了工程的所有配置文件
index.html : web-app的html页面文件,BIN采用的是单页刷新,所以自始至终只有这一个Web页面
- 在web-app目录下创建application目录
- 在application目录下创建application.js文件
// application.js // 定义应用程序类 define( ["bin/core/application"], function(Base) { // 创建类 var Class = {}; // 应用初始化时候调用,应用相关的初始化放在这里 Class.init = function() { Base.prototype.init.call(this); console.log("Application.init"); } // 应用初始化完成后调用 Class.run = function() { Base.prototype.run.call(this); console.log("Application.run"); bin.hudManager.showStatus("Hello BIN Framework"); } // Base.extend表示Class将从Base继承下来 return Base.extend(Class); });
- 更改config下面classConfig.js
Application:"application/application",
- F5刷新浏览器
在Console下分别会输出Application.init和Application.run;页面上会弹出Hello BIN Framework的消息提示
- 在web-app目录下创建main目录
- 在main目录下分别创建index.html和index.js
<!-- index.html --> <div id="mainView" class="bin-page"> <style> </style> <div id="naviBar" class="bin-page-navi-bar" naviLeft="hide:true" naviTitle="text:WELCOME TO BIN" naviRight="hide:true"> </div> <div class="bin-page-content"> Hello World </div> </div>
// index.js define( ["bin/core/naviPageView"], function(Base) { var Class = {}; return Base.extend(Class); } );
- 修改Application.run函数
Class.run = function() { Base.prototype.run.call(this); console.log("Application.run"); bin.hudManager.showStatus("Hello BIN Framework"); bin.naviController.push("main/index"); }
- F5刷新浏览器
运行结果
在使用BIN框架开始应用开发时,需要定义自己的Application类,主要完成应用的初始化和指定第一个页面。除此之外Application提供了对于原生的一些事件,比如应用进程Pause,Resume。Application从Backbone.Events继承下来,因此可以在Applicaiton上注册和监听一些全局事件。
在这个Demo里面,我们涉及到了BIN的配置和View的开发,这些内容会在后面做详细讨论。
JS模块管理和加载,BIN使用的RequireJS库,在Application类中使用define以及后面会遇到的require请查看RequireJS文档