3.5.6.3 布局的配置

布局是将页面拆分成一个一个的小单元,按照上下中左右进行排列。

前沿

在前端领域中,布局可以分为三大块「Float、Flex、Grid 」,Float可以说的上是上古时期的布局了,如今市面还是很少见的,除了一些古老的网站。

目前,平台主要支持通过配置XML上面的cols和span来进行布局。平台也同样支持自由布局,合理的使用row、col、containers和container四个布局容器相关组件,将可以实现各种类型的布局样式,换句话说,平台实现的自由布局功能是Flex和Grid的结合体。

这里主要是讲解Flex和Grid布局,以及目前新的模板布局实现的思路。

Flex布局

Flex布局采用的是一维布局,那么什么是一维布局呢,所谓的一维布局就是只有一个方向、没有体积、面积,比如一条直线。它适合做局部布局,就像我们原来的顶部菜单、面包屑导航,以及现在的主视图字段配置。

image.png

图3-5-6-19 Flex布局示意

image.png

图3-5-6-20 Flex布局示意

image.png

图3-5-6-21 Flex布局示意

从上图可以看看出,Flex布局只能在X、Y轴进行转换,它无法对上下左右四个方向同时处理,因为它没“面积”的概念。所以它最适合做局部布局。

优点

image.png

图3-5-6-22 Flex兼容性

Flex的兼容性,可以看得出来,目前主流的浏览器都支持该属性。所以Flex兼容性强,如果你想对局部做布局处理,Flex是最好选择。

缺陷

刚刚也提到了,用户想要的布局是千奇百怪的,如果他想要的布局在现有的功能中无法实现怎么办?让用户放弃?还是说服他使用现在的布局。

Grid布局

Grid布局系统采用的是二维布局,二维布局有四个方向:上、下、左、右,它只有面积没有体积,比如一张纸、网格。

Grid布局
<div id="grid-container-one">
  <div class="one-1">Grid Item 1</div>
  <div>Grid Item 2</div>
  <div>Grid Item 3</div>
  <div>Grid Item 4</div>
  <div>Grid Item 5</div>
  <div class="one-6">Grid Item 6</div>
</div>

<div id="grid-container-two">
  <div class="tow-1">Grid Item 1</div>
  <div class="tow-2">Grid Item 2</div>
  <div>Grid Item 3</div>
  <div>Grid Item 4</div>
  <div>Grid Item 5</div>
  <div>Grid Item 6</div>
</div>

<div id="grid-container-three">
  <div>Grid Item 1</div>
  <div>Grid Item 2</div>
  <div class="grid">Grid Item 3</div>
  <div class="grid-column">Grid Item 4</div>
  <div>Grid Item 5</div>
  <div>Grid Item 6</div>
  <div>Grid Item 7</div>
  <div class="grid-column">Grid Item 8</div>
</div>
HTML CSSResult Skip Results Iframe
EDIT ON
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  line-height: 1.5;
  font-weight: bold;
  text-align: center;
}

#grid-container-one{
  background-color: black;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 50px);
  gap: 10px;
  border: solid black 2px;
  margin-bottom: 20px;
  color: salmon;
}

#grid-container-one div {
  border: solid white 2px;
  padding: 10px;

}

#grid-container-one .one-1 {
    grid-area: span 1/span 3;
    text-aligin: center
}

#grid-container-one .one-6 {
    grid-column: 3 /4;
}

#grid-container-two{
  background-color: CADETBLUE;
  display: grid;
  grid-template-columns: 15% repeat(2, 1fr);
  grid-template-rows: 100px;
  text-shadow: 1px 1px 3px black;
  margin-bottom: 20px;
  color: salmon;
}

.tow-1 {
  grid-area: span 3 / span 1
}
.tow-2 {
  grid-area: span 1 / span 2
}

#grid-container-two div{
  border: solid white 2px;
  padding: 10px;
}

#grid-container-three{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 25%;
  grid-auto-rows: 200px; 
  grid-auto-columns: 100px;
  gap: 2px;
  color: black;
  text-decoration: underline;
  margin-bottom: 2%;
}

#grid-container-three div{
  background-color: salmon;
  border: solid black 5px;
  padding: 10px;
}

.grid-column{
  grid-column: 5 / 7;
}

.grid{
  grid-row: 1 /1;
  grid-column: 4 / 5;
}

