Struts2的标签之UI标签

1:UI标签分为分为以下几种:
      *Form Tags:表单标签,包含所有可以用在Form表单里面的标签
       *Non-Form UI Tags:非表单标签,主要包含错误展示,组件等。
       *Ajax Tags:用来支持Ajax的标签。
 
2:模板和主题
     *模板(Template)
       就是一些代码,在Struts2中是由FreeMarker来编写的,标签使用这些代码能渲染生成相应的HTML代码
      一个标签需要知道自己显示什么数据,以及最终生成什么样的HTML代码,其中,显示什么数据往往是通过用户指定的OGNL表达式去值栈取,而最终生成什么样的HTML代码,就是由一组FreeMarker的模板来定义,每个标签都会有自己对应的FreeMarker模板,这组模板在Struts2核心jar包的template包中。


     *主题(Theme)
       就是一系列模板的集合。通常情况下,这一系列模板会有相同或者类似的风格,这样能保证功能或者视觉效果的一致性。
       Strut2标签是使用一个模板来生成最终的HTML代码,这也意味着,如果使用不同的模板,那么同一个标签所生成的HTML代码并不一样,也意味着不同的标签所生成的HTML代码的风格也可能不一样。
      每一个主题包含一系列的模板,这些模板就会有相同或者类似的风格,从而解决上面的问题,这也意味着,在Struts2中,可以通过切换主题来切换标签的HTML风格。
 
      *Struts2的内建主题:
          *simple:只生成最基本的HTML元素,没有任何附加功能。
          *xhtml:在simple的基础上提供附加功能,提供布局功能,Label显示名称,以及验证框架和国际化框架的集成。
          *css_html: 在xhtml的基础上,添加对CSS的支持和控制。
         *Ajax:继承自xhtml, 提供Ajax的支持。
       其中,xhtml为默认的主题,但是,xhtml主题有一定的局限性,因为它使用表格进行布局,只支持每一行放一个表单项,这样一来,要是有复杂的页面布局,不好弄了。
 修改默认的主题:
      在struts.xml中,
     在struts.properties中,struts.ui.theme = simple


3:表单标签的通用属性
    *与css相关的属性
        cssClass, cssStyle, cssErrorClass, cssErrorStyle
    *与触发事件相关的属性
      onblur, onchange, onclick, ondbclick, onfocus, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup,
     onselect
    *与悬浮提示相关的属性
     jsTooltipEnabled: 是否允许用javascript来生成悬浮提示
     tooltip:悬浮提示的内容
      tooltipDelay:悬浮提示出现的延迟时间,以ms为单位
     tooltipIcon:悬浮提示使用图标的URL路径
   
    *其他来源于HTML的属性
    accesskey:指定快捷键,如果设置这个属性为x,按Alt+xz组合键就可以快速定位到这个生成的HTML组件
    disabled, id, tabindex, title
    
    *与提示文本相关的属性
     label:用来显示在HTML组件前的文本
     key:同label一样,也是用来显示在HTML组件前的文本,但是其内容取自国际化信息
     labelposition:标签文本显示的位置,可以选择top或者left


    *与模板和主题相关的属性
    template, templateDir, theme
    *是否为必填的属性
    required:指定此生成的HTML组件是否为必填项
   requiredposition:指定此生成的HTML组件是必填项时提示信息显示的位置,可以是left或者right
4:Struts2标签和一般的HTML表单便签的不同
   * 
 


   
     
的action属性不用带应用上下文,如/helloworld, 可以使用namespace属性来指定使用到的命名空间。
 *

 
     
指定默认值的方式不一样


*单选框radio
     常见的属性:
           list:用于生成单选框的集合,必须配置
           listKey: 生成的radio的value属性
           listValue: 生成的radio后面显示的文字
     
   简单示例:

        Action的内容

        

private List userList = new ArrayList();
	
	public List getUserList() {
		return userList;
	}

	public void setUserList(List userList) {
		this.userList = userList;
	}
	
	public String execute() {
		
		User user1 = new User();
		user1.setName("zhangsan");
		user1.setAge(20);
		
		User user2 = new User();
		user2.setName("lisi");
		user2.setAge(22);
		
		userList.add(user2);
		userList.add(user1);
		
		return SUCCESS;
	}
	

页面jsp的内容:

    

  

输出结果:

   


 

*复选框checkboxlist:

   *action的内容

       

private List userList = new ArrayList();
	
	public String[] getCheckbox1() {
		String[] checkbox1 = new String[2];
		checkbox1[0] = "zhangsan";
		checkbox1[1] = "lisi";
		return checkbox1;
	}

	public List getUserList() {
		return userList;
	}

	public void setUserList(List userList) {
		this.userList = userList;
	}
	
	public String execute() {
		
		User user1 = new User();
		user1.setName("zhangsan");
		user1.setAge(20);
		
		User user2 = new User();
		user2.setName("lisi");
		user2.setAge(22);
		
		User user3 = new User();
		user3.setName("wangwu");
		user3.setAge(30);
		
		userList.add(user2);
		userList.add(user1);
		userList.add(user3);
		
		return SUCCESS;
	}

*页面jsp的内容:

   

 

*输出结果:

  

     通过action的getCheckbox1方法为checkbox赋值


*下拉框

属性:list,listKey,listValue

headerKey: 在所有的选项前再添加额外的一个选项作为其标题的value属性

headerValue: 在所有的选项前再添加额外的一个选项作为其标题的显示文字

emptyOption: 是否在标题和真实的选项之间加一个空选项

