TWI682291B

TWI682291B - 網頁之動態生成方法、網頁生成裝置及電腦程式產品

Info

Publication number: TWI682291B
Application number: TW107117572A
Authority: TW
Inventors: 周嘉宏; 王芙民
Original assignee: 中華電信股份有限公司
Priority date: 2018-05-23
Filing date: 2018-05-23
Publication date: 2020-01-11
Also published as: TW202004531A

Abstract

本發明提供一種網頁之動態生成方法、網頁生成裝置及電腦程式產品，其適用於內容資料庫中的數筆資料內容。而在此方法中。定義網頁元素定義檔，而此網頁元素定義檔記錄數個網頁元素在網頁上的呈現樣式及這些網頁元素與資料內容的綁定關係。依據網頁元素定義檔所定義的綁定關係，自內容資料庫中取得對應資料內容。依據網頁元素定義檔所定義的呈現樣式，將取得資料內容轉換成符合前端架構的領域特定語言描述檔。依據領域特定語言描述檔渲染網頁上的網頁元素，並將取得資料內容結合對應網頁元素而呈現於網頁，從而可動態生成網頁。

Description

網頁之動態生成方法、網頁生成裝置及電腦程式產品

本發明是有關於一種資料處理技術，且特別是有關於一種網頁之動態生成方法、網頁生成裝置及電腦程式產品。

網頁是一種方便使用者瀏覽資訊的介面，部分公司甚至會採用網頁形式來對其資產、商品、或客戶等資訊進行管理及資訊呈現。而隨著公司的規模越大，資產、商品或客戶的數量亦可能隨之增加，且這些資訊可能時常變動。當面臨前述情況時，現有技術通常需要修改介面生成程式，從而時間成本，更無法隨時應變資訊的變動。

有鑑於此，本發明提供一種網頁之動態生成方法、網頁生成裝置及電腦程式產品，能更方便、更快速地透過修改資料庫中的定義檔或資料內容，以即時變更網頁元素型態及內容。

本發明的網頁之動態生成方法，其適用於內容資料庫中的數筆資料內容。而此網頁之動態生成方法包括下列步驟。定義網頁元素定義檔，而此網頁元素定義檔記錄數個網頁元素在網頁上的呈現樣式及這些網頁元素與資料內容的綁定關係。依據網頁元素定義檔所定義的綁定關係，自內容資料庫中取得對應資料內容。依據網頁元素定義檔所定義的呈現樣式，將取得資料內容轉換成符合前端架構的領域特定語言(Domain Specific Language，DSL)描述檔。依據DSL描述檔渲染(render)網頁上的網頁元素，並將取得資料內容結合對應網頁元素而呈現於網頁。

本發明的網頁呈現裝置，其包括儲存器及處理器。儲存器記錄數個模組及內容資料庫。處理器耦接儲存器，且載入並執行儲存器所記錄的那些模組。而那些模組包括網頁元素定義模組、內容剖析模組及描述檔解析模組。網頁元素定義模組定義網頁元素定義檔，而此網頁元素定義檔記錄數個網頁元素在網頁上的呈現樣式及這些網頁元素與資料內容的綁定關係。內容剖析模組依據網頁元素定義檔所定義的綁定關係而自內容資料庫中取得對應資料內容，並依據網頁元素定義檔所定義的呈現樣式將取得資料內容轉換成符合前端架構的DSL描述檔。而描述檔解析模組依據DSL描述檔渲染網頁上的網頁元素，並將取得資料內容結合對應網頁元素而呈現於網頁。

本發明的電腦程式產品，其適用於內容資料庫中的數筆資料內容，並經由處理器載入程式執行下列步驟。定義網頁元素定義檔，而此網頁元素定義檔記錄數個網頁元素在網頁上的呈現樣式及這些網頁元素與資料內容的綁定關係。依據網頁元素定義檔所定義的綁定關係，自內容資料庫中取得對應資料內容。依據網頁元素定義檔所定義的呈現樣式，將取得資料內容轉換成符合前端架構的DSL描述檔。依據DSL描述檔渲染網頁上的網頁元素，並將取得資料內容結合對應網頁元素而呈現於網頁。

