应用BEA WorkShop JSP Editor开发Web应用

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

   

  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提供的视图界面。下面这个图片是该透视图的显示全景。

应用BEA WorkShop JSP Editor开发Web应用(图一)

  如果您的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应用中的除用户自定义Java类和接口外所有其他资源的根节点,包括JSP文件、HTML文件、标签库tld文件等等,web/WEB-INF/src/java是所有用户自定义Java类和接口的根节点,Referenced Types是Web应用中所有用户自定义Java类的根节点(不显示包信息)。

    应用BEA WorkShop JSP Editor开发Web应用(图二)


  2. Variables视图

    Variables是BEA WorkShop JSP Editor特别提供的视图,而不是Eclipse工具中的variables视图,Variables视图用于显示用户打开JSP页面中所声明的Java对象,包括使用<jsp:useBean>声明的对象和在Java Scriptlet中声明的对象。通过单击Java对象对应的节点,还可以查看该对象的属性。


    应用BEA WorkShop JSP Editor开发Web应用(图三)


  3. Tag Libraries视图

    Tag Libraries也是BEA WorkShop JSP Editor特别提供的视图,用于提供标签的可视化操作界面,Tag Libraries提供了所有JSP默认提供的标签和JSTL中提供的标签,开发者通过单击Tag Libraries中的图标向JSP页面中指定位置增加标签。


    应用BEA WorkShop JSP Editor开发Web应用(图四)


  4. Properties视图

    BEA WorkShop JSP Editor透视图中的Properties视图继承自Eclipse中的Properties视图,但是提供了更多的功能。当开发者选择的是JSP页面中的元素时,Properties视图包括了Property Sheet和Smart Editor标签。Property Sheet标签中将显示该元素可以设置的所有属性列表,而Smart Editor标签中则只是显示部分常见的属性列表。


    应用BEA WorkShop JSP Editor开发Web应用(图五)

  编辑器

  为了简化开发,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文件时的截屏图。


    应用BEA WorkShop JSP Editor开发Web应用(图六)


    应用BEA WorkShop JSP Editor开发Web应用(图七)


    除此之外,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 \ 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…。

应用BEA WorkShop JSP Editor开发Web应用(图八)

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

