应用BEA WorkShop JSP Editor开发Web应用-Java频道-中国IT实验室

　　BEA WorkShop JSP Editor是一款优秀的开发工具，支持基于JSP、Servlet和JSTL标签库的Web应用开发。BEA WorkShop JSP Editor提供了非常好的图形化界面协助我们开发Web应用，在开始开发工作之前，我们花些时间来了解一下BEA WorkShop JSP Editor的界面特性。

　　本文中假定您对BEA WorkShop JSP Editor有所了解，已经安装和配置好BEA WorkShop JSP Editor，并且使用BEA WorkShop JSP Editor提供的向导已经创建一个Web工程，如果您还没有达到要求，请参考另外的一篇文章《安装和配置BEA WorkShop JSP Editor》

　　透视图

　　BEA WorkShop JSP Editor开发工具提供了一个独有的Workshop透视图来辅助Web应用的开发，Workshop透视图中组合了BEA WorkShop JSP Editor提供的视图界面。下面这个图片是该透视图的显示全景。

　　如果您的Web应用没有默认使用Workshop透视图打开，你可以单击菜单WindowàShow ViewàOther…，然后在弹出窗口中选择WorkshopàAppXplorer打开Workshop透视图。

　　视图

　　从上面的图片中我们可以看到Workshop透视图中比较独特的视图包括AppXplorer、variables、Tag Libraries、Properties。

1. AppXplorer视图
   
   AppXplorer视图是BEA WorkShop JSP Editor特别提供的视图，用于在Web应用中快速浏览和导航，其中的web节点是当前Web应用中的除用户自定义类和接口外所有其他资源的根节点，包括JSP文件、HTML文件、标签库tld文件等等，web/WEB-INF/src/java是所有用户自定义类和接口的根节点，Referenced Types是Web应用中所有用户自定义Java类的根节点（不显示包信息）。
   
   
   
   
2. Variables视图
   
   Variables是BEA WorkShop JSP Editor特别提供的视图，而不是Eclipse工具中的variables视图，Variables视图用于显示用户打开JSP页面中所声明的Java对象，包括使用声明的对象和在Java Scriptlet中声明的对象。通过单击Java对象对应的节点，还可以查看该对象的属性。
   
   
   
   
   
3. Tag Libraries视图
   
   Tag Libraries也是BEA WorkShop JSP Editor特别提供的视图，用于提供标签的可视化操作界面，Tag Libraries提供了所有JSP默认提供的标签和JSTL中提供的标签，开发者通过单击Tag Libraries中的图标向JSP页面中指定位置增加标签。
   
   
   
   
   
4. Properties视图
   
   BEA WorkShop JSP Editor透视图中的Properties视图继承自Eclipse中的Properties视图，但是提供了更多的功能。当开发者选择的是JSP页面中的元素时，Properties视图包括了Property Sheet和Smart Editor标签。Property Sheet标签中将显示该元素可以设置的所有属性列表，而Smart Editor标签中则只是显示部分常见的属性列表。
   
   
   

　　编辑器

　　为了简化开发，BEA WorkShop JSP Editor中提供了两个非常好的编辑器，一个是Workshop XML Editor和Workshop JSP Editor。

1. Workshop JSP Editor
   
   这个就是我们关注的重点了，它为JSP文件提供了一个可视化的编辑器，提供Design、Source和Design/Source三种编辑模式。他的主要特点包括：
   1. 编辑过程中直接显示资源文件中的内容
   2. 使用各种图标可视化的显示JSP文件中的所有标签
   3. 结合Tag Liberaries视图可以可视化地向JSP Editor中增加标签
   4. 结合Properties视图可以可视化的修改JSP文件中所有标签的属性
      
      
2. Workshop XML Editor
   
   Workshop XML Editor是BEA WorkShop JSP Editor中提供的编辑Web应用中XML文件的编辑器，可以可视化的编辑web.xml和tag lib描述符文件，XML Editor同样提供可视化编辑和源（Source）两种编辑模式。下面这两个图是使用XML Editor编辑器编辑web.xml和JSTL中的c.tld文件时的截屏图。
   
   
   
   
   
   
   
   除此之外，JSP Editor中还提供了很多弹出框来协助我们完成开发、配置工作，尽量减少代码编写。

　　应用JSP Editor开发Web应用

　　下面我们通过一个简单Web应用的开发过程来简单的说明和演示如何使用JSP Editor开发Web应用。为了说明的简单，我们仅仅模拟实现用户注册的过程，提供用户输入注册信息的界面，然后使用另外的一个JSP页面处理用户的输入，处理过程也仅仅是在控制台打印用户输入的信息。

　　创建用户类