基於上述，本發明實施例的網頁之動態生成方法、網頁生成裝置及電腦程式產品，其可設定關於網頁元素的型態、屬性及與資料內容的綁定關係於網頁元素定義檔。若欲網頁呈現則本發明實施例能即時取得此網頁元素定義檔，產生對應的呈現樣式，並將取得綁定的資料內容結合設定的網頁元素，而呈現於網頁上，從而達到即時動態網頁生成的目的。

為讓本發明的上述特徵和優點能更明顯易懂，下文特舉實施例，並配合所附圖式作詳細說明如下。

圖1是依據本發明一實施例的網頁生成裝置100的元件方塊圖。請參照圖1，網頁生成裝置100可以是桌上型電腦、筆記型電腦、各類型伺服器、智慧型手機或平板電腦等電子裝置。網頁生成裝置100包括但不僅限於儲存器110及處理器130。

儲存器110可以是任何型態的固定或可移動隨機存取記憶體（Random Access Memory，RAM）、唯讀記憶體（Read-Only Memory，ROM）、快閃記憶體（Flash Memory）或類似元件或上述元件之組合的儲存器，儲存器110並用於儲存緩衝的或永久的資料、應用程式、軟體模組(例如，網頁元素定義模組111、內容剖析模組112(包括內容定義擷取器113、資料定義轉譯器114、領域特定語言描述檔產生器115等)、描述檔解析模組116(包括領域特定語言描述檔解析器117、樣式渲染器118等)等模組)、網頁元素定義資料庫120(記錄一筆或更多筆網頁元素定義檔121)、內容資料庫140(包括數筆資料內容)、使用者介面、組態化網頁元素樣板150等資料，且其詳細內容待後續實施例詳述。

處理器130與儲存器110耦接，並可以是中央處理單元(CPU)，或是其他可程式化之一般用途或特殊用途的微處理器(Microprocessor)、數位信號處理器(DSP)、可程式化控制器、特殊應用積體電路(ASIC)或其他類似元件或上述元件的組合。在本發明實施例中，處理器130用以執行網頁生成裝置100的所有作業，且可載入並執行儲存器110所記錄的各軟體模組。

需說明的是，在一些實施例中，圖1中的網頁元素定義資料庫120及內容資料庫140可能是記錄在其他裝置(例如，外接硬碟、網路附加儲存器(Network Attached Storage，NAS)、或伺服器等設備)，而網頁生成裝置100可透過通訊收發器(例如，網路介面卡、行動上網卡等)或傳輸介面(例如，通用序列匯流排(Universal Serial Bus，USB)、Thunderbolt等)連接網頁元素定義資料庫120及內容資料庫140，本發明不加以限制。

為了方便理解本發明的操作流程，以下將舉諸多實施例詳細說明。下文中，將搭配網頁生成裝置100中的元件及模組說明本發明實施例所述之方法。本方法的各個流程可依照實施情形而隨之調整，且並不僅限於此。

網頁元素定義模組111透過網頁生成裝置100之輸入設備(圖未示，例如，鍵盤、滑鼠、軌跡球等)取得使用者對於一個或更多個網頁元素(例如，表格、選單、輸入欄位、框架等)及欲綁定之資料內容的設定，以定義成為網頁元素定義檔121(步驟S210)。此網頁元素定義檔121記錄有欲設定之網頁元素在網頁或任何使用者頁面上的呈現樣式(或方式)(例如，表格輪廓、表格所具有的欄位、欄位名稱、元素類型(例如，純文字輸出、純文字輸入、下拉式選單等)、欄位初始化狀態(例如，是否可隱藏、是否可編輯等)、欄位數量、下拉式選單位置、欄位的排列順序等)及這些網頁元素與資料內容的綁定關係(例如，第幾個欄位呈現資產名稱、項目A~D呈現於下拉式選單中等)。這些資料內容是記錄於內容資料庫140中，資料內容並可能是資產、客戶、分析數據等各種業務相關的資訊(例如，類型、名稱、地址、聯絡方式等，並視業務類型不同而可能有不同的資訊)。例如，關於資產的資訊內容可能是設備類型、設備名稱、廠牌、財產編號等資料。網頁元素定義模組111可將定義好的網頁元素定義檔儲存於網頁元素定義資料庫120中，以方便自己或其他模組存取。

