原文:
7.7 图片 标签
7.7.1 <html:img>标签
该标签对应HTML中的<img>元素,用于将图片嵌入到HTML页面中。<html:img>标签的src属性和page属性用来指定引用图片的地址。
使用src属性时,当src属性指定的是一个完整的URL时,如“http://localhost:8080/Log- on/img/logon.jpg”,引用的地址为:src的属性值;否则引用的地址为:协议+主机+端口+src的属性值;如:
<html:img src="/Logon/img/logon.jpg"/>
程序会在“http://localhost:8080/Logon/img/logon.jpg”地址下查找图片。
使用page属性(属性值应以“/”开头)引用的地址为:当前应用程序路径+page属性值。
如(假设当前应用为Logon):
<html:img page="/img/logon.jpg"/>
程序会在“http://localhost:8080/Logon/img/logon.jpg”地址下查找图片。
7.7.2 <html:image>标签
该标签对应HTML中的<input type="image">元素。<html:image>标签嵌入到<html:form>标签后成为表单的元素,并且通过单击该标签生成的图片可以提交表单。
<html:image>标签可通过page和src属性来指定引用图片的地址。这两个属性的用法与<html:img>标签中的page和src属性相同,读者可参看上一节中的讲解。
该标签不同于其他的表单元素标签。因为在提交表单后,<html:image>标签不象其他的表单元素以一对“参数名—值”的形式通过请求来传递参数,它是通过类似于下面的形式来传递参数的。
ImageName.x=100&ImageName.y=100
其中ImageName为<html:image>标签的property的属性值,x与y表示的是鼠标在该图片中单击的位置。所以在与该标签关联的ActionForm Bean中就不能像其他的表单元素那样简单的设置匹配的setXXX()和getXXX()方法。
实例运行结果如图7.15所示。
图中的“图片一”与“图片二”都被嵌套在一个表单中,单击任意图片后,都会提交表单,并且在图片下面会显示被选中图片的名称和鼠标在该图片中单击的位置。
下面为单击“图片二”提交表单后生成的请求。
http://localhost:8080/09/selectimg.do?imgbean_2.x=37&imgbean_2.y=27
实例程序创建过程如下(strutx-config.xml与web.xml文件的配置请参看光盘中的文件)。
(1)创建表单对应的ActionForm Bean:ImageForm。其关键代码如下。
例程7-9:光盘/mr/07/sl/09/src/com/image/actionform/ImageForm.java
package com.image.actionform;
import javax.servlet.http.HttpServletRequest;
import org.apache.struts.action.*;
public class ImageForm extends ActionForm {
private ImageBean imgbean_1=new ImageBean(); //对应<html:image property="imgbean_1">标签
private ImageBean imgbean_2=new ImageBean(); //对应<html:image property="imgbean_2">标签
public void setImgbean_1(ImageBean imgbean_1){
this.imgbean_1=imgbean_1;
}
public ImageBean getImgbean_1(){
return this.imgbean_1;
}
……//省略了imgbean_2属性的setXXX()与getXXX()方法
public String getChecked(){
if(imgbean_1.isChecked()){
return "Yes_1";
}
else if(imgbean_2.isChecked())
return "Yes_2";
else
return "No_All";
}
public void reset(ActionMapping mapping, HttpServletRequest request) {
imgbean_1.reset();
imgbean_2.reset();
}
}
(2)创建嵌套在ImageForm中的JavaBean:ImageBean。其关键代码如下。
例程7-9:光盘/mr/07/sl/09/src/com/image/actionform/ImageBean.java
package com.image.actionform;
public class ImageBean {
private String x;
private String y;
public ImageBean(){}
public void setX(String x){
this.x=x;
}
public String getX(){
return this.x;
}
……//省略了属性y的setY()与getY()方法
public boolean isChecked(){
if(this.x!=null&this.y!=null)
return true;
else
return false;
}
public void reset(){
this.x=null;
this.y=null;
}
}
(3)创建处理用户请求的Action类:ImageAction。其具体代码如下。
例程7-9:光盘/mr/07/sl/09/src/com/image/action/ImageAction.java
package com.image.action;
import javax.servlet.http.*;
import org.apache.struts.action.*;
import com.image.actionform.ImageForm;
public class ImageAction extends Action {
public ActionForward execute(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response){
HttpSession session=request.getSession();
String mess="";
ImageForm imgform=(ImageForm)form;
if(imgform.getChecked().equals("Yes_1")){ //判断用户是否选择了"图片一"
mess+="选中的图片按钮为:<b>图片一</b><br>";
mess+="单击鼠标的位置为:X:"+imgform.getImgbean_1().getX()+
" "+"Y:"+imgform.getImgbean_1().getY();
session.setAttribute("message",mess);
}
else if(imgform.getChecked().equals("Yes_2")){ //判断用户是否选择了“图片二”
mess+="选中的图片按钮为:<b>图片二</b><br>";
mess+="单击鼠标的位置为:X:"+imgform.getImgbean_2().getX()+
" "+"Y:"+imgform.getImgbean_2().getY();
session.setAttribute("message",mess);
}
else{
session.setAttribute("message","您没有选中图片按钮!");
}
return mapping.findForward("success");
}
}
(4)创建index.jsp页面。该页面中包含以下关键代码。
例程7-9:光盘/mr/07/sl/09/index.jsp
<%
String result=(String)session.getAttribute("message");
if(result==null)
result="请单击您要选择的图片!";
%>
<html:form action="selectimg">
<tr>
<td align="center"><html:image property="imgbean_1" page="/img/pic_1.gif"/></td>
<td align="center"><html:image property="imgbean_2" page="/img/pic_2.gif"/></td>
</tr>
<tr>
<td align="center">图片一</td>
<td align="center">图片二</td>
</tr>
<tr><td colspan="2"><%=result%></td></tr>
</html:form>