multiple: 用户是否可以同时选择多项

size:下拉框的高度,即最多可以同时显示多少个选项

简单示例:

action的内容:

private List userList = new ArrayList();
	
	public String[] getSelect1() {
		String[] select1 = new String[2];
		select1[0] = "zhangsan";
		select1[1] = "lisi";
		return select1;
	}

	public List getUserList() {
		return userList;
	}

	public void setUserList(List userList) {
		this.userList = userList;
	}
	
	public String execute() {
		
		User user1 = new User();
		user1.setName("zhangsan");
		user1.setAge(20);
		
		User user2 = new User();
		user2.setName("lisi");
		user2.setAge(22);
		
		User user3 = new User();
		user3.setName("wangwu");
		user3.setAge(30);
		
		userList.add(user2);
		userList.add(user1);
		userList.add(user3);
		
		return SUCCESS;
	}

页面jsp的内容:

 

输出结果:


5:复杂操作标签

*head标签

仅仅把head标签放到页面内,没有任何的参数,它可以自动识别页面需要的Struts2的哪些辅助性文件,并帮助用户自动导入,比如某些Struts2的标签需要使用Struts2提供的某些js文件,那么head标签就可以自动发现并导入这些js文件

*combobox标签

combobox标签用于生成一个文本框和一个下拉框,下拉框出现在文本框的下面,在最终提高的时候只提交文本框的输入值,下拉框用于在其选项改变时,也就是onchange事件被触发时,把自身的被选中项的值赋到文本框上

与文本框有关的属性: maxlength size readonly

与下拉框有关的属性:list, listKey, listValue

简单示例:

private List userList = new ArrayList();
	
	public Integer[] getSelect1() {
		Integer[] select1 = new Integer[1];
		select1[0] = 20;
		return select1;
	}

	public List getUserList() {
		return userList;
	}

	public void setUserList(List userList) {
		this.userList = userList;
	}
	
	public String execute() {
		
		User user1 = new User();
		user1.setName("zhangsan");
		user1.setAge(20);
		
		User user2 = new User();
		user2.setName("lisi");
		user2.setAge(22);
		
		User user3 = new User();
		user3.setName("wangwu");
		user3.setAge(30);
		
		userList.add(user2);
		userList.add(user1);
		userList.add(user3);
		
		return SUCCESS;
	}
	

页面内容:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>





comboboxlist用法



  
  
   
   
   
   


注意要引用标签


输出效果图:



*uploadselect标签

*生成一个可以自由上下移动选项的下拉框。

*allowMoveUp: 是否显示“上移”按钮,默认为显示

allowMovoDown: 是否显示“下移”按钮,默认为显示

allowSelectAll: 是否显示“全选”按钮,默认为显示

moveUpLabel: 上移按钮显示的文本

moveDownLabel: 下移按钮显示的文本

selectAllLabel: 全选按钮显示的文本


简单示例:

action的内容:

private List userList = new ArrayList();
	
	public Integer[] getSelect1() {
		Integer[] select1 = new Integer[1];
		select1[0] = 20;
		return select1;
	}

	public List getUserList() {
		return userList;
	}

	public void setUserList(List userList) {
		this.userList = userList;
	}
	
	public String execute() {
		
		User user1 = new User();
		user1.setName("zhangsan");
		user1.setAge(20);
		
		User user2 = new User();
		user2.setName("lisi");
		user2.setAge(22);
		
		User user3 = new User();
		user3.setName("wangwu");
		user3.setAge(30);
		
		userList.add(user2);
		userList.add(user1);
		userList.add(user3);
		
		return SUCCESS;
	}

页面jsp的内容:





updownselect用法



    
   
   


输出效果如下图:


*optiontransferselect标签

它用来生成两个下拉框,这两个下拉框左右放置,有按钮可以控制将选项在两个下拉框之间转移,在每个下拉框还有按钮可以像updownselect标签那样控制选项上下移动


主要属性可以分为四组:

*控制左下拉框名字以及数据来源

*name, list, listKey, listValue, headerKey, headerValue

*控制右下拉框名字以及数据源

*doubleName, doubleList, doubleListKey, doubleListValue, doubleHeaderKey, doubleHeaderValue

*控制两个下拉框之间的左右移动按钮

*allowAddAllToLeft, allowAddToLeft, allowAddToRight, allowAddAllToRight, addAllToLeftLabel, addAllToRightLabel, addToLeftLabel, addToRightLabel

*控制两个下拉框之间的上下移按钮

*allowUpDownOnLeft, allowUpDownOnRight, leftDownLabel, leftUpLabel, rightUpLabel, rightDownLabel, allowSelectAll


简单示例:

  action内容:

 

private List userList = new ArrayList();
	
	public Integer[] getSelect1() {
		Integer[] select1 = new Integer[1];
		select1[0] = 20;
		return select1;
	}

	public List getUserList() {
		return userList;
	}

	public void setUserList(List userList) {
		this.userList = userList;
	}
	
	public String execute() {
		
		User user1 = new User();
		user1.setName("zhangsan");
		user1.setAge(20);
		
		User user2 = new User();
		user2.setName("lisi");
		user2.setAge(22);
		
		User user3 = new User();
		user3.setName("wangwu");
		user3.setAge(30);
		
		userList.add(user2);
		userList.add(user1);
		userList.add(user3);
		
		return SUCCESS;
	}

页面jsp:

 





optiontransferselect用法



    
   
   


输出结果:


  


  

你可能感兴趣的:(Struts2)