TW201407384A - 網頁流程圖編輯方法及系統 - Google Patents

Abstract

一種網頁流程圖編輯方法及系統，該系統用於：當接收到用戶終端的瀏覽器發送來的網頁檔案訪問請求時，從伺服器的資料庫中獲取該網頁檔案；生成流程圖編輯介面，將帶有流程圖編輯介面的該網頁檔案發送至該瀏覽器；根據用戶透過瀏覽器對該流程圖編輯介面的操作，在流程圖編輯介面上編輯流程圖，確定元件的基本資訊、元件之間的連接線和連接關係，將該元件的基本資訊、元件之間的連接線和連接關係存入資料庫中。

Description

網頁流程圖編輯方法及系統

本發明涉及網路通信領域，特別涉及一種網頁流程圖編輯方法及系統。

網際網路與資訊科技的迅速發展，改變了人類生活與工作的運作模式。視窗環境應用程式的優勢正逐漸受到網頁環境、行動裝置與嵌入式系統等操作環境的威脅。大型企業開始利用網頁應用程式的平臺來管理工作流程，提升營運效率。一般用戶也使用網頁應用程式來處理文書作業。用戶無須下載、安裝特定程式，只需要進入特定的網頁即可開啟網路應用程式來執行編寫、分享和管理檔案的操作。

目前，以網頁為基礎的應用程式基本上都是以表單、欄位編輯和資料查詢等動態顯示的方式與用戶互動。網頁上顯示的流程圖一般都以圖片的方式呈現，但是用戶以圖片的方式上傳流程圖至伺服器後，當需要修改流程圖時，會因為沒有可編輯的原始檔案、編輯軟體與環境的不同而造成流程圖的變調走樣。因此，用戶無法在網頁上即時編輯流程圖。

鑒於以上內容，有必要提供一種網頁流程圖編輯方法及系統，可以在網頁上即時編輯流程圖，不必將整份流程圖傳送到伺服器上儲存，降低伺服器的負荷。

一種網頁流程圖編輯方法，包括以下步驟：接收步驟：當接收到用戶終端的瀏覽器發送來的網頁檔案訪問請求時，從伺服器的資料庫中獲取該網頁檔案；發送步驟：生成流程圖編輯介面，將帶有流程圖編輯介面的該網頁檔案發送至該瀏覽器；編輯步驟：根據用戶透過瀏覽器對該流程圖編輯介面的操作，在流程圖編輯介面上編輯流程圖，確定元件的基本資訊、元件之間的連接線和連接關係，將該元件的基本資訊、元件之間的連接線和連接關係存入資料庫中。

一種網頁流程圖編輯系統，包括：接收模組，用於當接收到用戶終端的瀏覽器發送來的網頁檔案訪問請求時，從伺服器的資料庫中獲取該網頁檔案；發送模組，用於生成流程圖編輯介面，將帶有流程圖編輯介面的該網頁檔案發送至該瀏覽器；編輯模組，用於根據用戶透過瀏覽器對該流程圖編輯介面的操作，在流程圖編輯介面上編輯流程圖，確定元件的基本資訊、元件之間的連接線和連接關係，將該元件的基本資訊、元件之間的連接線和連接關係存入資料庫中。

相較於習知技術，本發明網頁流程圖編輯方法及系統，可以在網頁上即時編輯流程圖，不必將整份流程圖傳送到伺服器上儲存，降低伺服器的負荷。

參閱圖1所示，係本發明網頁流程圖編輯系統較佳實施方式的運行環境圖。

在本實施方式中，該網頁流程圖編輯系統10運行於伺服器1中，該伺服器1透過網路3與用戶終端2通信連接。伺服器1中還包括儲存有若干網頁檔案的資料庫11。該網頁檔案可以是以HTML（Hypertext Markup Language，超文本標記語言）描述的。該用戶終端2中安裝有瀏覽器20，該瀏覽器20可以向伺服器1提交該網頁檔案的訪問請求。在收到伺服器1發送的網頁檔案後，瀏覽器20還對該網頁檔案進行解析，然後將該網頁檔案顯示在用戶終端2的顯示設備21上，供用戶查看。

所述網頁流程圖編輯系統10用於根據用戶在瀏覽器20上的操作在網頁檔案上編輯流程圖，並將帶有流程圖的該網頁檔案儲存在資料庫11中。當瀏覽器20再次解析該網頁檔案後，將顯示帶有該流程圖的該網頁檔案，用戶還可透過在瀏覽器20上的操作再次編輯該流程圖。

