Struts2之如何使用简单的UI标签

来源：互联网发布：mac mini更换固态硬盘编辑：程序博客网时间：2024/05/29 08:57

转载请注明：http://blog.csdn.net/uniquewonderq

问题：联系使用简单的UI标签生成框体，并给框体赋默认值，标签包含;

1.表单标签

2.提交按钮

3.文本框

4.密码框

5.文本域

6.布尔框

方案：

UI标签最核心的功能是用于回显数据，因此往往被使用在修改功能中。为了贴合实际业务，我们模拟修改客户的场景，在修改客户的页面上使用上述标签来回显查询出的客户数据。

由于本方法侧重点在UI标签的使用，因此是模拟客户的场景，建华打开修改页面的代码即可，我们在这里，不需要设计数据库以及查询数据库，仅仅是模拟一份数据即可。

为了保证能够在模拟的场景中使用到每一个UI标签，因此客户实体类中要包含每一类的数据，这样的模拟并不符合真是的业务，而仅仅是为了练习标签做的假设。

步骤一：

先创建项目strutsDay04,然后导入struts2核心包，接下来在web.xml中配置前端控制器，最后在src下创建struts.xml。

步骤二：

模拟出客户修改的功能，先建包entity,在包下创建客户实体类Customer，代码如下：

package entity;import java.util.List;public class Customer {private String name;//姓名private String password;//密码private String desc;//简介private boolean marry;//是否已婚private String sex;//性别private List<String> travelCities;//去过的城市private String home;//家乡public String getPassword() {return password;}public void setPassword(String password) {this.password = password;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getDesc() {return desc;}public void setDesc(String desc) {this.desc = desc;}public boolean isMarry() {return marry;}public void setMarry(boolean marry) {this.marry = marry;}public String getSex() {return sex;}public void setSex(String sex) {this.sex = sex;}public List<String> getTravelCities() {return travelCities;}public void setTravelCities(List<String> travelCities) {this.travelCities = travelCities;}public String getHome() {return home;}public void setHome(String home) {this.home = home;}}

然后创建客户DAO，并模拟根据id查询客户的方法，代码如下：

package DAO;import java.util.ArrayList;import java.util.List;import entity.Customer;public class CustomerDAO {//模拟根据id查询客户public Customer findById(){Customer c=new Customer();//设置一些默认值c.setName("wonder");c.setPassword("123");c.setDesc("长安大学");c.setSex("男");c.setMarry(false);List<String> list=new ArrayList<String>();list.add("beijing");list.add("shanghai");c.setTravelCities(list);c.setHome("xi'an");return c;}}

接下来，创建打开修改页面ACTION类toupdatecustomerAction,在此Action中模拟处理打开修改页面，查询客户的请求，代码如下：

package action;import DAO.CustomerDAO;import entity.Customer;public class ToUpdateCustomerAction {//outputprivate Customer customer;public String execute(){CustomerDAO dao=new CustomerDAO();//模拟客户查询customer=dao.findById();return "success";}public Customer getCustomer() {return customer;}public void setCustomer(Customer customer) {this.customer = customer;}}

接下来，在struts.xml中配置打开修改页面action，代码如下：

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE struts PUBLIC    "-//Apache Software Foundation//DTD Struts Configuration 2.1.7//EN"    "http://struts.apache.org/dtds/struts-2.1.7.dtd">    <struts>    <!--     package:包，用于对action进行封装         -->     <package name="customer" namespace="/customer" extends="struts-default">     <!-- 打开修改页面 -->         <action name="toUpdateCustomer" class="action.ToUpdateCustomer" method="sayHello">     <result name="success">     /WEB-INF/customer/update_customer.jsp         </result>        </action>       </package>     </struts>

最后，在WEB-INF下创建customer文件夹，并在此文件夹下创建修改客户的页面update_customer.jsp,在该页面进行建华处理，先输出一句话。

代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="<%=basePath%>">        <title>updata_customer</title>    <meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">-->  </head>    <body>    <h1>模拟修改客户</h1>  </body></html>

完成上述模拟修改客的代码后，项目结构如下图：

部署项目并启动tomcat，在浏览器中访问修改客户，效果如下图：

步骤三：表单标签

在update_customer.jsp上，使用表单标签生成form表单，代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>  </head>    <body>    <h1>模拟修改客户</h1>        <!-- 1.表单标签 -->    <s:form action="#" method="post">    </s:form>  </body></html>

刷新浏览器，修改页面效果无明显变化。

步骤四：

在update_customer.jsp上，使用文本框标签生成文本框，并在框内显示客户名称，代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>  </head>    <body>    <h1>模拟修改客户</h1>        <%--1.表单标签 --%>    <s:form action="#" method="post">    </s:form>    <!--     2.文本框标签    1>生成文本框    2>根据OGNL(customer.name)取值给文本框赋值     -->     <s:textfield name="customer.name" label="姓名">     </s:textfield>  </body></html>

刷新浏览器，效果如下图：

步骤五：密码框标签

在update_customer.jsp上，使用密码框标签生成密码框，并在框内显示客户密码，代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><%@taglib uri="/struts-tags" prefix="s" %><html>  <head>  </head>    <body>    <h1>模拟修改客户</h1>        <%--1.表单标签 --%>    <s:form action="#" method="post">        <!--     2.文本框标签    1>生成文本框    2>根据OGNL(customer.name)取值给文本框赋值     -->     <s:textfield name="customer.name" label="姓名">     </s:textfield>          <!--     3.密码框标签    1>生成密码框    2>根据OGNL(customer.password)取值给密码框赋值     -->     <s:password name="customer.password" label="密码" showPassword="true"/>    </s:form>   </body></html>

效果：

步骤六：文本域标签

在update_customer.jsp上，使用文本域标签生成文本域，并在框内显示客户简介，代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><%@taglib uri="/struts-tags" prefix="s" %><html>  <head>  </head>    <body>    <h1>模拟修改客户</h1>        <%--1.表单标签 --%>    <s:form action="#" method="post">        <!--     2.文本框标签    1>生成文本框    2>根据OGNL(customer.name)取值给文本框赋值     -->     <s:textfield name="customer.name" label="姓名">     </s:textfield>         <!--     3.密码框标签    1>生成密码框    2>根据OGNL(customer.password)取值给密码框赋值    -->     <s:password name="customer.password" label="密码" showPassword="true"/>          <!--     4.文本域标签    1>生成文本域    2>根据OGNL(customer.desc)取值给文本域赋值     -->     <s:textarea name="customer.desc" label="简介" cols="30" rows="5">     </s:textarea>    </s:form>   </body></html>

刷新浏览器：

步骤七：布尔框标签

使用布尔框生成选择框，并根据客户是否已婚来决定是否勾选该选择框，代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><%@taglib uri="/struts-tags" prefix="s" %><html>  <head>  </head>    <body>    <h1>模拟修改客户</h1>        <%--1.表单标签 --%>    <s:form action="#" method="post">        <!--     2.文本框标签    1>生成文本框    2>根据OGNL(customer.name)取值给文本框赋值     -->     <s:textfield name="customer.name" label="姓名">     </s:textfield>         <!--     3.密码框标签    1>生成密码框    2>根据OGNL(customer.password)取值给密码框赋值    -->     <s:password name="customer.password" label="密码" showPassword="true"/>          <!--     4.文本域标签    1>生成文本域    2>根据OGNL(customer.desc)取值给文本域赋值     -->     <s:textarea name="customer.desc" label="简介" cols="30" rows="5">     </s:textarea>         <!--     5.布尔框标签    1>生成布尔框    2>根据OGNL(customer.marry)取值给布尔框赋值     -->     <s:checkbox name="customer.marry" label="是否已婚" labelposition="left">     </s:checkbox>    </s:form>   </body></html>

刷新：

0 0