用Pollinate可视化开发页面流（JPF）

1 Pollinate下载、安装
1.1 工具下载
1.1.1 Servlet容器—Tomcat5.5.8
　　Eclipse的安装插件后默认的Servlet容器就是Tomcat，所以这里选择了Tomcat5.5.8作为Servlet容器，后面的例子也以Tomcat5.5.8为例来讲解，如果你使用其他的Servlet容器或者Tomcat的其他版本，请按照您的环境进行相应的调整。
　　Tomcat的下载站点： http://jakarta.apache.org/site/binindex.cgi

1.1.2 Eclipse3.1M5a
　　Pollinate要求使用Eclipse3.1M5a版本，这是截止到本文写作时Eclipse的最新稳定版本，下载地址： http://download.eclipse.org/eclipse/downloads/drops/S-3.1M5a-200502191500/index.php。

1.1.3 JDK5.0
　　Pollinate中使用了Sun JDK中的APT（Annotation Processing Tool）工具来处理代码中的批注，所以要求采用JDK5.0 update1或者以上版本。JDK5.0系列的下载地址是： http://java.sun.com/j2se/1.5.0/download.jsp，请选择合适的版本下载。

1.1.4 Pollinate
　　Pollinate插件的最新版本是1.0.0.M3，可以到 http://www.eclipse.org/downloads/download.php?file=/technology/pollinate/org.eclipse.pollinate-1.0.0.M3.zip去下载安装包。

1.1.5 Web Tools和其他插件
　　Pollinate插件是基于Web Tools 1.0 M3和其他插件开发的，所以还需要下载Web Tools和其他插件的安装，在Web Tools1.0M3的下载中提供这些插件的打包下载，所以大家可以到 http://www.eclipse.org/downloads/download.php?file=/webtools/downloads/drops/S-1.0M3-200502260707/wtp-prereqs-sdk-1.0M3.zip直接下载就可以了。

1.2 软件安装
　　软件安装的工作比较简单，不过还是需要注意步骤，否则安装很可能失败：
　　1. 安装JDK
　　2. 解压缩Tomcat，并且让Tomcat可以正常运行
　　3. 解压缩Eclipse
　　4. 解压缩Web Tools和其他插件，并且把他们安装到Eclipse上
　　5. 解压缩Pollinate，把他安装到Eclipse上
2 使用Pollinate开发页面流
　　作者将用一个例子来演示如何使用Pollinate开发页面流，这个例子非常简单，就是一个通常的用户注册页面，用户需要提供三个字段：用户名、密码和常用E_Mail，服务器端获取用户输入的内容，并且用另一个JSP页面显示出来。
　　作者的演示环境和相关的说明都是基于Windows 2000平台的，如果您使用其它的操作系统平台，可能需要相应的变更才能够完成整个开发过程。

2.1 启动Eclipse
　　需要注意一下，因为Pollinate需要用到JDK5.0中的Annotation Processing Tool，所以启动的时候需要增加些参数，下面是正确的步骤：
　　1、进入Eclipse安装目录
　　2、创建一个新的starteclipse.cmd文件，文件的内容如下：
　　请修改JAVA_HOME的值
　　修改为指向您安装JDK50 update 1或者以上版本的文件目录
　　set JAVA_HOME=d:jdk50
　　eclipse.exe -vm % JAVA_HOME %jreinjavaw -vmargs -Xbootclasspath/a:% JAVA_HOME %ib ools.jar
3、现在通过双击starteclipse.cmd启动Eclipse

2.2 创建页面流开发工程
2.2.1 设置工作目录
　　打开Eclipse，首先进入工作目录设置界面，请输入或者选择您期望的工作目录，作者的工作目录设置为c:pollinate。

2.2.2 创建服务器
　　安装Web Tools插件后，我们可以直接在Eclipse中启动、停止Web容器实例，也可以将开发的Web应用直接发布到指定的Web容器中，下面是创建服务器实例的步骤：
　　1. 打开菜单FileàNewàOther，选择ServerServer向导，单击”Next”

　　2. 选择创建Tomcat5.5类型的服务器实例，单击”Next”

　　3. 输入Tomcat的相关配置信息，主要是服务器的安装目录：

　　4. 单击”Finish”完成服务器的创建

2.2.3 创建支持页面流的工程
　　1. 打开菜单FileàNewàOther，选择PollinateBeehive Project，创建一个工程，单击”Next”

　　2. 输入Web工程的名字和发布到Tomcat后的上下文路径名，单击”Next”：

　　3. 选择创建页面流简单环境，单击”Finish”：

2.2.4 设置工程的Java编译器
　　Eclipse默认的Java编译是1.4版本的，Pollinate编译需要用Java的5.0编译器，所以需要修改：
　　1. 在pollinate工程图标上单击右键打开上下文菜单，选择”Properties”

