了解最新技术文章
随着今天的发布,我们非常高兴能够将 Infragistics App Builder TM Ultimate 23.1 交到您的手中。新功能和 UI 控件、更多功能、更好的设计开发流程以及交互式数据可视化体验。这一切都包括在内。
我很高兴与大家分享,我们现在公开了一种为每个网格列构建您自己的 列模板的方法。想象一下,您有一个数据源,其中包含不同的名字和姓氏字段以及地址详细信息,例如街道、城市和邮政编码。您现在可以将所有这些合并到一个单元格显示值中并减少可见列。下面还可以找到更多示例:
URL 数据字段现在可以与自定义图像组件关联。
显示评级组件并给出某些数值的视觉线索。
提供更直观的方式来指示特定列包含电话号码。
以上只是列模板为您提供的强大功能的几个示例。下图显示了上面的示例如何实际工作。
列模板功能的现场演示。
网格列标题、单元格和单元格编辑是可用的模板选项。
现在,您可以直接从 App Builder Toolbox 添加Reveal仪表板,并指定托管数据的Reveal Server SDK的 URL 。将App Builder视为获取baseURL的客户端应用程序,baseURL是服务器的端点,WYSIWYG App Builder将从中发送/接收请求和响应。
加载显示仪表板后,您可以从四个可用选项(营销、销售、营销活动和制造)中指定仪表板名称。 我们托管自己的服务器仅用于测试目的。导出后,您将获得对我们的试用服务器“ https://samples.revealbi.io/upmedia-backend/reveal-api/” (基本 URL)的引用,仅公开用于演示目的的营销仪表板。
查看这个展示 Reveal 强大功能的实时应用程序。
Reveal 是专为嵌入式分析而构建的商业智能解决方案。通过 Reveal,您可以:
提供功能齐全的自助服务仪表板和现代报告。
可在任何 JavaScript 框架(例如 React、Angular、Vue JS、Web Components 或 Blazor)、Windows 窗体或 WPF 应用程序中使用。
定制用户体验以匹配您的品牌体验。
连接到几乎任何数据源以填充您的仪表板。
部署到任何云(公共云或私有云)或您自己的 Java、ASP.NET 或 Node.js 后端本地服务器。
Reveal 有 2 个核心组件,可将仪表板交付给您的客户端应用程序
现在使用更新的Figma UI Kit,如果设计人员使用Figma中的自动布局来创建设计,App Builder解析器将利用它并考虑它来构建应用程序的布局。如果不使用自动布局,解析器将默认为绝对布局。
在这里您可以找到有关使用 Figma 自动布局和 App Builder 加速设计到代码的更多信息
Figma 自动布局是 Figma 内部 Flexbox 布局的实现。虽然它对设计人员的暴露方式略有不同,但其目的是将设计的布局与 Web 布局联系起来。这已在 本文中进行了解释
有什么好处?
Designer 在 Figma 中创建设计时启用自动布局,首先将整个画板设置为自动布局。
利用嵌套框架,并在每个框架内启用自动布局。
让我们看一下以下示例设计,了解如何将框架映射到 App Builder 中的布局。
App Builder 网格的功能随着另一项功能的增长而不断增长 - 通过 Web API 调用进行网格创建、读取、更新和删除操作。您现在可以将它们连接到网格编辑操作按钮并利用实时 Web API 更新。生成代码后,App Builder 将创建必要的服务来处理用于创建、获取、更新和删除资源的 API 调用。
如果网格绑定到客户表(Swagger 路径图 1),则数据交互部分将在添加此类交互时加载客户可用的方法(图 2)。
您可以在此处阅读有关网格 CRID 操作的更多信息。
适用于树、卡片和容器等组件。下面的示例显示了简单的树和树网格如何绑定到具有分层结构的数据源。
在这里您可以阅读有关分层迭代器绑定支持的更多信息。
当存在重复标签时, 您现在可以在类别图表中对数据进行分组和聚合 。此功能的基本思想与网格非常相似。假设您想要按 类别(杂货、家庭、餐馆)进行分组,然后获取“金额”列 的最大值 。您可以将该数据分配到类别图表,然后指定类别组和最大金额的摘要。
阅读有关新图表聚合功能的更多信息。
App Builder 本地软件满足每个组织独特的数据安全、维护、存储和软件开发需求。AB 的本地版本为组织提供了一种访问此类基于云的平台的简单方法,允许他们使用自己的实例并在自己的基础设施上运行它,并且只能由内部人员访问。
本地先决条件和安装。
您可以在下面看到已添加的应用程序,公开了各种功能的 UI。
学习门户
学习管理应用程序可跟踪基于热门主题或讲师的课程进度。具有绑定到 REST 的自定义列表和自适应布局。
库存管理
用于管理库存水平和审查库存产品的报告仪表板。使用路由和类别图表的自定义侧面导航来报告性能。
文档对于每个产品都至关重要,我们投入了大量时间来改进我们的 Indigo.Design 文档。我们为每个新组件添加了主题:
手风琴- 手风琴通常用于在紧凑的空间中管理大量信息,并允许用户有选择地关注特定信息
饼图- 每个部分或饼图切片的弧长与其基础数据值成比例。根据类别占所分析总价值的百分比(100 或 100%),按类别与其他类别的比例显示。饼图适用于小型数据集,并且易于阅读和理解。
评级- 该 组件使用户能够对项目或体验应用评级,例如产品、服务、页面、其他实体等。评级可以显示单个用户或聚合的星级评级,它用于让用户设置自己的星级评级。
Stepper -有用的 UI 元素,可用于以逐步方式显示流程或工作流程,使用户可以轻松了解他们在流程中的位置以及剩余的步骤。目前,我们仅在 Figma 中支持 Stepper 组件。在 Sketch 中,它会在不久的将来添加。
树- 用作类别之间层次关系的直观表示,以列表结构呈现。Tree 组件支持三种显示密度 - Comfortable、Cosy 和 Compact。快速提示: 展开三个节点后,请确保将展开图标的状态切换为“已展开”。如果选择了树节点的部分子节点(但不是全部),请确保将父节点的复选框的状态切换为不确定状态:
此外,我们还更新了以下相关主题:
样式- Indigo.Design 系统 提供了用于设计所有 60 多个 UI 组件样式的精细方法,这些组件也映射到 Angular 控件的 Ignite UI。我们的 Angular 产品中的主题引擎允许创建自定义颜色主题,只需几行代码即可重新设计整个产品的样式。应用 程序生成器 还实现了这些主题机制,让用户只需单击几下即可更改应用程序的完整外观。
UI 模式 - Indigo.Design 系统 通过由 Indigo.Design 组件组装的 180 多个 UI 模式提高您的工作效率。它们通过相同的响应式网页设计行为和主题功能得到增强。UI 模式分布在 Figma 和 Sketch 库的不同页面中。下面是一些 列表模式的片段,例如联系人列表、可搜索和可过滤列表以及未找到匹配结果时列出空状态:
添加了 Align-self 属性以覆盖父布局(CSS Flex-box)上定义的 V.align 和 H.align。
添加了 Border-radius 属性来设置行/列/绝对布局组件的舍入
在浏览器中将应用程序名称显示为页面标题
添加新数据集合时选择所有数据字段
添加了最大化“创建新应用程序”对话框的选项
改进了布局启发法,可以从使用自动布局的 Figma 设计中创建 CSS Flexbox 布局。
更新了 Figma 插件以使用主题调色板和深色主题创建应用程序。
从 Figma 设计文件创建应用程序时,自动提取 SVG 和 PNG 作为图像资源。
App Builder 菜单中的统一下拉菜单可下载设计系统资源并加入我们的 Discord 频道。
组合、选择和对话框组件的新代码生成 (Blazor)
用于未经许可的代码导出的新切换
错误修复和一般改进
查看我们最近正在处理的文章列表:
使用 App Builder 将 Figma 设计转换为 HTML 代码
响应式流体布局。
使用 App Builder 生成 Web 组件代码。
使用低代码工具降低关键任务企业软件的复杂性
什么是快速应用开发
设计到代码解决方案解释
UI 组件库 - 构建与购买
网格 CRUD 操作、嵌套数据绑定支持、类别图表聚合
其他资源:
AB 从设计到代码的故事。
下载 Figma UI 套件 、 Figma 插件和示例应用程序。
下载 Adob e XD UI 套件、 Sketch 插件和示例应用程序。
正如您所看到的,Infragistics Ultimate 23.1 版本有大量新功能和更新,将显着改进、简化和现代化您构建美观和简单的应用程序的方式,一次一个。
我们提供了此版本各个部分的详细信息,您可以在此处查看:
Angular –变更日志和更新
应用程序生成器 –更改日志和新增功能