3.5.2.3 构建View的Layout

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

在日常需求中也经常需要调整Layout的情况，如出现树表结构（左树右表、级联），我们则需要通过修改View的Layout来完成。今天就带您学习下Layout的自定义

第一个表格Layout

如果我们想去除表格视图区域的搜索区、ActionBar（操作区），就可以为视图自定义一个简单的Layout就行啦

Step1 新建一个表格的Layout

在views/demo_core/layout路径下增加一个名为sample_table_layout.xml文件，name设置为sampleTableLayout

<view type="TABLE" name="sampleTableLayout">
<!--    <view type="SEARCH">-->
<!--        <pack widget="fieldset">-->
<!--            <element widget="search" slot="search" slotSupport="field"/>-->
<!--        </pack>-->
<!--    </view>-->
    <pack widget="fieldset" style="height: 100%" wrapperStyle="height: 100%">
        <pack widget="row" style="height: 100%; flex-direction: column">
<!--            <pack widget="col" mode="full" style="flex: 0 0 auto">-->
<!--                <element widget="actionBar" slot="actionBar" slotSupport="action">-->
<!--                    <xslot name="actions" slotSupport="action" />-->
<!--                </element>-->
<!--            </pack>-->
            <pack widget="col" mode="full" style="min-height: 234px">
                <element widget="table" slot="table" slotSupport="field">
                    <xslot name="fields" slotSupport="field" />
                    <element widget="rowAction" slot="rowActions" slotSupport="action"/>
                </element>
            </pack>
        </pack>
    </pack>
</view>

图3-5-2-27 新建一个表格的Layout

Step2 修改宠物达人自定义表格Template

在view标签上增加layout属性值为"sampleTableLayout"

<view name="tableView" model="demo.PetTalent" cols="1" type="TABLE" enableSequence="true" layout="sampleTableLayout">
……省略其他
</view>

图3-5-2-28 修改宠物达人自定义表格Template

Step3 重启看效果

图3-5-2-29 示例效果

Step4 修改宠物达人自定义表格Template

去除在view标签上的layout属性配置，让其回复正常

第一个树表Layout

本节以“给商品管理页面以树表的方式增加商品类目过滤”为例

Step1 增加商品类目模型

增加PetItemCategory模型继承CodeModel，新增两个字段定义name和parent，其中parent字段M2O关联自身模型，非必填字段（如字段值为空即为一级类目）：

package pro.shushi.pamirs.demo.api.model;

import pro.shushi.pamirs.meta.annotation.Field;
import pro.shushi.pamirs.meta.annotation.Model;
import pro.shushi.pamirs.meta.base.common.CodeModel;

@Model.model(PetItemCategory.MODEL_MODEL)
@Model(displayName = "宠物商品类目",summary="宠物商品类目",labelFields={"name"})
public class PetItemCategory extends CodeModel {

    public static final String MODEL_MODEL="demo.PetItemCategory";
    @Field(displayName = "类目名称",required = true)
    private String name;

    @Field(displayName = "父类目")
    @Field.many2one
    private PetItemCategory parent;
}

图3-5-2-30 增加商品类目模型

Step2 修改自定义商品模型

为商品模型PetItem增加一个category字段m2o关联PetItemCategory

@Field(displayName = "类目")
@Field.many2one
private PetItemCategory category;

图3-5-2-31 修改宠物商品模型

Step3 新增名为treeTableLayout的Layout

在views/demo_core/layout路径下增加一个名为tree_table_layout.xml文件，name设置为treeTableLayout

图3-5-2-32 新增名为treeTableLayout的Layout

<view type="TABLE" name="treeTableLayout">
  <view type="SEARCH">
    <pack widget="fieldset">
      <element widget="search" slot="search" slotSupport="field"/>
    </pack>
  </view>
  <pack widget="fieldset" style="height: 100%" wrapperStyle="height: 100%">
    <pack widget="row" wrap="false" style="height: 100%">
      <pack widget="col" mode="full" style="min-width: 257px; max-width: 257px">
        <pack widget="fieldset" style="height: 100%" wrapperStyle="height: 100%; padding: 24px 16px">
          <pack widget="col" style="height: 100%">
            <element widget="tree" slot="tree" style="height: 100%" />
          </pack>
        </pack>
      </pack>
      <pack widget="col" mode="full" style="min-width: 400px">
        <pack widget="row" style="height: 100%; flex-direction: column">
          <pack widget="col" mode="full" style="width: 100%; flex: 0 0 auto">
            <element widget="actionBar" slot="actionBar" slotSupport="action">
              <xslot name="actions" slotSupport="action" />
            </element>
          </pack>
          <pack widget="col" mode="full" style="width: 100%; min-height: 345px">
            <element widget="table" slot="table" slotSupport="field">
              <xslot name="fields" slotSupport="field" />
              <element widget="rowAction" slot="rowActions" slotSupport="action" />
            </element>
          </pack>
        </pack>
      </pack>
    </pack>
  </pack>
</view>

图3-5-2-33 treeTableLayout的示例代码

Step4 自定义商品管理的Template

在views/demo_core/template路径下增加一个名为pet_item_table.xml文件
跟普通自定义template的区别在于

a. 配置layout属性为【treeTableLayout】跟前面layout定义一致

b. 配置了widget为tree的template节点，node可以配置多个，node配置说明如下

ⅰ. model，模型编码，必填。

ⅱ. label，数据标题，支持表达式，必填。