　　你可以在AppXplorer视图中工程的根图标或者是工程下的web/WEB-INF/src/java节点单击鼠标右键，选择NewàClass创建类。为了说明的简单，用户类将只有两个属性：name和passowrd，用户类的源代码如下：

/**
 * User.java
 * 2005-11-16/22:15:23 created by King Xiao
 * 
 * @author King Xiao
 * powered By 
 */
package org.vivianj.workshop.jspeditor.examples;

import java.io.Serializable;

/**
 * User 用于表征系统中用户输入的注册信息
 */
public class User implements Serializable {
	static final long serialVersionUID = 1L;

	/* 用户登录名 */
	private String name;

	/* 用户密码 */
	private String password;

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getPassword() {
		return password;
	}

	public void setPassword(String password) {
		this.password = password;
	}

}

　　创建用户操作类

　　创建用户操作类的方式和创建用户类的方式一致。为了说明的简单，用户操作类只提供一个createUser方法，实现的功能是将用户输入的信息输出到控制台上。
/**
* UserDAO.java
* 2005-11-16/22:39:10 created by King Xiao
*
* @author King Xiao
* powered By
*/
package org.vivianj.workshop.jspeditor.examples.dao.impl;

　　import org.vivianj.workshop.jspeditor.examples.User;

　　/**
* UserDAO 用于实现对User类的所有操作
*/
public class UserDAO {
/**
* 创建新的用户
*
* @param user
*/
public void createUser(User user) {
System.out.println("********************");
System.out.println("增加新的用户：");
System.out.println("------用户名：" + user.getName());
System.out.println("------密码：" + user.getPassword());
System.out.println("********************");
}

　　}

register= \ u7528 \ u6237 \ u6ce8 \ u518c
userid= \ u7528 \ u6237 \ u7f16 \ u53f7
username=\u7528 \ u6237 \ u540d
password=\ u5bc6 \u7801
commit=\ u63d0 \ u4ea4
reset=\ u53d6 \ u6d88
ok=\ u6210 \ u529f

　　如何准备资源文件？

　　这里给大家介绍一种简单的准备资源文件的方法。

1. 准备中文内容
   
   在web/WEB-INF/src/java/resources目录下建立文本文件cn.txt，文件的内容如下：
   label=你好！欢迎您了解页面流！
   
   
2. 将资源文件转化为unicode码
   
   打开一个Dos窗口，进入web/WEB-INF/src/java/resources目录下，将%JAVA_HOME%/bin目录加入path环境变量，然后执行native2ascii命令：
   set path=%path%;%JAVA_HOME%bin
   native2ascii –encoding gb2312 cn.txt application.properties
   
   命令执行完后将在global目录下生成一个名为application.properties的文件，文件内的中文都已经变成了unicode表示，上面的那个文件转化后内容应该如下所示：
   label= \ u4f60 \ u597d \ uff01 \ u6b22 \ u8fce \ u60a8 \ u4e86 \ u89e3 \ u9875 \ u9762 \ u6d41 \ uff01

　　完成上面的工作后，我们就开始进入JSP Editor的世界了，下面的这两个步骤充分的显示了JSP Editor的特色。

　　创建JSP文件

　　现在我们开始准备接收用户输入的JSP文件register.jsp和处理用户输入的JSP文件registeraction.jsp。
在AppXplorer视图中web节点上单击鼠标右键，选择New Web Artifact…。

　　我们将看到系统弹出新建对象类型选择界面，选择其中的JSP Page，单击“Next>”按钮。

　　输入文件名register，单击“Finish”按钮完成创建工作。使用同样的方式，我们可以创建registeraction.jsp文件。

　　设计register.jsp

　　register.jsp文件将接收用户输入的信息，页面上包含一个Form标签、两个输入框、一个确认提交的按钮，除此之外，页面上还有很多提示信息，下面将介绍如何使用JSP Editor提供的视图来可视化的完成这些工作。

1. 添加Form
   
   使用Workshop JSP Editor打开register.jsp文件，在Tag Liberaries视图中展开HTML节点，单击图标。
   
   
   
   
   
   
   
   系统弹出Form的属性设置窗口，单击窗口中的，在弹出的文件选择窗口中选择registeraction.jsp。
   
   
   
   单击OK按钮关闭文件选择框，在Form属性设置窗口中选择Method为post，单击OK关闭Form设置窗口。
   
   
   
   
   现在JSP Editor编辑器中的register.jsp文件设计界面看起来是下图这个样子。
   
   

