使用NetBeans快速开发Web Application (一）

使用NetBeans快速开发Web Application（一）

在Java EE 5里包含了一个新的Web架构，Java Server faces，简称JSF。JSF的核心是在Web开发中引入了类似于Swing/AWT的组件结构，所有我们在浏览器里看到的HTML控件在服务器端都有一个Java对象与其对应。由于Web应用中，客户端（浏览器）和服务器端（应用服务器）分处在不同的运行环境中，客户端的输入值（如：inputText）和事件（如：点击button）不能象Swing/AWT一样直接在内存中传输，只能通过HTML表单的传送来和服务器交互，也就形成了传统的request/reponse模式。JSF从某种意义上可以说是颠覆了这种模式，由于服务器端组件的引入，我们在开发过程中可以忽略服务器和客户端不同运行环境的问题，假装我们的Web程序是运行在同一台机器上，可以象Swing/AWT一样方便地从组件取值并进行事件响应的处理。至于用户界面是如何转化成HTML，HTML又是如何转化为Java组件则由JSF框架来完成，多数情况下我们都不用知道。

NetBeans Visual Web Pack（简称NVWP）是基于JSF技术的一个工具，就象它的名字暗示的一样，你可以用它来进行图像化的Web程序开发，就像以拖拽的形式开发Swing/AWT程序一样，NVWP还对JSF进行了简化，提供了DataProvider方便地把组件和数据联系在一起，还提供了图形化界面以方便地提取数据和定义页面流程。本文将引导你开发一个网络程序，以少量的编程，快速地开发一个功能齐全的网络程序来显示数据库数据。

下载安装NetBeans 5.5和Sun Java Application Server 9（SJAS9）

 1.下载并安装NetBeans5.5，你可选择单独下载NetBeans或者是下载NetBeans和SJAS9的bundle。网址http://www.netbeans.info/downloads/index.php

 2.下载并安装NetBeans Visual Web Pack。网址http://www.netbeans.info/downloads/index.php?rs=11&p=9

 3.若你选择单独下载SJAS9，可到以下网址下载：http://www.sun.com/software/products/appsrvr_pe/index.xml

TravelAgent Web应用程序开发

在这个例子中我们要开发一个公司职员旅行清单的程序，一共有两个页面，第一页可通过一个下拉菜单来选择公司职员，同时显示这个职员所有的旅程，当一个旅程被选中就会切换到第二页显示和这个旅程相关的航班信息和旅馆信息。程序所用的数据都存于数据库，为了开发方便，NetBeans集成了一个JavaDB（Sun版的Apache Derby），NVWP安装时会建立一个travel数据库，我们的例子就使用这个数据库的数据。如果用传统的编程方式，虽然这个程序很简单也会至少花掉一个资深工程师大约半天的时间，但使用NVWP，所有时间加起来不会超过半小时。好！废话少说，开发开始。

 1          启动NetBeans

 2          建立一个新项目: “文件” -> “新建项目”

 2.1 在对话框中选择如图所示，点击”下一步”

 2.2               作如下修改后，点击“完成”

 2.3      NetBeans建立“TravelAgent“项目，并打开Page1.jsp和相关的”组件面板“。在NVWP里Page1.jsp就是Web应用的第一页，NVWP已在web.xml做了相应的改变。同时NVWP建立了三个JSF受管Bean（受管Bean定义详见JSF资料）对应于Request, Session和Application，用于传送相应scope的变量。

 2.4      在屏幕右方的“组件面板“里定义了一系列的JSF组件，在开发时可象Swing组件一样以拖拽的形式放到用户界面里。其中”Standard“目录下定义的是JSF specification里规定的标准组件，”Basic”目录下是NetBeans提供的增强型的组件，我们会用”Basic“目录下的组件来开发这个程序。

 2.5      从“Basic“目录里拖一个”Image“组件放在界面左上端。

 2.6      右点“<Image>“,在弹出窗口选”Set Image“，选择提供的”header.jpg“（本文开头就是啦）

 2.7      调整好图形后，拖入一个“Label“组件，并把Label显示文字改成Employee:

 2.8      接着拖入一个“Drop down list“和一个”Table“组件到界面中

 2.9      右击“Item1“，在弹出菜单中选”Auto-submit on Change“。这一步的目的是用户在下拉菜单中选择另一雇员时自动刷新界面。

 2.10  接下来我们要做的是把界面中的下拉菜单组件和表组件跟数据联系起来。我们的数据来自于NetBeans集成的数据库。

 2.11  切换到“运行环境“。右击连接”Travel“数据库，数据库密码和用户名相同。

 

 2.12  打开数据库表，把”Person”表拖到下拉菜单组件上，把”Trip“拖到表组件上。注意下拉菜单不再显示”Item1“而是显示”abc“，说明它已和数据源连接。表组件也有改变，现在显示的是”Trip“表的内容。

 

 2.13  表组件要显示的是下拉菜单中所选的雇员的旅行清单，所以表组件需要知道下拉菜单中选中的雇员，这个由后面的简单编程完成，同时表组件要根据选中的雇员来提取旅行信息。在前一步我们连接数据源时，NVWP在SessionBean1（也就是Session）放入了一个tripRowSet对象，这个对象用于从数据库中提取数据然后传给表组件，我们需要给它加一点约束条件。NVWP提供了一个图像化的SQL编辑器可帮助我们做这件事。在“Outline“窗口双击”tripRowSet“，打开SQL编辑器。在”PERSONID“一行加入Criteria：”=？“并回车，如图所示。” WHERE TRAVEL.TRIP.PERSONID = ？“应被加到SQL语句中。

 2.14  回到“Page1“的界面，接下来要做的是加入源程序来响应下拉菜单值改变时产生的事件。双击下拉菜单，NetBeans切换到Page1的Java视窗，并把光标停在dropDown1_processValueChanged方法。

 

 2.15  在dropDown1_processValueChange方法里加入以下程序（拷贝以下程序即可）。若你得到出错信息，先不管它，我们还有两个变量没有定义。这段源程序做的事很简单，它先从下拉菜单取得所选雇员的ID，然后把这个ID传给SessionBean1和tripRowSet（参看我们在2.13里定义的约束条件），最后更新一下tripDataProvider。tripDataProvider是给表组件提供数据的，它的更新使表组件显示新的数据。

     public void dropDown1_processValueChange(ValueChangeEvent event) {

        try {

            Integer selectedPersonID = (Integer) dropDown1.getSelected();

            getSessionBean1().setPersonID(selectedPersonID);           

            getSessionBean1().getTripRowSet().setObject(1, selectedPersonID);

            tripDataProvider.refresh();

        } catch (Exception e) {

            error("Cannot switch to person " + personDataProvider.getValue("PERSON.PERSONID"));

            log("Cannot switch to person " + personDataProvider.getValue("PERSON.PERSONID"), e);

        }

    }

 2.16  在源程序里往上翻，找到prerender方法，这个方法会在每次该页面渲染（render）前被调用，用于执行页面渲染前的预处理。

 

 2.17  在prerender方法里敲入以下程序。这段程序首先查看是否有选中的雇员，若没有(第一次访问该页)则从personDataProvider里取出第一个值，并把这个值传给tripRowSet，然后更新tripDataProvider，从而更新表组件的显示。若Session里已有选中的雇员（之前已访问过该页），则确保下拉菜单显示的是该雇员。你会得到出错信息，SessionBean1里还需要定义两个变量。

    public void prerender() {

        if (getSessionBean1().getPersonID() == null ) {

            try {

                personDataProvider.cursorFirst();

                getSessionBean1().getTripRowSet().setObject(1, personDataProvider.getValue("PERSON.PERSONID"));

                tripDataProvider.refresh();

            } catch (Exception e) {

                error("Cannot switch to person " + personDataProvider.getValue("PERSON.PERSONID"));

                log("Cannot switch to person " + personDataProvider.getValue("PERSON.PERSONID"), e);

            }

        } else {

            dropDown1.setSelected(getSessionBean1().getPersonID());

        }

     }

 2.18  这一步我们要在SessionBean1里加入两个变量，2.15和2.17两步里出现的错误就是因为这两个变量还没有定义造成的。我们先加入这两个变量的定义，再在下一步用重构把它们封装起来。加入如下变量定义，注意别敲错了。

Integer tripID；

Integer personID；

 2.19  重构：在源代码编辑器里点右键，选择 “重构” ﾨC> “封装字段”；然后在对话框选择和tripID和personID相关的方法；预览修改后，点击“进行重构”，如下面几幅图所示。NetBeans会自动帮你加入getters和setters方法。

 2.20   到这一步我们几乎已完成一半了，右键“TravelAgent”项目，选择“Run Project”。试着改变下拉菜单，你会看到表单会显示相应雇员的旅行清单。若你没有看到更新，可能是你错过了2.9那一步。接下去我们要对表单做三个修改：

 2.21      表单的抬头直接来自数据库，需要改成有意义的名称，比如：DEPCITY改成 From

 2.22      隐藏一些用户不想看到的列，比如：TRIPID和LASTUPDATED

 2.23      把TRIPID列改成button或者是hyperlink，用户可以点击进入下一页。

 2.24  在“Design”窗口，右键表组件，选择“Table Layout”

 

 2.25  在弹出窗口，移除“PERSONID”,”TRIPTYPEID”和“LASTUPDATED”。

 

 2.26  然后把TRIPID的“Header Text”改成“Trip ID”, 并把“Component Type”改成“Button”

 

 2.27  把“DEPDATE”改成“Departure Date”， “DEPCITY”改成“From”， “DESTCITY”改成“To”， 然后点击“确定”

 

 2.28  表单界面变成如下：

 

 2.29  当用户点击“TripID” button，我们需要把所选的“TripID”设给SessionBean1.tripID变量，以便下一页使用。双击“123”Button，在显示切换到源代码编辑器后，在button1_action方法里加入以下程序：

    public String button1_action() {

        Integer tripID = (Integer) button1.getValue();

        getSessionBean1().setTripID(tripID);

        return null;

    }   

 2.30   到这，第一页的开发完成，运行项目，你已经可以看见一个运行完好的应用程序

 3 现在我们来做第二页，这一页显示的是用户在上一页所选旅行的细节，象旅馆信息和航班信息。右键”TravelAgent”项目，选择“新建” ->“Page…”，NetBeans会生成Page2.jsp并将其打开。

 

 3.1       旅馆信息和航班信息来自数据库中的Hotel和Flight表

 

 3.2      作为练习，请用在步骤2中学到的方法做以下工作

 3.2.1 用拖拽的方式生成下图所示界面，别忘了页面底端有一个Button。

 3.2.2 把表单和相应的数据库连起来， 参看步骤2.12。

 3.2.3 给hotelRowSet和flightRowSet中加入tripID的约束条件，参看步骤2.13

 3.2.4 修改表单的抬头如图所示。参看步骤2.27

 

 3.3      在prerender（）方法里加入以下code，这些code做的事情和步骤2.17里做的相同。

    public void prerender() {

        try {           

            Integer tripID = getSessionBean1().getTripID();

            getSessionBean1().getFlightRowSet().setObject(1, tripID);

            flightDataProvider.refresh();

            getSessionBean1().getHotelRowSet().setObject(1, tripID);

            hotelDataProvider.refresh();

        } catch (DataProviderException ex) {

            ex.printStackTrace();

        } catch (SQLException ex) {

            ex.printStackTrace();

        }        

    }

 3.4      最后要做的就是定义流程，怎么从第一页到第二页，又怎么从第二页回到第一页。NVWP为此提供了一个图像化的界面可以让你很方便定义流程。回到“Design”窗口，然后在空白处点右键，选择“Page Navigation”。

 

 3.5      在跳出的Navigation窗口，Page1中的button拖到Page2即可，同理将page2中的button拖到Page1.

 

 3.6      恭喜，你已完成了一个网络应用程序的开发。运行程序，可看到以下界面：

 

 4  常见问题：

 4.1     问：数据库的数据是直接拖过来的，我怎么才知道用的是什么数据源？

      答：在我们拖数据源的时候，NVWP自动设置了数据源，数据源的定义可在“服务器资源”找到。如图所示：

 4.2      问：在Page1里面，下拉菜单显示的是雇员名称，可值是雇员ID，这是怎么回事？

       答：下拉菜单的显示和值是可以设的。右键Page1里的下拉菜单，选择“Bind To Data”，可得到如下的弹出窗口，这里你可选择下拉菜单的显示和值

 

 4.3      问：下拉菜单的值只能对应数据表格中的一列吗? 如果名字在数据表格中不是一列而被分成姓，名两列怎么办？

答： 这个问题可以解决，但不能通过图像化的方式，要手动修改给下拉菜单提供数据的personRowSet的SQL语句。打开personRowSet。

手动将SQL语句改成如下，然后再通过4.2介绍的方法重新选择显示和值。

SELECT ALL TRAVEL.PERSON.PERSONID,

           TRAVEL.PERSON.NAME||TRAVEL.PERSON.JOBTITLE AS display

FROM TRAVEL.PERSON 

 4.4      问：DataProvider只能连接数据库表吗？

       答：用DataProvider连接Web服务，EJB在NVWP的前身Sun Java Studio Creator里是可以的，目前我还没有在NVWP看到这些功能。待这些功能加入到NVWP后我会另写文章详述。

 

 

本文转自http://developers.sun.com.cn/blog/sunblade/entry/20070522