ⅲ. labelFields，数据标题中使用的字段列表，必填。

ⅳ. references，层级关联字段，第一层无效，其他层必填。模型编码#字段。

ⅴ. selfReferences，自关联字段，模型编码#字段。

ⅵ. search，点击搜索字段，必须使用主表格字段。模型编码#字段。

ⅶ. filter，层级过滤条件。模型编码#字段。

以上所有使用#拼接的属性配置，与model一致的情况下，均可以省略模型编码。

图3-5-2-34 pet_item_table.xml示例代码图

<view name="tableView" model="demo.PetItem"  type="TABLE" cols="1" enableSequence="false" layout="treeTableLayout">
  <template slot="actions" autoFill="true"/>
  <template slot="rowActions" autoFill="true"/>
  <template slot="fields">
    <field invisible="true" priority="5" data="id" label="ID" readonly="true"/>
    <field priority="90" data="code" label="编码"/>
    <field priority="101" data="itemName" label="商品名称"/>
    <field priority="101" data="dataStatus" label="数据状态">
      <options>
        <option name="DRAFT" displayName="草稿" value="DRAFT" state="ACTIVE"/>
        <option name="NOT_ENABLED" displayName="未启用" value="NOT_ENABLED" state="ACTIVE"/>
        <option name="ENABLED" displayName="已启用" value="ENABLED" state="ACTIVE"/>
        <option name="DISABLED" displayName="已禁用" value="DISABLED" state="ACTIVE"/>
      </options>
    </field>
    <field priority="102" data="price" label="商品价格"/>
    <field priority="103" data="shop" label="店铺">
      <options>
        <option references="demo.PetShop" referencesType="STORE" referencesLabelFields="shopName">
          <field name="shopName" data="shopName" ttype="STRING"/>
        </option>
      </options>
    </field>
    <field priority="104" data="shopId" label="店铺id"/>
    <field priority="105" data="type" label="品种">
      <options>
        <option references="demo.PetType" referencesType="STORE" referencesLabelFields="name">
          <field name="name" data="name" ttype="STRING"/>
        </option>
      </options>
    </field>
    <field priority="106" data="typeId" label="品种类型"/>
    <field priority="107" data="petItemDetails" label="详情">
      <options>
        <option references="demo.PetItemDetail" referencesType="TRANSIENT" referencesLabelFields="remark">
          <field name="remark" data="remark" ttype="STRING"/>
        </option>
      </options>
    </field>
    <field priority="108" data="tags" label="商品标签"/>
    <field priority="109" data="petTalents" label="推荐达人">
      <options>
        <option references="demo.PetTalent" referencesType="STORE" referencesLabelFields="name">
          <field name="name" data="name" ttype="STRING"/>
        </option>
      </options>
    </field>
    <field priority="200" data="createDate" label="创建时间" readonly="true"/>
    <field priority="210" data="writeDate" label="更新时间" readonly="true"/>
    <field priority="220" data="createUid" label="创建人id"/>
    <field priority="230" data="writeUid" label="更新人id"/>
  </template>
  <template slot="search" autoFill="true" cols="4"/>
  <template enableSearch="true" slot="tree" style="height: 100%" widget="tree">
    <nodes>
<!--       <node label="activeRecord.name" labelFields="name" model="demo.PetItemCategory" search="demo.PetItem#category" selfReferences="parent"/> -->
           <node label="activeRecord.name" labelFields="name" model="demo.PetItemCategory" search="demo.PetItem#category" selfReferences="demo.PetItemCategory#parent"/>
     </nodes>
   </template>
 </view>

图3-5-2-35 pet_item_table.xml示例代码

Step5 为商品类目增加管理入口

修改DemoMenus类，增加类目管理菜单

图3-5-2-36 增加类目管理菜单

@UxMenu("类目管理")@UxRoute(PetItemCategory.MODEL_MODEL) class PetItemCategoryMenu{
}

图3-5-2-37 增加类目管理菜单代码

Step6 重启看效果

进入类目管理页面，新增商品类目数据

图3-5-2-38 示例效果

进入商品管理页面，找一行数据修改其类目字段，然后再点击左边树看过滤效果

图3-5-2-39 示例效果

第一个级联Layout

本节以“给商品管理页面以级联的方式增加商品类目过滤”为例，该例子中左边级联项由多个模型组成

Step1 增加商品类目类型模型

增加PetItemCategoryType模型集成CodeModel，新增两个字段定义name

package pro.shushi.pamirs.demo.api.model;

import pro.shushi.pamirs.meta.annotation.Field;
import pro.shushi.pamirs.meta.annotation.Model;
import pro.shushi.pamirs.meta.base.common.CodeModel;

@Model.model(PetItemCategoryType.MODEL_MODEL)
@Model(displayName = "宠物商品类目类型",summary="宠物商品类目类型",labelFields={"name"})
public class PetItemCategoryType extends CodeModel {

    public static final String MODEL_MODEL="demo.PetItemCategoryType";
    @Field(displayName = "类目类型名称",required = true)
    private String name;

}

图3-5-2-40 增加PetItemCategoryType模型集成CodeModel

Step2 修改商品类目

为商品类目模型PetItemCategory增加一个type字段m2o关联PetItemCategoryType

@Field(displayName = "类目类型")
@Field.many2one
private PetItemCategoryType type;

图3-5-2-41 为商品类目模型PetItemCategory增加一个type字段

Step3 新增名为cascaderTableLayout的Layout

