3.5.4 Ux注解详解

史, 昂 • 2024年5月23日 am9:23 • Oinone 7天入门到精通 • 1917 views

我们默认视图已经基本可以用了，但实际业务中还是会有一些不大不小的自定义需求，写自定义视图又太麻烦，今天我们来学习一种更加轻量的模式即：后端研发可以通过注解来配置视觉交互。该系列注解以Ux开头，例如@UxHomepage、@UxMenu、@UxAction、@UxView、@UxWidget等等。

视图XML的配置优先级大于在代码上的注解，也就是代码上的注解影响的是默认展示逻辑。

一、Ux家族图谱

我们先简单通过家族图谱做个简单了解，脑海里有一个影响当有需要的时候知道能不能做，深入了解还需要大家多多动手去尝试

图3-5-4-1 Ux家族图谱

二、默认视图后端配置举例

在下面的代码片段中UxTable、UxForm、UxDetail、UxTableSearch都有涉及，几个特殊点做些解释其他的留大家自行测试

Group分组的配置逻辑：为了不让一个分组内的字段不断的写Group，所以采取了第一个字段写了Group，到下一个出现的group之间的字段都自动归为一个Group
搜素整体不展示可以用“@UxTable(enableSearch = false)”配置在模型的类上。
字段搜索用“UxTableSearch”配置在模型的字段上，其特殊逻辑是只要你配了一个字段，系统就不自动补充了，例子中表格页的搜索栏只会留下店铺名称和店铺编码

……其他代码
//@UxTable(enableSearch = false)，整体不支持搜索
public class PetShop extends AbstractDemoIdModel {
    public static final String MODEL_MODEL="demo.PetShop";

    @Field(displayName = "店铺编码")
    @UxForm.FieldWidget(@UxWidget(group = "Form基础数据"))//Form分组
    @UxTableSearch.FieldWidget(@UxWidget())//支持搜索
    private String code;

    @Field(displayName = "店铺编码2")
    @Field.Sequence(sequence = "DATE_ORDERLY_SEQ",prefix = "C",size=6,step=1,initial = 10000,format = "yyyyMMdd")
    private String codeTwo;

    @UxTableSearch.FieldWidget(@UxWidget())//支持搜索
    @UxTable.FieldWidget(@UxWidget(invisible = "true"))//表格中不展示支持搜索
    @Field(displayName = "店铺名称",required = true,immutable=true)
    private String shopName;

    @Field(displayName = "一年内新店")
    @UxForm.FieldWidget(@UxWidget(widget = "Switch",group = "Form基础数据"))//Switch,Checkbox可以切换着看，字段可选widget参考【字段的配置】一文
    private Boolean oneYear;

    @Field(displayName = "开店时间",required = true)
    @UxDetail.FieldWidget(@UxWidget(invisible = "true"))//详情不展示
    private Time openTime;

    @Field(displayName = "闭店时间",required = true)
    @UxDetail.FieldWidget(@UxWidget(invisible = "true"))//详情不展示
    private Time closeTime;
    …… 其他代码
}

图3-5-4-2 默认视图后端配置举例

Oinone社区作者：史, 昂原创文章，如若转载，请注明出处：https://doc.oinone.top/oio4/9256.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

Oinone 7天从入门到精通

Like (0)

史, 昂数式管理员

0 0

3.5.5 设计器的结合（改）

Previous 2024年5月23日 am9:22

3.5.3 Action的类型

Next 2024年5月23日 am9:24

Oinone 7天入门到精通

流程设计

1.流程设计进入流程设计页之后可以进行流程名称、流程说明的编辑，可以进行流程设计，流程参数配置，保存和发布。 1.1 流程配置点击进入流程配置页面，若需要配置一些参数供流程使用，可在此添加和删除。删除流程参数时，若该参数已在流程中被使用则无法删除。参数支持文本、数值、日期、布尔四种类型。 1.2 保存点击后流程设计进行存档，流程设计不完整也支持保存，下次进入流程设计回到保存的页面。 1.3 发布第一次发布时右上角发布显示文字为发布流程，后续发布按钮显示文字为更新发布。发布后流程才会按照设计触发，首次发布和更新发布的逻辑一致，若流程中有未解决的错误则无法发布不成功，发布成功后页面跳转到显示全部流程的页面，流程状态为已启用、已更新。

