TWI646439B

TWI646439B - 以模版為基礎製作元件之系統及方法

Info

Publication number: TWI646439B
Application number: TW107105533A
Authority: TW
Inventors: 江秀桂; 鄭安容; 余家豪; 劉以涵
Original assignee: 中華電信股份有限公司
Priority date: 2018-02-14
Filing date: 2018-02-14
Publication date: 2019-01-01
Also published as: TW201935278A

Abstract

本發明揭露一種以模版為基礎製作元件之系統及方法。該方法包括：提供資料來源之原始資料，以將資料來源進行註冊而取得識別碼，進而在原始資料上標註識別碼，俾將原始資料轉換為正規化資料作為模擬資料；依據識別碼取得模擬資料，以供元件開發裝置依據模擬資料設定元件模版組態，俾依據元件模版組態啟用並上架元件模版；由用戶裝置選定資料來源，以由元件模版管理單元依據資料來源取得元件模版及其組態設定，供用戶裝置選定元件模版，再由元件管理單元向資料處理模組取得資料集，俾依據元件模版組態與資料集於顯示畫面繪出元件。

Description

以模版為基礎製作元件之系統及方法

本發明係關於一種製作元件(widget)之技術，特別是指一種以模版(template)為基礎製作元件之系統及方法。

在現有技術中，新增一種資料來源或是當用戶之需求異動時，皆需重新開發新的元件，並在新的元件開發完成後再進行發佈，從而不斷的調整修正而增加了系統的開發成本。

如先前技術曾提及以整個網頁佈局為應用範圍，所指之元件為軟體元件(component)，例如選單程式碼、下拉式選單程式碼、電子郵件程式碼、秀圖程式碼或繪圖程式碼等，可供網頁設計時使用之工具，但未提供可動態客製化視覺化元件(widget)之功能。

另外，如另一先前技術曾提及，用戶可選定資料來源以制定元件模版(widget template)，並在完成設定後直接於顯示畫面繪出元件，但缺乏讓元件開發者上架元件模版及儲存元件模版組態之機制。

因此，如何解決上述現有技術之缺點，實已成為本領域技術人員之一大課題。

本發明提供一種以模版為基礎製作元件之系統及方法，其可以模版為基礎來製作元件(widget)，或者進一步達成動態客製元件(視覺化元件)。

本發明中以模版為基礎製作元件之系統包括：一資料儲存模組，其提供資料來源之原始資料；一具有資料轉換單元之資料處理模組，該資料轉換單元將資料來源進行註冊以取得資料來源之識別碼，其中，該資料轉換單元在原始資料上標註識別碼，且將原始資料轉換為正規化資料，以將正規化資料作為資料來源之模擬資料，俾儲存模擬資料於資料儲存模組中；一具有元件模版設定單元與元件模版管理單元之元件模版設定受理模組，該元件模版設定單元依據資料來源之識別碼向資料儲存模組取得資料來源之模擬資料，以供元件開發裝置依據模擬資料設定元件模版組態，俾由元件模版管理單元依據元件模版組態啟用元件模版以上架元件模版；以及一具有元件管理單元之元件供應模組，該元件管理單元係供用戶裝置選定已註冊之資料來源，以供元件模版管理單元依據資料來源取得已上架之元件模版及其組態設定，再由用戶裝置選定元件模版，其中，該元件管理單元向資料處理模組取得資料集，俾依據元件模版組態與資料集於顯示畫面繪出元件。

本發明中以模版為基礎製作元件之方法包括下列步驟(1)資料來源之註冊程序：由一資料儲存模組提供資料來源之原始資料，以由一資料轉換單元將資料來源進行註冊，進而取得資料來源之識別碼，其中，該資料轉換單元在原始資料上標註識別碼，且將原始資料轉換為正規化資料，以將正規化資料作為資料來源之模擬資料，俾儲存模擬資料於資料儲存模組中；(2)元件模版之上架程序：由元件模版設定單元依據資料來源之識別碼向資料儲存模組取得資料來源之模擬資料，以供元件開發裝置依據模擬資料設定元件模版組態，俾由元件模版管理單元依據元件模版組態啟用元件模版以上架元件模版；以及(3)新增元件程序：由用戶裝置透過元件管理單元選定已註冊之資料來源，以供元件模版管理單元依據資料來源取得已上架之元件模版及其組態設定，再由用戶裝置選定元件模版，其中，元件管理單元向資料處理模組取得資料集，俾依據元件模版組態與資料集於顯示畫面繪出元件。