參閱圖2所示，係本發明網頁流程圖編輯系統較佳實施方式的功能模組圖。該網頁流程圖編輯系統10包括接收模組101、發送模組102和編輯模組103。本發明所稱的模組是完成一特定功能的電腦程式段，比程式更適合於描述軟體在伺服器1中的執行過程，因此在本發明以下對軟體描述都以模組描述。

接收模組101用於當接收到用戶終端2透過瀏覽器20發送來的網頁檔案的訪問請求時，從資料庫11獲取該網頁檔案，並根據該網頁檔案的根源程式代碼判斷該網頁檔案中是否包含編輯流程圖的自訂標籤（tag）。

發送模組102用於當該網頁檔案中包含編輯流程圖的自訂標籤時，生成流程圖編輯介面，將帶有該流程圖編輯介面的該網頁檔案發送至瀏覽器20。瀏覽器20對該網頁檔案進行解析後，將該網頁檔案及該流程圖編輯介面顯示在顯示設備21上。

參閱圖3所示，在本實施方式中，該流程圖編輯介面包括作圖區201、標題區202和工具區203。該作圖區201為編輯流程圖的區域。該標題區202用於區分流程圖各個部分在作圖區201的分佈位置，其中，標題區202中的每個標題對應於作圖區201的一個子區域，例如標題區202中的標題“AA”、“BB”等等。該工具區203包括元件工具300、連接線工具400和縮放工具500。

該元件工具300中包括多種類型的元件，例如實線方框元件，虛線方框元件、實線菱形元件等。該元件由若干個DIV元素組成。所述DIV元素是用來為HTML網頁檔案內大塊（block-level）的內容提供結構和背景的元素。用戶可從該元件工具300中選擇一種或多種類型的元件，將所選擇的元件拖至作圖區201的某一位置。此外，用戶還可以設置該元件的名稱和文字內容，並透過拖放該元件的邊框來對該元件進行放大或縮小。

該連接線工具400中包括多種連接線，例如單向箭頭、直連線等。該連接線也由若干個DIV元素組成。用戶可從該連接線工具400中選擇連接線，並將該連接線拖至相應的元件之間，表達元件之間的流程關係（參閱圖4所示）。

該縮放工具500包括放大工具501和縮小工具502，該放大工具501用於增加作圖區201的區域面積，該縮小工具502用於減少作圖區201的區域面積（參閱圖5所示）。

編輯模組103用於根據用戶透過瀏覽器20對該流程圖編輯介面的操作，在流程圖編輯介面上編輯流程圖，包括新增元件、移動元件、縮放元件、刪除元件、新增連接線、刪除連接線等，確定元件的形狀、大小、位置、名稱和文字內容等基本資訊，以及元件之間的連接線和連接關係，並將該元件的基本資訊，以及元件之間的連接線和連接關係存入資料庫11中。

在本實施方式中，編輯模組103可以利用Javascript技術新增或改變HTML網頁檔案裏DIV元素的CSS（Cascading Style Sheet，級聯樣式表）樣式來實現上述流程圖的編輯操作。例如，在該HTML網頁檔案的CSS樣式中，一個元件的DIV元素所在位置的座標為（10，10），當滑鼠在這個DIV元素上觸發了Javascript點選事件，編輯模組103即可知道該DIV元素被選中。當編輯模組103改變該DIV元素在該HTML網頁檔案的CSS樣式中的座標時，即表現為該DIV元素在流程圖編輯介面上被移動。

每當用戶在流程圖編輯介面中新增一個元件時，編輯模組103將為該新增元件分配一個UUID（Universally Unique Identifier，通用唯一識別碼）。當該新增元件被拖至流程圖編輯介面的某一處位置時，編輯模組103將確定該新增元件在流程圖編輯介面的位置，並確定該新增元件的形狀和大小，將該新增元件的位置、形狀和大小資訊存入資料庫11中。

此外，編輯模組103還為該新增元件設置相應的觸發事件，當該新增元件被單擊或雙擊時，將發生對應的觸發事件，例如顯示文字編輯框，供用戶在該文字編輯框中設置該新增元件的名稱和文字內容。當用戶設置該新增元件的名稱和文字內容時，編輯模組103獲取該新增元件的名稱和文字內容，並將該名稱和文字內容更新至資料庫11中。

