用HTML5構(gòu)建一個(gè)流程圖繪制工具

我們的開(kāi)發(fā)工程中經(jīng)常會(huì)使用到各種圖，所謂的圖就是由節(jié)點(diǎn)和節(jié)點(diǎn)之間的連接所形成的系統(tǒng)，數(shù)學(xué)上專門(mén)有一個(gè)分支叫圖論（Graph Theroy）。利用圖我們可以做很多工具，比如思維導(dǎo)圖，流程圖，狀態(tài)機(jī)，組織架構(gòu)圖，等等。今天我要做的是用開(kāi)源的HTML5工具來(lái)快速構(gòu)造一個(gè)做圖的工具。

工具選擇

工預(yù)善其事，必先利其器。第一件事是選擇一件合適的工具，開(kāi)源時(shí)代，程序員還是很幸福的，選擇很多。

flowchart.js http://adrai.github.io/flowchart.js/ , 基于SVG創(chuàng)建Flow Chart
go.js http://www.gojs.net/latest/index.html go.js 提供一整套的JS工具，支持各種交互式圖表的創(chuàng)建。有免費(fèi)版和收費(fèi)版
joint.js http://www.jointjs.com/ joint.js 是另一個(gè)創(chuàng)建圖標(biāo)庫(kù)的工具，也提供免費(fèi)版和商業(yè)版
jsPlumb http://www.jsplumb.org/ jsPlumb是一套開(kāi)源的流程圖創(chuàng)建工具，小巧精悍，使用簡(jiǎn)單
d3 http://d3js.org 在html5領(lǐng)域，d3可謂是最好的可視化基礎(chǔ)庫(kù)，提供方面的DOM操作，非常強(qiáng)大。

最終，我選擇了jsPlumb，因?yàn)樗耆_(kāi)源，使用很簡(jiǎn)單，用D3的話可能會(huì)多花很多功夫。joint.js也不錯(cuò)。大家可以根據(jù)自己的需要選擇。

構(gòu)建靜態(tài)應(yīng)用

下面我們一步一步的來(lái)使用jsPlumb來(lái)創(chuàng)建我們的流程圖工具。

第一步是等待DOM和jsPlumb初始化完畢，類(lèi)似document.ready()和jquery.ready(), 要使用jsPlumb, 需要把代碼放在這個(gè)函數(shù)里：

jsPlumb.ready(function()?{
????//?...?your?code?goes?here?...
}

創(chuàng)建一個(gè)jsPlumb的實(shí)例，并初始化jsPlumb的配置參數(shù)：

//Initialize?JsPlumb
var?color?=?"#E8C870";
var?instance?=?jsPlumb.getInstance({
????//?notice?the?'curviness'?argument?to?this?Bezier?curve.??the?curves?on?this?page?are?far?smoother
????//?than?the?curves?on?the?first?demo,?which?use?the?default?curviness?value.??????
????Connector?:?[?"Bezier",?{?curviness:50?}?],
????DragOptions?:?{?cursor:?"pointer",?zIndex:2000?},
????PaintStyle?:?{?strokeStyle:color,?lineWidth:2?},
????EndpointStyle?:?{?radius:5,?fillStyle:color?},
????HoverPaintStyle?:?{strokeStyle:"#7073EB"?},
????EndpointHoverStyle?:?{fillStyle:"#7073EB"?},
????Container:"container-id"
?});

這里給給出了一些配置包括，連接線（這里配置了一個(gè)貝塞爾曲線），線的風(fēng)格，連接點(diǎn)得風(fēng)格。Container需要配置一個(gè)對(duì)應(yīng)的DIV容器的id。（這里也可以使用setContainer的方法）

下面我們要?jiǎng)?chuàng)建一個(gè)節(jié)點(diǎn)（node），每一個(gè)節(jié)點(diǎn)可以用一個(gè)DIV來(lái)實(shí)現(xiàn)。我這里提供了一個(gè)函數(shù)來(lái)創(chuàng)建節(jié)點(diǎn)。

function?addNode(parentId,?nodeId,?nodeLable,?position)?{
??var?panel?=?d3.select("#"?+?parentId);
??panel.append('div').style('width','120px').style('height','50px')
????.style('position','absolute')
????.style('top',position.y).style('left',position.x)
????.style('border','2px?#9DFFCA?solid').attr('align','center')
????.attr('id',nodeId).classed('node',true)
????.text(nodeLable);

??return?jsPlumb.getSelector('#'?+?nodeId)[0];
}