為讓本發明之上述特徵與優點能更明顯易懂，下文特舉實施例，並配合所附圖式作詳細說明。在以下描述內容中將部分闡述本發明之額外特徵及優點，且此等特徵及優點將部分自所述描述內容顯而易見，或可藉由對本發明之實踐習得。本發明之特徵及優點借助於在申請專利範圍中特別指出的元件及組合來認識到並達到。應理解，前文一般描述與以下詳細描述兩者均僅為例示性及解釋性的，且不欲約束本發明所主張之範圍。

1‧‧‧以模版為基礎製作元件之系統

10‧‧‧元件模版設定受理模組

11‧‧‧元件模版設定單元

12‧‧‧元件模版管理單元

20‧‧‧元件供應模組

21‧‧‧元件管理單元

30‧‧‧資料儲存模組

31‧‧‧原始資料

32‧‧‧模擬資料

33‧‧‧基本物件組態

34‧‧‧元件模版組態

35‧‧‧資料模型規範

40‧‧‧資料處理模組

41‧‧‧資料轉換單元

42‧‧‧資料綁定單元

43‧‧‧資料集

A‧‧‧元件開發裝置

B‧‧‧用戶裝置

S11至S16、S21至S27、S31至S41‧‧‧步驟

第1圖繪示本發明中以模版為基礎製作元件之系統之示意架構圖；第2A圖至第2C圖繪示本發明中以模版為基礎製作元件之方法之示意流程圖，其中，第2A圖為資料來源之註冊程序，第2B圖為元件模版之上架程序，第2C圖為新增元件程序；以及第3圖繪示本發明中以設定虛擬專屬網路(VPN)電路之即時品質元件為例之示意圖。

以下藉由特定的具體實施形態說明本發明之實施方式，熟悉此技術之人士可由本說明書所揭示之內容輕易地了解本發明之其他優點與功效，亦可藉由其他不同的具體實施形態加以施行或應用。

本發明提供一種以模版(template)為基礎製作元件(widget，亦稱視覺化元件)之系統及方法。元件開發裝置(元件開發者)可依據資料來源之特性或用戶裝置(用戶)提出之元件版面配置之需求進行元件模版之設定及上架，而用戶裝置(用戶)只需選定資料來源及元件模版即可繪出該元件，藉此縮減新元件之發佈時間，並快速回應用戶裝置(用戶)之需求。元件開發裝置或用戶裝置可為電子裝置，例如桌上型電腦、筆記型電腦、平板電腦、伺服器或智慧型手機等。

同時，相較以往的元件(視覺化元件)多為文字、圖片、圖形等物件組成，本發明提供元件開發裝置(元件開發者)可針對單一資料來源設定多種元件模版，且元件模版可由文字、圖示(icon)、圖表(chart)、超連結(hyperlink)等基本物件組成。又，圖表之物件可包括拓樸圖(topology)、樹狀圖(tree list)、數字圖(digit)、圓餅圖(pie/donut)、表格(grid)、方框(frame)等類別，而元件可由多種基本物件搭配組成，以大幅提升視覺豐富度，進而依據資料來源之特性選擇適當圖表呈現。

第1圖繪示本發明中以模版為基礎製作元件之系統1之示意架構圖。如圖所示，以模版為基礎製作元件之系統1包括一元件模版設定受理模組10、一元件供應模組20、一資料儲存模組30與一資料處理模組40。

元件模版設定受理模組10具有一元件模版設定單元11與一元件模版管理單元12。元件開發裝置A(元件開發者)可透過元件模版設定單元11依據資料來源之特性與用戶裝置B(用戶)之需求進行元件模版之組態設定，且組態設定之內容可包括基本物件佈局(layout)以及物件與資料綁定(data binding)關係。元件模版管理單元12可提供元件模版之上架與下架、或者資料來源與元件模版之對應關係之管理等必要功能，但不以此為限。

元件供應模組20具有一元件管理單元21，且用戶裝置B(用戶)可透過元件管理單元21於顯示畫面新增或刪除元件。新增元件為透過資料來源之識別碼向資料處理模組40取得資料集(data set)43，並結合元件模版組態34繪出元件畫面。又，刪除元件為元件管理單元21將該元件於顯示畫面移除。

資料儲存模組30用以儲存元件模版設定受理模組10、元件供應模組20與資料處理模組40所需之資料，例如原始資料(raw data)31、模擬資料32、基本物件組態33、元件模版組態34、資料模型規範35等，但不以此為限。資料儲存模組30可為資料庫、硬碟、光碟、隨身碟或記憶體等。

