本文将介绍如何使用 MyEclipse 来开发Web 项目(包括HTML,JSP,Servlet,Filter和后台Java 类),并进行发布,运行,测试和调试。本章将通过开发一个使用JDBC 进行登录验证的简单例子来给大家展示相关的操作过程。
那么哪些应用算是 Web 应用呢?简单说通过网络浏览器,例如IE,Firefox 等等上网看到的绝大多数网页,都属于Web 应用的范围,所以它的应用是非常的广的。要想做好一个Web 应用,只掌握Java 是远远不够的,您还得深入了解HTML,CSS,JavaScript 甚至AJAX,Flash,ActiveX 等技术。俗话说的好:三分相貌七分妆。用户第一印象看到的只能是看到的网页的样子和友好度,他是完全不懂所谓的.NET,PHP,JSP,ASP 还有什么ROR的,所以提示初学者多花些时间在Web 层的技术上。
创建Web 项目
本节内容将介绍如何创建一个 JSPHelloWorld 的Web 项目。选择菜单File > New >Web Project,可以启动创建Web 项目的向导,如图8.3 所示。
在这个图的 Project Name 中输入JSPHelloWorld,然后选中J2EE Specification Level 下面的Java EE 5.0 单选钮,最后点击Finish 按钮就可以创建Web 项目了。
注意:选择哪个版本的J2EE Specification Level 取决于你使用的服务器,例Tomcat4,Weblogic 9 以下版本请选择J2EE 1.4,而Tomcat 5,JBoss 4,或者GlassFish 这样
的服务器可以选择 Java EE 5.0。Java EE 5.0 可以直接使用 EL 表达式和JSTL。
图 8.3 新建Web Project 对话框
关于输入框的详细意义请参考下表:
选项 | 描述 |
Project name | 项目的名称。必须是有效的 Eclipse Java 项目名。 |
Location | 选中这个复选框来选择新项目的文件将存放到电脑上的其它位置 |
Directory | 项目的默认存放位置是放在 MyEclipse 启动时候工作区目录下的。当然可以选择位于工作区目录外的其它路径。 注意:不能选择位于工作区子目录下的另一子目录,因为Eclipse 禁止这种做法! |
Source folder | Java 源代码目录-将包含Java 包和.java 文件。这些内容会被加入到项目的Java 构造路径中。 |
Web root folder | 这个目录将包含 web 应用的内容,WEB-INF 目录以及对应的子目录。如果这个输入框内容为空,那么项目的根目录("/")将会成为web 根目录。 |
Context root URL | MyEclipse的发布工具会发布新Web项目时候所使用这个路径。默认使用的值是项目的名字。什么是上下文根目录?它是访问发布后的应用时所用的根路径,例如输入myapp后,将用地址http://localhost:8080/myapp 来访问这个项目. 你可以把这个输入框中的内容修改成全是小写字母的内容。 |
J2EE specification | 指定J2EE 规范的版本。需要检查服务器的文档来了解其所支持的版本。 |
Add JSTL 1.0 libraries | 启用此选项来添加 Java Standard Template Library (Java 标准模版库1.0或者1.1 版本)的 JAR 文件到新项目的<web-root>/WEB-INF/lib 目录下。 |
表8.1 新建Web 项目的选项说明
创建HTML 页面
注意:在实际的开发中,一般使用的都是像Frontpage 或者DreamWeaver 这样的工具来创建,可视化的(所见即所得,WYSWYG)的来修改静态网页(HTML)。因为MyEclipse的可视化网页编辑器功能是比较弱的。因此本节内容仅供参考。
启动创建 HTML 页面的对话框有多种方式,这里只介绍两种:1. 选择菜单 File > New> Html(Advanced Template);2. 选中Package Explorer 视图的WebRoot 目录,点击右键选择上下文菜单中的New > Html(Advanced Template)。这时候将会弹出创建HTML页面的对话框,如下图所示:
图 8.4 新建HTML 页面向导
在这个对话框中的 File Name(文件名)框中输入login.html,Template to use:(要使用的模版)右侧的下拉框选中Default HTML template(默认HTML 模版,另一个是带表单的模版)。最后点击Finish 按钮完成向导。稍后MyEclipse 会用HTML 编辑器来打开刚创建的文件,如图8.5 所示。在这里可以在页面设计器中可视化的修改网页内容,也可以点击格式工具栏上的按钮来可视化的修改网页的格式,还可以在源代码面板中直接修改HTML 源码。Properties 视图则显示了当前选中元素的属性,可以快速的对一些关键的属性进行修改。拖动设计器和源码标签之间的隔条可以对两个区域之间的大小进行调节,点击向上按钮可以最大化显示代码区,点击向下按钮则可以最大化显示设计区。点击Preview 标签可以同时在IE 和Mozilla 浏览器中查看页面的显示效果。
点击 Palette(工具箱,确切说应该是叫组件面板)可以选择对应的一些常用的代码片段插入到当前页面中,例如超链接,图片,表单和表单元素等等。HTML-Basic 里面列出常用的基本网页元素,而HTML-Form 下则列出了表单元素。
现在我们把它的内容修改成一个包含登录表单和客户端表单有效性验证的页面,然后点击工具栏上的保存按钮。代码内容请参考清单8.1。
图 8.5 HTML 编辑器
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <title>登录</title>
- <meta http-equiv="content-type" content="text/html; charset=GBK">
- </head>
- <script type="text/javascript">
- // 验证输入不为空的脚本代码
- function checkForm(form) {
- if(form.username.value == "") {
- alert("用户名不能为空!");
- form.username.focus();
- return false;
- }
- if(form.password.value == "") {
- alert("密码不能为空!");
- form.password.focus();
- return false;
- }
- return true;
- }
- </script>
- <body>
- 请登录 <br>
- <form action="login.aspx" method="post" οnsubmit="return
- checkForm(this);">
- 用户名:<input type="text" name="username"><br>
- 密码:<input type="password" name="password"><br>
- <input type="submit" value="登录" name="submit1">
- <input type="reset" value="重置" name="reset1">
- </form>
- </body>
- </html>
清单 8.2 登录页面
至此,创建静态页面的过程就简要介绍完毕了。在此先虚晃一枪,为什么表单的提交页面是login.aspx 呢?难道Java 也支持ASP.NET 嘛?答案请在创建Servlet中找。
创建JSP 页面
本节内容将会讲解创建JSP页面。实际上JSP编辑器许多地方都是和上文介绍的HTML编辑器非常