舉例而言，表(1)為網頁元素定義檔(UI_SPEC)的範例。每筆資料用來表示在領域(category)是資產(ict_asset)，頁面(page)是表格(gird)時，則在領域為ict_asset的相關頁面中，要生成一個表格元素(即，網頁元素)，而領域(category)為領域物件的定義(即，相關於內容資料庫140中資料內容的業務類型)；例如，定義一個名稱為ict_asset的領域物件，則跟此物件相關聯的新增、修改、刪除等操作行為的相關頁面都是屬於ict_asset這個領域物件；例如是新增ict_asset或是修改ict_asset的頁面中，網頁元素定義模組111會依據網頁元素定義資料庫120中網頁元素定義檔121的設定，產生一組動態生成表格(grid)。而頁面(page)用來定義有一個表格元素要生成，再以網頁元素定義檔121與元素初始化定義資料，來決定表格要生成的初始欄位，表格元素欄位需分別設定。而網頁元素定義檔121定義了須生成三個欄位(即，顯示數量之屬性)，因此記錄三筆記錄，元素標籤(ele_label)用來設定欄位要顯示的名稱(即，顯示名稱之屬性)，元素序號(ele_seq_no)(即，顯示位置之屬性)用來設定欄位顯示的先後順序(序號愈低的排序較前)，而隱藏設定(hidden)(即，隱藏設定之屬性)之數值為0(即，屬性之數值)表示對應欄位必須顯示，隱藏設定之數值為1則表示對應欄位必須隱藏。表(1)

UI_SPEC (網頁元素定義檔)
id (編號)	1	2	3
id_ci_spec_detail (定義檔細節編號)	9	10	11
category (領域)	ict_asset	ict_asset	ict_asset
page (頁面)	grid	grid	grid
spec_type (定義類型)
ele_label (元素標籤)	設備類別	設備名稱	廠牌
ele_value (元素數值)
element_required (元素要求)	0	0	0
ele_seq_no (元素序號)	1	2	3
ele_type (元素類型)
ele_readonly (元素唯讀)	0	0	0
hidden (隱藏設定)	0	0	0
header_width (標頭寬度)	20	20	20
ele_attr (元素屬性)
ele_attr_val (元素屬性值)
update_time (更新時間)	2017/10/10	2017/10/10	2017/10/10

接著，內容剖析模組112依據網頁元素定義檔，解析網頁中所欲呈現網頁元素的相關程式碼。具體而言，內容剖析模組112檢查網頁是否須需要使用網頁元素定義檔；若有任何網頁元素(例如，表格、欄位、選單等)要動態生成，則內容定義擷取器113自網頁元素定義資料庫120讀取網頁元素定義檔121；反之，若不需要動態生成任何網頁元素，則內容定義擷取器113不(或禁能)讀取此網頁元素定義檔121。值得注意的是，各網頁元素具有多種屬性(例如，形狀、數量等樣式)與其數值，而內容剖析模組112會依據各網頁元素的屬性進行轉譯，並將網頁元素定義檔121的屬性與數值，轉成針對網頁元素之程式碼的各種屬性內容。內容剖析模組112將網頁元素解析後，將產生欲先定義之表格樣式，接著再與內容資料庫140中的資料內容比對並進一步取得對應資料內容。