史, 昂
2024年6月20日
1.5K000
Oinone 7天入门到精通

3.5.7.7 自定义主题

主题是什么 Oinone框架提供了强大的主题定制功能，使得平台可以轻松适应和遵循公司的品牌和UI规范。通过自定义主题，你可以调整颜色、间距、圆角等视觉元素，从而使Oinone更好地融入到特定行业的需求和公司标准中。以下是关于如何定制主题的关键点和步骤：关键点使用CSS变量： Oinone使用CSS变量 (Css Var) 来实现主题定制。 CSS变量提供了一种高效且灵活的方式来定义和使用样式。全面定制：可以定制的范围广泛，包括颜色、字体、间距、边框、圆角等。通过调整这些元素，可以确保UI符合公司的视觉标准。定制步骤了解CSS变量：首先，了解如何在CSS中使用变量。查看Oinone现有的CSS变量列表，以了解哪些样式可以被定制。定义公司的UI规范：根据公司的品牌指南，定义一套UI规范。包括颜色方案、字体样式、元素尺寸等。应用自定义样式：在Oinone的样式表中，使用定义的CSS变量来覆盖默认样式。确保在适当的地方应用这些自定义样式。作用场景 Oinone平台提供了灵活的主题定制选项，包括内置的六套主题样式，涵盖深色和浅色模式以及不同的尺寸选项（大、中、小）。这些主题可以适应不同的业务需求和项目特性，同时提供了定制工具，方便用户根据公司的UI规范进行调整。下面是主题作用场景的详细说明：主题选项内置主题：六套主题：包括深色和浅色模式，以及大、中、小尺寸。用户可以通过系统设置功能轻松切换不同的主题。可定制性：提供CSS变量的JSON文件，方便用户下载和修改。允许用户根据具体需求定制颜色、字体、间距等样式变量。应用场景公司UI规范对齐：首先根据公司的UI规范调整一份基础主题。这有助于确保平台的外观与公司品牌一致。项目和业务适应性：在不同项目或业务场景中，可以基于公司UI规范进行微调。这提供了项目特定的灵活性，同时保持整体的品牌一致性。实施建议初始设置：初始时，选择一个接近公司标准的内置主题作为起点。通过系统设置功能体验不同的主题效果。定制和微调：下载并修改CSS变量的JSON文件，以符合公司的UI标准。对于特定项目或业务场景，根据需要进行进一步的微调。自定义主题自定义主题功能允许在Oinone平台上创建和应用独特的视觉风格，以适应特定的业务需求和品牌标准。以下是自定义主题的步骤和示例，用于指导如何在Oinone平台上实现这一功能。示例工程目录以下是需关注的工程目录示例，main.ts更新导入./theme：图3-5-7-24 自定义主题目录示例步骤 1: 创建主题定义主题变量：创建一个包含主题样式变量的JavaScript文件。例如，可以定义一个名为OinoneTheme的新主题，并设置相应的CSS变量。图3-5-7-24 自定义主题代码示例注册主题：使用registerTheme函数注册自定义主题。这个函数将新主题添加到可用主题列表中。步骤 2: 应用主题在主入口文件中引用：在main.ts文件中引入自定义主题，并在VueOioProvider配置中指定。图3-5-7-24 自定义主题应用配置示例效果图3-5-7-24 自定义黑色主题效果示例主题叠加： Oinone支持多个主题变量同时存在，后导入的主题变量会覆盖前面导入的。内置主题 Oinone平台内置了以下六个主题变量，你可以在自定义主题时参考或扩展它们： ‘default – large’ ‘default – medium’ ‘default – small’ ‘dark – large’ ‘dark – medium’ ‘dark – small’ 扩展变量在定义主题变量时，根据业务需求可以添加不存在的变量，作为变量的扩展。示例 { "custom-color": "#新的辅助颜色", "button-padding": "10px 20px", // …其他自定义变量 } 图3 – 5 – 7 – 24 扩展主题变量查找主题变量在Oinone平台上，通过DOM调试器查找主题变量是一种有效的方式，允许用户定位并获取相应组件的主题变量。以下是执行这一步骤的详细说明：步骤：使用DOM调试器：在浏览器中打开Oinone平台，进入需要查找主题变量的页面。使用浏览器的开发者工具或DOM调试器（通常可通过右键点击页面元素并选择“检查”打开）。选择目标组件：在DOM调试器中，通过选择器工具或直接点击页面上的组件，选中你想要查找主题变量的目标组件。查看样式和主题变量：在选中的组件上，浏览开发者工具中的“样式”或“计算”选项卡。可以通过查看样式表中的相关样式规则，找到组件所使用的主题变量。 4标识主题变量：主题变量通常以 –oio 为前缀。标识出你感兴趣的主题变量，记录下变量名和当前的取值。示例：假设你想查找某个按钮组件的主题变量，可以通过以下步骤：在DOM调试器中选中按钮组件。在“样式”或“计算”选项卡中查看相关样式规则。找到以 –oio 为前缀的主题变量，如 –oio-button-pirmary-background。记录该主题变量的取值，例如 #3498db。图3-5-7-24 DOM调试器查询主题变量

史, 昂
2024年5月23日
1.9K000
Oinone 7天入门到精通

翻译

翻译应用是管理翻译规则的应用，以模型为基础、维护字段的翻译值，支持导入、导出 1. 操作步骤 Step1：导出所有翻译项； Step2：线下翻译； Step3：导入翻译项； Step4：刷新远程资源； Step5：页面右上角可切换语言，查看翻译效果。 2. 新增翻译翻译是具体到模型字段，其中需要区分出是否字典；源语言、目标语言，是在资源中维护的语言，可在资源中维护需要翻译的语言；翻译项则是模型字段，默认翻译项为激活状态，关闭后维护的翻译项无效。 3. 导出、导入不勾选导出：导出所有需要翻译的翻译项，包括模块、字段，源术语、翻译值等，其中如果已经翻译过的内容，会体现在翻译值中；勾选导出：导出勾选模型的翻译项。导入：导入翻译项，平台会根据模型拆分为多条数据。 4. 刷新远程资源导入翻译项后，点击“刷新远程资源”按钮。 5. 查看翻译内容页面右上角切换语言，查看翻译效果。

史, 昂
2024年6月20日
1.4K000
Oinone 7天入门到精通

7.4 Oinone的低无一体

基础介绍前面我们学习了基于低代码开发平台进行快速开发，以及通过oinone的设计器进行零代码开发两种模式。当然低无一体不是简单地说两种模式还指：低无两种模式可以融合。在做核心产品的时候以低代码开发为主，以无代码为辅助。见低代码开发的基础入门篇中设计器的结合一文在做实施或临时性需求则是以无代码为主，以低代码为辅助本文主要介绍第二种模式，它是www.oinone.top官网在SaaS模式下的专有特性。满足客户安装标品后通过设计器进行适应性修改后，但对于一些特殊场景还是需要通过代码进行完善或开发在该模式下，我们提供了jar模式和代码托管两种模式，客户只要选择需要进行代码开发的模块，点击生产SDK，下载扩展工程模版，按Oinone低代码开发平台规范进行研发，后上传扩展工程即可。操作手册低无一体这个模块是连接无代码设计器的桥梁，可以为一个模块或应用设计低代码的逻辑，可以在界面设计器或流程设计器中使用低代码的逻辑。 1.选择模块首先需要在下拉单选中选择需要低代码的模块或应用。下拉选中只展示在「应用中心」中已安装的模块或应用，可前往「应用中心」安装后继续低代码操作。选择模块中不展示系统的基础模块或应用，因为这些模块或应用无法自定义模型。 2.模块信息模块信息展示的是选择模块的基础信息：模块名称、模块编码、模块作者、模块版本、包的前缀、工程模板下载地址，下载地址仅在上传jar包模式时候用到。 3.低无一体操作低无一体支持了两种使用模式：上传jar包模式、源码托管模式。上传控制工程或创建研发分支动作完成会生成一条数据，可以对单条数据进行部署、卸载、修改、删除。 3.1 上传jar包模式在这个模式下，需要做四步动作。生成SDK，点击按钮之后，会把模块的当前模型状态打成一个SDK包，SDK最新生成时间更新。当模型变更但未生成SDK时，使用低无一体就会出错，请重新生成SDK并修改扩展工程。生成SDK通常需要1分钟左右，若第一次使用低无一体模块，可能需要更长时间，请耐心等待。下载扩展工程模板，点击按钮之后，会将SDK包和工程模板生成一个下载链接，复制模块信息中的卸载地址打开即可下载。技术人员在工程模板的基础上写低代码逻辑。上传扩展工程，点击按钮展开弹窗，在弹窗中设置标签、备注，并将最终的jar包上传，完成上传之后表格中就会新增一条数据。上传jar包模式下，模板工程中代码需要注意的点参考下图： 3.2 源码托管模式在这个模式下，需要做三步动作。生成SDK，点击按钮之后，会把模块的当前模型状态打成一个SDK包，SDK最新生成时间更新。当模型变更但未生成SDK时，使用低无一体就会出错，请重新生成SDK并修改扩展工程。生成SDK通常需要1分钟左右，若第一次使用低无一体模块，可能需要更长时间，请耐心等待。创建研发分支，点击按钮展开弹窗。首次创建时需要设置git账号名称、git账号邮箱来创建一个账号，另外在弹窗中设置分支名称、标签、备注，完成创建后表格中就会新增一条数据。通过表格中的Gitlab地址，技术人员写低代码逻辑。 3.3 行内操作部署：工程状态为未部署、部署失败、已卸载时展示行内的部署按钮，点击之后进行部署，工程状态变为部署中。部署过程大致需要5-10分钟，请耐心等待。部署完成之后，会生成一个新的模块：“原模块名称”扩展工程。卸载：工程状态为已部署时展示行内的卸载按钮，点击之后会卸载这个已部署的工程，工程状态变为已卸载。同一模块只能有一个已部署的工程（与选择的模式无关），若需要使用新的工程请先卸载已部署的工程。修改：行内操作修改按钮始终展示，只允许修改标签、备注。删除：工程状态为未部署、部署失败、已卸载时展示行内的删除按钮，点击之后删除这一条工程记录。 3.4 部署效果低无一体部署成功之后，可以进入对应模块的模型页面中使用提交动作来使用低代码逻辑，也可以在流程设计器中的引用逻辑节点中使用低代码逻辑。

史, 昂
2024年5月23日
3.1K000
Oinone 7天入门到精通

应用审计

1. 整体介绍应用审计是基于模型字段记录用户操作留痕记录，通过定义审计规则，平台基于审计规则订阅的字段记录形成日志。平台名词概念：应用日志：针对已订阅的审计规则记录用户操作信息，是用户在各应用中操作行为留痕记录。审计规则：业务审计中，数据变化订阅记录的规则。操作入口：应用中心——业务审计应用。 2. 审计规则审计规则是指定义审计过程订阅数据变化的信息，根据模型、订阅到具体字段内容变化形成应用日志。如订阅销售订单的备注，销售订单S20231001888，订单备注【尽快发货】，备注修改为【需易碎品包装】，审计规则为：销售订单模型，订阅【备注】。操作包括：新增、编辑、删除。 2.1. 新增新增时，定义审计规则名称，选择需要审计的模型，指定需要订阅的字段信息，同时可以指定关联关系的字段。需要注意：每个模型仅限定义单条审计规则。 2.2. 编辑编辑同新增操作，不做赘述。 2.3. 删除删除规则后，平台将不再监听对应数据的变更日志，请慎重删除。 3. 应用日志应用日志是针对已订阅的审计规则记录用户操作信息。记录操作用户、IP、登录设备、位置、订阅的字段变化内容。应用日志详情 4. 业务表达 4.1. 展示效果表格-行操作—日志记录详情—日志记录 4.2. 操作步骤 Step1：在应用中心，需要维护业务应用依赖业务审计应用；操作入口：应用中心，找到业务应用——编辑，依赖模块选择业务审计。 Step2：配置审计规则；操作入口：业务审计应用——审计规则——新增规则。 Step2：界面设计器配置日志记录；操作入口：界面设计器，找到需要配置的页面——模型组件，将动作区的日志记录拖动到页面中。

史, 昂
2024年1月20日
1.5K000