流程图控件GoJS教程：将GoJS模型数据存储在云存储中

---

GoJS是一款功能强大，快速且轻量级的流程图控件，可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图，且极大地简化您的JavaScript / Canvas 程序。

点击下载GoJS最新版

将GoJS模型数据存储在云存储中是保存，加载，创建和删除图表数据文件的绝佳方法，而无需担心本地系统问题。GoCloudStorage库使与流行的云存储服务的连接变得容易。

GoCloudStorage库未与GoJS预先打包在一起。您可以在此处找到GoCloudStorage库。

GoCloudStorage类系统使开发人员可以轻松地将其GoJS图表模型数据存储到流行的云存储服务。该 GoCloudStorage类本身是一个抽象类，永远不会被实例化。而是使用其子类，每个子类与不同的云存储服务接口。当前，GoCloudStorage系统支持Dropbox，Google Drive，Microsoft OneDrive和本地存储。类名是：

• GoDropBox
• GoGoogleDrive
• GoOneDrive
• GoLocalStorage

GoCloudStorage子类构造

本节描述如何创建特定GoCloudStorage子类GoGoogleDrive的实例。由于云存储服务API的可变性，GoCloudStorage子类构造函数的参数和行为会有所不同。建议您阅读要使用的任何GoCloudStorage子类的完整 文档。

首先，确保您有一个script带有gcs.js库路径的标签。所有GoCloudStorage子类都在名称空间中定义gcs。

注意：要使用任何GoCloudStorage子类（除GoLocalStorage），您还必须包括一个script标签引用存储服务提供商JS库。对于每个子类，它们可能类似于：

• 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

这是对GoGoogleDrive的有效构造函数调用。

  //创建一个有效的GoGoogleDrive实例
  var ggd = new gcs.GoGoogleDrive（
    图，// managedDiagrams参数
    “ 16225356139-n64vtg7konuetna3of3mfcaj2iffhgmg.apps.googleusercontent.com”，// clientId参数
    “ AIzaSydBje3lBL67MMVKw467_pvuRg7_XMVGf18”，// pickerApiKey参数
    defaultModel，// defaultModel参数
    “ ../projects/storage/goCloudStorageIcons/” // iconsRelativeDirectory参数
    ）;

注意：此页面上的所有客户端ID / API密钥都是伪造的，仅供参考。

这些参数是什么？我们将一步一步地解决它们。

托管图

传递给GoGoogleDrive构造函数的第一个参数称为diagrams。这是所有GoCloudStorage子类都知道的参数managedDiagrams。GoCloudStorage实例（在本例中为GoGoogleDrive）将为其管理数据存储的是GoJS图数组或单个GoJS图。此参数是必需的。

客户编号

传递给GoGoogleDrive构造函数的第二个参数是一个长字符串。这是所有GoCloudStorage子类（GoLocalStorage除外）必需的参数 。该ID告诉云存储提供商（在这种情况下为Google）和用户，哪个应用程序要求操作存储的文件数据（在这种情况下为Google Drive文件数据）。

这通常是由云存储提供商的开发人员控制台或类似人员提供的。您将需要在存储提供商（在这种情况下为Google）中注册应用程序以获得此ID。在获取客户ID的下面阅读更多内容。

Google Picker API密钥

这是GoGoogleDrive特定的参数。一些GoCloudStorage子类需要其他参数不需要的参数。同样，建议您阅读要使用的任何GoCloudStorage子类的完整文档。

GoGoogleDrive需要此键，以允许在图形文件操作期间使用熟悉的Google Drive文件选择器界面。在完整的GoGoogleDrive.pickerApiKey文档中阅读有关此特殊参数的更多信息。

默认型号

它是通过调用分配给新创建的图的默认模型数据 create。通常，此值是通过调用 Diagram.model.toJson（）获得的。

这是所有GoCloudStorage子类的可选参数。如果在构造过程中未提供任何值，则默认为新的GraphLinksModel。

图标相对目录

要使用调用GoCloudStorage子类的custom的命令，ui必须相对于应用程序页面所在的目录指定存储服务图标所在的目录。这是由可选iconsRelativeDirectory参数提供的。默认值为“ ../goCloudStorageIcons/”。

UI的确切外观在GoCloudStorage子类之间有所不同，尽管它当然包含对存储服务图标的引用。如果不提供此参数，则这些图像所在的空间很可能会显得空白。

获取客户端ID

在构造期间， 所有GoCloudStorage子类（GoLocalStorage除外）都需要客户端ID作为参数。这使存储服务提供商（例如Google，Dropbox ...）和用户知道尝试操纵其远程文件系统的应用程序的身份。因此，获得要使用的存储服务的客户端ID是使用相应的GoCloudStorage子类的要求。

服务的过程因服务而异，尽管一般步骤相同。1.注册帐号

如果您还没有存储服务提供商的帐户，请注册一个。

2.注册一个Web应用程序

此步骤因服务而异。在存储服务提供商处创建并注册应用程序。

3.找到新应用程序的客户ID
您新注册的应用程序具有一个Client ID-一个长字符串，类似于我们在GoCloudStorage子类构造中看到的字符串。使用此字符串作为clientId您的GoCloudStorage实例的参数。

这些特定于存储的页面可以帮助您逐步完成使用其服务创建/注册应用程序的过程。

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

保存/加载数据

现在您有了GoCloudStorage子类的工作实例，让我们开始保存和加载GoJS Diagram模型数据。我们将继续使用GoCloudStorage子类构造中的GoGoogleDrive示例，将特定的GoGoogleDrive实例称为 ggd。

我们可以ggd.managedDiagrams通过多种方式将模型数据保存到Google云端硬盘。