在views/demo_core/layout路径下增加一个名为cascader_table_layout.xml文件

图3-5-2-42 新增名为cascaderTableLayout的Layout

<view type="TABLE" name="cascaderTableLayout">
<view type="SEARCH">
    <pack widget="fieldset">
        <element widget="search" slot="search" slotSupport="field"/>
    </pack>
</view>
<pack widget="fieldset" style="height: 100%" wrapperStyle="height: 100%; overflow: auto">
    <pack widget="row" wrap="false" style="height: 100%">
        <pack widget="col" mode="full" style="flex: unset">
            <element widget="card-cascader" slot="cardCascader" style="height: 100%" />
        </pack>
        <pack widget="col" mode="full" style="min-width: 564px">
            <pack widget="row" style="height: 100%; flex-direction: column">
                <pack widget="col" mode="full" style="width: 100%; flex: 0 0 auto">
                    <element widget="actionBar" slot="actionBar" slotSupport="action">
                        <xslot name="actions" slotSupport="action" />
                    </element>
                </pack>
                <pack widget="col" mode="full" style="width: 100%; min-height: 345px">
                    <element widget="table" slot="table" slotSupport="field">
                        <xslot name="fields" slotSupport="field" />
                        <element widget="rowAction" slot="rowActions" slotSupport="action"/>
                    </element>
                </pack>
            </pack>
        </pack>
    </pack>
</pack>
</view>

图3-5-2-43 代码说明

Step4 修改商品管理的Template

修改在views/demo_core/template路径下名为pet_item_table.xml的文件

a. 配置layout属性为【cascaderTableLayout】跟前面layout定义一致

b. 配置了widget为card-cascader的template节点，node可以配置多个，node配置跟树表的配置一致

<view name="tableView" model="demo.PetItem"  type="TABLE" cols="1" enableSequence="false" layout="cascaderTableLayout">
  <template slot="actions" autoFill="true"/>
  <template slot="rowActions" autoFill="true"/>
  <template slot="fields">
    <field invisible="true" priority="5" data="id" label="ID" readonly="true"/>
    <field priority="90" data="code" label="编码"/>
    <field priority="101" data="itemName" label="商品名称"/>
    <field priority="101" data="dataStatus" label="数据状态">
      <options>
        <option name="DRAFT" displayName="草稿" value="DRAFT" state="ACTIVE"/>
        <option name="NOT_ENABLED" displayName="未启用" value="NOT_ENABLED" state="ACTIVE"/>
        <option name="ENABLED" displayName="已启用" value="ENABLED" state="ACTIVE"/>
        <option name="DISABLED" displayName="已禁用" value="DISABLED" state="ACTIVE"/>
      </options>
    </field>
    <field priority="102" data="price" label="商品价格"/>
    <field priority="103" data="shop" label="店铺">
      <options>
        <option references="demo.PetShop" referencesType="STORE" referencesLabelFields="shopName">
          <field name="shopName" data="shopName" ttype="STRING"/>
        </option>
      </options>
    </field>
    <field priority="104" data="shopId" label="店铺id"/>
    <field priority="105" data="type" label="品种">
      <options>
        <option references="demo.PetType" referencesType="STORE" referencesLabelFields="name">
          <field name="name" data="name" ttype="STRING"/>
        </option>
      </options>
    </field>
    <field priority="106" data="typeId" label="品种类型"/>
    <field priority="107" data="petItemDetails" label="详情">
      <options>
        <option references="demo.PetItemDetail" referencesType="TRANSIENT" referencesLabelFields="remark">
          <field name="remark" data="remark" ttype="STRING"/>
        </option>
      </options>
    </field>
    <field priority="108" data="tags" label="商品标签"/>
    <field priority="109" data="petTalents" label="推荐达人">
      <options>
        <option references="demo.PetTalent" referencesType="STORE" referencesLabelFields="name">
          <field name="name" data="name" ttype="STRING"/>
        </option>
      </options>
    </field>
    <field priority="200" data="createDate" label="创建时间" readonly="true"/>
    <field priority="210" data="writeDate" label="更新时间" readonly="true"/>
    <field priority="220" data="createUid" label="创建人id"/>
    <field priority="230" data="writeUid" label="更新人id"/>
  </template>
  <template slot="search" autoFill="true" cols="4"/>
  <template enableSearch="true" slot="cardCascader" style="height: 100%" widget="card-cascader">
      <nodes>
          <node label="activeRecord.name" title="类目类型" labelFields="name" model="demo.PetItemCategoryType" />
          <node label="activeRecord.name" title="类目" labelFields="name" model="demo.PetItemCategory" search="demo.PetItem#category" references="demo.PetItemCategory#type" selfReferences="demo.PetItemCategory#parent"/>
      </nodes>
  </template>
</view>

图3-5-2-44 修改商品管理的Template

Step5 为商品类目类型增加管理入口

图3-5-2-45 为商品类目类型增加管理入口

@UxMenu("类目类型")@UxRoute(PetItemCategoryType.MODEL_MODEL) class PetItemCategoryTypeMenu{
}

图3-5-2-46 代码示例

Step6 重启看效果

进入类目类型管理页面，新增商品类目类型数据

图3-5-2-47 进入类目类型管理页面

进入类目管理页面，修改一级类目的类型

图3-5-2-48 修改一级类目的类型

进入商品管理页面，找一行数据修改其类目字段，然后再点击左边级联项看过滤效果

图3-5-2-49 进入商品管理页面

树表与级联的更多配置

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

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