這里做的事情就是創(chuàng)建了一個(gè)DIV元素，并放在對(duì)應(yīng)的容器的制定位置上，注意為了支持拖拽的功能，必須使用position:absolute 。

我使用D3來(lái)操作DOM，大家可能會(huì)更習(xí)慣JQuery，這純屬個(gè)人喜好的問(wèn)題。

最后返回創(chuàng)建節(jié)點(diǎn)的實(shí)例引用，這是的selector使用了jsPlumb.getSelector()方法，它和JQuery的selector是一樣的，這樣用的好處是你可以使用不同的DOM操作庫(kù)，例如Vanilla

下面我使用一個(gè)函數(shù)來(lái)創(chuàng)建端點(diǎn)/錨點(diǎn)（anchor），錨點(diǎn)就是節(jié)點(diǎn)上的連接點(diǎn)，用于連接不同的節(jié)點(diǎn)。

function?addPorts(instance,?node,?ports,?type)?{
??//Assume?horizental?layout
??var?number_of_ports?=?ports.length;
??var?i?=?0;
??var?height?=?$(node).height();??//Note,?jquery?does?not?include?border?for?height
??var?y_offset?=?1?/?(?number_of_ports?+?1);
??var?y?=?0;

??for?(?;?i?<?number_of_ports;?i++?)?{
????var?anchor?=?[0,0,0,0];
????var?paintStyle?=?{?radius:5,?fillStyle:'#FF8891'?};
????var?isSource?=?false,?isTarget?=?false;
????if?(?type?===?'output'?)?{
??????anchor[0]?=?1;
??????paintStyle.fillStyle?=?'#D4FFD6';
??????isSource?=?true;
????}?else?{
??????isTarget?=true;
????}

????anchor[1]?=?y?+?y_offset;
????y?=?anchor[1];

????instance.addEndpoint(node,?{
??????uuid:node.getAttribute("id")?+?"-"?+?ports[i],
??????paintStyle:?paintStyle,
??????anchor:anchor,
??????maxConnections:-1,
??????isSource:isSource,
??????isTarget:isTarget
????});
??}
}

instance是jsPlumb的實(shí)例

node是我們用addNode方法創(chuàng)建的Node實(shí)例

ports，是一個(gè)string的數(shù)組，指定端點(diǎn)的個(gè)數(shù)和名字

type，可能是output或者input，指定端點(diǎn)的種類(lèi)，一個(gè)節(jié)點(diǎn)的輸出端口可以連接另一個(gè)節(jié)點(diǎn)的輸入端口。

這里anchor是一個(gè)四維數(shù)組，0維和1維分別是錨點(diǎn)在節(jié)點(diǎn)x軸和y軸的偏移百分比。我這里希望把端口畫(huà)在節(jié)點(diǎn)的左右兩側(cè)，并按照端口的數(shù)量均勻分布。

最后使用instance.addEndpoint來(lái)創(chuàng)建端點(diǎn)。注意這里只要指定isSource和isTarget就可以用drag&drop的方式來(lái)連接端點(diǎn)，非常方便。

下面一步我們提供一個(gè)函數(shù)來(lái)連接端點(diǎn)：

function?connectPorts(instance,?node1,?port1,?node2?,?port2)?{
??//?declare?some?common?values:
??var?color?=?"gray";
??var?arrowCommon?=?{?foldback:0.8,?fillStyle:color,?width:5?},
??//?use?three-arg?spec?to?create?two?different?arrows?with?the?common?values:
??overlays?=?[
????[?"Arrow",?{?location:0.8?},?arrowCommon?],
????[?"Arrow",?{?location:0.2,?direction:-1?},?arrowCommon?]
??];

??var?uuid_source?=?node1.getAttribute("id")?+?"-"?+?port1;
??var?uuid_target?=?node2.getAttribute("id")?+?"-"?+?port2;

??instance.connect({uuids:[uuid_source,?uuid_target]});
}

node1和node2是源節(jié)點(diǎn)和目標(biāo)節(jié)點(diǎn)的引用，port1和port2是源端口和目標(biāo)端口的名字。

使用instance.connect方法來(lái)創(chuàng)建連接。 overlays用來(lái)添加連接線的箭頭效果或者其他風(fēng)格，我這里沒(méi)有使用，因?yàn)橛X(jué)得都不是很好看。大家如果要用，只要把overlays加入到instance.connect的方法參數(shù)就可以了。