接著，內容定義擷取器113，依據網頁元素定義檔121所定義的綁定關係而自內容資料庫140中取得對應資料內容(步驟S230)。具體而言，網頁元素定義檔121經剖析後，可得出網頁元素的樣貌(即，呈現樣式)，而這些網頁元素需要與對應業務的資料內容綁定。因此，內容定義擷取器113會先讀取內容資料庫140，並比對網頁元素定義檔121所設定各網頁元素可綁定的資料內容，以自內容資料庫140取得對應資料內容。

例如，表(2)是一範例說明內容資料庫140所記錄的資料內容。屬性表(CI_SPEC_MAIN)是用來定義領域物件，其中三個欄位來定義一項領域物件，各領域物件有一個專屬識別碼(id)、一個專屬代碼(name)、及一個代碼的中文描述(name_desc)。本範例的資料內容定義一個終端資產領域物件，其設定專屬識別碼為2，專屬代碼為ict_asset，中文描述為終端資產。表(2)

CI_SPEC_MAIN (屬性表)
id (識別碼)	2
name (代碼)	ict_asset
name_desc (中文描述)	終端設備

表(3)是一範例說明內容資料庫140所記錄的資料內容。屬性表(CI_SPEC_DETAIL)包括使用者頁面細節(ui_spec)與內容定義(CI_SPEC_MAIN)，而處理器130可計算出在領域(categoty)為ict_asset的相關頁面，生成具有三個欄的表格，表格的欄位細部內容則是跟業務有關聯的資料內容。其中，內容細節(CI_SPEC_DETAIL)記錄著表格的資料內容，內容細節的識別碼(id)欄位作為欄位的單一識別碼，主要識別碼(id_main)設定為2，表示欄位是與內容定義設定的識別碼為2之資料內容(終端資產)有關聯的。此外，此資料內容表示領域物件終端資產具備三個屬性，其分別為設備類別、設備名稱以及廠牌。類型(type)設定為字串(string)，則表格資料是以純文字顯示，代碼(name)是欄位的代碼，其中kind表示設備類別，type表示設備名稱，brand代表廠牌。而在內容資料庫140中，數值會以代碼形式儲存；也就是說，資料寫入資料內容時，必須為代碼；若要在表格件顯示為中文時，處理器130需要透過中介的轉換機制處理，快取代碼(cache_name_code)為儲存中文與代碼的對應表的名稱，內容剖析模組112自內容資料庫140取出的代碼值，需先透過此中介轉換機制，產生出正確的中文名稱。例如，設備類別、設備名稱、及廠牌。若未設定有中介轉換機制，表格內容值的中文名稱將無法呈現於網頁或其他介面上。表(3)

CI_SPEC_DETAIL (內容細節)
id (識別碼)	9	10	11
id_main (主要識別碼)	2	2	2
type (類型)	string	string	string
name (代碼)	kind	type	brand
name_desc (中文描述)	設備類別	設備名稱	廠牌
cache_name_code (快取代碼)	code_equip_ kind_asset	code_equip_ type_asset	code_equip_ brand_asset

接著，資料定義轉譯器114將取得資料內容進行轉換或過濾以符合業務上的需要。例如，當定義一個網頁元素為欄位且其內容為下拉式選單時，則此網頁元素綁定的選單內容列表可能需要經過條件規則(設定有可顯示及/或不可顯示的內容)過濾，以決定網頁上可顯示所取得資料內容中的部分或全部內容，最終得到真正要(必須、或允許)顯示的選單內容。另一方面，資料定義轉譯器114還能取得當前操作之使用者的使用者權限，並依據使用者權限決定在該網頁上隱藏(即，禁能、或不顯示)取得資料內容中的部分或全部內容，使未經授權的資料內容得以被隱藏。

