流程圖控件GoJS教程：將GoJS模型數(shù)據(jù)存儲(chǔ)在云存儲(chǔ)中

---

GoJS是一款功能強(qiáng)大，快速且輕量級(jí)的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創(chuàng)建流程圖，且極大地簡(jiǎn)化您的JavaScript / Canvas 程序。

點(diǎn)擊下載GoJS最新版

將GoJS模型數(shù)據(jù)存儲(chǔ)在云存儲(chǔ)中是保存，加載，創(chuàng)建和刪除圖表數(shù)據(jù)文件的絕佳方法，而無(wú)需擔(dān)心本地系統(tǒng)問(wèn)題。GoCloudStorage庫(kù)使與流行的云存儲(chǔ)服務(wù)的連接變得容易。

GoCloudStorage庫(kù)未與GoJS預(yù)先打包在一起。您可以在此處找到GoCloudStorage庫(kù)。

GoCloudStorage類系統(tǒng)使開發(fā)人員可以輕松地將其GoJS圖表模型數(shù)據(jù)存儲(chǔ)到流行的云存儲(chǔ)服務(wù)。該 GoCloudStorage類本身是一個(gè)抽象類，永遠(yuǎn)不會(huì)被實(shí)例化。而是使用其子類，每個(gè)子類與不同的云存儲(chǔ)服務(wù)接口。當(dāng)前，GoCloudStorage系統(tǒng)支持Dropbox，Google Drive，Microsoft OneDrive和本地存儲(chǔ)。類名是：

• GoDropBox
• GoGoogleDrive
• GoOneDrive
• GoLocalStorage

GoCloudStorage子類構(gòu)造

本節(jié)描述如何創(chuàng)建特定GoCloudStorage子類GoGoogleDrive的實(shí)例。由于云存儲(chǔ)服務(wù)API的可變性，GoCloudStorage子類構(gòu)造函數(shù)的參數(shù)和行為會(huì)有所不同。建議您閱讀要使用的任何GoCloudStorage子類的完整 文檔。

首先，確保您有一個(gè)script帶有g(shù)cs.js庫(kù)路徑的標(biāo)簽。所有GoCloudStorage子類都在名稱空間中定義gcs。

注意：要使用任何GoCloudStorage子類（除GoLocalStorage），您還必須包括一個(gè)script標(biāo)簽引用存儲(chǔ)服務(wù)提供商JS庫(kù)。對(duì)于每個(gè)子類，它們可能類似于：

• GoDropBox：https: //unpkg.com/dropbox@2.5.13/dist/DropboxTeam-sdk.min.js
• GoGoogleDrive：https: //apis.google.com/js/api.js
• GoOneDrive：https: //js.live.net/v7.2/OneDrive.js

這是對(duì)GoGoogleDrive的有效構(gòu)造函數(shù)調(diào)用。

  //創(chuàng)建一個(gè)有效的GoGoogleDrive實(shí)例
  var ggd = new gcs.GoGoogleDrive（
    圖，// managedDiagrams參數(shù)
    “ 16225356139-n64vtg7konuetna3of3mfcaj2iffhgmg.apps.googleusercontent.com”，// clientId參數(shù)
    “ AIzaSydBje3lBL67MMVKw467_pvuRg7_XMVGf18”，// pickerApiKey參數(shù)
    defaultModel，// defaultModel參數(shù)
    “ ../projects/storage/goCloudStorageIcons/” // iconsRelativeDirectory參數(shù)
    ）;

注意：此頁(yè)面上的所有客戶端ID / API密鑰都是偽造的，僅供參考。

這些參數(shù)是什么？我們將一步一步地解決它們。

托管圖

傳遞給GoGoogleDrive構(gòu)造函數(shù)的第一個(gè)參數(shù)稱為diagrams。這是所有GoCloudStorage子類都知道的參數(shù)managedDiagrams。GoCloudStorage實(shí)例（在本例中為GoGoogleDrive）將為其管理數(shù)據(jù)存儲(chǔ)的是GoJS圖數(shù)組或單個(gè)GoJS圖。此參數(shù)是必需的。

客戶編號(hào)