.grid-container-inline{
  display: inline-grid;
  grid-template-columns: repeat(2, 200px);
  grid-template-rows: 100px 100px;
  gap: 2px;
  margin-bottom: 20px;
}

.grid-container-inline div{
  padding: 35px;
  border: solid black 2px;
  background-color: PINK;
}

Resources1× 0.5× 0.25×Rerun

3.5.6.3 布局的配置

图3-5-6-23 Grid布局示意

从上面的代码可以看出,Grid天生的支持整体布局,它甚至可以移行换位,它的强大之处可以颠覆你对布局的认知。

缺陷

虽然Grid很强大,但是它有一个致命的缺陷,那就是兼容性。

image.png

图3-5-6-24 Grid兼容性

从上图可以看出,IE10以下、Chrome56以下、Firefox51以下等等都不支持该属性。

平台布局

名词解释

-布局容器相关组件:rowcolcontainerscontainer这四个组件的统称。

-基础布局属性:包括colscolSpanspanoffset

概述

一般的,我们对大多数组件提供了基本的布局属性配置,包括:

  • cols:将内容区中的每行拆分的列数;当前元素未配置该属性时,将取离当前元素最近父元素属性。默认:1
  • colSpan:当前元素相对于父元素在每行中所占列比例;优先于span。默认:FULL
    • FULL:1
    • HALF:1/2
    • THIRD:1/3
    • TWO_THIRDS:2/3
    • QUARTER:1/4
    • THREE_QUARTERS:3/4
  • span:当前元素相对于父元素在每行中所占列数。默认:cols
  • offset:当前元素相对于原所在列的偏移列数。

我们规定了默认栅格数为24,基础布局属性均是相对于默认栅格数而言的。

在使用基础布局属性时,请尽可能保证公式 (24 / cols) * span 以及以下列举的公式,其计算结果为整数,否则可能出现不符合预期的结果。

在使用colSpan时,span的计算公式为:span = cols * colSpan

在使用offset时,offset的计算公式为:offset = (24 / cols) * offset

平台内置组件

下面列举了平台内置组件在FormDetail视图中使用时所支持的布局相关属性,包括可能影响部分区域显隐的相关属性。

表头说明:

  • tag:xml配置标签
  • widget:组件名称;xml属性;多个值属于别称。如:widget="form"
  • 配置项:xml属性名称。
  • 可选值:声明支持的配置项属性类型,不可识别或不可解析时将采用默认值。
  • 作用:对配置项的简单描述,部分布局属性在上方进行了描述,不再赘述。
tag widget 配置项 可选值 默认值 作用
view cols number 1
element form cols number 1
colSpan enum FULL
span number cols
offset number
detail cols number 1
colSpan enum FULL
span number cols
offset number
DateTimeRangePicker colSpan enum FULL
span number cols
offset number
DateRangePicker colSpan enum FULL
span number cols
offset number
TimeRangePicker colSpan enum FULL
span number cols
offset number
colSpan enum FULL
YearRangePicker span number cols
offset number
field 任意 colSpan enum FULL
span number cols
offset number
pack fieldset/group cols number 1
colSpan enum FULL
span number cols
offset number
title string 分组 标题;空字符串或不填,则隐藏标题区;
tabs cols number 1
colSpan enum FULL
span number cols
offset number
tab cols number 1
title string 选项页 标题;必填;空字符串或不填则显示默认值;
row cols number 1
align top/middle/bottom 垂直对齐方式
justify start/end/center/space-around/space-between 水平对齐方式
gutter number,number?示例:24 = 24,2412,12 24,24 水平/垂直间距
wrap boolean true 是否允许换行
col cols number 1
colSpan enum FULL
span number cols
offset number 偏移单元格数
mode/widthType manual/full manual 列模式;手动/自动填充;使用自动填充时,将忽略span、offset属性;
containers cols number 1
align top/middle/bottom 垂直对齐方式
justify start/end/center/space-around/space-between 水平对齐方式
gutter number,number?示例:24 = 24,2412,12 0,24 水平/垂直间距
wrap boolean true 是否允许换行
container cols number 1
colSpan enum FULL
span number cols
offset number 偏移单元格数
align top/middle/bottom 垂直对齐方式
justify start/end/center/space-around/space-between 水平对齐方式
gutter number,number?示例:24 = 24,2412,12 0,24 水平/垂直间距
wrap boolean true 是否允许换行
mode/widthType manual/full full 列模式;手动/自动填充;使用自动填充时,将忽略span、offset属性;

