hoyi-web[java] 用户控件的使用

最新推荐文章于 2022-11-17 20:09:14 发布

ellen-shen

最新推荐文章于 2022-11-17 20:09:14 发布

阅读量698

点赞数

本文链接：https://blog.csdn.net/qq_25631813/article/details/50040369

版权

hoyi 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

hoyi web

2 篇文章 0 订阅

订阅专栏

hoyi java web

1 篇文章 0 订阅

订阅专栏

hoyi-web 是专门一个专门针对java web而做的一套web框架，目前在多个App开发，及后台管理的项目上使用。hoyi的基础教程可以在Youku上搜索HOYI教程获得。

今天介绍下hoyi-web的用户控件usercontrol的使用。

<!DOCTYPE html>
<html>
<span style="white-space:pre">	</span><head>
<span style="white-space:pre">		</span><meta charset="UTF-8">
<span style="white-space:pre">		</span><title>Insert title here</title>
<span style="white-space:pre">	</span></head>
<span style="white-space:pre">	</span><body>
<span style="white-space:pre">		</span><div id="left">
<span style="white-space:pre">			</span><hoyip:UserControl Id="repdemo" src="usctrls.demo1ctrls" ></hoyip:UserControl>
<span style="white-space:pre">		</span></div>
<span style="white-space:pre">		</span><div id="right">
<span style="white-space:pre">			</span>
<span style="white-space:pre">		</span></div>
<span style="white-space:pre">		</span>
<span style="white-space:pre">		</span>
<span style="white-space:pre">		</span>
<span style="white-space:pre">	</span></body>
</html>

demo1ctrls.hoyip.html

<p>

 这里是demo1ctrls 的用户控件.
 
 </p>

在多个页面相同的逻辑上可以使用UserControl来做。

UserControl可以使用Js来直接访问后台的方法。

例如：用户控件内些方法TestControl，我们让他加载就访问，看下效果

Demo1.hoyip.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>

		<script src="js/jquery-2.1.3/jquery-2.1.3.js"></script>
		<script src="js/hoyi-req.js"></script>
	</head>
	<body>
		<div id="left">
			<hoyip:UserControl Id="repdemo" src="usctrls.demo1ctrls" ></hoyip:UserControl>
		</div>
		<div id="right">
			
		</div>
		
		
		
	</body>
</html>

demo1.java

package WebRoot;

import org.hoyi.dishop.Hoyipage;
import org.hoyi.wb.comment.RequestMode;
import org.hoyi.wb.comment.RequestType;
import org.hoyi.web.ctrls.UserControl;


@RequestMode(MODE={ RequestType.POST, RequestType.GET})
public class Demo1 extends Hoyipage{
	
	UserControl repdemo = new UserControl("repdemo", pageroot);
	
	

}

demo1ctrls.java

package WebRoot.usctrls;

import org.hoyi.dishop.Hoyipage;
import org.hoyi.wb.comment.RequestMode;
import org.hoyi.wb.comment.RequestType;

@RequestMode(MODE={ RequestType.POST})
public class demo1ctrls extends Hoyipage{

	@RequestMode(MODE={ RequestType.POST})
	public void TestUserControl()
	{
		this.WriteUTF8JSONDATA("AAA");
	}
}

再测试下，将demo1ctrls.hoyip.html 内容置空，把POST请求放到Demo.hoyip.html中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>

		<script src="js/jquery-2.1.3/jquery-2.1.3.js"></script>
		<script src="js/hoyi-req.js"></script>
		

		<script type="text/javascript">
		
			var  pdata ={"behavior":"TestUserControl"};
			
			HOYI_POST(pdata, function(rdata, status){
				alert("msg:" + rdata.msg + ",status:" + rdata.status + ",data:" + rdata.data);
			});
			
		</script>
	</head>
	<body>
		<div id="left">
			<hoyip:UserControl Id="repdemo" src="usctrls.demo1ctrls" ></hoyip:UserControl>
		</div>
		<div id="right">
			啊啊啊阿斯顿发阿三地方啊水电费阿迪斯发的啊  
		</div>
	</body>
</html>

package WebRoot;

import org.hoyi.dishop.Hoyipage;
import org.hoyi.wb.comment.RequestMode;
import org.hoyi.wb.comment.RequestType;
import org.hoyi.web.ctrls.UserControl;


@RequestMode(MODE={ RequestType.POST, RequestType.GET})
public class Demo1 extends Hoyipage{
	
	UserControl repdemo = new UserControl("repdemo", pageroot);
	
	

}

package WebRoot.usctrls;

import org.hoyi.dishop.Hoyipage;
import org.hoyi.wb.comment.RequestMode;
import org.hoyi.wb.comment.RequestType;

@RequestMode(MODE={ RequestType.POST})
public class demo1ctrls extends Hoyipage{

	@RequestMode(MODE={ RequestType.POST})
	public void TestUserControl()
	{
		this.WriteUTF8JSONDATA("AAA");
	}
}

得到的效果跟之前是一样的，

这样有个好处是，方法的集合可以使用UserControl来模块化，界面的也可以使用UserControl来模块化。

Demo下载地址：http://pan.baidu.com/s/1qWpHuxe