应用BEA WorkShop JSP Editor开发Web应用(图九)

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

  设计register.jsp

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

  1. 添加Form

    使用Workshop JSP Editor打开register.jsp文件,在Tag Liberaries视图中展开HTML节点,单击应用BEA WorkShop JSP Editor开发Web应用(图十)图标。


    应用BEA WorkShop JSP Editor开发Web应用(图十)



    系统弹出Form的属性设置窗口,单击窗口中的应用BEA WorkShop JSP Editor开发Web应用(图十二),在弹出的文件选择窗口中选择registeraction.jsp。

    应用BEA WorkShop JSP Editor开发Web应用(图十三)


    单击OK按钮关闭文件选择框,在Form属性设置窗口中选择Method为post,单击OK关闭Form设置窗口。


    应用BEA WorkShop JSP Editor开发Web应用(图十四)


    现在JSP Editor编辑器中的register.jsp文件设计界面看起来是下图这个样子。

    应用BEA WorkShop JSP Editor开发Web应用(图十五)

  2. 添加显示文本

    界面上可显示的文本都保存在资源文件中,JSTL中可以使用fmt:messge标签来显示资源文件中的内容,下面我们就演示如何在JSP Editor中完成这部份开发工作。

    将鼠标定位在register.jsp设计图中的虚线框内,然后在Tag Libraries视图中展开JSTL Formatting。


    应用BEA WorkShop JSP Editor开发Web应用(图十六)


    单击应用BEA WorkShop JSP Editor开发Web应用(图十七)图标,在弹出的Message属性设置框中单击应用BEA WorkShop JSP Editor开发Web应用(图十八),在弹出的资源选择框中选择username。


    应用BEA WorkShop JSP Editor开发Web应用(图十九)


    单击OK按钮关闭资源选择框,单击OK按钮关闭Message属性设置框。

    回到JSP页面中,在键盘上敲击“回车”键,随后重复上面的动作,只是在弹出的资源选择框中选择password。

    现在JSP Editor编辑器中的register.jsp文件设计界面看起来是下图这个样子。


    应用BEA WorkShop JSP Editor开发Web应用(图二十)


  3. 添加接收用户输入的文本框

    将鼠标定位到“用户名”后面,在Tag Libraries视图中展开HTML标签。


    应用BEA WorkShop JSP Editor开发Web应用(图二十)



    单击应用BEA WorkShop JSP Editor开发Web应用(图二十二)图标,在弹出的属性设置框name域中输入username。


    应用BEA WorkShop JSP Editor开发Web应用(图二十三)



    单击OK按钮关闭属性设置框。
  4. 添加接收用户输入的密码框

    将鼠标定位到“密码”后面,在Tag Libraries视图中单击 应用BEA WorkShop JSP Editor开发Web应用(图二十四) 图标,在弹出的属性设置框name域中输入password。

    应用BEA WorkShop JSP Editor开发Web应用(图二十五)


    单击OK按钮关闭属性设置框。

  5. 添加确认按钮

    紧跟上面的步骤,在Tag Libraries视图中单击应用BEA WorkShop JSP Editor开发Web应用(图二十六)图标,在弹出的属性设置框type
    域中单击Label域后面的应用BEA WorkShop JSP Editor开发Web应用(图二十七)图标,在弹出的绑定选择窗口中单击Resources标签,选择commit。


    应用BEA WorkShop JSP Editor开发Web应用(图二十八)



    单击OK关闭绑定选择窗口,再单击OK关闭按钮的属性窗口。

    现在JSP Editor编辑器中的register.jsp文件设计界面看起来是下图这个样子。


    应用BEA WorkShop JSP Editor开发Web应用(图二十九)

  设计registeraction.jsp

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

  1. 创建User对象

    使用Workshop JSP Editor打开registeraction.jsp文件,在Tag Libraries视图中展开JSP标签。


    应用BEA WorkShop JSP Editor开发Web应用(图三十)



    单击应用BEA WorkShop JSP Editor开发Web应用(图三十)图标,系统将弹出标签的属性设置界面,在id域中输入user(id就是该对象在JSP页面中的变量名),在Class域中输入org.vivianj.workshop.jspeditor.examples.User。


    应用BEA WorkShop JSP Editor开发Web应用(图三十二)



    单击OK关闭属性设置界面。

  2. 创建UserDAO对象

    使用步骤1中同样的方法创建一个UserDAO对象,只是id域中输入userDAO,Class域中输入org.vivianj.workshop.jspeditor.examples.dao.impl.UserDAO。

  3. 为User对象赋值
    首先,我们为User对象的name属性赋值,所赋的值来自于用户的输入。单击Tag Libraries视图中应用BEA WorkShop JSP Editor开发Web应用(图三十三)图标,系统弹出标签的属性设置框,在value域中输入<%= request.getParameter("username")%>,单击窗口中的应用BEA WorkShop JSP Editor开发Web应用(图三十四)图标,弹出框中将使用树的形式显示当前页面中所有可选对象和他的属性,选择user节点下的name节点。


    应用BEA WorkShop JSP Editor开发Web应用(图三十五)



    一直单击OK关闭所有窗口。
    采用和上面基本类似的步骤可以完成为User对象的password属性赋值。

  4. 调用相关业务方法

    现在我们需要完成对象业务方法的调用,这部份工作必须使用源代码模式修改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为我们带来的方便。

应用BEA WorkShop JSP Editor开发Web应用(图三十六)
  作者简介
  唯J族(www.vivianj.org)创始人,BEA 杭州User Group负责人,自由撰稿人,开源项目BuildFileDesigner (buildfiledesign.sourceforge.net)和V-Security(v-security.sourceforge.net)创始人。

原文转自:http://www.ltesting.net