保存与使用UI保存

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

saveWithUI()显示了GoCloudStorage调用实例的ui元素，让用户以图形方式指定文件名和/或保存位置。

save()更细微。有三种情况。让我们回到我们的GoGoogleDrive示例并进行探索。1.指定路径保存

呼叫ggd.save(<valid path string>)将保存到Google云端硬盘中的特定路径，而不会显示任何用户界面。
注意：构成有效路径字符串参数的内容因服务而异。有关更多详细信息，请参见 文档。

2.使用有效的当前图表文件进行保存
如果未提供任何路径，但是路径ggd有效currentDiagramFile （ggd当前已打开Google Drive文件的表示，并且其内容已加载到ggd.managedDiagrams'模型中），则Google Drive中ggd.currentDiagramFile.path与之相对应的路径中的图表文件内容将使用的模型内容 ggd.managedDiagrams。

3.都不存

如果未提供任何路径且该路径ggd.currentDiagramFile无效，ggd.saveWithUI()则会调用，提示用户输入保存名称/位置。

载入中

加载文件数据更为简单。

load(<valid path string>)从云存储服务将文件内容加载到每个managedDiagrams模型中。没有UI出现。 
范例：ggd.load('ahjdhe^3n4dlKd4r')

loadWithUI()显示 用户界面，并允许用户以图形方式选择要加载的文件。 
范例：ggd.loadWithUI()

注1：所加载的文件必须已经从带有GoJS图的页面保存到存储中，该图的DIV ID与的DIV ID相对应 managedDiagrams。否则，GoCloudStorage子类将模型数据加载到哪个位置尚不清楚。 
注2：managedDiagrams从存储中加载的模型数据必须在包含GoCloudStorage调用实例的应用程序中进行适当处理（通过节点/链接模板或其他方法）。GoCloudStorage类系统除模型数据外不存储任何其他信息。

创建/删除数据

创建文件
继续我们的GoGoogleDrive示例，您将如何在存储中创建一个新文件以保存ggd.managedDiagrams到？调用该create函数。

create()将每个设置ggd.managedDiagrams为ggd.defaultModel（在构造时分配，回到 GoCloudStorage子类构造中）。如果 ggd.isAutoSaving为true，则会managedDiagrams通过自动调用提示您将新刷新的内容保存到Google云端硬盘saveWithUI()。
（可选）该create函数可以接受路径参数，就像保存/加载数据中描述的save()和load()函数一样 。如果提供，则每个重置为后，其模型数据将保存到Google云端硬盘中的给定路径，并且不会出现用户界面。 ggd.managedDiagramsdefaultModel

删除文件
要从Google云端硬盘中删除文件，只需调用ggd.remove(<some valid path string>)。Google云端硬盘中给定路径上的文件将被删除，而不会显示任何用户界面。
要使用ui元素从Google云端硬盘中删除文件，请调用ggd.removeWithUI()。

前往Cloud Storage Manager

如果您希望能够将页面上的图保存到许多不同的云存储服务或从中加载，该怎么办？说，Google云端硬盘和Microsoft OneDrive？还是Microsoft OneDrive，Dropbox和Google云端硬盘？或当前支持的GoCloudStorage子类的任意组合？这就是 Go Cloud Storage Manager的用途。

构造GoCloudStorageManager
遵守标准的GoCloudStorageManager构造过程：

        //构造您要管理的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）;
        存储空间= [gls，上帝，ggd，gdb]；

        //创建GoCloudStorageManager实例
        storageManager =新的gcs.GoCloudStorageManager（storages，“ ../projects/storage/goCloudStorageIcons/”）;   

尽管有所有这些代码，GoCloudStorageManager仅采用两个参数。

储物柜

第一个参数，storages是一个数组或集GoCloudStorage子类。这告诉GoCloudStorageManager实例，storageManager正在管理哪些存储服务以及这些服务如何管理其图。

图标相对目录

第二个参数是一个字符串，对应于iconsRelativeDirectoryGoCloudStorageManager的 属性。这类似于GoCloudStorage子类构造中iconsRelativeDirectory讨论的内容。唯一的区别是GoCloudStorageManager将此属性应用于每个GoCloudStorage子类的iconsRelativeDirectory属性。此参数是可选的，但不提供此参数可能意味着ui中应该有存储服务图标的空白。

使用GoCloudStorageManager

调用selectStorageService（）后出现的UI

首先，设置您当前要使用的GoCloudStorage子类。这是通过用户界面完成的，该用户界面会调用storageManager.selectStorageService()。 storageManager.currentStorageService设置为GoCloudStorage子类，该子类管理在结果UI中选择的存储服务。

该GoCloudStorageManager承担数据的主要图形操作的愿望，所以调用save()，load()，create()，并且 remove()不带任何参数，所有启动适当的UI的 storageManager.currentStorageService（一套由之前的步骤）。

您可能需要基于使用GoCloudStorageManager保存/加载/删除/创建数据来更新页面显示或执行一些其他操作。所有GoCloudStorageManager核心方法（save()，load()，create()和remove()）回报承诺，决心用DiagramFile，表示最近保存/载入/创建/移除文件。使用此数据，您可以在Promise分辨率下更新页面显示或执行任何其他操作。如：

        //解决Load动作后返回的Promise
        storageManager.load（）。then（function（fileData）{
            // fileData是一个DiagramFile对象
            alert（fileData.name +“（文件ID” + fileData.id +“）从路径” + fileData.path加载）;
        }）;

注意：任何DiagramFile对象中都有三个保证字段：表示文件的名称， id和路径。

---

想要购买GoJS正版授权，或了解更多产品信息请点击