一、简介

可以通过构建自定义窗口小部件，创建自定义主题，自定义数据源和消息/操作来扩展Experience Builder。所有这些都可以通过使用Experience Builder的扩展框架jimu来实现，该框架基于以下组件构建：

• ArcGIS API for JavaScript 4.x
• React + Redux framework
• Bootstrap 4 for user interface
• HTML5
  在Experience Builder中开发小部件、主题等需要TypeScript。因为TypeScript具有许多优点，例如：
  • 类型错误检测
  • 更好IDE体验
  • 自我证明代码
  • 更具可读性和易懂性

二、Jimu

image.png

Jimu是一个JavaScript库，用于创建可配置的体验，并且是由以下软件包组成的可扩展性框架：
1、jimu-core
jimu-core用于程序包加载并解析应用程序配置，然后基于应用程序配置加载布局，主题和小部件。为了支持此功能定义了几个类，例如WidgetManager，ConfigManager，ThemeManager等。另外，jimu-core定义了BaseWidget、常见类型以及扩展点，这些可能会被其他包和窗口小部件扩展使用。
2、jimu-layouts
jimu-layouts包包含布局小部件的常见实现。
3、jimu-ui
jimu-ui包包含Experience 所有使用的UI组件。在引擎盖下，它使用reactstrap。此外，添加了更多不在reactstrap中的组件。
大部分使用的是reactstrap，也添加了更多不在reactstrap中的组件。为了减少加载负担，将组件分为一些条目，例如index, setting-components, sql-expression-builder等。有关详细信息，请参见API。
4、jimu-arcgis
jimu-arcgis包包含需要ArcGIS API for JavaScript 4.x才能运行的所有组件。
5、jimu-for-builder
jimu-for-builder包支持开发widget设置页面。

三、Data source

数据源定义widget如何访问数据。例如，当数据来自远程服务器时，widget可以使用数据源类向客户端查询数据。另外当widget生成数据时，可以将其放入数据源类中，以供另一个widget使用。
在较高级别上，数据源具有模式、记录，并且可能具有某些子/父数据源。此外，每个数据源都有一个type，ID和status 来帮助识别它。 DataSource接口在jimu-core包中定义；它定义了以下一些方法和属性：

• id：数据源ID
• type：widget中使用的属性，用于检查其使用的数据源类型。
• fetchSchema：每个数据源都必须实现此方法以返回模式。这是在远程数据服务中定义的模式。例如，当用户在Experience Builder中添加数据源时，该数据源模式未保存在app config中，而是调用fetchSchema方法以获取最新的数据源模式。
• getSchema：widget用来访问数据源模式和数据源中的字段的方法。
• getRecords：widget用来访问数据源中的数据记录的方法。
  数据源可以具有子数据源。因此，您可能会包含多个数据源，以使其更易于使用。这种数据源称为DataSourceSet。 WebMapDataSource是一个DataSourceSet。一旦isDataSourceSet属性设置为true，DataSourceSet也是一种数据源。数据源由DataSourceManager管理，以创建和获取数据源。
  为了简化数据源的使用，定义了一个DataSourceComponent组件。这个组件接受useDataSource属性，并通过回调返回数据源对象及其状态信息。该组件还接受一个函数作为其子级，该子级可用于获取数据源对象和信息以便在数据源中呈现数据。DataSourceComponent组件还可以接受可选的query属性，并且在更改查询时将重新加载数据。对于仅需要查询的数据，可以使用DataQueryComponent组件。它具有与DataSourceComponent相似的接口，但在内部调用query。
  为了支持最常用的数据格式例如要素服务，该API具有QueriableDataSource接口和抽象类AbstractQueriableDataSource。例如，独立要素图层将返回FeatureQueryDataSource，而包含要素图层的webmap / webscene将返回一个或多个FeatureLayerDataSource。

四、Repeated Data source

RepeatedDataSourceProvider提供的数据源称为重复数据源。提供数据源的窗口小部件的所有子窗口小部件都将接收重复的数据源。类似于React的context。widget可以通过this.props.repeatedDataSource访问重复的数据源。重复的数据源将获取数据源的ID，记录和recordIndex。任何widget都可以使用RepeatedDataSourceProvider提供重复的数据源。Experience Builder中的“List”widget是一个很好的示例，它提供了重复的数据源。要使用重复的数据源，请在widget的清单文件中添加supportRepeat属性。
通常，数据源保存在两个位置：数据源对象在DataSourceManager中保存和管理，数据源信息保存在redux app中。使用DataSourceComponent时，组件将调用DataSourceManager来按需创建数据源，并通过回调返回的属性返回数据源对象和dataSourceInfo。在dataSourceInfo中，可以返回数据源的instanceStatus，状态，selectedIds等。
ArcGIS API for JavaScript中有许多类可用于管理或显示要素。这些类作为数据源包装在jimu-arcgis包中。例如，WebMapDataSource，FeatureLayerDataSource等是此包的一部分。这些对象是通过数据源访问的。

五、Map/Scene View

View的概念与ArcGIS API for JavaScript相同，但是在Experience Builder中，View被封装为JimuMapView，以确保在创建widgets，消息/操作等时具有一致的可扩展性模型。要创建JimuMapView对象，widget可以使用JimuMapViewManager.createJimuMapView（）方法。 JimuMapView对象具有以下主要属性：

• view：地图/场景视图对象。
• datasourceId：创建视图的数据源（webmap / webscene）
• mapWidgetId：创建对象的小部件
• jimuLayerViews：图层视图对象包装器
  需要使用地图/场景视图的小部件可以使用设置页面中的JimuMapViewSelector组件来选择地图/场景视图。这还将使用JimuMapViewComponent访问JimuMapView对象。

六、Page

Experience 中的页面不是实际的HTML网页；它是一个概念性页面，但是，其行为类似于实际的HTML网页。它是通过使用div HTML标签实现的。Experience 必须至少有一页，并且可以有多页。Experience Builder中有两种页面布局类型：全屏应用程序页面和线性滚动页面；前者看起来像一个应用程序，而后者看起来像一个网页。
页面内容（小部件/部分）是根据布局规则组织的，例如固定布局和流程布局。为了使页面响应不同的屏幕尺寸，Experiment Builder支持按尺寸模式配置布局。这些由大，中和小定义。每种布局的配置都是对Experience 的适应，可通过对应用程序的更多自定义和更好地使用屏幕大小来提供更大的灵活性。City Explorer模板就是这种设计的一个很好的例证。在大中型屏幕上查看该应用程序时，该地图可见并且包含在配置中。但是，当在移动设备上查看地图时，地图小部件会从第一页中删除，并且仅在用户在列表中选择一个地图项后才显示在第二页上

七、Theme

Theme定义了Experience 的外观和感觉。体验包括即用型（OOB）主题，并且可以创建自定义主题。了解有关主题开发的更多信息。

八、Widget

Widget是可配置的功能单元。它是用于创建体验页面的构建块。 Experience Builder提供了OOB小部件，例如地图，按钮，列表等，并且可以创建自定义小部件。Widget通常提供设置UI，以允许用户在构建器环境中配置其功能。如果窗口小部件具有可配置的选项，但不包含设置UI，则可以使用JSON编辑器对其进行配置。

九、Message and action

消息/动作是一种支持小部件到小部件，小部件到框架以及框架到小部件之间的通信的方式。小部件/框架可以发布消息，并且他们也可以收听消息。消息由MessageType标识，该消息类型由jimu框架定义。 jimu中定义了一些消息类型，例如ExtentChange和DataRecordsSelectionChange。将来的版本中将有更多消息类型。