Oinone 7天从入门到精通

Like (0)

史, 昂数式管理员

0 0

3.5.3 Action的类型

Previous 2024年5月23日 am9:24

3.5.2.2 构建View的Template

Next 2024年5月23日 am9:26

Oinone 7天入门到精通

3.3.10 字段类型之关系描述的特殊场景

在3.3.9【字段类型之关系与引用】一文中已经描述了各种关系字段的常规写法，还有一些特殊场景如：关系映射中存在常量，或者M2M中间表是大于两个字段构成。举例说明关系字段-高级用法场景描述 PetTalent模型增加talentType字段，PetItem与PetTalent的多对多关系增加talentType（达人类型），PetItemRelPetTalent 中间表维护petItemId、petTalentId以及talentType，PetDogItem和PetCatItem分别重写petTalents 字段，关系中增加常量描述。示意图如下实际操作步骤： Step1 新增 TalentTypeEnum package pro.shushi.pamirs.demo.api.enumeration; import pro.shushi.pamirs.meta.annotation.Dict; import pro.shushi.pamirs.meta.common.enmu.BaseEnum; @Dict(dictionary = TalentTypeEnum.DICTIONARY,displayName = "达人类型") public class TalentTypeEnum extends BaseEnum<TalentTypeEnum,Integer> { public static final String DICTIONARY ="demo.TalentTypeEnum"; public final static TalentTypeEnum DOG =create("DOG",1,"狗达人","狗达人"); public final static TalentTypeEnum CAT =create("CAT",2,"猫达人","猫达人"); } Step2 PetTalent模型增加talentType字段 package pro.shushi.pamirs.demo.api.model; import pro.shushi.pamirs.demo.api.enumeration.TalentTypeEnum; import pro.shushi.pamirs.meta.annotation.Field; import pro.shushi.pamirs.meta.annotation.Model; @Model.model(PetTalent.MODEL_MODEL) @Model(displayName = "宠物达人",summary="宠物达人",labelFields ={"name"}) public class PetTalent extends AbstractDemoIdModel{ public static final String MODEL_MODEL="demo.PetTalent"; @Field(displayName = "达人") private String name; @Field(displayName = "达人类型") private TalentTypeEnum talentType; } Step3 修改PetItem的petTalents字段，在关系描述中增加talentType（达人类型） @Field.many2many(relationFields = {"petItemId"},referenceFields = {"petTalentId","talentType"},through = "PetItemRelPetTalent") @Field.Relation(relationFields = {"id"}, referenceFields = {"id","talentType"}) @Field(displayName = "推荐达人",summary = "推荐该商品的达人们") private List<PetTalent> petTalents; Step4 PetDogItem增加petTalents字段，重写父类PetItem的关系描述 talentType配置为常量，填入枚举的值增加domain描述用户页面选择的时候自动过滤出特定类型的达人，RSQL用枚举的name @Field.many2many(relationFields = {"petItemId"},referenceFields = {"petTalentId","talentType"},through = "PetItemRelPetTalent") @Field.Relation(relationFields = {"id"}, referenceFields = {"id","talentType"}) @Field(displayName = "推荐达人",summary = "推荐该商品的达人们") private List<PetTalent> petTalents; Step5 PetCatItem增加petTalents字段，重写父类PetItem的关系描述 talentType配置为常量，填入枚举的值增加domain描述用户页面选择的时候自动过滤出特定类型的达人，RSQL用枚举的name @Field(displayName = "推荐达人") @Field.many2many( through = "PetItemRelPetTalent", relationFields = {"petItemId"}, referenceFields = {"petTalentId","talentType"} ) @Field.Relation(relationFields = {"id"}, referenceFields = {"id", "#2#"}, domain = " talentType == CAT") private List<PetTalent> petTalents; Step6 清除中间表demo_core_pet_item_rel_pet_talent的数据记录清除PetItem与PetTalent的多对多中间表demo_core_pet_item_rel_pet_talent的数据记录 Step7 重启看效果修改达人记录，选择不同达人类型 PetItem、PetCatItem、PetDogItem不同的交互页面

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

2.4.3 Oinone独特性之低无一体

