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的代码放在这里面。

posGenHTML和asyncPosGenHTML

应用开发里面，通常会有这样的需求：当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初始化流程中调用。

show、hide和remove

如字面意思，显示、隐藏、移除view。分别对应onShow,onHide,onRemove函数，通常只需要在onShow,onHide,onRemove中添加自己的逻辑。
注意：onShow和onHide会被多次调用。
注意：remove会将view从DOM树中移除。

页面实例化

在BIN里面，实例化View有两种方式：

1. 框架自动实例化，在bin.naviController进行页面跳转时
   
2. 通过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文件

.HTML文件创建静态UI

<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创建动态UI，做页面初始化动作

在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);
	}
);

修改Application.run函数

Class.run = function()
{
	Base.prototype.run.call(this);

	console.log("Application.run");
	bin.hudManager.showStatus("Hello BIN Framework");

	bin.naviController.push("login/index");
}