将功能和布局微件添加到使用 Experience Builder 创建的应用程序中。 可接受默认样式或自定义外观,并将微件连接到数据、链接和其他微件,以获得独特的 Web 体验。
插入微件
微件是应用程序的构建块。 如果您不使用页面、窗口、屏幕组和区块的各种可用模板中的微件,则可以使用拖放放置从插入微件面板中添加微件。 屏幕组中的“微件控制器”和“占位符”微件以及滚动面板还具有添加微件按钮。 微件可以用作应用程序工具或作为组织页面的容器,其可以分为六类:
- 以地图为中心微件是连接到地图微件的应用程序工具。
- 以数据为中心微件是与数据源交互的应用程序工具。
- 页面元素微件用于添加图像、文本和其他媒体。
- 菜单和工具栏微件提供可以帮助用户使用浏览和共享应用程序的选项。
- 布局微件是用于帮助组织页面上的微件的容器。
- 部分微件可以在多个视图中展示动态内容,并允许用户在视图之间进行切换。
添加和嵌套微件时,请参考每个页面的交互式轮廓,其中显示页面的微件等级,并帮助您组织、选择和配置嵌套的微件。 当您将鼠标悬停在轮廓中的微件上方时,相应的微件会在画布上高亮显示。 在轮廓中,单击一个微件,然后单击微件操作(例如重命名、复制、删除、锁定位置和大小、图钉、排列和对齐)菜单的更多按钮。 对于包含其他微件的微件,单击全部展开或全部折叠可显示或隐藏基础等级。
使用标准的复制和粘贴键盘快捷键(对于 Windows,快捷方式为 Ctrl+C 和 Ctrl+V;对于 Mac,为 Cmd+C 和 Cmd+V)可在页面之间复制微件。 复制微件时,将保留其所有设置,其在页面上的位置和标注除外。 新建微件标注遵循连续编号规则。 例如,复制 Image 1 现在会生成 Image 2,如果 Image 2 已经存在,则生成 Image 3。 在画布上拖动微件以移动和调整其大小时,将显示捕捉线或距离值,以帮助您在固定布局中对齐和精确定位微件。 显示捕捉线之后,对应的微件将跨所有屏幕分辨率一起捕捉。
如果您需要为多个屏幕尺寸设计应用程序,则插入微件面板上的待处理选项卡非常有用。 例如,可能有这样一个设计要求,即地图微件在较大和中等屏幕尺寸上实施,而不在较小屏幕尺寸上实施。 在这种情况下,可从较小屏幕尺寸设计中移除地图微件,然后将其添加到待处理列表中。
连接微件
微件配置面板包括内容、样式和操作设置。 内容用于定义微件的行为、数据连接和其他设置。 微件将对齐并按照样式选项卡中的设置进行样式化,其设置包括大小、位置、动画、背景、边框和框阴影。 实时应用程序会记住微件面板的位置。您还可以使用微件工具栏来对齐、移除或复制微件。
某些微件支持添加允许在微件之间进行通信的操作。 例如,一个微件中的操作会触发另一个微件中的操作,例如单击地图要素可更新“要素信息”微件中显示的要素详细信息。 可为自动交互添加消息操作,或添加数据操作以供用户在运行时从操作按钮进行访问。 可组合工具和微件并进行连接以实现其他交互性。 通过设置页面、窗口和剖面视图等其他内容的链接来帮助用户导航您的应用程序。
设置链接
您可以使用设置链接选项在内容中添加超链接,从而将用户定向到应用程序的另一个页面、窗口或剖面视图中,或定向到打印预览或其他 web 地址。 在滚动页面上,您可以在微件上设置链接以滚动到页面上的特定块或返回到页面顶部。 以下微件支持设置链接:
设置
设置链接时,可从以下选项中进行选择:
- 页面 - 链接将定向至应用程序中的其他页面。
- 视图 - 链接将定向至“部分”微件中的特定视图。
- 窗口 - 链接将在您的应用程序中打开特定窗口。
- URL* - 链接将指向 web 地址(输入以 https:// 开头的 URL)。
- 块 - 链接将滚动到应用程序中同一滚动页面上的特定块。(不适用于文本微件。)
- 页面顶部 - 链接将滚动到页面顶部。 (不适用于文本微件。)
- 打印预览 - 链接将指向打印预览。
- Cookie 通栏 - 链接指向 Cookie 通栏。
*还可以使用 URL 选项链接到电子邮件地址、电话号码等。 (例如,键入 mailto:someone@example.com。) 目前,设置链接支持以下 URI 方案:
方案 | 用途 | 用法说明 | 格式 | 示例 |
---|---|---|---|---|
https | Web 地址 | https://xxx | https://www.esri.com | |
收件人 | 电子邮件地址 | 标题选填,但通常包含 subject=。 使用 body= 预填消息正文。 | mailto:<address> mailto:<address>[?<header1>=<value1>[&<header2>=<value2>]] | mailto:jsmith@example.com mailto:jsmith@example.com?subject=A%20Test&body=My%20idea%20is%3A%20%0A |
tel | 电话号码 | tel:<phonenumber> | tel:+18883774575 | |
sms | SMS 文本消息 | 将 sms 方案用于 Android 与 iOS 设备时,存在一些小的格式差异。 | Android - sms:<phone number>[?actions] iOS - sms://<phone number>[&actions] | sms:+11234567890?body=hello%20there sms:+11234567890,+11234567891?body=hello%20there sms://+11234567890&body=111222Hello%20There%20Hi! |
ftp | FTP 资源 | 将通用语法用于 FTP 资源。 | ftp://xxx | ftp://user/example.com |
还可以决定应在哪里打开链接的内容:
- 应用程式窗口 - 链接的内容在应用程序使用的当前浏览器窗口中打开。
- 顶部窗口 - 链接的内容跳出其嵌套的所有框架,并在其他打开的窗口顶部打开。
- 新窗口 - 链接的内容在新浏览器窗口中打开,保持应用程序在另一个窗口中打开。