当今企业软件开发行业，低代码和无代码已经成为热门话题。它们的优势很明显：加速软件开发周期、减少代码开发时间、降低开发成本、易于维护等等。而 Oinone 作为一个低无一体的开发平台，更是在这些优势上做出了巨大的创新。技术亮点低代码-在不改变研发习惯的前提下，提升效率降低难度（如下图2-15所示）一、提高专业开发人员效率低代码开发模式大大降低了繁琐、重复的工作，模型定义完后，数据 API、数据管理器、基础管理的界面都不需要再进行开发。同时，低代码模式让分布式微服务架构的系统开发变得简单，研发人员不需要考虑分布式部署能力和大数据能力，也不需要去关心一些业务无关的通用能力，如权限、导入导出、国际化翻译、消息、审计等。这样，开发人员可以专注于业务研发，从而大幅提高开发效率。二、提升系统扩展性在研发标品的时候，低代码模式让开发人员不再需要关心系统的扩展性。与传统模式不同，低代码模式更加注重元数据的管理，这样就可以更好地保障系统扩展性。三、保留研发人员习惯 Oinone 平台非常开放，满足开发人员的各种习惯，比如原有的 IDE 环境、熟悉的 Spring Boot 工程结构等。而且在 Oinone 的低代码模式下，研发人员还可以通过无代码方式，在线可视化地修改应用。这样，即使在使用低代码模式的情况下，开发人员也可以保留原有的习惯，提升开发效率。四、提供更加开放的解决方案 Oinone 提供了非常开放的解决方案，让开发人员可以自由定制和组合各种功能。当行业出现特殊的功能需求时，开发人员可以整合成平台组件，并集成到应用中。Oinone的低代码模式具有高度的开放性和灵活性，这使得它在与其他低代码平台的比较中具有明显的优势。相比其他低代码平台，Oinone不会在无法满足特定需求的情况下限制开发人员的创造力（如下图2-16所示）。图2-15 Oinone低代码特性介绍图2-16 Oinone低代码的被集成特性示意图无代码-五大设计器覆盖研发方方面面，让业务、实施也能参与它是LCDP的产品化呈现，是冰山露在外面大家看得到的，核心还是在LCDP本身。这部分实时在演进迭代，如您有想体验最新版本，可以在Oinone官网：https://www.oinone.top注册。设计器说明产品展示模型设计器 1.以模型为驱动，当有模型、数据字典、数据编码等设计功能，我们就可以完整地定义产品数据模型，模型设计器默认整体呈现区别于普通ER图，以当前模型为核心视角展开，可以点击关联模型切换主视角。2.多种模式可切换：专家与经典切换，图与表模式的切换界面设计器 1.界面设计器旨在帮助用户快速搭建页面；2.所见即所得和根据不同视图类型设计契合的搭建交互就变得尤为重要；3.多端页面设计能力。流程设计器 1.为业务流程和审批流程提供可自动执行的流程模型，通过定义流转过程中的各个动作、规则，以此实现流程自动化；2.流程可以跨应用设计，不同应用的模型之间可以通过同一流程执行。逻辑设计器 1.组件化、可视化逻辑编排，逻辑动态变更、动态管理，实施验证。数据可视化 1.从内部系统模型获取数据内容后，根据业务需求自定义图表，目的是为企业提供更高效的数据分析工具；2.可以智取业务系统模型，系统自动解析选择的模型、接口、表格中的字段后进行数据分析；3.降低对数据分析人员的研发能力要求，提升数据分析的效率表2-3 Oinone无代码-五大设计器简述真正的低无一体，体现在一体化的融合能力上在开发核心产品时，我们主要采用低代码开发，辅以无代码的开发方式。你可以参考我们的低代码开发基础入门教程中3.5.5【设计器的结合】的文章。而在实施或者处理临时需求时，我们主要采用无代码的开发方式，低代码作为辅助。这种模式比较特殊，只在SaaS模式下提供。如果你发现某个客户个性化部分无法通过无代码设计器完成，我们提供了一个“低无一体”模块，可以反向生成API代码，生成对应的扩展工程和API依赖包，再由专业研发人员基于扩展工程，利用API包进行开发并上传至平台，可以参考关于7.4【Oinone的低无一体】的文章。场景融合形式具体操作标准产品以低代码开发为主，以无代码为辅助标品开发时结合无代码设计器来完成页面开发，可以把设计后的页面元数据装载为标准产品的一部分。详细教程见：3.5.5【设计器的结合】一文项目交付以无代码为主，以低代码为辅助当有特殊需求设计器无法支持时，则可以通过低无一体应用的代码模式来完成。支持了两种使用模式：上传jar包模式、源码托管模式。详细教程见：7.4【Oinone的低无一体】一文表2-4 不同场景适配方式说明实现原理本章节我们将从以下三个方面来解读Oinone的低无一体。一：低无一体的设计原则及好处：真正的低无一体平台应该确保标准产品迭代与个性化保持独立，让软件企业具备为客户提供在线化的快速响应、个性化定制、持续更新等服务的能力，让企业客户能够真正自主做到敏捷响应和快速创新。所以Oinone的元数据融合方案跟其他平台有所区别（如下图2-17所示）。图2-17 Oinone与其他平台的元数据融合对比图二：低无一体中低与无的关系：无代码是低代码平台的图形化呈现，是低代码的一个子集，它将无限接近低代码的能力，同时也将成为低代码平台的必备特征，是通过低代码开发的标准产品的二开配套工具。三：低无一体中低与无的定位：通过表2-3可以看出，低代码和无代码在Oinone的体系中相互融合，共同构成了一个完整的低无一体模式，提供更加开放、灵活和可扩展的解决方案，让用户能够更加轻松地完成开发和实施。低代码模式无代码模式用户群体专业研发产品经理、需求分析师、直接业务人员支撑场景企业全场景软件以及二开企业全场景软件以及二开，专业化场景比较高的则需低代码支持核心能力不改变研发习惯，提升研发效率可视化编程无需专业编程语言知识核心定位开发标准模块标准模块的二开无标品支撑场景的新模块开发表2-3 Oinone低代码开发平台的两种开发模式对比

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

4.4 Oinone的分布式体验进阶