資料處理模組40具有一資料轉換單元41與一資料綁定單元42。資料轉換單元41可依據資料模型規範35將資料儲存模組30之原始資料31分析及轉換為符合規範之正規化資料(normalized data)，以將正規化資料作為資料來源之模擬資料32，俾儲存模擬資料32於資料儲存模組30中。資料綁定單元42可將正規化資料依據用戶裝置B(用戶)於元件管理單元21所選之資料來源及元件模版組態34所描述之資料綁定關係產生資料集43，以提供元件供應模組20於繪出元件所需之對應資料。

在一實施例中，以設定虛擬專屬網路(Virtual Private Network)電路之即時品質元件為例，外部系統定期(如每5分鐘)寫入電路資料為原始資料31，利用資料轉換單元41將屬於原始資料31之電路資料取出以轉換為符合JASON格式的資料，且資料模型規範35會定義JASON格式的組成，以轉換為正規化資料，供資料綁定單元42使用。

本發明中以模版為基礎製作元件之系統及方法可包括下列三個主要程序(但不以此為限)，請參閱第1圖與第2A圖至第2C圖所示。

一、資料來源之註冊程序：由資料轉換單元41將(新的)資料來源向資料進行註冊以取得(新的)資料來源之識別碼，並將原始資料31轉換為正規化資料，以將正規化資料作為資料來源之模擬資料32，俾儲存模擬資料32於資料儲存模組30中。

二、元件模版之上架程序：由元件開發裝置A(元件開發者)透過元件模版設定單元11針對不同的資料來源進行元件模版之設定，例如基本物件佈局以及物件與資料綁定關係並將其儲存為元件模版，且一個資料來源可以依不同的客製需求設定多個元件模版。

三、新增或刪除元件程序：用戶裝置B(用戶)可透過元件管理單元21於顯示畫面新增或刪除元件。例如，新增元件程序可為：由用戶裝置B(用戶)選擇資料來源，以由元件模版管理單元12依據資料來源取得已設定之元件模版。接著，用戶裝置B(用戶)再選定元件模版，以由元件管理單元21依據元件模版組態34及資料集43於顯示畫面繪出元件，藉以滿足不同用戶裝置B(用戶)的元件呈現需求。

第2A圖至第2C圖繪示本發明中以模版為基礎製作元件之方法之示意流程圖，第2A圖為資料來源之註冊程序，第2B圖為元件模版之上架程序，第2C圖為新增元件程序，請一併參閱上述第1圖以進行說明。

首先，因原始資料31之格式各異，所有資料來源之原始資料31皆先儲存於資料儲存模組30。當本發明以模版為基礎製作元件之系統1介接(新的)資料來源時，需進行如下列第2A圖之步驟S11至步驟S16所述資料來源之註冊程序。

在第1圖與第2A圖之步驟S11中，由資料儲存模組30提供(新的)資料來源之原始資料31。

在第1圖與第2A圖之步驟S12中，由資料轉換單元41將(新的)資料來源進行註冊以取得(新的)資料來源之識別碼。

在第1圖與第2A圖之步驟S13中，由資料轉換單元41在原始資料31上標註(新的)資料來源之識別碼。

在第1圖與第2A圖之步驟S14中，由資料儲存模組30提供資料模型規範35。

在第1圖與第2A圖之步驟S15中，由資料轉換單元41依據資料模型規範35將原始資料31分析與轉換為符合規範之正規化資料。正規化資料可為JavaScript物件表示法(JavaScript Object Notation；JSON)之格式，即一個鍵值(key)對應一個值(value)之形式，但其它可達同樣或類似目的之格式皆可使用。

在第1圖與第2A圖之步驟S16中，將正規化資料作為(新的)資料來源之模擬資料32，俾儲存模擬資料32於資料儲存模組30中。

其次，當本發明以模版為基礎製作元件之系統1介接(新的)資料來源或現有的元件模版無法滿足用戶裝置B(用戶)的新需求時，元件開發裝置A(元件開發者)需設定及上架新的元件模版。

設定新的元件模版之元件模版組態34包括基本物件佈局、以及物件與資料綁定關係。基本物件佈局包括基本物件需設定的屬性及物件的排版(arrangements)，例如所有的物件排成一列(row)等。資料綁定關係為元件繪出時物件呈現的資料內容。

新的元件模版之上架程序如第1圖與第2B圖之步驟S21至步驟S27所述。

