首页 新闻 论坛 群组 Blog 文档 下载 读书 Tag 网摘 搜索 开源 FAQ 第二书店 博文视点 程序员
频道: 研发 数据库 中间件 信息化 视频 .NET Java 游戏 移动 服务: 人才 外包 培训
    图书品种:235680
       
热门搜索: ASP.NET Ajax Spring Hibernate Java

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"> &nbsp;

<STRONG>Hello,Welcome to MyEclipse World!</STRONG></FONT> &nbsp;&nbsp;&nbsp;

</P>

<FORM name="hello" method="GET">  <P>   &nbsp;&nbsp;

<INPUT type="checkbox" name="checkbox1" checked="true">Struts Support</P><P>        &nbsp;&nbsp;

<INPUT type="checkbox" value="on">Hibernate Support</P><P>     &nbsp; &nbsp;

<INPUT type="checkbox" value="on">Spring Support</P><P>        &nbsp;&nbsp;&nbsp;

<INPUT type="checkbox" value="on" checked="checked">AJAX Support</P><P> &nbsp;

    </P><P>  &nbsp;&nbsp;&nbsp;

<INPUT type="Submit" name="button1"> &nbsp;&nbsp;

<INPUT type="Reset" name="button2" />

    </P><P>     &nbsp;

    </P><P>         &nbsp;

    </P></FORM>

</P><P> &nbsp;</P><P>

<STRONG><FONT color="#ff0000"></FONT></STRONG> &nbsp;

</P><P><STRONG><FONT color="#ff0000"></FONT></STRONG> &nbsp;</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> &nbsp;&nbsp;&nbsp;</P>

    <P></P>

    <P> &nbsp; Hello,MyEclipse Struts Test!</P>

    <P>    &nbsp;

    <html:text property="test2"/></P>

    <P>    &nbsp;

    <html:submit property="m1" /></P>

          <P>    &nbsp;</P>

</html:form>

(6)单击窗口“Preview”选项卡,可以直接预览到基于Stuts开发的JSP页面运行结果,而不需要打开浏览器查看。结果如图14.29所示。

图14.29  MyJsp.jsp预览结果

查看所有评论(0)条】

最近评论



正在载入评论列表...
热点评论