在分布式开发中，每个人基本只负责自己相关的模块开发。所以每个研发就都需要一个环境，比如一般公司会有（N个）项目环境、1个日常环境、1个预发环境、1个线上环境。在整项目环境的时候就特别麻烦，oinone的好处是在于每个研发可以通过boot工程把需要涉及的模块都启动在一个jvm中进行开发，并不依赖任何环境，在项目开发中，特别方便。但当公司系统膨胀到一定规模，大到很多人都不知道有哪些模块，或者公司出于安全策略考虑，或者因为启动速度的原因（毕竟模块多了启动的速度也会降下来）。本文就给大家介绍oinone与经典分布式组织模式的兼容性一、模块启动的最小集我们来改造SecondModule模块，让该模块的用户权限相关都远程走DemoModule Step1 修改SecondModule的启动工程application-dev.yml文件除了base、second_core两个模块保留，其他模块都去除了。 pamirs: boot: init: true sync: true modules: – base – second_core 图4-4-1 SecondModule的application-dev.yml仅配置两个模块 Step2 去除boot工程的依赖去除SecondModule启动工程的pom依赖 <!– <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-resource-core</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-user-core</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-auth-core</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-message-core</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-international</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-business-core</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-apps-core</artifactId> </dependency> –> 图4-4-2 去除boot工程多余的依赖 Step3 重启SecondModule 这【远程模型】和【远程代理】均能访问正常图4-4-3 远程模型和远程代理菜单均能访问正常 Step4 SecondModule增加对模块依赖我们让SecondModule增加用户和权限模块的依赖，期待效果是：SecondModule会对用户和权限的访问都会走Dome应用，因为Demo模块的启动工程中包含了user、auth模块。修改pamirs-second-api的pom文件增加对user和auth的api包依赖 <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-user-api</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-auth-api</artifactId> </dependency> 图4-4-4 修改pamirs-second-api的pom文件修改SecondModule类，增加依赖定义 @Module( dependencies = {ModuleConstants.MODULE_BASE, AuthModule.MODULE_MODULE, UserModule.MODULE_MODULE} ) 图4-4-5 配置SecondModule的依赖 Step5 修改RemoteTestModel模型为RemoteTestModel模型增加user字段 @Field.many2one @Field(displayName = "用户") private PamirsUser user; 图4-4-6 为RemoteTestModel模型增加user字段 Step6 重启系统看效果 mvn install pamirs-second工程，因为需要让pamirs-demo工程能依赖到最新的pamirs-second-api包重启pamirs-second和pamirs-demo 两个页面都正常图4-4-7 示例效果一图4-4-8 示例效果二二、PmetaOnline的NEVER指令（开发时环境共享）我们在4.1.2【模块之启动指令】一文中介绍过 “-PmetaOnline指令”，该参数用于设置元数据在线的方式，如果不使用该参数，则profile属性的默认值请参考服务启动可选项。-PmetaOnline参数可选项为： NEVER – 不持久化元数据，会将pamirs.boot.options中的updateModule、reloadMeta和updateMeta属性设置为false MODULE – 只注册模块信息，会将pamirs.boot.options中的updateModule属性设置为true，reloadMeta和updateMeta属性设置为false ALL – 注册持久化所有元数据，会将pamirs.boot.options中的updateModule、reloadMeta和updateMeta属性设置为true oinone的默认模式下元数据都是注册持久化到DB的，但当我们在分布式场景下新开发模块或者对已有模块进行本地化开发时，做为开发阶段我们肯定是希望复用原有环境，但不对原有环境照成影响。那么-PmetaOnline就很有意义。让我们还没有经过开发自测的代码产生的元数据仅限于开发本地环境，而不是直接影响整个大的项目环境 PmetaOnline指令设置为NEVER（举例） Step1 为DemoCore新增一个DevModel模型 package pro.shushi.pamirs.demo.api.model; import pro.shushi.pamirs.meta.annotation.Field; import pro.shushi.pamirs.meta.annotation.Model; @Model.model(DevModel.MODEL_MODEL) @Model(displayName = "开发阶段模型",summary="开发阶段模型，当PmetaOnline指令设置为NEVER时，本地正常启动但元数据不落库",labelFields={"name"}) public class DevModel extends AbstractDemoCodeModel{ public static final String MODEL_MODEL="demo.DevModel"; @Field(displayName = "名称") private String name; } 图4-4-9 为DemoCore新增一个DevModel模型 Step2 为DevModel模型配置菜单 @UxMenu("开发模型")@UxRoute(DevModel.MODEL_MODEL) class DevModelProxyMenu{} 图4-4-10 为DevModel模型配置菜单 Step3 启动Demo应用时指定-PmetaOnline 图4-4-11 启动Demo应用时指定-PmetaOnline Step4 重启系统看效果查看元数据图4-4-12 DB查看元数据变化菜单与页面能正常操作图4-4-13 开发模型菜单可正常操作图4-4-14 开发模型详情页面可正常操作 Step5 Never模式需注意的事项业务库需设定为本地开发库，这样才不会影响公共环境，因为对库表结构的修改还是会正常进行的如果不小心影响了公共环境，需要对公共环境进行重启恢复系统新产生的元数据（如：例子中的【开发模式】菜单）不受权限管控三、分布式开发约定设计约定跨模块的存储模型间继承，在部署时需要跟依赖模块配置相同数据源。这个涉及模块规划问题，比如业务上的user扩展模块，需要跟user模块一起部署。…

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

3.5.5 设计器的结合（改）