當該新增元件在流程圖編輯介面中被移動或縮放時，編輯模組103即時確定該新增元件的位置、形狀和大小資訊，並將該新增元件的位置、形狀和大小資訊即時更新至資料庫11。

當用戶在流程圖編輯介面中新增連接線連接兩個元件時，編輯模組103為該新增連接線分配一個UUID，並獲取該兩個元件的UUID，建立該新增連接線的UUID與該兩個元件的UUID的連接關係，將該新增連接線的UUID及該新增連接線與該兩個元件的連接關係存入資料庫11中。

當要從流程圖編輯介面中刪除元件時，編輯模組103將刪除資料庫11中該元件的基本資訊，包括元件的UUID、位置、形狀、大小、名稱和文字內容等資訊，以及該元件與所連接的連接線之間的連接關係。

當要從流程圖編輯介面中刪除連接線時，編輯模組103將刪除資料庫11中該連接線的UUID，以及該連接線與所連接元件之間的連接關係。

另外，編輯模組103還對標題區202中的各標題設置相應的觸發事件，當該標題被單擊或雙擊時，將發生對應的觸發事件，例如顯示一個列表，該列表中包括該標題對應作圖區201的子區域中分佈的所有元件的基本資訊。

當用戶將瀏覽器20顯示的該網頁檔案關閉後，再次透過瀏覽器20向伺服器1發送該網頁文件的訪問請求時，接收模組101將接收該網頁文件的訪問請求，從資料庫11獲取該網頁檔案、網頁檔案中元件的基本資訊以及元件之間的連接線和連接關係。發送模組102生成流程圖編輯介面，將該元件的基本資訊、元件之間的連接線和連接關係、帶有流程圖編輯介面的該網頁檔案發送至瀏覽器20。瀏覽器20對該網頁檔案解析後，將該網頁檔案及該流程圖編輯介面顯示在顯示設備21上，並根據該元件的基本資訊以及元件之間的連接線和連接關係，將該元件及元件之間的連接線顯示於流程圖編輯介面上。

參閱圖6所示，係本發明網頁流程圖編輯方法較佳實施方式的流程圖。

步驟S1，當接收到用戶終端2透過瀏覽器20發送來的網頁檔案的訪問請求時，接收模組101從資料庫11獲取該網頁檔案，並根據該網頁檔案的根源程式代碼判斷該網頁檔案中是否包含編輯流程圖的自訂標籤。

步驟S2，當該網頁檔案中包含編輯流程圖的自訂標籤時，發送模組102生成流程圖編輯介面，將帶有該流程圖編輯介面的該網頁檔案發送至瀏覽器20。瀏覽器20對該網頁檔案進行解析後，將該網頁檔案及該流程圖編輯介面顯示在顯示設備21上。

步驟S3，編輯模組103根據用戶透過瀏覽器20對該流程圖編輯介面的操作，在流程圖編輯介面上編輯流程圖，包括新增元件、移動元件、縮放元件、刪除元件、新增連接線、刪除連接線等，確定元件的形狀、大小、位置、名稱和文字內容等基本資訊，以及元件之間的連接線和連接關係，並將該元件的基本資訊，以及元件之間的連接線和連接關係存入資料庫11中。

當再次接收到瀏覽器20發送的該網頁文件的訪問請求時，接收模組101從資料庫11獲取該網頁檔案、網頁檔案中元件的基本資訊以及元件之間的連接線和連接關係。發送模組102生成流程圖編輯介面，將該元件的基本資訊、元件之間的連接線和連接關係、帶有流程圖編輯介面的該網頁檔案發送至瀏覽器20。瀏覽器20對該網頁檔案解析後，將該網頁檔案及該流程圖編輯介面顯示在顯示設備21上，並根據該元件的基本資訊以及元件之間的連接線和連接關係，將該元件及元件之間的連接線顯示於流程圖編輯介面上。

綜上所述，本發明符合發明專利要件，爰依法提出專利申請。惟，以上所述者僅爲本發明之較佳實施例，本發明之範圍並不以上述實施例爲限，舉凡熟悉本案技藝之人士援依本發明之精神所作之等效修飾或變化，皆應涵蓋於以下申請專利範圍內。

1．．．伺服器

10．．．網頁流程圖編輯系統

11．．．資料庫

2．．．用戶終端

20．．．瀏覽器

21．．．顯示設備

3．．．網路

101．．．接收模組

102．．．發送模組

103．．．編輯模組