傳遞給GoGoogleDrive構(gòu)造函數(shù)的第二個(gè)參數(shù)是一個(gè)長(zhǎng)字符串。這是所有GoCloudStorage子類（GoLocalStorage除外）必需的參數(shù) 。該ID告訴云存儲(chǔ)提供商（在這種情況下為Google）和用戶，哪個(gè)應(yīng)用程序要求操作存儲(chǔ)的文件數(shù)據(jù)（在這種情況下為Google Drive文件數(shù)據(jù)）。

這通常是由云存儲(chǔ)提供商的開發(fā)人員控制臺(tái)或類似人員提供的。您將需要在存儲(chǔ)提供商（在這種情況下為Google）中注冊(cè)應(yīng)用程序以獲得此ID。在獲取客戶ID的下面閱讀更多內(nèi)容。

Google Picker API密鑰

這是GoGoogleDrive特定的參數(shù)。一些GoCloudStorage子類需要其他參數(shù)不需要的參數(shù)。同樣，建議您閱讀要使用的任何GoCloudStorage子類的完整文檔。

GoGoogleDrive需要此鍵，以允許在圖形文件操作期間使用熟悉的Google Drive文件選擇器界面。在完整的GoGoogleDrive.pickerApiKey文檔中閱讀有關(guān)此特殊參數(shù)的更多信息。

默認(rèn)型號(hào)

它是通過(guò)調(diào)用分配給新創(chuàng)建的圖的默認(rèn)模型數(shù)據(jù) create。通常，此值是通過(guò)調(diào)用 Diagram.model.toJson（）獲得的。

這是所有GoCloudStorage子類的可選參數(shù)。如果在構(gòu)造過(guò)程中未提供任何值，則默認(rèn)為新的GraphLinksModel。

圖標(biāo)相對(duì)目錄

要使用調(diào)用GoCloudStorage子類的custom的命令，ui必須相對(duì)于應(yīng)用程序頁(yè)面所在的目錄指定存儲(chǔ)服務(wù)圖標(biāo)所在的目錄。這是由可選iconsRelativeDirectory參數(shù)提供的。默認(rèn)值為“ ../goCloudStorageIcons/”。

UI的確切外觀在GoCloudStorage子類之間有所不同，盡管它當(dāng)然包含對(duì)存儲(chǔ)服務(wù)圖標(biāo)的引用。如果不提供此參數(shù)，則這些圖像所在的空間很可能會(huì)顯得空白。

獲取客戶端ID

在構(gòu)造期間， 所有GoCloudStorage子類（GoLocalStorage除外）都需要客戶端ID作為參數(shù)。這使存儲(chǔ)服務(wù)提供商（例如Google，Dropbox ...）和用戶知道嘗試操縱其遠(yuǎn)程文件系統(tǒng)的應(yīng)用程序的身份。因此，獲得要使用的存儲(chǔ)服務(wù)的客戶端ID是使用相應(yīng)的GoCloudStorage子類的要求。

服務(wù)的過(guò)程因服務(wù)而異，盡管一般步驟相同。1.注冊(cè)帳號(hào)

如果您還沒(méi)有存儲(chǔ)服務(wù)提供商的帳戶，請(qǐng)注冊(cè)一個(gè)。

2.注冊(cè)一個(gè)Web應(yīng)用程序

此步驟因服務(wù)而異。在存儲(chǔ)服務(wù)提供商處創(chuàng)建并注冊(cè)應(yīng)用程序。

3.找到新應(yīng)用程序的客戶ID
您新注冊(cè)的應(yīng)用程序具有一個(gè)Client ID-一個(gè)長(zhǎng)字符串，類似于我們?cè)贕oCloudStorage子類構(gòu)造中看到的字符串。使用此字符串作為clientId您的GoCloudStorage實(shí)例的參數(shù)。

這些特定于存儲(chǔ)的頁(yè)面可以幫助您逐步完成使用其服務(wù)創(chuàng)建/注冊(cè)應(yīng)用程序的過(guò)程。

• GoGoogleDrive
• Microsoft OneDrive（圖形）
• 投寄箱

保存/加載數(shù)據(jù)

現(xiàn)在您有了GoCloudStorage子類的工作實(shí)例，讓我們開始保存和加載GoJS Diagram模型數(shù)據(jù)。我們將繼續(xù)使用GoCloudStorage子類構(gòu)造中的GoGoogleDrive示例，將特定的GoGoogleDrive實(shí)例稱為 ggd。

我們可以ggd.managedDiagrams通過(guò)多種方式將模型數(shù)據(jù)保存到Google云端硬盤。