在页面开发的时候，直接通过前端组件和视图xml进行开发虽然开放性是很大的、但我们经常会忘记视图的配置属性，同时用xml配置的页面因为缺少设计数据，导致无法直接在设计器中复制，自定义页面得从头设计。今天就带大家一起来学习如何结合无代码设计器来完成页面开发，并把设计后的页面元数据装载为标准产品的一部分。 1 安装Docker 如果没有Docker的话，请自行到官网下载：https://www.docker.com/get-started/ 2 下载Docker 镜像，并导入镜像 Step2.1 镜像下载 v.4.6.28.3-allinone-full 版本说明前后端以及中间件一体镜像地址 docker pull harbor.oinone.top/oinone/designer:4.6.28.3-allinone-full 下载结构包 oinone-op-ds-all-full.zip(17 KB) v.4.6.28.3-allinone-mini 版本说明前后端一体支持外部中间件镜像地址 docker pull harbor.oinone.top/oinone/designer:4.6.28.3-allinone-mini 下载结构包 oinone-op-ds-all-mini.zip(14 KB) v.4.7.9-allinone-full 版本说明前后端以及中间件一体镜像地址 docker pull harbor.oinone.top/oinone/designer:4.7.9-allinone-full 下载结构包 oinone-op-ds-all-full.zip(17 KB) v.4.7.9-allinone-mini 版本说明前后端一体支持外部中间件镜像地址 docker pull harbor.oinone.top/oinone/designer:4.7.9-allinone-mini 下载结构包 oinone-op-ds-all-mini.zip(14 KB) Step2.1.2 镜像下载用户与密码需要商业版镜像需要加入Oinone商业版本伙伴专属群，向Oinone技术支持获取用户名与密码，镜像会定时更新并通知大家。 #注意：docker镜像拉取的账号密码请联系数式技术 docker login –username=用户名 harbor.oinone.top docker pull docker pull harbor.oinone.top/oinone/designer:4.6.28.3-allinone-full Step2.1.3 镜像和版本选择目前有2个版本可供选择，包含中间件以及不包含中间件2个版本，下载结构包以后注意修改startup.sh和startup.cmd中对应镜像地址的版本号。 Step2.1.4 本地结构说明下载结构包并解压 config是放application.yml的目录，可以在application.yml配置需要启动的自有模块同时修改对应其他中间件配置项 lib是放自有模块的jar包以及其对应的依赖包比如：pamirs-demo-api-1.0.0-SNAPSHOT.jar和pamirs-demo-core-1.0.0-SNAPSHOT.jar nginx：前端运行的nginx站点配置文件 mq:消息配置，再使用低无一体时需要指定mq的broker的IP run:容器运行中间件的脚本，可以对个别中间件是否启动进行设置，（注释掉运行脚本，容器启动时就不会启动该中间件） logs是运行时系统日志目录 Step2.2 修改startup.sh中的路径 Step2.2.1 linux环境修改参数在文件中找到如下 configDir=/opt/docker/oinone-op-ds-all-full version=4.6.28.3 IP=192.168.0.121 修改configDir的路径（下载oinone-op-ds-xx.zip解压后的路径）修改对应的镜像版本号修改对应的IP为docker宿主机IP #!/bin/bash configDir=/opt/docker/oinone-op-ds-all-full version=4.6.28.3 IP=192.168.0.121 docker run -d –name designer-allinone \ -e DUBBO_IP_TO_REGISTRY=$IP \ -e DUBBO_PORT_TO_REGISTRY=20880 \ -p 8099:8091 \ -p 3307:3306 \ -p 2182:2181 \ -p 6378:6379 \ -p 19876:9876 \ -p 10991:10991 \ -p 15555:15555 \ -p 20880:20880 \ -p 88:80 \ -v $configDir/config/:/opt/pamirs/ext \ -v $configDir/nginx:/opt/pamirs/nginx/vhost \ -v $configDir/logs:/opt/pamirs/logs \ -v $configDir/mq/broker.conf:/opt/mq/conf/broker.conf \ -v $configDir/run/run.sh:/opt/pamirs/run/run.sh \ -v $configDir/lib:/opt/pamirs/outlib harbor.oinone.top/oinone/designer:$version-allinone-full Step2.2.3 window环境修改参数在文件中找到如下 set configDir=/d/shushi/docker/oinone-op-ds-all-full set version=4.6.28.3 set IP=192.168.0.121 修改configDir的路径（（下载oinone-op-ds-xx.zip解压后的路径）修改对应的镜像版本号修改对应的IP为docker宿主机IP @echo off set configDir=/d/shushi/docker/oinone-op-ds-all-full set version=4.6.28.3 set IP=192.168.0.121 docker run -d –name designer-allinone ^ -e DUBBO_IP_TO_REGISTRY=%IP% ^ -e DUBBO_PORT_TO_REGISTRY=20880 ^ -p 8099:8091…

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

3.3.1 构建第一个Model