表3-5-6-11 平台内置组件

基础布局

    基础布局提供了在不使用任何布局容器相关组件的情况下,仅使用cols、span、offset这三个属性控制行列的布局能力。

    其本质上是flex布局的扩展,但依旧无法脱离flex布局本身的限制,即元素始终是自上而下、自左向右紧凑的。

    下面将使用fieldset和tabs/tab组件来介绍各个属性在实际场景中的使用。

示例1:默认撑满一行

<pack widget="fieldset" title="示例1">
    <field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
    <field data="name" widget="Input" label="名称" placeholder="请输入" required="true" />
</pack>

图3-5-6-25 示例1:默认撑满一行

结果展示

image.png

图3-5-6-26 示例效果

示例2:一行两列:cols=2; colSpan=HALF/span=1

<pack widget="fieldset" title="示例2" cols="2">
    <field data="code" widget="Input" colSpan="HALF" label="编码" placeholder="请输入" required="true" />
    <field data="name" widget="Input" colSpan="HALF" label="名称" placeholder="请输入" required="true" />
</pack>
------------------------------ 或 ------------------------------
<pack widget="fieldset" title="示例2" cols="2">
    <field data="code" widget="Input" span="1" label="编码" placeholder="请输入" required="true" />
    <field data="name" widget="Input" span="1" label="名称" placeholder="请输入" required="true" />
</pack>

图3-5-6-27 示例2代码

结果展示

image.png

图3-5-6-28 示例效果

示例3:使用offset实现中间空一个字段空间的布局

<pack widget="fieldset" title="示例3" cols="3">
    <field data="code" widget="Input" span="1" label="编码" placeholder="请输入" required="true" />
    <field data="name" widget="Input" span="1" offset="1" label="名称" placeholder="请输入" required="true" />
</pack>

PS:offset的作用有限,offset最优实践的前提是在同一行中进行偏移,要实现特殊布局功能,请使用自由布局相关布局能力。

图3-5-6-29 使用offset实现中间空一个字段空间的布局

结果展示

image.png

图3-5-6-30 示例效果

示例4:属性cols就近取值

<!-- 所有tab将使用cols="2"属性 -->
<pack widget="tabs" cols="2">
    <pack widget="tab" title="示例4-1">
        <field data="code" widget="Input" span="1" label="编码" placeholder="请输入" required="true" />
    </pack>
    <pack widget="tab" title="示例4-2">
        <field data="name" widget="Input" span="1" label="名称" placeholder="请输入" required="true" />
    </pack>
</pack>

图3-5-6-31 示例4:属性cols就近取值

结果展示

image.png

图3-5-6-32 示例效果

image.png

图3-5-6-33 示例效果

<!-- 所有tab将使用cols="2"属性 -->
<pack widget="tabs" cols="2">
    <!-- 特指该tab使用cols="1"属性,其他tab继续使用tabs配置的cols="2"属性 -->
    <pack widget="tab" title="示例4-1" cols="1">
        <field data="code" widget="Input" span="1" label="编码" placeholder="请输入" required="true" />
    </pack>
    <pack widget="tab" title="示例4-2">
        <field data="name" widget="Input" span="1" label="名称" placeholder="请输入" required="true" />
    </pack>
</pack>

图3-5-6-34 实例4:tab属性生效

结果展示

image.png

图3-5-6-35 示例效果

image.png

图3-5-6-36 示例效果

自由布局

自由布局提供了无法通过基础布局能力实现的其他布局能力,总的来说,自由布局是对grid布局和flex布局的结合,它既拥有grid布局对页面进行单元格拆/合的能力,在每个单元格中,使用flex布局进行紧凑排列。

下面将使用fieldset组件介绍各个属性在实际场景中的使用。

组件组合

row/col:两个组件共同形成行和列,在一行中拆分成24个栅格,每个列的跨度不超过24。当一行中,所有列的跨度和超过24时,将会自动换行。

containers/row/container:三个组件共同形成一个二维网格,以此实现grid布局的基本能力。每个单元格(container)中使用flex布局。

PS:以下示例为了体现布局效果,可能会出现重复字段定义,业务上在使用时需要避免这种定义。

示例1:仅使用1/2左侧空间

小贴士:在使用row和col组合时,如果在一个col中有且仅有一个子元素,则col可以缺省。col相关属性可以配置在该子元素上。

