14.3 可视化开发JSP应用
在Eclipse中一般都是用手写JSP的方式来开发应用。而MyEclipse支持以可视化(图形化方式)进行JSP的开发,其中还支持Struts、JSF等标准控件,大大简化了界面开发,提高了工作效率。本节简要介绍如何利用MyEclipse进行可视化开发JSP应用。
14.3.1 新建Web Project
(1)单击“文件→新建→项目”菜单,弹出如图14.15所示对话框。可以看到其中有MyEclipse项目及其子项目J2EE Projects等。
(2)选择“Web Project”,单击“下一步”按钮继续。弹出如图14.16所示对话框。设定其中的“Project Name”为at1,“Source folder”为src,“Web root folder” 为WebRoot,“Context root URL”为/at1。如果项目中还需要JSTL支持,则选择“Add JSL Libraries to WEB-INF/Lib folder”,并设定JSTL版本为JSTL1.1。

图14.15 新建Web Project 图14.16 设定Web Project 项目
(3)单击“完成”按钮,即可结束新建Web Project。新建的项目结构如图14.17所示。

图14.17 项目组成结构
14.3.2 新建JSP文件
(1)单击“文件→新建→文件”菜单,弹出如图14.18所示对话框。选择子目录WebRoot,输入文件名HelloMyEclipse.jsp。
(2)单击“完成”按钮,生成HelloMyEclipse.jsp文件。HelloMyEclipse.jsp文件的可视化编辑设计器如图14.19所示。

图14.18 新建文件 图14.19 可视化编辑设计器
14.3.3 控件面板简介
可视化编辑设计器支持以拖拽的方式来设计开发JSP。初始时控件面板共有6个。分别是HTML-Basic、HTM-Form、Struts-Form、Sturts-Basic、JSF-Basic和JSF –Form。在各个面板上分别由对应的标签控件组成。如图14.20、图14.21、图14.22所示。

图14.20 控件面板一 图14.21 控件面板二 图14.22 控件面板三
14.3.4 用MyEclipse开发JSP应用简例
(1)接14.3.1节继续开发JSP简单应用。借助可视化编辑设计器以及HTML-Basic、HTML-Form控件面板中的控件开发如图14.23所示JSP页面。

图14.23 Hello,MyEclipse界面
(2)单击窗口“Source”选项卡,可以看到HelloMyEclipse.jsp文件自动生成的源代码如下。
代码14-1 文件名:HelloMyEclipse.jsp
<P>
<FONT face="Times New Roman">
<STRONG>Hello,Welcome to MyEclipse World!</STRONG></FONT>
</P>
<FORM name="hello" method="GET"> <P>
<INPUT type="checkbox" name="checkbox1" checked="true">Struts Support</P><P>
<INPUT type="checkbox" value="on">Hibernate Support</P><P>
<INPUT type="checkbox" value="on">Spring Support</P><P>
<INPUT type="checkbox" value="on" checked="checked">AJAX Support</P><P>
</P><P>
<INPUT type="Submit" name="button1">
<INPUT type="Reset" name="button2" />
</P><P>
</P><P>
</P></FORM>
</P><P> </P><P>
<STRONG><FONT color="#ff0000"></FONT></STRONG>
</P><P><STRONG><FONT color="#ff0000"></FONT></STRONG> </P><P></P>
(3)单击窗口“Design/Source”选项卡,同时显示出JSP页面和JSP源代码。如图14.24所示。
(4)单击窗口“Preview”选项卡,可以直接预览到JSP页面运行结果,而不需要打开浏览器查看。结果如图14.25所示。

图14.24 Hello,MyEclipse页面和源代码

图14.25 Hello,MyEclipse预览结果
14.3.5 用MyEclipse开发的Struts应用简例
本小节将演示如何MyEclipse开发一个简单的Struts应用。
(1)单击“文件→新建→其他”菜单,弹出如图14.26所示对话框。选择MyEclipse项目下子项目Web,再选择子项目JSP。
(2)单击“下一步”按钮,弹出如图14.27所示对话框。“File Name”设为MyJsp.jsp,选择“Template to use”为Standard JSP using Struts1.1。

图14.26 新建JSP项目 图14.27 JSP模板选择
(3)单击“完成”按钮。可视化编辑设计器自动生成以下源代码。
代码14-2 文件名:MyJsp.jsp
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-bean" prefix="bean" %>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-html" prefix="html" %>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-logic" prefix="logic" %>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-tiles" prefix="tiles" %>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-template" prefix="template" %>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-nested" prefix="nested" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html:html locale="true">
<head>
<html:base />
<title>MyJsp.jsp</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">
</head>
<body>
This a struts page. <br>
</body>
</html:html>
(4)借助可视化编辑设计器以及Struts-Basic、Struts-Form控件面板中的控件开发如图14.28所示JSP页面。

图14.28 MyJsp.jsp页面设计
(5)单击窗口“Source”选项卡,可以看到MyJsp.jsp文件自动增加的源代码如下。
代码14-3 文件名:MyJsp.jsp
<html:form action="test.jsp" method="POST">
<P> </P>
<P></P>
<P> Hello,MyEclipse Struts Test!</P>
<P>
<html:text property="test2"/></P>
<P>
<html:submit property="m1" /></P>
<P> </P>
</html:form>
(6)单击窗口“Preview”选项卡,可以直接预览到基于Stuts开发的JSP页面运行结果,而不需要打开浏览器查看。结果如图14.29所示。

图14.29 MyJsp.jsp预览结果