201．．．作圖區

202．．．標題區

203．．．工具區

300．．．元件工具

400．．．連接線工具

500．．．縮放工具

501．．．放大工具

502．．．縮小工具

圖1係本發明網頁流程圖編輯系統較佳實施方式的運行環境圖。

圖2係本發明網頁流程圖編輯系統較佳實施方式的功能模組圖。

圖3至圖5係流程圖編輯介面及其元件和連接線的示意圖。

圖6係本發明網頁流程圖編輯方法較佳實施方式的流程圖。

1．．．伺服器

10．．．網頁流程圖編輯系統

11．．．資料庫

2．．．用戶終端

20．．．瀏覽器

21．．．顯示設備

3．．．網路

Claims (10)

1. 一種網頁流程圖編輯方法，包括以下步驟：
   接收步驟：當接收到用戶終端的瀏覽器發送來的網頁檔案訪問請求時，從伺服器的資料庫中獲取該網頁檔案；
   發送步驟：生成流程圖編輯介面，將帶有流程圖編輯介面的該網頁檔案發送至該瀏覽器；
   編輯步驟：根據用戶透過瀏覽器對該流程圖編輯介面的操作，在流程圖編輯介面上編輯流程圖，確定元件的基本資訊、元件之間的連接線和連接關係，將該元件的基本資訊、元件之間的連接線和連接關係存入資料庫中。
2. 如申請專利範圍第1項所述之網頁流程圖編輯方法，所述接收步驟還根據該網頁檔案的根源程式代碼判斷該網頁檔案中是否包含編輯流程圖的自訂標籤，當該網頁檔案中包含編輯流程圖的自訂標籤時，執行所述發送步驟。
3. 如申請專利範圍第1項所述之網頁流程圖編輯方法，在所述編輯步驟中，透過新增或改變網頁檔案裏組成元件或連接線的DIV元素的級聯樣式表CSS樣式在流程圖編輯介面上編輯流程圖。
4. 如申請專利範圍第1項所述之網頁流程圖編輯方法，所述元件的基本資訊包括元件的形狀、大小、位置、名稱和文字內容。
5. 如申請專利範圍第1項所述之網頁流程圖編輯方法，還包括：
   當再次接收到瀏覽器發送的該網頁檔案的訪問請求時，從資料庫獲取該網頁檔案、網頁檔案中元件的基本資訊、元件之間的連接線和連接關係；
   生成流程圖編輯介面，然後將該元件的基本資訊、元件之間的連接線和連接關係、帶有流程圖編輯介面的該網頁檔案發送至瀏覽器。
6. 一種網頁流程圖編輯系統，包括：
   接收模組，用於當接收到用戶終端的瀏覽器發送來的網頁檔案訪問請求時，從伺服器的資料庫中獲取該網頁檔案；
   發送模組，用於生成流程圖編輯介面，將帶有流程圖編輯介面的該網頁檔案發送至該瀏覽器；
   編輯模組，用於根據用戶透過瀏覽器對該流程圖編輯介面的操作，在流程圖編輯介面上編輯流程圖，確定元件的基本資訊、元件之間的連接線和連接關係，將該元件的基本資訊、元件之間的連接線和連接關係存入資料庫中。
7. 如申請專利範圍第6項所述之網頁流程圖編輯系統，所述接收模組還根據該網頁檔案的根源程式代碼判斷該網頁檔案中是否包含編輯流程圖的自訂標籤，當該網頁檔案中包含編輯流程圖的自訂標籤時，觸發所述發送模組。
8. 如申請專利範圍第6項所述之網頁流程圖編輯系統，所述編輯模組透過新增或改變網頁檔案裏組成元件或連接線的DIV元素的級聯樣式表CSS樣式在流程圖編輯介面上編輯流程圖。
9. 如申請專利範圍第6項所述之網頁流程圖編輯系統，所述元件的基本資訊包括元件的形狀、大小、位置、名稱和文字內容。
10. 如申請專利範圍第6項所述之網頁流程圖編輯系統，該接收模組還用於當再次接收到瀏覽器發送的該網頁檔案的訪問請求時，從資料庫獲取該網頁檔案、網頁檔案中元件的基本資訊、元件之間的連接線和連接關係；
    所述發送模組還用於生成流程圖編輯介面，然後將該元件的基本資訊、元件之間的連接線和連接關係、帶有流程圖編輯介面的該網頁檔案發送至瀏覽器。