保存與使用UI保存

所有GoCloudStorage子類均具有save()和的功能saveWithUI()。有什么不同？

saveWithUI()顯示了GoCloudStorage調(diào)用實(shí)例的ui元素，讓用戶以圖形方式指定文件名和/或保存位置。

save()更細(xì)微。有三種情況。讓我們回到我們的GoGoogleDrive示例并進(jìn)行探索。1.指定路徑保存

呼叫g(shù)gd.save(<valid path string>)將保存到Google云端硬盤中的特定路徑，而不會(huì)顯示任何用戶界面。
注意：構(gòu)成有效路徑字符串參數(shù)的內(nèi)容因服務(wù)而異。有關(guān)更多詳細(xì)信息，請(qǐng)參見 文檔。

2.使用有效的當(dāng)前圖表文件進(jìn)行保存
如果未提供任何路徑，但是路徑ggd有效currentDiagramFile （ggd當(dāng)前已打開Google Drive文件的表示，并且其內(nèi)容已加載到ggd.managedDiagrams'模型中），則Google Drive中g(shù)gd.currentDiagramFile.path與之相對(duì)應(yīng)的路徑中的圖表文件內(nèi)容將使用的模型內(nèi)容 ggd.managedDiagrams。

3.都不存

如果未提供任何路徑且該路徑ggd.currentDiagramFile無(wú)效，ggd.saveWithUI()則會(huì)調(diào)用，提示用戶輸入保存名稱/位置。

載入中

加載文件數(shù)據(jù)更為簡(jiǎn)單。

load(<valid path string>)從云存儲(chǔ)服務(wù)將文件內(nèi)容加載到每個(gè)managedDiagrams模型中。沒(méi)有UI出現(xiàn)。 
范例：ggd.load('ahjdhe^3n4dlKd4r')

loadWithUI()顯示 用戶界面，并允許用戶以圖形方式選擇要加載的文件。 
范例：ggd.loadWithUI()

注1：所加載的文件必須已經(jīng)從帶有GoJS圖的頁(yè)面保存到存儲(chǔ)中，該圖的DIV ID與的DIV ID相對(duì)應(yīng) managedDiagrams。否則，GoCloudStorage子類將模型數(shù)據(jù)加載到哪個(gè)位置尚不清楚。 
注2：managedDiagrams從存儲(chǔ)中加載的模型數(shù)據(jù)必須在包含GoCloudStorage調(diào)用實(shí)例的應(yīng)用程序中進(jìn)行適當(dāng)處理（通過(guò)節(jié)點(diǎn)/鏈接模板或其他方法）。GoCloudStorage類系統(tǒng)除模型數(shù)據(jù)外不存儲(chǔ)任何其他信息。

創(chuàng)建/刪除數(shù)據(jù)

創(chuàng)建文件
繼續(xù)我們的GoGoogleDrive示例，您將如何在存儲(chǔ)中創(chuàng)建一個(gè)新文件以保存ggd.managedDiagrams到？調(diào)用該create函數(shù)。

create()將每個(gè)設(shè)置ggd.managedDiagrams為ggd.defaultModel（在構(gòu)造時(shí)分配，回到 GoCloudStorage子類構(gòu)造中）。如果 ggd.isAutoSaving為true，則會(huì)managedDiagrams通過(guò)自動(dòng)調(diào)用提示您將新刷新的內(nèi)容保存到Google云端硬盤saveWithUI()。
（可選）該create函數(shù)可以接受路徑參數(shù)，就像保存/加載數(shù)據(jù)中描述的save()和load()函數(shù)一樣 。如果提供，則每個(gè)重置為后，其模型數(shù)據(jù)將保存到Google云端硬盤中的給定路徑，并且不會(huì)出現(xiàn)用戶界面。 ggd.managedDiagramsdefaultModel

刪除文件
要從Google云端硬盤中刪除文件，只需調(diào)用ggd.remove(<some valid path string>)。Google云端硬盤中給定路徑上的文件將被刪除，而不會(huì)顯示任何用戶界面。
要使用ui元素從Google云端硬盤中刪除文件，請(qǐng)調(diào)用ggd.removeWithUI()。

前往Cloud Storage Manager