完成資料內容轉換後，內容剖析模組112依據網頁元素定義檔所定義的呈現樣式將取得資料內容轉換成符合前端架構的領域特定語言(Domain Specific Language，DSL)描述檔(步驟S250)。具體而言，DSL描述檔產生器115產生描述網頁元素輪廓(樣式或外觀等)與資料內容的DSL描述檔，而此DSL描述檔以JSON(JavaScript Object Notation)格式呈現。此外，DSL描述檔的內容是依據解析出來的網頁元素的資料紀錄數、及每筆紀錄的欄位個數與每個欄位對應的資料所產生相對應的網頁元素的描述。需說明的是，依據不同前端架構(前述實施例是以Angular框架)之需求，DSL描述檔可能是不同的格式，例如，鍵-值格式可以係JSON(JavaScript Object Notation)、python、C#字典(Dictionary)等等格式，本發明不加以限制。

接著，DSL解析模組300依據DSL描述檔渲染網頁上的網頁元素，並將取得資料內容結合對應網頁元素而呈現於網頁(步驟S270)。具體而言，描述檔解析模組116接收前一步驟產生的符合前端框架格式的DSL描述檔，且DSL解析器117解析出定義的網頁元素的輪廓(或呈現樣式)與每個網頁元素(例如，欄位、表格、選單等)綁定的資料內容，樣式渲染器118即可將網頁元素的輪廓與資料內容寫入組態化網頁元素樣板150，從而顯示出動態產生的網頁(例如，資料表格、選單等)。例如，DSL描述檔為JSON格式，而前端框架為JavaScript，則處理器130可透過Restful應用程式介面(Application Programming Interface，API)取得DSL描述檔。而由於JSON格式是一種以純文字為基礎的轉換格式，因此前端框架能夠根據JSON的內容描述，取得JSON的鍵(key)與值(value)。樣式渲染器118再以框架元素之特性，解析DSL描述檔，並為表格元素進行渲染，從而將表格元素結合資料內容顯示在網頁上。本範例是選擇Angular為前端框架，採用預定義的DSL格式，轉譯成Angular基礎元件或自訂義元件，將網頁的表格元素與資料完整顯示。

以下舉一範例說明欄位內容為表頭(title)之DSL描述檔。 {title: “設備類別”, width: null, hidden: false} {title: “設備名稱”, width: null, hidden: false} {title: “廠牌”, width: “”, hidden: false} 內容剖析模組112讀取表(1)之網頁元素定義檔(UI_SPEC)、表(2)之屬性表(CI_SPEC_MAIN)及表(3)之內容細節(CI_SPEC_DETAIL)三個資料來源，並得出此表格元素有三個欄位。欄位名稱(title)分別為設備類別、設備名稱及廠牌；欄位寬度(width)則以網頁元素定義檔所定義的標頭寬度(header_width)解析而來；是否隱藏(hidden)也是從網頁元素定義檔的隱藏設定(hidden)欄位所定義，其中假(false)表示欄位不隱藏會顯示於頁面上，而真(true)則表示欄位不顯示。

以下舉另一範例說明欄位內容之DSL描述檔。 {data: “桌上型電腦(PC)”, hidden: false} {data: “HP Compaq”, hidden: false} {data: “8300 Elite MT”, hidden: false} data表示欄位內容，三筆資料即表示網頁中存在三個欄位，其分別表示為設備類別為桌上型電腦 (PC)、設備名生為 HP Compaq、及廠牌為8300 Elite MT，data的中文描述，這些中文描述事先經過三張中文與代碼對應表所轉換出來的，分別是表(3)所記錄的code_equip_kind_asset、code_equip_type_asset及 code_equip_brand_asset ，hidden表示欄位不顯示，表格內容hidden的欄位是依附於表頭hidden欄位，且如果表頭hidden為真(true)，則表格欄位內容的hidden亦為true，反之亦然。