調(diào)用以上方法來(lái)創(chuàng)建節(jié)點(diǎn)，端點(diǎn)和連接線。

var?node1?=?addNode('container-id','node1',?'node1',?{x:'80px',y:'20px'});
var?node2?=?addNode('container-id','node2',?'node2',?{x:'280px',y:'20px'});

addPorts(instance,?node1,?['out1','out2'],'output');
addPorts(instance,?node2,?['in','in1','in2'],'input');

connectPorts(instance,?node1,?'out2',?node2,?'in');

這里我們創(chuàng)建了兩個(gè)節(jié)點(diǎn)，第一個(gè)節(jié)點(diǎn)有兩個(gè)輸出端口，第二個(gè)節(jié)點(diǎn)有三個(gè)輸入端口，然后把第一個(gè)節(jié)點(diǎn)的out2端口連接到第二個(gè)端點(diǎn)的in端口。效果如下：

最后我們給節(jié)點(diǎn)增加drag&drop的功能，這樣我們就可以拖動(dòng)這些節(jié)點(diǎn)來(lái)改變圖的布局了。

instance.draggable($('.node'));

這里似乎依賴于JQuery-UI,我還不是很清楚。

交互式創(chuàng)建節(jié)點(diǎn)

我們已經(jīng)初步具有了創(chuàng)建圖的功能，可是節(jié)點(diǎn)的創(chuàng)建必須通過(guò)程序，我們希望用交互的方式來(lái)創(chuàng)建節(jié)點(diǎn)。

通常我們希望有一個(gè)tree view的控件，讓后通過(guò)拖拽來(lái)創(chuàng)建對(duì)應(yīng)類(lèi)型的節(jié)點(diǎn)。這里我使用了這個(gè)開(kāi)源的tree view，基于bootstrap https://github.com/jonmiles/bootstrap-treeview

我們先創(chuàng)建一個(gè)tree view：

function?getTreeData()?{
??var?tree?=?[
????{
??????text:?"Nodes",
??????nodes:?[
????????{
??????????text:?"Node1",
????????},
????????{
??????????text:?"Node2"
????????}
??????]
????}
??];?

??return?tree;
}
//Initialize?Control?Tree?View
$('#control-panel').treeview({data:?getTreeData()});

樹(shù)上有兩個(gè)節(jié)點(diǎn):

然后我實(shí)現(xiàn)從樹(shù)上拖拽對(duì)應(yīng)的節(jié)點(diǎn)，到流程圖上的邏輯。

//Handle?drag?and?drop
$('.list-group-item').attr('draggable','true').on('dragstart',?function(ev){
??//ev.dataTransfer.setData("text",?ev.target.id);
??ev.originalEvent.dataTransfer.setData('text',ev.target.textContent);
??console.log('drag?start');
});

$('#container-id').on('drop',?function(ev){
??//avoid?event?conlict?for?jsPlumb
??if?(ev.target.className.indexOf('_jsPlumb')?>=?0?)?{
????return;
??}

??ev.preventDefault();
??var?mx?=?''?+?ev.originalEvent.offsetX?+?'px';
??var?my?=?''?+?ev.originalEvent.offsetY?+?'px';

??console.log('on?drop?:?'?+?ev.originalEvent.dataTransfer.getData('text'));
??var?uid?=?new?Date().getTime();
??var?node?=?addNode('flow-panel','node'?+?uid,?'node',?{x:mx,y:my});
??addPorts(instance,?node,?['out'],'output');
??addPorts(instance,?node,?['in1','in2'],'input');
??instance.draggable($(node));
}).on('dragover',?function(ev){
??ev.preventDefault();
??console.log('on?drag?over');
});

這里要注意的是要避免和jsPlumb拖拽端點(diǎn)的邏輯沖突，當(dāng)檢測(cè)到target是jsPlumb對(duì)象是需要直接從drop方法中退出以執(zhí)行對(duì)應(yīng)的jsPlumb的drop邏輯。

好了，一個(gè)繪制流程圖的軟件工具初步完工。

我把代碼放在oschina的代碼托管服務(wù)上了，大家有興趣可以去試試。

JSP 可以與 HTML form 標(biāo)簽一起使用，來(lái)允許用戶上傳文件到服務(wù)器。上傳的文件可以是文本文件或圖像文件或任何文檔。

我們使用 Servlet 來(lái)處理文件上傳，使用到的文件有：

upload.jsp : 文件上傳表單。
message.jsp : 上傳成功后跳轉(zhuǎn)頁(yè)面。
UploadServlet.java : 上傳處理 Servlet。
需要引入的 jar 文件：commons-fileupload-1.3.2、commons-io-2.5.jar。