在第1圖與第2B圖之步驟S21中，由元件開發裝置A(元件開發者)於元件模版設定單元11先選定一已註冊之資料來源。

在第1圖與第2B圖之步驟S22中，由資料儲存模組30提供基本物件組態33。基本物件組態33提供基本物件需設定之屬性，例如：顏色、圖示來源、文字內容、資料對應方式...等，但不以此為限。以文字之物件為例，需設定之屬性為文字之顏色及文字內容。而以數字圖(digit)之物件為例，需設定之屬性為數字圖之顏色、說明文字及資料對應方式。

在第1圖與第2B圖之步驟S23中，由資料儲存模組30依據資料來源之識別碼提供資料來源之模擬資料32。

在第1圖與第2B圖之步驟S24中，由元件模版設定單元11向資料儲存模組30取得基本物件組態33，並依據資料來源之識別碼向資料儲存模組30取得資料來源之模擬資料32。

在第1圖與第2B圖之步驟S25中，由元件開發裝置A(元件開發者)設定元件模版組態34。元件模版組態34係描述元件繪出時所需設定，例如基本物件佈局、以及物件與資料綁定關係。

基本物件佈局包括基本物件需設定的屬性及物件的排版，例如所有物件排成一列等。同時，物件與資料綁定關係描述物件與正規化資料之對應關係，每個物件可指定一至多個資料的鍵值，也可以是多個鍵值之內容於運算後的結果，該結果即為物件繪出時顯示之內容。

在第1圖與第2B圖之步驟S26中，將元件模版組態34儲存於資料儲存模組30。

在第1圖與第2B圖之步驟S27中，由元件模版管理單元12依據元件模版組態34啟用元件模版即完成元件模版之上架程序。同時，一個資料來源可以依不同的客製需求設定多個元件模版。

另外，用戶裝置B(用戶)可透過元件供應模組20於顯示畫面新增元件，且新增元件程序如下列第2C圖之步驟S31至步驟S41所述。

在第1圖與第2C圖之步驟S31中，由用戶裝置B(用戶)選定一已註冊之資料來源。

在第1圖與第2C圖之步驟S32中，由元件管理單元21依據資料來源之識別碼向元件模版管理單元12查詢資料來源中可選擇之元件模版及其組態設定。同時，在步驟S33中，由資料儲存模組30提供啟用之元件模版組態34 予元件模版管理單元12。

在第1圖與第2C圖之步驟S34中，由用戶裝置B(用戶)選定欲繪出之元件模版。

在第1圖與第2C圖之步驟S35中，由元件管理單元21於繪出元件前提供即時畫面功能，以依據元件模版組態34與資料轉換單元41所提供之資料集43產生即時預覽畫面，有助於用戶裝置B(用戶)了解元件繪出後之介面外觀(look and feel)。

在第1圖與第2C圖之步驟S36至步驟S37中，由元件管理單元21提供資料來源之識別碼予資料轉換單元41，並由資料轉換單元41向資料儲存模組30取得資料模型規範35且依據資料來源之識別碼查詢原始資料31。

在第1圖與第2C圖之步驟S38中，由資料轉換單元41依據資料模型規範35將原始資料31轉換為正規化資料。

在第1圖與第2C圖之步驟S39中，由資料綁定單元42依據元件模版組態34將正規化資料進行資料綁定以產生資料集43。

又，如上述第2C圖之步驟S35所載，由元件管理單元21依據元件模版組態34與資料集43產生即時預覽畫面，以供用戶裝置B(用戶)選擇不同的元件模版以預覽模版之繪出結果。

在第1圖與第2C圖之步驟S40中，由用戶裝置B(用戶)確認所選定之元件模版。

在第1圖與第2C圖之步驟S41中，由元件管理單元21依據元件模版組態34與資料集43繪出元件。

另外，刪除元件程序為：由用戶裝置B(用戶)透過元件供應模組20選定欲移除之元件，以由元件管理單元21將該元件於顯示畫面移除。

第3圖繪示本發明中以設定虛擬專屬網路(Virtual Private Network；VPN)電路之即時品質元件為例之示意圖，並一併參閱上述第1圖、第2A圖至第2C圖以進行說明。

首先，第1圖之元件開發裝置A(元件開發者)設定一個命名為VPN狀態-4個數字圖(VPN status-4 digits)之元件模版，並於第2B圖之步驟S21中選擇虛擬專屬網路(VPN)電路之即時品質之資料來源，並於第2B圖之步驟S25中設定元件模版組態34(包括設定基本物件佈局以及物件與資料綁定關係)，且於第2B圖之步驟S26中將設定之元件模版組態34儲存於資料儲存模組30。

