-
Notifications
You must be signed in to change notification settings - Fork 21
devpage
对于IOS开发,xib用来做界面设计,在ViewController做业务逻辑;对于Android开发,在xml里面做界面,业务逻辑通则在Activity或者Fragment里面;通过这些方式实现界面和业务进行分离。同样,BIN框架所采用的开发模式,也和IOS和Android开发类似。
在Hello World里面,我们写了一个简单的页面,一个页面通常由HTML+JS两个文件完成,.HTML负责界面的设计,.JS负责业务逻辑的开发。.HTML部分包括HMTL结构和CSS效果,.JS部分则是BIN提供的类View,View其实是Controller的角色,类似IOS里的ViewController,Android里的Activity或者Fragment。
- 在HTML部分主要是静态界面,和通常的Web开发是一样的。
- 在JS部分主要是动态界面,有代码来动态生成。在View里面,提供了genHTML函数,重写genHTML,将生成html文档或者element的代码放在这里面。
应用开发里面,通常会有这样的需求:当UI初始化完成过后,需要执行一些动作。IOS里面有viewDidLoaded,Android里面有onCreate,BIN里面对应的则是posGenHTML。posGenHTML会在genHTML执行后调用,所以这个时候view对应的HMTL DOM树已经建立好。
asyncPosGenHTML是posGenHTML的异步版本。在HTML里面,html,element刚被插入到DOM树里面,element的一些属性(比如:width,height,left,top,right,bottom...)并没有计算出来,要等到layout后才有;但是有些时候需要在初始化后就要读取这样的属性,posGenHTML是满足不了的,而asyncPosGenHTML则能很好的解决这个问题。
BIN还提供了preGenHTML函数,在genHTML执行前调用。
注意:preGenHTML,genHTML,posGenHTML,asyncPosGenHTML只调用一次,在View初始化流程中调用。
如字面意思,显示、隐藏、移除view。分别对应onShow,onHide,onRemove函数,通常只需要在onShow,onHide,onRemove中添加自己的逻辑。
注意:onShow和onHide会被多次调用。
注意:remove会将view从DOM树中移除。
在BIN里面,实例化View有两种方式:
- 框架自动实例化,在bin.naviController进行页面跳转时
- 通过new手动实例化
这里主要针对第2种介绍。
在new View(options)的时候options需要传递一个html文档或者element节点,html文档应该有一个根节点。
// 通过HTML文档实例化一个View new View({html:"<div style='height:4rem;width:100%;background-color:green;'>Some other html part</div>"}); // 通过JQuery节点或者DOM节点实例化一个View new View({elem:$("#elementID")});
下面通过一个例子来说明上面的函数接口:
- 在web-app目录下创建pageDemo目录
- 在pageDemo目录创建index.html和index.js文件
<div id="loginView" class="bin-page"> <style> #loginView .LoginView-input-block { margin-top: 40%; width:100%; box-sizing:border-box; } #loginView .LoginView-input-item-block { position: relative; width: 100%; height:2rem; font-size: 0rem; vertical-align: top; } #loginView .LoginView-input-icon { position: relative; display: inline-block; width: 0.8rem; height: 0.8rem; top:0.6rem; left:0.5rem; background-size : 100% 100%; background-repeat: no-repeat; background-color: #26B795; border-radius: 100%; } #loginView .LoginView-input-wrapper { position: absolute; display: inline-block; height:100%; left: 2rem; right: 0rem; top: 0rem; bottom: 0rem; font-size: 0.8rem; line-height: 1rem; } #loginView .LoginView-input { position: absolute; height:100%; width: 100%; padding: 0rem; border: none; font-size: inherit; line-height: inherit; background-color: transparent; } #loginView .LoginView-input-line { position: absolute; bottom: 0rem; height:1px; width: 100%; background-color: #B0AEAD; z-index: 1; } #loginView .LoginView-login-button { margin-top: 2rem; width:100%; height:2rem; font-size: 1rem; line-height: 2rem; text-align: center; background-color: #26B795; color: white; } </style> <div class="bin-page-content"> <div class="LoginView-input-block"> <div class="LoginView-input-item-block"> <div class="LoginView-input-icon"> 用户名 </div><!-- --><div class="LoginView-input-wrapper"> <input id="username" class="LoginView-input" type="text" placeholder="请输入手机号"> </input> </div> <div class="LoginView-input-line"></div> </div> <div class="LoginView-input-item-block"> <div class="LoginView-input-icon"> 密码 </div><!-- --><div class="LoginView-input-wrapper"> <input id="password" class="LoginView-input" type="password" placeholder="请输入密码"> </input> </div> <div class="LoginView-input-line"></div> </div> </div> <div id="login" class="LoginView-login-button">登陆 </div> </div> </div>
在js这边,我们需要对用户名和密码做一个合法性判断
define( ["bin/core/pageView"], function(Base, disUtil) { var Class = {}; Class.events = { "click #login" : "onLogin" } Class.posGenHTML = function() { } Class.asyncPosGenHTML = function() { } Class.onLogin = function() { var username = this.$("#username").val(); var password = this.$("#password").val(); if(!username) { bin.hudManager.showStatus("请输入手机号"); return ; } if(username.length !== 11) { bin.hudManager.showStatus("请输入11位手机号"); return ; } if(!password) { bin.hudManager.showStatus("请输入密码"); return ; } if(password.length < 6) { bin.hudManager.showStatus("请重新输入不少于6位的密码"); return; } bin.hudManager.alertInfo("username ["+username+"]<br/>password ["+password+"]"); } return Base.extend(Class); } );
Class.run = function() { Base.prototype.run.call(this); console.log("Application.run"); bin.hudManager.showStatus("Hello BIN Framework"); bin.naviController.push("login/index"); }