<pack widget="fieldset" title="示例1">
    <pack widget="row" cols="2">
        <!-- 此处显式定义col组件,field标签上的基础布局属性将失效 -->
        <pack widget="col" span="1">
            <field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
        </pack>
    </pack>
    <pack widget="row" cols="2">
        <pack widget="col" span="1">
            <field data="name" widget="Input" label="名称" placeholder="请输入" required="true" />
        </pack>
    </pack>
</pack>
------------------------------ 或 ------------------------------
<pack widget="fieldset" title="示例1">
    <pack widget="row" cols="2">
        <!-- 此处缺省col组件,field标签上的基础布局属性可生效 -->
        <field data="code" widget="Input" span="1" label="编码" placeholder="请输入" required="true" />
    </pack>
    <pack widget="row" cols="2">
        <field data="name" widget="Input" span="1" label="名称" placeholder="请输入" required="true" />
    </pack>
</pack>

图3-5-6-37 仅使用1/2左侧空间

结果展示

image.png

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

示例2:使用布局容器实现中间空一个字段空间的布局

<pack widget="fieldset" title="示例2">
    <pack widget="containers">
        <pack widget="row">
            <pack widget="container">
                <field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
            </pack>
            <pack widget="container"></pack>
            <pack widget="container">
                <field data="name" widget="Input" label="名称" placeholder="请输入" required="true" />
            </pack>
        </pack>
    </pack>
</pack>

图3-5-6-39 使用布局容器实现中间空一个字段空间的布局

结果展示

image.png

图3-5-6-40 示例效果

示例3:一行5列(基础布局属性公式无法计算出整数的情况)

<pack widget="fieldset" title="示例3">
    <pack widget="containers">
        <pack widget="row">
            <pack widget="container">
                <field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
            </pack>
            <pack widget="container">
                <field data="name" widget="Input" label="名称" placeholder="请输入" required="true" />
            </pack>
            <pack widget="container">
              <field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
            </pack>
            <pack widget="container">
              <field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
            </pack>
            <pack widget="container">
              <field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
            </pack>
        </pack>
    </pack>
</pack>

图3-5-6-41 一行5列(基础布局属性公式无法计算出整数的情况)

结果展示

image.png

图3-5-6-42 示例效果

示例4:共2行,其中1行未3列,另1行为2列

该示例可以使用任何一种组件组合都可以实现,结果一致。

<!-- 使用containers/row/container -->
<pack widget="fieldset" title="示例4">
    <pack widget="containers">
        <pack widget="row">
            <pack widget="container">
                <field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
            </pack>
            <pack widget="container">
                <field data="name" widget="Input" label="名称" placeholder="请输入" required="true" />
            </pack>
            <pack widget="container">
                <field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
            </pack>
        </pack>
        <pack widget="row">
            <pack widget="container">
                <field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
            </pack>
            <pack widget="container">
                <field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
            </pack>
        </pack>
    </pack>
</pack>
------------------------------ 或 ------------------------------
<!-- 使用row/col,其中col缺省 -->
<pack widget="fieldset" title="示例4">
    <pack widget="row" cols="3">
        <field data="code" widget="Input" span="1" label="编码" placeholder="请输入" required="true" />
        <field data="name" widget="Input" span="1" label="名称" placeholder="请输入" required="true" />
        <field data="code" widget="Input" span="1" label="编码" placeholder="请输入" required="true" />
    </pack>
    <pack widget="row" cols="2">
        <field data="code" widget="Input" span="1" label="编码" placeholder="请输入" required="true" />
        <field data="code" widget="Input" span="1" label="编码" placeholder="请输入" required="true" />
    </pack>
</pack>

图3-5-6-43 示例为共2行,其中1行未3列,另1行为2列

结果展示

image.png

图3-5-6-44 示例效果

示例5:布局容器的垂直居中

左侧容器高度被子元素撑开,右侧容器在垂直方向居中

<pack widget="fieldset" title="示例5">
    <pack widget="containers">
        <pack widget="row">
            <pack widget="container">
                <field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
                <field data="name" widget="Input" label="名称" placeholder="请输入" required="true" />
            </pack>
            <pack widget="container" align="middle">
                <field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
            </pack>
        </pack>
    </pack>
</pack>

图3-5-6-45 设置布局容器的垂直居中

结果展示

image.png

图3-5-6-46 示例效果

举例

这里拿PetTalent举例,仿造教程上面效果,除了例子中的效果,自己可以做更多的尝试