此外，以下舉一範例說明網頁之程式碼內容。＜ictinv-grid [curr_page]=“dataService.peekTableDataDefine().curr_page”＞ [tot_pages] =“dataService.peekTableDateDefine().tot_pages” [tot_records] =“dataService.peekTableDataDefine() .tot_records” [rows]=“dataService.peekTableDataDefine().rows” [headers]=“dataService.peekTableDataDefine().headers” (gridNavigatePage)=“doAueryGridData($event)” (gridOnSalectRow)=“selectAssetRow($event)” (gridOnEditRow)=“goEditPage($event)” (gridOnSalectRowData)=“selectedResourceId($event)” [showRadioBtn]=“true” ＜/ictinv-grid＞為了讀取經過內容剖析模組112運算得到的DSL描述檔，必須設計出一套描述檔解析模組116以符合前端框架。而由於DSL為基本的JSON格式，因此可以跨不同的前端語言框架。本範例採用Anagular來設計描述檔解析模組116，描述檔解析模組116取得前述針對表頭及欄位內容DSL描述檔後，將資料內容組合成Angular自訂義元素可讀取之格式，即可自動化產生與業務資料定義綁定之表格元素。

以下舉一範例說明表格結合資料內容。網頁表格元素的內容是由網頁元素定義資料庫120與內容資料庫140(如前述範例中的網頁元素定義檔(UI_SPEC)、屬性表(CI_SPEC_MAIN)及內容細節(CI_SPEC_DETAIL)三個組態)的表格設定值，而表(4)是經過網頁元素定義模組111、內容剖析模組112、及描述檔解析模組116的處理後，結合資料內容而產生的表格。表(4)

設備類別	設備名稱	廠牌
資訊設備	桌上型電腦(PC)	HP Compaq
資訊設備	桌上型電腦(PC)	HP Compaq
資訊設備	筆記型電腦(Notebook)
資訊設備	桌上型電腦(PC)	HP Compaq
資訊設備	筆記型電腦(Notebook)	Lenovo聯想

為了方便讀者更加理解本發明精神，以下在另舉二範例說明。

表(5)-(7)分別是網頁元素定義檔(UI_SPEC)、屬性表(CI_SPEC_MAIN)及內容細節(CI_SPEC_DETAIL)。表(5)

網頁元素定義檔(UI_SPEC)
id (編號)	623
id_ci_spec_detail (定義檔細節編號)	12
category (領域)	ict_asset
page (頁面)	create
spec_type (定義類型)	textbox(文字方塊)
ele_label (元素標籤)	型號
ele_value (元素數值)
element_required (元素要求)	0
ele_seq_no (元素序號)	4
ele_type (元素類型)	text
ele_readonly (元素唯讀)	0
hidden (隱藏設定)	0
header_width (標頭寬度)
ele_attr (元素屬性)
ele_attr_val (元素屬性值)
update_time (更新時間)	2018/02/17

表(6)

表(7)

CI_SPEC_DETAIL (內容細節)
id (識別碼)	12
id_main (主要識別碼)	2
type (類型)	string
name (代碼)	model (型號)
name_desc (中文描述)	形式/號
cache_name_code (快取代碼)

內容剖析模組112基於這些資料可產生JSON格式之DSL描述檔如下： ele_attr: “” ele_attr_val: “” ele_key: “model” ele_label: “型號” ele_readonly: false ele_required: false ele_seq_no: 4 ele_type: “text” ele_value: null multiOption: [] spec_type: “textbox” __proto__:HtmlElementBase 而圖3則是描述檔解析模組116基於前述DSL描述檔所呈現之具有輸入框欄位310的網頁300。

表(8)-(10)分別是網頁元素定義檔(UI_SPEC)、屬性表(CI_SPEC_MAIN)及內容細節(CI_SPEC_DETAIL)。表(8)

網頁元素定義檔(UI_SPEC)
id (編號)	340
id_ci_spec_detail (定義檔細節編號)	248
category (領域)	ict_asset
page (頁面)	create
spec_type (定義類型)	dropdown(下拉式選單)
ele_label (元素標籤)	財產資訊
ele_value (元素數值)	0
element_required (元素要求)	1
ele_seq_no (元素序號)	1
ele_type (元素類型)
ele_readonly (元素唯讀)	0
hidden (隱藏設定)	0
header_width (標頭寬度)
ele_attr (元素屬性)	2
ele_attr_val (元素屬性值)
update_time (更新時間)	2017/12/11