定义模型，并配上相应的菜单或配置模块的homepage为该模型，模块就具备了可访问的该模型对应的列表页、新增页、修改页、删除记录和导入导出功能。都说oinone是以model为驱动，对于模型的理解，希望通过本节跟给大家带来一个初步的认识。一、构建宠物店铺模型 package pro.shushi.pamirs.demo.api.model; import pro.shushi.pamirs.meta.annotation.Field; import pro.shushi.pamirs.meta.annotation.Model; import pro.shushi.pamirs.meta.base.IdModel; import java.sql.Time; @Model.model(PetShop.MODEL_MODEL) @Model(displayName = "宠物店铺",summary="宠物店铺") public class PetShop extends IdModel { public static final String MODEL_MODEL="demo.PetShop"; @Field(displayName = "店铺名称",required = true) private String shopName; @Field(displayName = "开店时间",required = true) private Time openTime; @Field(displayName = "闭店时间",required = true) private Time closeTime; } 图3-3-1-1 构建宠物店铺模型配置注解模型类必需使用@Model注解来标识当前类为模型类。可以使用@Model.model、@Fun注解模型的模型编码（也表示命名空间），先取@Model.model注解值，若为空则取@Fun注解值，若皆为空则取全限定类名。使用@Model.model注解配置模型编码，模型编码唯一标识一个模型。请勿使用Query和Mutation作为模型编码和技术名称的结尾。上方示例使用Model注解和Field注解来定义一个实体模型。displayName属性最终会作为label展现在前端界面上。更多Model的详细元数据描述介绍参见4.1.6【模型元数据详解】一文模型命名规范模型属性默认取值规范命名规则规范 name 默认取model.model的点分割最后一位 1仅支持数字、字母2必须以字母开头3长度必须小于等于128个字符 module 无默认值开发人员定义规范示例：{项目名称}_{模块功能示意名称} 1仅支持数字、大写或小写字母、下划线2必须以字母开头3不能以下划线结尾4长度必须小于等于128个字符 model 默认使用全类名，取lname的值开发人员定义规范示例：{项目名称}.{模块功能示意名称}.{简单类名} 1仅支持数字、字母、点2必须以字母开头3不能以点结尾4长度必须小于等于128个字符 display_name 空字符串 1长度必须小于等于128个字符 lname 符合java命名规范，真实的java全类名，无法指定，要符合model的约束，即为包名+类名 lname是不能定义的，为全类名：包名+类名，和model一样的校验规则：包名和类名的校验 summary 默认使用displayName属性 1不能使用分号2长度必须小于等于128个字符 descripition NULL，注解无法定义 1长度必须小于等于65535个字符 table 默认使用name字段生成表名时，table字段的命名规则约束同样生效（大小驼峰命名转为下划线分割的表名称） 1仅支持数字、字母、下划线2长度必须小于等于128个字符（此限制为系统存储约束，与数据库本身无关） type java属性类型与数据库存储类型可执行转换即可 ModelTypeEnum枚举值表3-3-1-1 模型命名规范字段命名规范字段属性默认取值规范命名规则规范 name 默认使用java属性名 1仅支持数字、字母2必须以小写字母开头3长度必须小于等于128个字符 field 默认使用java属性名与name使用相同命名规则约束 display_name 默认使用name属性 1长度必须小于等于128个字符 lname 使用java属性名，符合java命名规范，真实的属性名称，无法指定与name使用相同命名规则约束 column 列名为属性名的小驼峰转下划线格式 1仅支持数字、字母、下划线2长度必须小于等于128个字符（此限制为系统存储约束，与数据库本身无关） summary 默认使用displayName属性 1不能使用分号2长度必须小于等于500个字符表3-3-1-2 字段命名规范我们重启Demo应用以后，打开Insomnia刷新GraphQL的schema，就可以看到PetShop默认对应的读写服务了图3-3-1-2 PetShopQuery默认读写服务图3-3-1-3 PetShopMutatiom默认读写服务配置模块的主页为宠物商店的列表页为了方便大家对模型有个更加直观的了解，接下来我们通过前端交互来感受下。在3.2.2【启动前端工程】一文中，在模块下拉列表中“oinoneDemo工程”还是不能点击的。是因为该模块没有配置主页，我们现在把主页设置为宠物商店的列表页，只需要在DemoModule这个类上增加一个注解@UxHomepage(@UxRoute(PetShop.MODEL_MODEL))，关于该注解的更多说明请查看4.1.4一文中的【UxHomepage注解详解】部分 package pro.shushi.pamirs.demo.api; import org.springframework.stereotype.Component; import pro.shushi.pamirs.boot.base.ux.annotation.action.UxRoute; import pro.shushi.pamirs.boot.base.ux.annotation.navigator.UxHomepage; import pro.shushi.pamirs.demo.api.model.PetShop; import pro.shushi.pamirs.meta.annotation.Module; import pro.shushi.pamirs.meta.base.PamirsModule; import pro.shushi.pamirs.meta.common.constants.ModuleConstants; @Component @Module( name = DemoModule.MODULE_NAME, displayName = "oinoneDemo工程", version = "1.0.0", dependencies = {ModuleConstants.MODULE_BASE} ) @Module.module(DemoModule.MODULE_MODULE) @Module.Advanced(selfBuilt = true, application = true) @UxHomepage(@UxRoute(PetShop.MODEL_MODEL)) public class DemoModule implements PamirsModule { public static final String MODULE_MODULE = "demo_core"; public…

史, 昂
2024年5月23日
1.8K001

Please Login to Comment

3.5.2.3 构建View的Layout

第一个表格Layout

Step1 新建一个表格的Layout

Step2 修改宠物达人自定义表格Template

Step3 重启看效果

Step4 修改宠物达人自定义表格Template

第一个树表Layout

Step1 增加商品类目模型

Step2 修改自定义商品模型

Step3 新增名为treeTableLayout的Layout

Step4 自定义商品管理的Template

Step5 为商品类目增加管理入口

Step6 重启看效果

第一个级联Layout

Step1 增加商品类目类型模型

Step2 修改商品类目

Step3 新增名为cascaderTableLayout的Layout

Step4 修改商品管理的Template

Step5 为商品类目类型增加管理入口

Step6 重启看效果

树表与级联的更多配置

相关推荐

3.3.10 字段类型之关系描述的特殊场景

2.4.3 Oinone独特性之低无一体

4.4 Oinone的分布式体验进阶

3.5.5 设计器的结合（改）

3.3.1 构建第一个Model

Leave a Reply