Step1 修改PetTalent的form视图如下

给creater字段增加一个属性配置 offset="1"

<field data="creater" widget="SSConstructSelect" offset="1" submitFields="creater,name" responseFields="name"/>

图3-5-6-47 给creater字段增加一个属性配置 offset="1"

Step2 重启看效果

image.png

图3-5-6-48 示例效果

Step3 修改PetTalent的form视图如下

给【基础信息】增加一个属性cols="4",给name字段增加一个属性span="2",给creater和nick字段增加一个属性span="1":

<pack widget="group" title="基础信息" cols="4">
    <field invisible="true" data="id" label="ID" readonly="true"/>
    <field data="name" label="达人" required ="true" span="2"/>
    <field data="nick" compute="activeRecord.name" readonly = "true" span="1"/>
    <field data="creater" widget="SSConstructSelect"  submitFields="creater,name" responseFields="name" span="1"/>
    <field 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 invisible="true" data="createDate" label="创建时间" readonly="true"/>
    <field invisible="true" data="writeDate" label="更新时间" readonly="true"/>
    <field data="createUid" label="创建人id"/>
    <field data="writeUid" label="更新人id"/>
</pack>

图3-5-6-49 修改PetTalent的form视图

Step4 重启看效果

image.png

图3-5-6-50 示例效果

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

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

(0)
史, 昂的头像史, 昂数式管理员
上一篇 2024年5月23日 am9:16
下一篇 2024年5月23日 am9:18