結(jié)構(gòu)圖如下所示：

接下來(lái)我們?cè)敿?xì)介紹。

創(chuàng)建一個(gè)文件上傳表單

下面的 HTML 代碼創(chuàng)建了一個(gè)文件上傳表單。以下幾點(diǎn)需要注意：

表單 method 屬性應(yīng)該設(shè)置為 POST 方法，不能使用 GET 方法。
表單 enctype 屬性應(yīng)該設(shè)置為 multipart/form-data.
表單 action 屬性應(yīng)該設(shè)置為在后端服務(wù)器上處理文件上傳的 Servlet 文件。下面的實(shí)例使用了 UploadServlet Servlet 來(lái)上傳文件。
上傳單個(gè)文件，您應(yīng)該使用單個(gè)帶有屬性 type="file" 的 <input .../> 標(biāo)簽。為了允許多個(gè)文件上傳，請(qǐng)包含多個(gè) name 屬性值不同的 input 標(biāo)簽。輸入標(biāo)簽具有不同的名稱屬性的值。瀏覽器會(huì)為每個(gè) input 標(biāo)簽關(guān)聯(lián)一個(gè)瀏覽按鈕。

upload.jsp 文件代碼如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>文件上傳實(shí)例 - 菜鳥(niǎo)教程</title></head><body><h1>文件上傳實(shí)例 - 菜鳥(niǎo)教程</h1><form method="post" action="/TomcatTest/UploadServlet" enctype="multipart/form-data">

選擇一個(gè)文件:<input type="file" name="uploadFile" />

編寫(xiě)后臺(tái) Servlet

以下是 UploadServlet 的源代碼，同于處理文件上傳，在這之前我們先確保依賴包已經(jīng)引入到項(xiàng)目的 WEB-INF/lib 目錄下：

下面的實(shí)例依賴于 FileUpload，所以一定要確保在您的 classpath 中有最新版本的 commons-fileupload.x.x.jar 文件?？梢詮膆ttp://commons.apache.org/proper/commons-fileupload/ 下載。
FileUpload 依賴于 Commons IO，所以一定要確保在您的 classpath 中有最新版本的 commons-io-x.x.jar 文件。可以從http://commons.apache.org/proper/commons-io/ 下載。

你可以直接下載本站提供的兩個(gè)依賴包：

commons-fileupload-1.3.2.jar
commons-io-2.5.jar

UploadServlet 的源代碼如下所示：

package com.runoob.test;import java.io.File;import java.io.IOException;import java.io.PrintWriter;import java.util.List;

import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItem;import org.apache.commons.fileupload.disk.DiskFileItemFactory;import org.apache.commons.fileupload.servlet.ServletFileUpload;