上述欲設定之基本物件佈局可例如為：元件使用四個數字圖之圖表之物件組成，並將四個數字圖排成一列。第一個設定顏色為紅色，標示說明文字為障礙電路。第二個設定顏色為黃色，標示說明文字為品質劣化電路。第三個設定顏色為綠色，標示說明文字為正常電路。第四個設定顏色為灰色，標示說明文字為無資料/未監控電路。

上述欲設定之物件與資料綁定關係可例如為：第一個數字圖綁定資料鍵值為Number-of-VPN-Defect-Circuit，第二個數字圖綁定資料鍵值為Number-of-VPN-Degraded-Circuit，第三個數字圖綁定資料鍵值為Number-of-VPN-Normal-Circuit，第四個數字圖綁定資料鍵值為Number-of-Unknown-Circuit。

再者，例如第1圖之用戶裝置B(用戶)提出需求：在元件上以數字圖(digit)顯示虛擬專屬網路(VPN)各種狀態電路之數量。例如，第3圖顯示障礙電路、品質劣化電路、正常電路、無資料/未監控連線之電路數分別為3個、2個、23個、6個。

以用戶裝置B(用戶)繪出虛擬專屬網路(VPN)電路之即時品質元件為例，用戶裝置B(用戶)可在第2C圖之步驟S31中選定虛擬專屬網路(VPN)電路之即時品質資料來源，在第2C圖之步驟S34中選擇VPN狀態-4個數字圖(VPN Status-4 digits)之元件模版，在第2C圖之步驟S35中預覽元件模版之繪出結果，在第2C圖之步驟S40中確認所選定之元件模版，並在第2C圖之步驟S41中於顯示畫面繪出虛擬專屬網路(VPN)電路之即時品質元件。

由上可知，本發明之以模版為基礎製作元件之系統及方法中，係可以模版為基礎製作元件並可達成例如動態客製視覺化元件及易於上架元件模版及儲存元件模版組態。

又，為因應不同(異質)的資料來源及滿足用戶裝置(用戶)之多元需求，可由元件開發裝置(元件開發者)或元件模版管理單元針對資料來源上架(新的)元件模版，並依據用戶裝置(用戶)之需求客製化設定元件模版(包括基本物件佈局及物件與資料綁定關係)，且一個資料來源可依據不同的需求設定多個元件模版，而用戶裝置(用戶)只需選定資料來源及元件模版即可繪出該元件，藉此縮減(新的)元件之發佈時間，並快速回應用戶裝置(用戶)之需求。

同時，本發明提供元件開發裝置(元件開發者)可針對單一資料來源設定多種元件模版，而元件模版可由多個不同的基本物件組成(搭配組成)，以大幅提升元件模版之視覺豐富度，進而依據資料來源之特性選擇適當圖表呈現。再者，本發明於新增元件時，可藉由即時畫面功能來預覽元件模版之繪出結果，有助用戶裝置(用戶)選擇偏好之元件模版。

上述實施形態僅例示性說明本發明之原理、特點及其功效，並非用以限制本發明之可實施範疇，任何熟習此項技藝之人士均可在不違背本發明之精神及範疇下，對上述實施形態進行修飾與改變。任何運用本發明所揭示內容而完成之等效改變及修飾，均仍應為申請專利範圍所涵蓋。因此，本發明之權利保護範圍，應如申請專利範圍所列。

Claims