表(9)

表(10)

CI_SPEC_DETAIL (內容細節)
id (識別碼)	248
id_main (主要識別碼)	2
type (類型)	string
name (代碼)	asset_type
name_desc (中文描述)	資產類型
cache_name_code (快取代碼)	code_equip_asset_type

內容剖析模組112基於這些資料可產生JSON格式之DSL描述檔如下： ele_attr: “2” ele_attr_val: “[{“key”:“0”,“value”:“公司資產已有產編”}, {“key”:“1”,“value”: “私人設備無財產編號”}…}]” ele_key: “asset_type” ele_label: “財產資訊” ele_readonly: false ele_required: true ele_seq_no: 1 ele_type: “” ele_value: “0” multiOption: [] options: ({…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}) spec_type: “dropdown” __proto__:HtmlElementBase 而圖4則是描述檔解析模組116基於前述DSL描述檔所呈現之具有下拉式選單410的網頁400。

本發明的另一範例實施例提出一種電腦程式產品，用以執行上述動態生成方法的各個步驟(圖2所示實施例)。此電腦程式產品包括多個程式指令，且網頁生成裝置100中的處理器130載入並執行這些程式指令之後，可完成上述的網頁之動態生成方法以及實現網頁生成裝置100的功能。

綜上所述，本發明實施例之網頁之動態生成方法、網頁生成裝置及電腦程式產品，定義網頁元素的顯示規則(即，網頁元素定義檔)，即可基於此規則來取得綁定的資料內容。網頁呈現時，能產生具有定義之網頁元素的呈現樣式，並結合綁定的資料內容，從而達到網頁動態生成之目的。

本發明實施例具有以下特點及功效：

本發明實施例使得網頁資料表格欄位數量以及綁定資料內容需求變更時，能更方便、更快速的透過修改資料庫中的網頁元素定義檔，以達到即時變更網頁元素型態與內容之功能。

當有網頁資料表格欄位數量與綁定資料內容需要變更時，本發明實施例能免除修改程式及重新編譯程式的時間成本，亦能免除因修改程式而須重新佈署程式以及啟動伺服器的時間成本。

雖然本發明已以實施例揭露如上，然其並非用以限定本發明，任何所屬技術領域中具有通常知識者，在不脫離本發明的精神和範圍內，當可作些許的更動與潤飾，故本發明的保護範圍當視後附的申請專利範圍所界定者為準。

100‧‧‧網頁生成裝置 110‧‧‧儲存器 111‧‧‧網頁元素定義模組 112‧‧‧內容剖析模組 113‧‧‧內容定義擷取器 114‧‧‧資料定義轉譯器 115‧‧‧DSL描述檔產生器 116‧‧‧描述檔解析模組 117‧‧‧DSL描述檔解析器 118‧‧‧樣式渲染器 120‧‧‧網頁元素定義資料庫 121‧‧‧網頁元素定義檔 130‧‧‧處理器 140‧‧‧內容資料庫 150‧‧‧組態化網頁元素樣板 S210~S270‧‧‧步驟 300、400‧‧‧網頁 310‧‧‧輸入框欄位 410‧‧‧下拉式選單

圖1是依據本發明一實施例的網頁生成裝置的元件方塊圖。圖2是依據本發明一實施例的網頁之動態生成方法的流程圖。圖3是一範例說明具有輸入框欄位的網頁。圖4是一範例說明具有下拉式選單的網頁。

S210~S270‧‧‧步驟

Claims