2. 添加显示文本
   
   界面上可显示的文本都保存在资源文件中，JSTL中可以使用fmt:messge标签来显示资源文件中的内容，下面我们就演示如何在JSP Editor中完成这部份开发工作。
   
   将鼠标定位在register.jsp设计图中的虚线框内，然后在Tag Libraries视图中展开JSTL Formatting。
   
   
   
   
   单击图标，在弹出的Message属性设置框中单击，在弹出的资源选择框中选择username。
   
   
   
   
   单击OK按钮关闭资源选择框，单击OK按钮关闭Message属性设置框。
   
   回到JSP页面中，在键盘上敲击“回车”键，随后重复上面的动作，只是在弹出的资源选择框中选择password。
   
   现在JSP Editor编辑器中的register.jsp文件设计界面看起来是下图这个样子。
   
   
   
   
   
3. 添加接收用户输入的文本框
   
   将鼠标定位到“用户名”后面，在Tag Libraries视图中展开HTML标签。
   
   
   
   
   
   单击图标，在弹出的属性设置框name域中输入username。
   
   
   
   
   
   单击OK按钮关闭属性设置框。
   
4. 添加接收用户输入的密码框
   
   将鼠标定位到“密码”后面，在Tag Libraries视图中单击 图标，在弹出的属性设置框name域中输入password。
   
   
   
   单击OK按钮关闭属性设置框。
   
   
5. 添加确认按钮
   
   紧跟上面的步骤，在Tag Libraries视图中单击图标，在弹出的属性设置框type
   域中单击Label域后面的图标，在弹出的绑定选择窗口中单击Resources标签，选择commit。
   
   
   
   
   
   单击OK关闭绑定选择窗口，再单击OK关闭按钮的属性窗口。
   
   现在JSP Editor编辑器中的register.jsp文件设计界面看起来是下图这个样子。
   
   
   

　　设计registeraction.jsp

　　registeraction.jsp中实现的逻辑是接受用户输入，根据用户输入的信息创建User对象，然后调用UserDAO对象的createUser方法完成业务逻辑，下面我们将演示如何使用JSP Editor来可视化的完成这些工作。

1. 创建User对象
   
   使用Workshop JSP Editor打开registeraction.jsp文件，在Tag Libraries视图中展开JSP标签。
   
   
   
   
   
   单击图标，系统将弹出标签的属性设置界面，在id域中输入user（id就是该对象在JSP页面中的变量名），在Class域中输入org.vivianj.workshop.jspeditor.examples.User。
   
   
   
   
   
   单击OK关闭属性设置界面。
   
   
2. 创建UserDAO对象
   
   使用步骤1中同样的方法创建一个UserDAO对象，只是id域中输入userDAO，Class域中输入org.vivianj.workshop.jspeditor.examples.dao.impl.UserDAO。
   
   
3. 为User对象赋值
   首先，我们为User对象的name属性赋值，所赋的值来自于用户的输入。单击Tag Libraries视图中图标，系统弹出标签的属性设置框，在value域中输入<%= request.getParameter("username")%>，单击窗口中的图标，弹出框中将使用树的形式显示当前页面中所有可选对象和他的属性，选择user节点下的name节点。
   
   
   
   
   
   一直单击OK关闭所有窗口。
   采用和上面基本类似的步骤可以完成为User对象的password属性赋值。
   
   
4. 调用相关业务方法
   
   现在我们需要完成对象业务方法的调用，这部份工作必须使用源代码模式修改JSP文件的原代码才能完成。
   
   单击编辑器下部的Source标签进入源代码工作模式，在JSP文件中增加一个语句userDAO.createUser(user);整个JSP文件的内容如下：
   现在我们可以按照《安装和配置BEA WorkShop JSP Editor》中介绍的方法将这个Web应用部署到Tomcat上，然后访问开始测试.

   
   <%@ page language="java" contentType="text/html; charset=gb2312" %>
   
   
   
     
     
   
   
   
   
   
   
   
   <%
   	userDAO.createUser(user);
   %>
   
   
   

　　总结

　　纵观整个Web应用的开发过程，除了Java类的开发和业务方法调用之外，其它如Web页面和页面中的对象处理，我们都使用可视化的方式完成，这种方式降低了Web应用开发的难度，也降低了可能出现的人为错误。

　　本文中使用简单的例子来说明了如何使用BEA WorkShop JSP Editor中提供的视图和其它可视化元素来完成Web应用开发，BEA WorkShop JSP Editor中提供的可视化元素和功能远不止本文中演示的这么多，大家可以参考本文中的使用方式和BEA WorkShop JSP Editor的帮助文档完成更多的开发内容，希望大家能够享受BEA WorkShop JSP Editor为我们带来的方便。

作者简介
	唯J族()创始人，BEA 杭州User Group负责人，自由撰稿人，开源项目BuildFileDesigner　(buildfiledesign.sourceforge.net)和V-Security(v-security.sourceforge.net)创始人。

【责编:yuan】

--------------------next---------------------