　　2. 修改工程的Java Compile属性如下，单击确定：

2.2.5 将创建的Web工程发布到服务器
　　1. 打开windowàShow ViewàOther，选择显示ServerServers视图，单击”OK”：

　　2. 在视图中选择创建的服务器实例，单击右键打开上下文菜单，选择add and remove project …

　　3. 发布工程或者取消某些工程发布

左边的列表显示目前还没有发布的工程
右边的列表显示已经发布的工程
选中左边列表中的工程，单击“Add >”，表示将这个工程发布到服务器上
选择右边列表中的工程，单击“< Remove”表示将发布到服务器上的工程移出服务器

　　我们这里选择发布pollinate工程，最后单击”Finish” 结束发布。

2.3 开发步骤
　　现在我们打开windowàopen PerspectiveàOther，选择打开J2EE透视图，展开Project浏览器中的Dynamic Web Projects节点，可以看到我们创建的pollinate工程。
2.3.1 用向导创建PageFlow
　　1. 选择pollinate项目下WebContent文件夹，单击右键打开上下文菜单
　　2. 选择FileàNewàOther，选择PollinatePage Flow Wizard，创建一个页面流，单击”Next”

　　3. 修改PageFlow所在的目录名为samples，这时WebContent目录下会增加一个samples目录，目录下面是Controller.java和index.jsp两个文件
现在打开pollinate工程中的WebContentsamples目录下的Controller.java文件，Eclipse将使用Page Flow的专用编辑器打开它，我们单击该编辑器的Flow标签，可以进入可视化的界面，这就是我们真正想要的东西。

2.3.2 增加一个Action
　　我们在Page Flow编辑器左边的工具框单击图标，然后在右边的PageFlow显示区单击鼠标，将给我们的页面流增加一个名为newAction的映射。

2.3.3 增加一个JSP页面
　　增加JSP页面的步骤和2.3.1增加一个Action的步骤基本相同，只是左边工具框中选择的图标便成了。

2.3.4 增加页面导航
　　现在我们将newAction和newPage.jsp联系起来，将newPage.jsp设置为newAction的一个Forward。
　　选择左边工具框中的图标，然后在newAction的图标上单击，然后移动鼠标到newPage.jsp的图标，它们之间将出现一条黑线，在newPage.jsp的图标上单击鼠标，它们之间将出现一条蓝色的连线，还有一个箭头：

2.3.5 准备接受用户输入的JSP
　　在index.jsp的图标上右键打开上下文菜单，单击“open”打开index.jsp文件的编辑器，将index.jsp文件的内容修改为如下：
　<%@ page language="java" contentType="text/html;charset=UTF-8"%>
　<%@ taglib uri="http://beehive.apache.org/netui/tags-databinding-1.0" prefix="netui-data"%>
　<%@ taglib uri="http://beehive.apache.org/netui/tags-html-1.0" prefix="netui"%>
　<%@ taglib uri="http://beehive.apache.org/netui/tags-template-1.0" prefix="netui-template"%>
　<netui:html>
　　<head>
　　<title>Web Application Page</title>
　　<netui:base/>
　　</head>
　<netui:body>

　<netui:form action="newAction ">
　　Name:<netui:textBox dataSource="actionForm.name"/> 
　　Age:<netui:textBox dataSource="actionForm.age"/> 
　　<netui:button type="submit">Submit</netui:button>
　　</netui:form>

</netui:body>
</netui:html>

2.3.6 实现数据处理
　　在newAction的图标上右键打开上下文菜单，单击“open”回到Page Flow编辑器的source视图：
　　1. 在Controller.jpf中增加一个内部类UForm,用于处理表单
static class UForm extends FormData
　{
　　// 用户输入三个字段，FormBean提供三个属性和他们一一对应
　　// 并且分别提供getter，setter方法
　　private String name;
　　private String password;
　　private String email;

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

　　public String getName()
　　　{
　　　return this.name;
　　　}

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

　　public String getPassword()
　　　{
　　　return this.password;
　　　}

　　public void setEmail(String mail)
　　　{
　　　this.email = mail;
　　　}

　　public String getEmail()
　　　{
　　　return this.email;
　　　}
}

2. 修改newAction的签名，使他支持表单接收
　public Forward newAction(UForm form) {
　//在控制台打印用户输入
　System.out.println(“name=” + form.getName());
　System.out.println(“email=” + form.getEmail());
　//将用户输入表单传递给下一个显示页
　　this.getRequest().setAttribute(“form”,form);
　　return new Forward("success");
　　}
　　现在我们如果切换回Page Flow的Flow标签页，看到的效果和2.3.3增加页面导航步骤完成后看到的图型会有些不一样—index.jsp和newAction的图标之间自动产生了连线(为了看得清楚，图中图标的位置经过调整)

