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。
- appxplorer视图
appxplorer视图是bea workshop jsp editor特别提供的视图,用于在web应用中快速浏览和导航,其中的web节点是当前web应用中的除用户自定义java类和接口外所有其他资源的根节点,包括jsp文件、html文件、标签库tld文件等等,web/web-inf/src/java是所有用户自定义java类和接口的根节点,referenced types是web应用中所有用户自定义java类的根节点(不显示包信息)。
- variables视图
variables是bea workshop jsp editor特别提供的视图,而不是eclipse工具中的variables视图,variables视图用于显示用户打开jsp页面中所声明的java对象,包括使用<jsp:usebean>声明的对象和在java scriptlet中声明的对象。通过单击java对象对应的节点,还可以查看该对象的属性。
- tag libraries视图
tag libraries也是bea workshop jsp editor特别提供的视图,用于提供标签的可视化操作界面,tag libraries提供了所有jsp默认提供的标签和jstl中提供的标签,开发者通过单击tag libraries中的图标向jsp页面中指定位置增加标签。
- 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。
- workshop jsp editor
这个就是我们关注的重点了,它为jsp文件提供了一个可视化的编辑器,提供design、source和design/source三种编辑模式。他的主要特点包括:- 编辑过程中直接显示资源文件中的内容
- 使用各种图标可视化的显示jsp文件中的所有标签
- 结合tag liberaries视图可以可视化地向jsp editor中增加标签
- 结合properties视图可以可视化的修改jsp文件中所有标签的属性
- 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 www.vivianj.org */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 www.vivianj.org
*/
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 / u518cuserid= / u7528 / u6237 / u7f16 / u53f7username=/u7528 / u6237 / u540dpassword=/ u5bc6 /u7801commit=/ u63d0 / u4ea4reset=/ u53d6 / u6d88ok=/ u6210 / u529f
如何准备资源文件?
这里给大家介绍一种简单的准备资源文件的方法。
- 准备中文内容
在web/web-inf/src/java/resources目录下建立文本文件cn.txt,文件的内容如下:
label=你好!欢迎您了解页面流! - 将资源文件转化为unicode码
打开一个dos窗口,进入web/web-inf/src/java/resources目录下,将%java_home%/bin目录加入path环境变量,然后执行native2ascii命令:
set path=%path%;%java_home%bin
native2ascii ?cencoding 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提供的视图来可视化的完成这些工作。
- 添加form
使用workshop jsp editor打开register.jsp文件,在tag liberaries视图中展开html节点,单击
图标。
系统弹出form的属性设置窗口,单击窗口中的
,在弹出的文件选择窗口中选择registeraction.jsp。
单击ok按钮关闭文件选择框,在form属性设置窗口中选择method为post,单击ok关闭form设置窗口。
现在jsp editor编辑器中的register.jsp文件设计界面看起来是下图这个样子。
- 添加显示文本
界面上可显示的文本都保存在资源文件中,jstl中可以使用fmt:messge标签来显示资源文件中的内容,下面我们就演示如何在jsp editor中完成这部份开发工作。
将鼠标定位在register.jsp设计图中的虚线框内,然后在tag libraries视图中展开jstl formatting。
单击
图标,在弹出的message属性设置框中单击
,在弹出的资源选择框中选择username。
单击ok按钮关闭资源选择框,单击ok按钮关闭message属性设置框。
回到jsp页面中,在键盘上敲击“回车”键,随后重复上面的动作,只是在弹出的资源选择框中选择password。
现在jsp editor编辑器中的register.jsp文件设计界面看起来是下图这个样子。
- 添加接收用户输入的文本框
将鼠标定位到“用户名”后面,在tag libraries视图中展开html标签。
单击
图标,在弹出的属性设置框name域中输入username。
单击ok按钮关闭属性设置框。 - 添加接收用户输入的密码框
将鼠标定位到“密码”后面,在tag libraries视图中单击
图标,在弹出的属性设置框name域中输入password。
单击ok按钮关闭属性设置框。 - 添加确认按钮
紧跟上面的步骤,在tag libraries视图中单击
图标,在弹出的属性设置框type
域中单击label域后面的
图标,在弹出的绑定选择窗口中单击resources标签,选择commit。
单击ok关闭绑定选择窗口,再单击ok关闭按钮的属性窗口。
现在jsp editor编辑器中的register.jsp文件设计界面看起来是下图这个样子。
设计registeraction.jsp
registeraction.jsp中实现的逻辑是接受用户输入,根据用户输入的信息创建user对象,然后调用userdao对象的createuser方法完成业务逻辑,下面我们将演示如何使用jsp editor来可视化的完成这些工作。
- 创建user对象
使用workshop jsp editor打开registeraction.jsp文件,在tag libraries视图中展开jsp标签。
单击
图标,系统将弹出标签的属性设置界面,在id域中输入user(id就是该对象在jsp页面中的变量名),在class域中输入org.vivianj.workshop.jspeditor.examples.user。
单击ok关闭属性设置界面。 - 创建userdao对象
使用步骤1中同样的方法创建一个userdao对象,只是id域中输入userdao,class域中输入org.vivianj.workshop.jspeditor.examples.dao.impl.userdao。 - 为user对象赋值
首先,我们为user对象的name属性赋值,所赋的值来自于用户的输入。单击tag libraries视图中
图标,系统弹出标签的属性设置框,在value域中输入<%= request.getparameter("username")%>,单击窗口中的
图标,弹出框中将使用树的形式显示当前页面中所有可选对象和他的属性,选择user节点下的name节点。
一直单击ok关闭所有窗口。
采用和上面基本类似的步骤可以完成为user对象的password属性赋值。 - 调用相关业务方法
现在我们需要完成对象业务方法的调用,这部份工作必须使用源代码模式修改jsp文件的原代码才能完成。
单击编辑器下部的source标签进入源代码工作模式,在jsp文件中增加一个语句userdao.createuser(user);整个jsp文件的内容如下:
现在我们可以按照《安装和配置bea workshop jsp editor》中介绍的方法将这个web应用部署到tomcat上,然后访问http://localhost:8080/nitrox/register.jsp开始测试.<!doctype html public "-//w3c//dtd html 4.01 transitional//en"><%@ page language="java" contenttype="text/html; charset=gb2312" %><html><head> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>untitled document</title></head><body><jsp:usebean id="user" class="org.vivianj.workshop.jspeditor.examples.user"/><jsp:usebean id="userdao" class="org.vivianj.workshop.jspeditor.examples.dao.impl.userdao"/><jsp:setproperty name="user" property="name" value='<%= request.getparameter("username")%>'/><jsp:setproperty name="user" property="password" value='<%= request.getparameter("password")%>'/><% userdao.createuser(user);%></body></html>
总结
纵观整个web应用的开发过程,除了java类的开发和业务方法调用之外,其它如web页面和页面中的对象处理,我们都使用可视化的方式完成,这种方式降低了web应用开发的难度,也降低了可能出现的人为错误。
本文中使用简单的例子来说明了如何使用bea workshop jsp editor中提供的视图和其它可视化元素来完成web应用开发,bea workshop jsp editor中提供的可视化元素和功能远不止本文中演示的这么多,大家可以参考本文中的使用方式和bea workshop jsp editor的帮助文档完成更多的开发内容,希望大家能够享受bea workshop jsp editor为我们带来的方便。

| 作者简介 | |
| 唯j族(www.vivianj.org)创始人,bea 杭州user group负责人,自由撰稿人,开源项目buildfiledesigner (buildfiledesign.sourceforge.net)和v-security(v-security.sourceforge.net)创始人。 | |
闽公网安备 35060202000074号