一種以模版為基礎製作元件(widget)之系統，包括：一資料儲存模組，其提供資料來源之原始資料；一具有資料轉換單元之資料處理模組，該資料轉換單元將該資料來源進行註冊以取得該資料來源之識別碼，其中，該資料轉換單元在該原始資料上標註該識別碼，且將該原始資料轉換為正規化資料，以將該正規化資料作為該資料來源之模擬資料，俾儲存該模擬資料於該資料儲存模組中；一具有元件模版設定單元與元件模版管理單元之元件模版設定受理模組，該元件模版設定單元依據該資料來源之識別碼向該資料儲存模組取得該資料來源之模擬資料，以供元件開發裝置依據該模擬資料設定元件模版組態，俾由該元件模版管理單元依據該元件模版組態啟用元件模版以上架該元件模版；以及一具有元件管理單元之元件供應模組，該元件管理單元係供用戶裝置選定已註冊之該資料來源，以供該元件模版管理單元依據該資料來源取得已上架之該元件模版及其組態設定，再由該用戶裝置選定該元件模版，其中，該元件管理單元向該資料處理模組取得資料集，俾依據該元件模版組態與該資料集於顯示畫面繪出該元件。
如申請專利範圍第1項所述之系統，其中，該元件為視覺化元件，該元件模版係由一或多個包括文字、圖示、圖表與超連結之至少一者的基本物件所組成。
如申請專利範圍第1項所述之系統，其中，該資料儲存模組係提供新的資料來源之原始資料，以供該資料轉換單元將該新的資料來源進行註冊，進而取得該新的資料來源之識別碼。
如申請專利範圍第1項所述之系統，其中，該資料儲存模組係用以儲存該原始資料、該模擬資料、該元件模版組態、基本物件組態與資料模型規範。
如申請專利範圍第1項所述之系統，其中，該資料轉換單元係依據資料模型規範將該原始資料分析與轉換為該正規化資料，且該正規化資料係儲存於該資料儲存模組作為新的資料來源之模擬資料。
如申請專利範圍第1項所述之系統，其中，該元件模版設定單元更向該資料儲存模組取得基本物件組態，該基本物件組態包括基本物件需設定之屬性，且該屬性包括顏色、圖示來源、文字內容與資料對應方式之至少一者。
如申請專利範圍第1項所述之系統，其中，該元件模版組態之內容包括基本物件佈局以及物件與資料綁定關係。
如申請專利範圍第1項所述之系統，其中，該元件管理單元更於繪出該元件前提供即時畫面功能，以依據該元件模版組態與該資料集產生即時預覽畫面。
如申請專利範圍第1項所述之系統，其中，該資料處理模組更具有資料綁定單元，其依據該元件模版組態將該正規化資料進行資料綁定以產生該資料集。
如申請專利範圍第1項所述之系統，其中，該用戶裝置更透過該元件供應模組將指定之元件自該顯示畫面移除以刪除該元件。
一種以模版為基礎製作元件之方法，包括下列步驟：(1)由一資料儲存模組提供該資料來源之原始資料，以由一資料轉換單元將該資料來源進行註冊，進而取得該資料來源之識別碼，其中，該資料轉換單元在該原始資料上標註該識別碼，且將該原始資料轉換為正規化資料，以將該正規化資料作為該資料來源之模擬資料，俾儲存該模擬資料於該資料儲存模組中；(2)由元件模版設定單元依據該資料來源之識別碼向該資料儲存模組取得該資料來源之模擬資料，以供元件開發裝置依據該模擬資料設定元件模版組態，俾由元件模版管理單元依據該元件模版組態啟用該元件模版以上架該元件模版；以及(3)由用戶裝置透過元件管理單元選定已註冊之該資料來源，以供該元件模版管理單元依據該資料來源取得已上架之該元件模版及其組態設定，再由該用戶裝置選定該元件模版，其中，該元件管理單元向該資料處理模組取得資料集，俾依據該元件模版組態與該資料集於顯示畫面繪出該元件。
如申請專利範圍第11項所述之方法，其中，該元件為視覺化元件，該元件模版係由一或多個包括文字、圖示、圖表與超連結之至少一者的基本物件所組成。
如申請專利範圍第11項所述之方法，其中，該資料儲存模組係用以儲存新的資料來源之原始資料，以供該資料轉換單元將該新的資料來源進行註冊，進而取得該新的資料來源之識別碼。
如申請專利範圍第11項所述之方法，其中，在步驟(1)中，該資料轉換單元係依據資料模型規範將該原始資料分析與轉換為該正規化資料，且該正規化資料係儲存於該資料儲存模組作為新的資料來源之模擬資料。
如申請專利範圍第11項所述之方法，其中，在步驟(2)中，由該元件模版設定單元向該資料儲存模組取得基本物件組態，該基本物件組態包括基本物件需設定之屬性，且該屬性包括顏色、圖示來源、文字內容與資料對應方式之至少一者。
如申請專利範圍第11項所述之方法，其中，在步驟(3)中，由該元件管理單元於繪出該元件前提供即時畫面功能，以依據該元件模版組態與該資料集產生即時預覽畫面。
如申請專利範圍第11項所述之方法，其中，在步驟(3)中，由資料綁定單元依據該元件模版組態將該正規化資料進行資料綁定以產生該資料集。
如申請專利範圍第11項所述之方法，更包括下列步驟：由該用戶裝置透過元件供應模組將指定之元件自該顯示畫面移除以刪除該元件。