一種網頁之動態生成方法，適用於一內容資料庫中的多個資料內容，而該網頁之動態生成方法包括：定義一網頁元素定義檔，其中該網頁元素定義檔記錄多個網頁元素在一網頁上的呈現樣式及該些網頁元素與資料內容的綁定關係；依據該網頁元素定義檔所定義的該綁定關係，自該內容資料庫中取得對應該資料內容；依據該網頁元素定義檔所定義的呈現樣式，將取得資料內容轉換成符合前端架構的一領域特定語言(Domain Specific Language，DSL)描述檔；以及依據該領域特定語言描述檔渲染(render)該網頁上的網頁元素，並將該取得資料內容結合對應網頁元素而呈現於該網頁。
如申請專利範圍第1項所述的網頁之動態生成方法，其中自該內容資料庫中取得至少一該資料內容的步驟之前，更包括：解譯該網頁元素定義檔，以轉換成該些網頁元素的多種屬性，其中該些屬性是在該網頁上所呈現樣式的內容。
如申請專利範圍第1項所述的網頁之動態生成方法，其中將取得資料內容轉換成符合前端架構的該領域特定語言描述檔的步驟之前，更包括：取得一使用者權限；以及依據該使用者權限決定在該網頁上隱藏該取得資料內容中的部分或全部內容。
如申請專利範圍第1項所述的網頁之動態生成方法，其中將取得資料內容轉換成符合前端架構的該領域特定語言描述檔的步驟之前，更包括：依據一條件規則決定在該網頁上顯示該取得資料內容中的部分或全部內容。
如申請專利範圍第1項所述的網頁之動態生成方法，其中定義該網頁元素定義檔的步驟，包括：定義一領域物件，其中該領域物件相關於一該資料內容的業務類型；以及定義一該網頁元素及其屬性，其中該屬性包括顯示名稱、顯示位置、及顯示數量及隱藏設定。
如申請專利範圍第1項所述的網頁之動態生成方法，其中將該取得資料內容結合對應網頁元素而呈現於該網頁的步驟，包括：將該網頁元素的呈現樣式及該取得資料內容寫入一組態化網頁元素樣板，以生成以該呈現樣式組成之網頁元素的網頁。
一種網頁呈現裝置，包括：一儲存器，記錄多個模組及一內容資料庫；以及一處理器，耦接該儲存器，且載入並執行該儲存器所記錄的該些模組，而該些模組包括：一網頁元素定義模組，定義一網頁元素定義檔，其中該網頁元素定義檔記錄多個網頁元素在一網頁上的呈現樣式及該些網頁元素與資料內容的綁定關係；一內容剖析模組，依據該網頁元素定義檔所定義的該綁定關係而自該內容資料庫中取得對應資料內容，並依據該網頁元素定義檔所定義的呈現樣式將取得資料內容轉換成符合前端架構的一領域特定語言描述檔；以及一描述檔解析模組，依據該領域特定語言描述檔渲染該網頁上的網頁元素，並將該取得資料內容結合對應網頁元素而呈現於該網頁。
如申請專利範圍第7項所述的網頁呈現裝置，其中該內容剖析模組解譯該網頁元素定義檔，以轉換成該些網頁元素的多種屬性，其中該些屬性是在該網頁上所呈現樣式的內容。
如申請專利範圍第7項所述的網頁呈現裝置，其中該內容剖析模組取得一使用者權限，並依據該使用者權限決定在該網頁上隱藏該取得資料內容中的部分或全部內容。
一種電腦程式產品，適用於一內容資料庫中的多個資料內容，並經由一處理器載入程式執行：定義一網頁元素定義檔，其中該網頁元素定義檔記錄多個網頁元素在一網頁上的呈現樣式及該些網頁元素與資料內容的綁定關係；依據該網頁元素定義檔所定義的該綁定關係，自該內容資料庫中取得對應該資料內容；依據該網頁元素定義檔所定義的呈現樣式，將取得資料內容轉換成符合前端架構的一領域特定語言描述檔；以及依據該領域特定語言描述檔渲染該網頁上的網頁元素，並將該取得資料內容結合對應網頁元素而呈現於該網頁。