如果您希望能夠?qū)㈨?yè)面上的圖保存到許多不同的云存儲(chǔ)服務(wù)或從中加載，該怎么辦？說(shuō)，Google云端硬盤和Microsoft OneDrive？還是Microsoft OneDrive，Dropbox和Google云端硬盤？或當(dāng)前支持的GoCloudStorage子類的任意組合？這就是 Go Cloud Storage Manager的用途。

構(gòu)造GoCloudStorageManager
遵守標(biāo)準(zhǔn)的GoCloudStorageManager構(gòu)造過(guò)程：

        //構(gòu)造您要管理的CloudStorage子類
        gls = new gcs.GoLocalStorage（myDiagram，defaultModel）;
        God = new gcs.GoOneDrive（myDiagram，'f9b171a6-a12e-48c1-b86c-814ed40fcdd1'，defaultModel）;
        ggd = new gcs.GoGoogleDrive（myDiagram，'16225373139-n24vtg7konuetna3ofbmfcaj2infhgmg.apps.googleusercontent.com'，
            'AIzaSyDBj43lBLpYMMVKw4aN_pvuRg7_XMVGf18'，defaultModel）；
        gdb = new gcs.GoDropBox（myDiagram，'3sm2ko6q7u1gbix'，defaultModel）;
        存儲(chǔ)空間= [gls，上帝，ggd，gdb]；

        //創(chuàng)建GoCloudStorageManager實(shí)例
        storageManager =新的gcs.GoCloudStorageManager（storages，“ ../projects/storage/goCloudStorageIcons/”）;   

盡管有所有這些代碼，GoCloudStorageManager僅采用兩個(gè)參數(shù)。

儲(chǔ)物柜

第一個(gè)參數(shù)，storages是一個(gè)數(shù)組或集GoCloudStorage子類。這告訴GoCloudStorageManager實(shí)例，storageManager正在管理哪些存儲(chǔ)服務(wù)以及這些服務(wù)如何管理其圖。

圖標(biāo)相對(duì)目錄

第二個(gè)參數(shù)是一個(gè)字符串，對(duì)應(yīng)于iconsRelativeDirectoryGoCloudStorageManager的 屬性。這類似于GoCloudStorage子類構(gòu)造中iconsRelativeDirectory討論的內(nèi)容。唯一的區(qū)別是GoCloudStorageManager將此屬性應(yīng)用于每個(gè)GoCloudStorage子類的iconsRelativeDirectory屬性。此參數(shù)是可選的，但不提供此參數(shù)可能意味著ui中應(yīng)該有存儲(chǔ)服務(wù)圖標(biāo)的空白。

使用GoCloudStorageManager

調(diào)用selectStorageService（）后出現(xiàn)的UI

首先，設(shè)置您當(dāng)前要使用的GoCloudStorage子類。這是通過(guò)用戶界面完成的，該用戶界面會(huì)調(diào)用storageManager.selectStorageService()。 storageManager.currentStorageService設(shè)置為GoCloudStorage子類，該子類管理在結(jié)果UI中選擇的存儲(chǔ)服務(wù)。

該GoCloudStorageManager承擔(dān)數(shù)據(jù)的主要圖形操作的愿望，所以調(diào)用save()，load()，create()，并且 remove()不帶任何參數(shù)，所有啟動(dòng)適當(dāng)?shù)腢I的 storageManager.currentStorageService（一套由之前的步驟）。

您可能需要基于使用GoCloudStorageManager保存/加載/刪除/創(chuàng)建數(shù)據(jù)來(lái)更新頁(yè)面顯示或執(zhí)行一些其他操作。所有GoCloudStorageManager核心方法（save()，load()，create()和remove()）回報(bào)承諾，決心用DiagramFile，表示最近保存/載入/創(chuàng)建/移除文件。使用此數(shù)據(jù)，您可以在Promise分辨率下更新頁(yè)面顯示或執(zhí)行任何其他操作。如：

        //解決Load動(dòng)作后返回的Promise
        storageManager.load（）。then（function（fileData）{
            // fileData是一個(gè)DiagramFile對(duì)象
            alert（fileData.name +“（文件ID” + fileData.id +“）從路徑” + fileData.path加載）;
        }）;

注意：任何DiagramFile對(duì)象中都有三個(gè)保證字段：表示文件的名稱， id和路徑。

---

想要購(gòu)買GoJS正版授權(quán)，或了解更多產(chǎn)品信息請(qǐng)點(diǎn)擊