/**

* Servlet implementation class UploadServlet

*/@WebServlet("/UploadServlet")public class UploadServlet extends HttpServlet {

private static final long serialVersionUID=1L;

// 上傳文件存儲(chǔ)目錄

private static final String UPLOAD_DIRECTORY="upload";

// 上傳配置

private static final int MEMORY_THRESHOLD=1024 * 1024 * 3; // 3MB

private static final int MAX_FILE_SIZE=1024 * 1024 * 40; // 40MB

private static final int MAX_REQUEST_SIZE=1024 * 1024 * 50; // 50MB

/**

* 上傳數(shù)據(jù)及保存文件

protected void doPost(HttpServletRequest request,

HttpServletResponse response) throws ServletException, IOException {

// 檢測(cè)是否為多媒體上傳

if (!ServletFileUpload.isMultipartContent(request)) {

// 如果不是則停止

PrintWriter writer=response.getWriter();

writer.println("Error: 表單必須包含 enctype=multipart/form-data");

writer.flush();

return;

}

// 配置上傳參數(shù)

DiskFileItemFactory factory=new DiskFileItemFactory();

// 設(shè)置內(nèi)存臨界值 - 超過(guò)后將產(chǎn)生臨時(shí)文件并存儲(chǔ)于臨時(shí)目錄中

factory.setSizeThreshold(MEMORY_THRESHOLD);

// 設(shè)置臨時(shí)存儲(chǔ)目錄

factory.setRepository(new File(System.getProperty("java.io.tmpdir")));

ServletFileUpload upload=new ServletFileUpload(factory);

// 設(shè)置最大文件上傳值

upload.setFileSizeMax(MAX_FILE_SIZE);

// 設(shè)置最大請(qǐng)求值 (包含文件和表單數(shù)據(jù))

upload.setSizeMax(MAX_REQUEST_SIZE);

// 構(gòu)造臨時(shí)路徑來(lái)存儲(chǔ)上傳的文件

// 這個(gè)路徑相對(duì)當(dāng)前應(yīng)用的目錄

String uploadPath=getServletContext().getRealPath("./") + File.separator + UPLOAD_DIRECTORY;

// 如果目錄不存在則創(chuàng)建

File uploadDir=new File(uploadPath);

if (!uploadDir.exists()) {

uploadDir.mkdir();

}

try {

// 解析請(qǐng)求的內(nèi)容提取文件數(shù)據(jù)

@SuppressWarnings("unchecked")

List<FileItem> formItems=upload.parseRequest(request);

if (formItems !=null && formItems.size() > 0) {

// 迭代表單數(shù)據(jù)

for (FileItem item : formItems) {

// 處理不在表單中的字段

if (!item.isFormField()) {

String fileName=new File(item.getName()).getName();

String filePath=uploadPath + File.separator + fileName;

File storeFile=new File(filePath);

// 在控制臺(tái)輸出文件的上傳路徑

System.out.println(filePath);

// 保存文件到硬盤(pán)

item.write(storeFile);

request.setAttribute("message",

"文件上傳成功!");

}

} catch (Exception ex) {

request.setAttribute("message",

"錯(cuò)誤信息: " + ex.getMessage());

}

// 跳轉(zhuǎn)到 message.jsp

getServletContext().getRequestDispatcher("/message.jsp").forward(

request, response);

}}

message.jsp 文件代碼如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>文件上傳結(jié)果</title></head><body>

<h2>${message}</h2>

</center></body></html>

編譯和運(yùn)行 Servlet

編譯上面的 Servlet UploadServlet，并在 web.xml 文件中創(chuàng)建所需的條目，如下所示：

<?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xmlns="http://java.sun.com/xml/ns/javaee"

xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"

xsi:schemaLocation="http://java.sun.com/xml/ns/javaee

http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"

id="WebApp_ID" version="2.5">

<display-name>UploadServlet</display-name>

<servlet-name>UploadServlet</servlet-name>

<servlet-class>com.runoob.test.UploadServlet</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>UploadServlet</servlet-name>

<url-pattern>/TomcatTest/UploadServlet</url-pattern>

</servlet-mapping></web-app>

現(xiàn)在嘗試使用您在上面創(chuàng)建的 HTML 表單來(lái)上傳文件。當(dāng)您在瀏覽器中訪問(wèn)：http://localhost:8080/TomcatTest/upload.jsp ，演示如下所示：

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

與JSP指令元素不同的是，JSP動(dòng)作元素在請(qǐng)求處理階段起作用。JSP動(dòng)作元素是用XML語(yǔ)法寫(xiě)成的。

利用JSP動(dòng)作可以動(dòng)態(tài)地插入文件、重用JavaBean組件、把用戶重定向到另外的頁(yè)面、為Java插件生成HTML代碼。

動(dòng)作元素只有一種語(yǔ)法，它符合XML標(biāo)準(zhǔn)：

<jsp:action_name attribute="value" />

動(dòng)作元素基本上都是預(yù)定義的函數(shù)，JSP規(guī)范定義了一系列的標(biāo)準(zhǔn)動(dòng)作，它用JSP作為前綴，可用的標(biāo)準(zhǔn)動(dòng)作元素如下：

語(yǔ)法	描述
jsp:include	在頁(yè)面被請(qǐng)求的時(shí)候引入一個(gè)文件。
jsp:useBean	尋找或者實(shí)例化一個(gè)JavaBean。
jsp:setProperty	設(shè)置JavaBean的屬性。
jsp:getProperty	輸出某個(gè)JavaBean的屬性。
jsp:forward	把請(qǐng)求轉(zhuǎn)到一個(gè)新的頁(yè)面。
jsp:plugin	根據(jù)瀏覽器類(lèi)型為Java插件生成OBJECT或EMBED標(biāo)記。
jsp:element	定義動(dòng)態(tài)XML元素
jsp:attribute	設(shè)置動(dòng)態(tài)定義的XML元素屬性。
jsp:body	設(shè)置動(dòng)態(tài)定義的XML元素內(nèi)容。
jsp:text	在JSP頁(yè)面和文檔中使用寫(xiě)入文本的模板

常見(jiàn)的屬性

所有的動(dòng)作要素都有兩個(gè)屬性：id屬性和scope屬性。

id屬性：
id屬性是動(dòng)作元素的唯一標(biāo)識(shí)，可以在JSP頁(yè)面中引用。動(dòng)作元素創(chuàng)建的id值可以通過(guò)PageContext來(lái)調(diào)用。
scope屬性：
該屬性用于識(shí)別動(dòng)作元素的生命周期。 id屬性和scope屬性有直接關(guān)系，scope屬性定義了相關(guān)聯(lián)id對(duì)象的壽命。 scope屬性有四個(gè)可能的值： (a) page, (b)request, (c)session, 和 (d) application。

<jsp:include>動(dòng)作元素

<jsp:include>動(dòng)作元素用來(lái)包含靜態(tài)和動(dòng)態(tài)的文件。該動(dòng)作把指定文件插入正在生成的頁(yè)面。語(yǔ)法格式如下：

<jsp:include page="相對(duì) URL 地址" flush="true" />

前面已經(jīng)介紹過(guò)include指令，它是在JSP文件被轉(zhuǎn)換成Servlet的時(shí)候引入文件，而這里的jsp:include動(dòng)作不同，插入文件的時(shí)間是在頁(yè)面被請(qǐng)求的時(shí)候。

以下是include動(dòng)作相關(guān)的屬性列表。

屬性	描述
page	包含在頁(yè)面中的相對(duì)URL地址。
flush	布爾屬性，定義在包含資源前是否刷新緩存區(qū)。

實(shí)例

以下我們定義了兩個(gè)文件 date.jsp 和 main.jsp，代碼如下所示：

date.jsp文件代碼：

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<p>

今天的日期是: <%=(new java.util.Date()).toLocaleString()%>

</p>

main.jsp文件代碼：

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<title>菜鳥(niǎo)教程(runoob.com)</title>

</head>

<body>

<h2>include 動(dòng)作實(shí)例</h2>

<jsp:include page="date.jsp" flush="true" />

</body>

</html>

現(xiàn)在將以上兩個(gè)文件放在服務(wù)器的根目錄下，訪問(wèn)main.jsp文件。顯示結(jié)果如下：

include 動(dòng)作實(shí)例

今天的日期是: 2016-6-25 14:08:17

<jsp:useBean>動(dòng)作元素

jsp:useBean 動(dòng)作用來(lái)加載一個(gè)將在JSP頁(yè)面中使用的JavaBean。

這個(gè)功能非常有用，因?yàn)樗沟梦覀兛梢园l(fā)揮 Java 組件復(fù)用的優(yōu)勢(shì)。

jsp:useBean動(dòng)作最簡(jiǎn)單的語(yǔ)法為：

<jsp:useBean id="name" class="package.class" />

在類(lèi)載入后，我們既可以通過(guò) jsp:setProperty 和 jsp:getProperty 動(dòng)作來(lái)修改和檢索bean的屬性。

以下是useBean動(dòng)作相關(guān)的屬性列表。

屬性	描述
class	指定Bean的完整包名。
type	指定將引用該對(duì)象變量的類(lèi)型。
beanName	通過(guò) java.beans.Beans 的 instantiate() 方法指定Bean的名字。

在給出具體實(shí)例前，讓我們先來(lái)看下 jsp:setProperty 和 jsp:getProperty 動(dòng)作元素：

<jsp:setProperty>動(dòng)作元素

jsp:setProperty用來(lái)設(shè)置已經(jīng)實(shí)例化的Bean對(duì)象的屬性，有兩種用法。首先，你可以在jsp:useBean元素的外面（后面）使用jsp:setProperty，如下所示：

<jsp:useBean id="myName" ... />

...

<jsp:setProperty name="myName" property="someProperty" .../>

此時(shí)，不管jsp:useBean是找到了一個(gè)現(xiàn)有的Bean，還是新創(chuàng)建了一個(gè)Bean實(shí)例，jsp:setProperty都會(huì)執(zhí)行。第二種用法是把jsp:setProperty放入jsp:useBean元素的內(nèi)部，如下所示：

<jsp:useBean id="myName" ... >

...

<jsp:setProperty name="myName" property="someProperty" .../>

</jsp:useBean>

此時(shí)，jsp:setProperty只有在新建Bean實(shí)例時(shí)才會(huì)執(zhí)行，如果是使用現(xiàn)有實(shí)例則不執(zhí)行jsp:setProperty。

jsp:setProperty動(dòng)作有下面四個(gè)屬性,如下表：

屬性	描述
name	name屬性是必需的。它表示要設(shè)置屬性的是哪個(gè)Bean。
property	property屬性是必需的。它表示要設(shè)置哪個(gè)屬性。有一個(gè)特殊用法：如果property的值是"*"，表示所有名字和Bean屬性名字匹配的請(qǐng)求參數(shù)都將被傳遞給相應(yīng)的屬性set方法。
value	value 屬性是可選的。該屬性用來(lái)指定Bean屬性的值。字符串?dāng)?shù)據(jù)會(huì)在目標(biāo)類(lèi)中通過(guò)標(biāo)準(zhǔn)的valueOf方法自動(dòng)轉(zhuǎn)換成數(shù)字、boolean、Boolean、 byte、Byte、char、Character。例如，boolean和Boolean類(lèi)型的屬性值（比如"true"）通過(guò) Boolean.valueOf轉(zhuǎn)換，int和Integer類(lèi)型的屬性值（比如"42"）通過(guò)Integer.valueOf轉(zhuǎn)換。　　value和param不能同時(shí)使用，但可以使用其中任意一個(gè)。
param	param 是可選的。它指定用哪個(gè)請(qǐng)求參數(shù)作為Bean屬性的值。如果當(dāng)前請(qǐng)求沒(méi)有參數(shù)，則什么事情也不做，系統(tǒng)不會(huì)把null傳遞給Bean屬性的set方法。因此，你可以讓Bean自己提供默認(rèn)屬性值，只有當(dāng)請(qǐng)求參數(shù)明確指定了新值時(shí)才修改默認(rèn)屬性值。

<jsp:getProperty>動(dòng)作元素

jsp:getProperty動(dòng)作提取指定Bean屬性的值，轉(zhuǎn)換成字符串，然后輸出。語(yǔ)法格式如下：

<jsp:useBean id="myName" ... />

...

<jsp:getProperty name="myName" property="someProperty" .../>

下表是與getProperty相關(guān)聯(lián)的屬性：

屬性	描述
name	要檢索的Bean屬性名稱。Bean必須已定義。
property	表示要提取Bean屬性的值

實(shí)例

以下實(shí)例我們使用了Bean:

package com.runoob.main;

public class TestBean {

private String message="菜鳥(niǎo)教程";

public String getMessage() {

return(message);

}

public void setMessage(String message) {

this.message=message;

}

編譯以上實(shí)例文件 TestBean.java ：

$ javac TestBean.java

編譯完成后會(huì)在當(dāng)前目錄下生成一個(gè) TestBean.class 文件，將該文件拷貝至當(dāng)前 JSP 項(xiàng)目的 WebContent/WEB-INF/classes/com/runoob/main 下( com/runoob/main 包路徑，沒(méi)有需要手動(dòng)創(chuàng)建)。

下面是一個(gè) Eclipse 中目錄結(jié)構(gòu)圖：

下面是一個(gè)很簡(jiǎn)單的例子，它的功能是裝載一個(gè)Bean，然后設(shè)置/讀取它的message屬性。

現(xiàn)在讓我們?cè)趍ain.jsp文件中調(diào)用該Bean:

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<title>菜鳥(niǎo)教程(runoob.com)</title>

</head>

<body>

<h2>Jsp 使用 JavaBean 實(shí)例</h2>

<jsp:useBean id="test" class="com.runoob.main.TestBean" />

<jsp:setProperty name="test"

property="message"

value="菜鳥(niǎo)教程..." />

<jsp:getProperty name="test" property="message" />

</body>

</html>

瀏覽器訪問(wèn)，執(zhí)行以上文件，輸出如下所示：

<jsp:forward> 動(dòng)作元素

jsp:forward動(dòng)作把請(qǐng)求轉(zhuǎn)到另外的頁(yè)面。jsp:forward標(biāo)記只有一個(gè)屬性page。語(yǔ)法格式如下所示：

<jsp:forward page="相對(duì) URL 地址" />

以下是forward相關(guān)聯(lián)的屬性：

屬性	描述
page	page屬性包含的是一個(gè)相對(duì)URL。page的值既可以直接給出，也可以在請(qǐng)求的時(shí)候動(dòng)態(tài)計(jì)算，可以是一個(gè)JSP頁(yè)面或者一個(gè) Java Servlet.

實(shí)例

以下實(shí)例我們使用了兩個(gè)文件，分別是： date.jsp 和 main.jsp。

date.jsp 文件代碼如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<p>

今天的日期是: <%=(new java.util.Date()).toLocaleString()%>

</p>

main.jsp文件代碼：

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<title>菜鳥(niǎo)教程(runoob.com)</title>

</head>

<body>

<h2>forward 動(dòng)作實(shí)例</h2>

<jsp:forward page="date.jsp" />

</body>

</html>

現(xiàn)在將以上兩個(gè)文件放在服務(wù)器的根目錄下，訪問(wèn)main.jsp文件。顯示結(jié)果如下：

今天的日期是: 2016-6-25 14:37:25

<jsp:plugin>動(dòng)作元素

jsp:plugin動(dòng)作用來(lái)根據(jù)瀏覽器的類(lèi)型，插入通過(guò)Java插件運(yùn)行Java Applet所必需的OBJECT或EMBED元素。

如果需要的插件不存在，它會(huì)下載插件，然后執(zhí)行Java組件。 Java組件可以是一個(gè)applet或一個(gè)JavaBean。

plugin動(dòng)作有多個(gè)對(duì)應(yīng)HTML元素的屬性用于格式化Java 組件。param元素可用于向Applet 或 Bean 傳遞參數(shù)。

以下是使用plugin 動(dòng)作元素的典型實(shí)例:

<jsp:plugin type="applet" codebase="dirname" code="MyApplet.class"

width="60" height="80">

<jsp:param name="fontcolor" value="red" />

<jsp:param name="background" value="black" />

<jsp:fallback>

Unable to initialize Java Plugin

</jsp:fallback>

</jsp:plugin>

如果你有興趣可以嘗試使用applet來(lái)測(cè)試jsp:plugin動(dòng)作元素，<fallback>元素是一個(gè)新元素，在組件出現(xiàn)故障的錯(cuò)誤是發(fā)送給用戶錯(cuò)誤信息。

<jsp:element> 、 <jsp:attribute>、 <jsp:body>動(dòng)作元素

<jsp:element> 、 <jsp:attribute>、 <jsp:body>動(dòng)作元素動(dòng)態(tài)定義XML元素。動(dòng)態(tài)是非常重要的，這就意味著XML元素在編譯時(shí)是動(dòng)態(tài)生成的而非靜態(tài)。

以下實(shí)例動(dòng)態(tài)定義了XML元素：

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<title>菜鳥(niǎo)教程(runoob.com)</title>

</head>

<body>

<jsp:element name="xmlElement">

<jsp:attribute name="xmlElementAttr">

屬性值

</jsp:attribute>

<jsp:body>

XML 元素的主體

</jsp:body>

</jsp:element>

</body>

</html>

瀏覽器訪問(wèn)以下頁(yè)面，輸出結(jié)果如下所示：

<jsp:text>動(dòng)作元素

<jsp:text>動(dòng)作元素允許在JSP頁(yè)面和文檔中使用寫(xiě)入文本的模板，語(yǔ)法格式如下：

<jsp:text>模板數(shù)據(jù)</jsp:text>

以上文本模板不能包含其他元素，只能只能包含文本和EL表達(dá)式（注：EL表達(dá)式將在后續(xù)章節(jié)中介紹）。請(qǐng)注意，在XML文件中，您不能使用表達(dá)式如 ${whatever > 0}，因?yàn)?gt;符號(hào)是非法的。你可以使用 ${whatever gt 0}表達(dá)式或者嵌入在一個(gè)CDATA部分的值。

<jsp:text><![CDATA[<br>]]></jsp:text>

如果你需要在 XHTML 中聲明 DOCTYPE,必須使用到<jsp:text>動(dòng)作元素，實(shí)例如下：

<jsp:text><![CDATA[<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"DTD/xhtml1-strict.dtd">]]>

</jsp:text>

<head><title>jsp:text action</title></head>

<body>

Welcome to JSP Programming

</jsp:text></book></books>

</body>

</html>

你可以對(duì)以上實(shí)例嘗試使用<jsp:text>及不使用該動(dòng)作元素執(zhí)行結(jié)果的區(qū)別。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

上一篇：中高級(jí)前端面試知識(shí)點(diǎn)匯總
下一篇：6.HTML 標(biāo)題、段落和文本格式

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

用HTML5構(gòu)建一個(gè)流程圖繪制工具

工具選擇

構(gòu)建靜態(tài)應(yīng)用

交互式創(chuàng)建節(jié)點(diǎn)

您的項(xiàng)目需求