相关推荐

  • 4.1.7 函数之元数据详解

    介绍Function相关元数据,以及对应代码注解方式。大家还是可以通读下,以备不时之需 如您还不了解Function的定义,可以先看下2.3【oinone独特之源,元数据与设计原则】对Function的描述,本节主要带大家了解Function元数据构成,能让小伙伴非常清楚oinone从哪些维度来描述Function, 一、元数据说明 FunctionDefinition 元素数据构成 含义 对应注解 备注 namespace 函数命名空间 @Fun("") @Model.model("") @Fun或@Model.model name 技术名称 @Function( name=””, scene={}, summary=””, openLevel=FunctionOpenEnum.REMOTE ) scene 可用场景 见:FunctionSceneEnum description 描述 openLevel 开放级别 见:FunctionOpenEnum fun 编码 @Function.fun("") displayName 显示名称 @Function.Advanced( displayName=””, type=FunctionTypeEnum.UPDATE, dataManager=false, language=FunctionLanguageEnum.JAVA, isBuiltin=false, category=FunctionCategoryEnum.OTHER, group=”pamirs”, version=”1.0.0″, timeout=5000, retries=0, isLongPolling=false, longPollingKey=”userId” longPollingTimeout=1 ) type 函数类型默认:4(改) 见 FunctionTypeEnum dataManager 数据管理器函数默认:false language 函数语言默认:DSL 见FunctionLanguageEnum isBuiltin 是否内置函数 默认:false category 分类 默认:OTHER 见:FunctionCategoryEnum group 系统分组 默认:pamirs version 系统版本 默认:1.0.0 timeout 超时时间 默认:5000 retries 重试次数 默认:0 isLongPolling 是否支持long polling,默认false longPollingKey 支持从上下文中获取字段作为key longPollingTimeout long polling超时时间 默认值为1 transactionConfig 事务配置 JSON存储 见TransactionConfig 配置@PamirsTransactional source 来源 系统推断值,见:FunctionSourceEnum extPointList 函数包含扩展点 系统推断值 module 所属模块 系统推断值 bitOptions 位 系统推断值 attributes 属性 系统推断值 imports 上下文引用 系统推断值 context 上下文变量 系统推断值 codes 函数内容 系统推断值 beanName bean名称 系统推断值 rule 前端规则 系统推断值,一般Action.rule传递下来的 clazz 函数位置 系统推断值 method 函数方法 系统推断值 argumentList 函数参数 系统推断值,List<Argument> returnType 返回值类型 系统推断值 表4-1-7-1 FunctionDefinition TransactionConfig 函数事务管理之配置项事务,具体事务使用详见4.1.8【函数之事务管理】一文。 元素数据构成 含义 对应注解 备注 transactionManager 事务管理器 @PamirsTransactional( transactionManager=””, enableXa=false, isolation=Isolation.DEFAULT, propagation=Propagation.REQUIRED, timeout=-1, readOnly=false, rollbackFor={}, rollbackForClassName={}, noRollbackFor={}, noRollbackForClassName={}, rollbackForExpCode={}, noRollbackForExpCode={} ) enableXa 分布式事务默认为false isolation 事务隔离级别 propagation 事务传递类型 timeout 过期时间 默认:-1 readOnly 只读 默认:false rollbackForExpCode 回滚异常编码 rollbackForExpCode 忽略异常编码 namespace 函数命名空间 系统推断值 fun 函数编码 系统推断值 active…

  • 7.1 设计器总览

    设计器转为非专业研发设计,在Oinone3.0版本中已经完成元数据完整在线化,真正做到低无一体。对于设计器的定位我们开篇就介绍过,它是LCDP的产品化呈现,是冰山露在外面大家看得到的,核心还是在LCDP本身。我们先目睹下设计器的一些产品页面,如您有想体验,可以在Oinone官网注册 模型设计器 Oinone以模型为驱动,当有模型、数据字典、数据编码等设计功能,我们就可以完整地定义产品数据模型,模型设计器整体呈现区别于普通ER图,以当前模型为核心视角展开,可以点击关联模型切换主视角。这样的好处在于突出当前设计,聚焦设计本身。同时模型上预留了几个核心入口如:分类管理、继承拓扑图、页面设计、逻辑设计等。另外我们在体验上区分了专家模式和经典模式,顾名思义,专家模式的功能会更加丰富,对专业知识的要求也会更高。专家模式下一般会增加一些跟业务无关的配置如:索引设置等调优行为 逻辑设计器 从图灵完备的角度上说,要支持功能越完备,使用越复杂。我们优先从图灵完备的角度出发,所以我们第一版逻辑设计器相对比较复杂,第二版本规划中会类似模型设计器推出专家版和经典版。 界面设计器 界面设计器第一版会先支撑后端页面在线自定义,后边将陆续推出前端页面、多端能力。为了支持多端和2C页面的设计,我们对前后端协议做了比较大的改造。目前设计器已经支持完全基于V3的前后端协议。 数据可视化 数据可视化支持从内部系统模型获取数据内容后,根据业务需求自定义图表,目的是为企业提供更高效的数据分析工具。 与市场同类产品相比,我们的数据可视化产品:不需要前置维护数据源、进行数据转换;可智取业务系统模型,系统自动解析选择的模型、接口、表格中的字段后进行数据分析;降低对数据分析人员研发能力要求的同时,也提升了数据分析的效率。 流程设计器 Oinone流程设计器为业务流程和审批流程提供了可自动执行的流程模型:通过定义流转过程中的各个动作、规则,以此实现流程自动化。在Oinone流程设计器中,流程可以跨应用设计,不同应用的模型之间可以通过同一流程执行。

    2024年5月23日
    87200
  • 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.3K00
  • 梅丛银

    认识陈鹏程及数式核心团队同学已经有一段时间了,在我们多次的交流讨论中时常会谈及:未来中国哪家软件企业能在互联网云原生时代走出来超越传统软件企业?史昂说这是他的梦想,也是他们团队这么多年坚持技术和产品研发与应用优先思考之路。史昂及数式核心团队面向企业应用市场历经三年的潜心研发和实战交付,推出Oinone产品及配套的低代码平台工具:对比国内外应用软件平台在开放生态和云原生均有它的继承性和独特性,特别是将技术平台赋予企业各种业务领域属性,便于企业客户和开发伙伴的二次开发并能快速搭建各类企业核心应用场景是Oinone的最大亮点。Oinone的内在特点之一是参考了全球最大开源ERP Odoo的元数据模型设计,同时基于业务中台架构和云原生技术,形成了自己一套国际化的快速开发平台、建模规范和应用产品,通过自己进场落地很多品牌企业的应用中台化不断迭代升级,走出了一条具有显著特色的新应用软件之路。史昂及团队特点谦卑、善于思考,善于吸收他山之精华,这是创业团队难能可贵之点,由此能善于与生态伙伴合作也是能够走的更远更长的基础基因。最后希望和祝愿Oinone能为中国企业在云时代数字化实践做出更多的贡献,为软件产业构建强大的应用生态和开发社区,真正树立起Oinone自己的软件品牌形象。 资深IT咨询专家&浩鲸云智能专家学院院长:梅丛银

    Oinone 7天入门到精通 2024年5月23日
    1.0K00

Leave a Reply

登录后才能评论