　　从上面的这个图中，我们可以很清楚的看到页面流中各成员之间的关系：

begin动作完成后，显示index.jsp文件的内容
index.jsp中的form被newAction处理
newAction处理完了显示newPage.jsp的内容

2.3.7 显示用户输入
修改后的newPage.jsp文件内容如下：
　　<%@ page language="java" contentType="text/html;charset=UTF-8"%>
　　<%@ taglib uri="http://beehive.apache.org/netui/tags-databinding-1.0" prefix="netui-data"%>
　　<%@ taglib uri="http://beehive.apache.org/netui/tags-html-1.0" prefix="netui"%>
　　<%@ taglib uri="http://beehive.apache.org/netui/tags-template-1.0" prefix="netui-template"%>
　　<netui:html>
　　　　<head>
　　　　<title>Web Application Page</title>
　　<netui:base/>
　　　　</head>
　　<netui:body>

　　下面显示用户输入的内容： 
　　name:<netui:span value=""/>
　　password:<netui:span value=""/>
　　email:<netui:span value=""/>
　　
　　</netui:body>
</netui:html>

3 Pollinate1.0的优缺点
　　经过上面的操作过程，我们可以发现目前的Pollinate1.0版本已经实现了可视化开发的部分功能，比如：支持使用向导来创建页面流，支持可视化的显示页面流的构成组件和相互之间的关系，支持动作（Action）到JSP页面之间的导航设置；当然缺点也还有不少，比如JSP页面到动作(Action)之间的导航（也就是Form的action属性设置）还只能通过手工实现等等，相比于Workshop中页面流开发的可视化，Pollinate还任重而道远。

4 总结
　　文章中详细的讲述了如何安装Pollinate插件以及其他支持插件的过程，讲叙了如何在Eclipse中配置服务器使Eclipse支持Web开发和Servlet容器管理的操作步骤，最后通过一个简单的例子演示了如何使用Pollinate开发页面流的过程。

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

用Pollinate可视化开发页面流（JPF）相关推荐

c++可视化开发_页面可视化配置搭建工具技术要点
点击上方"IT平头哥联盟",选择"置顶或者星标" 与你一起成长- 前言最近公司也在计划做可视化配置平台,从本文原作者(腾讯AlloyTeam@陈韩杰)的分析中 ...
可视化开发平台的内容介绍
在办公自动化发展的年代,做好数据管理是提升企业经营管理水平的重要依据.运用可视化开发平台可以提升企业的办公效率,沟通各部门之间的协作,实现数字化发展.那么,可视化开发平台的内容都有哪些?今天我们一起在 ...
国内外无代码可视化开发平台一览
最近这两年,与无代码相关的关键词越来越频繁的出现在一些技术论坛中,越来越多的专业技术人员讨论与无代码相关知识.可视化开发平台逐渐走入人们的关注中心.无代码的可视化开发一定程度上大大方便了业务人员.虽然 ...
低代码可视化开发理念在物联网APP开发中的应用
目录引言 1 相关背景技术 1.1 低代码开发平台发展趋势 1.2 低代码开发平台的研究 2 云编排式APP开发平台 2.1 传统Native Code物联APP开发方式面临的问题 2.2 云编排式 ...
Kibana可视化管理页面详细使用说明
Kibana可视化管理页面详细使用说明使用浏览器访问 ip:5601 默认端口,进入首页 Discover:日志管理视图主要进行搜索和查询 Visualize:统计视图构建可视化的图 ...
实践解析可视化开发平台FlinkSever优势
摘要:华为Flink可视化开发平台FlinkServer作为自研服务,能够提供比原生flinksql接口更强的企业级特性,比如任务的集中管理,可视化开发,多数据源配置等. 本文分享自华为云社区< ...
Echarts数据可视化开发参数配置全解
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 github源码地址:https://github.com/626626cdll ...
PageNow企业级数据可视化开发平台
PageNow作为国内技术团队自主研发的大屏数据可视化开发平台,于2020年3月份正式上线以来,历经六个多月的更新迭代,现已收获大多数国内企业的青睐并将其作为大屏数据可视化项目开发的首选产品. 大屏数 ...
python数据可视化开发(2)：pandas读取Excel的数据格式处理（数据读取、指定列数据、DataFrame转json、数学运算、透视表运算输出）
系列文章目录 python开发低代码数据可视化大屏:pandas.read_excel读取表格 python实现直接读取excle数据实现的百度地图标注 python数据可视化开发(1):Matplo ...

用Pollinate可视化开发页面流（JPF）

用Pollinate可视化开发页面流（JPF）相关推荐

最新文章

热门文章