3.5.2.1 整体介绍

虽然我们有小眼睛可以让用户自定义展示字段和排序喜好,以及通过权限控制行、列展示,但在我们日常业务开发中还是会对页面进行调整,以满足业务方的对交互友好和便捷性的要求。本节会在如何自定义之前我们先介绍页面结构与逻辑,再带小伙伴一起完成自定义view的Template和Layout,以及整个母版的Template和Layout

页面的构成讲解

页面交互拓扑图

页面交互拓扑图

3.5.2.1 整体介绍

图3-5-2-1 页面交互拓扑图

注:页面逻辑交互拓扑图说明

  1. 模块作为主切换入口

  2. 模块决定菜单列表

  3. 菜单切换触发点击action

  4. 前端根据Mask、View进行渲染,

a. Mask是母版是确定了主题、非主内容分发区域所使用组件和主内容分发区域联动方式的页面模板。全局、应用、视图动作、视图都可以通过mask属性指定母版

bMask和View都是有layout定义和template定义合并而成,系统会提供默认母版,以及为每种视图提供默认layout

c. layout与template通过插槽进行匹配

  1. Action根据不同类型做出不同访问后端服务、url跳转、页面路由、发起客户端动作等

  2. Aciton路由可以指定Mask、视图组件的layout、template

a. 当layout没有指定的时候则用系统默认的

b. 当template没有指定的时候,且视图组件相同类型有多条记录时,根据优先级选取

  1. Mask和视图组件的layout优先级(视图组件>视图动作 > 应用 > 全局)

默认母版以及各类视图组件

母版布局

默认母版基础布局base-layout
<mask layout="default">
    <header slot="header"/>
    <container slot="main" name="main">
        <sidebar slot="sidebar"/>
        <container slot="content"/>
    </container>
    <footer slot="footer"/>
</mask>

图3-5-2-2 默认母版基础布局base-layout

母版template
<mask layout="default">
    <mask name="defaultMask">
    <template slot="header">
        <container name="appBar">
            <element widget="logo"/>
            <element widget="appFinder"/>
        </container>
        <container name="operationBar">
            <element widget="notification"/>
            <element widget="dividerVertical"/>
            <element widget="languages"/>
        </container>
        <element widget="userProfile"/>
    </template>
    <template slot="sidebar">
        <element widget="navMenu"/>
    </template>
    <template slot="content">
      <element widget="breadcrumb"/>
      <element widget="mainView"/>
    </template>
</mask>

图3-5-2-3 母版template

注:

  • 上例中因为名称为main的插槽不需要设置更多的属性,所以在template中缺省了main插槽的template标签。
最终可执行视图
<mask name="defaultMask">
    <header>
        <container name="appBar">
            <element widget="logo"/>
            <element widget="appFinder"/>
        </container>
        <container name="operationBar">
            <element widget="notification"/>
            <element widget="dividerVertical"/>
            <element widget="languages"/>
        </container>
        <element widget="userProfile"/>
    </header>
    <container name="main">
        <sidebar name="sidebar">
            <element widget="navMenu"/>
        </sidebar>
        <container name="content">
            <element widget="breadcrumb"/>
            <element widget="mainView"/>
        </container>
    </container>
    <footer/>
</mask>

图3-5-2-4 最终可执行视图

表格视图布局

默认表格视图基础布局base-layout
<view type="table">
    <view type="search">
        <element widget="search" slot="search">
            <xslot name="fields" slotSupport="field" />
        </element>
    </view>
    <pack widget="fieldset">
        <element widget="actionBar" slot="actions" slotSupport="action" />
        <element widget="table" slot="table">
            <xslot name="fields" slotSupport="field" />
            <element widget="actionsColumn" slot="actionsColumn">
                <xslot name="rowActions" slotSupport="action" />
            </element>
        </element>
    </pack>
</view>

图3-5-2-5 默认表格视图基础布局base-layout

注:table标签的子标签为column组件,如果field填充到元数据插槽fields没有column组件将自动包裹column组件。

表格视图template
<view type="table" model="xxx" name="tableViewExample">
    <template slot="search">
        <field data="name"/>
    </template>
    <template slot="actions">
        <action name="create"/>
    </template>
    <template slot="fields">
        <field data="id"/>
        <field data="name"/>
        <field data="code"/>
    </template>
    <template slot="rowActions">
        <action name="delete"/>
        <action name="update"/>
    </template>
</view>

图3-5-2-6 表格视图template

最终可执行视图
<view type="table" model="xxx" name="tableViewExample">
    <view type="search">
        <element widget="search">
            <field data="name"/>
        </element>
    </view>
    <action-bar>
        <action name="create"/>
    </action-bar>
    <table>
        <column>
            <field data="id"/>
        </column>
        <column>
            <field data="name"/>
        </column>
        <column>
            <field data="code"/>
        </column>
        <column>
            <action name="delete"/>
            <action name="update"/>
        </column>
    </table>
</view>

图3-5-2-7 最终可执行视图

表单视图布局

默认表单视图基础布局base-layout
<view type="form">
    <element widget="actionBar" slot="actions" slotSupport="action"/>
    <element widget="form" slot="form">
        <xslot name="fields" slotSupport="pack,field"/>
    </element>
</view>

图3-5-2-8 默认表单视图基础布局base-layout

表单视图template
<view type="form" model="xxx" name="viewExample">
    <template slot="actions">
        <action name="submit"/>
    </template>
    <template slot="fields">
        <pack widget="group">
            <field data="id"/>
            <field data="name" widget="string"/>
            <field data="code"/>
        </pack>
        <pack widget="tabs">
            <pack widget="tab" title="商品列表">
                <field data="items" />
            </pack>
            <pack widget="tab" title="子订单列表">
                <field data="orders" />
            </pack>
        </pack>
    </template>
</view>

图3-5-2-9 表单视图template

注:tabs标签的子标签为tab,如果dsl填充到layout没有tab标签将自动包裹tab标签。

最终可执行视图
<view type="form" model="xxx" name="viewExample">
    <action-bar>
        <action name="submit"/>
    </action-bar>
    <form>
        <group>
            <field data="id"/>
            <field data="name" widget="string"/>
            <field data="code"/>
        </group>
        <tabs>
            <tab title="商品列表">
                <field data="items" />
            </tab>
            <tab title="子订单列表">
                <field data="orders" />
            </tab>
        </tabs>
    </form>
</view>

图3-5-2-10 表单视图template

详情视图布局

默认详情视图基础布局base-layout
<view type="detail">
    <element widget="actionBar" slot="actions" slotSupport="action"/>
    <element widget="detail" slot="detail">
        <xslot name="fields" slotSupport="pack,field"/>
    </element>
</view>

图3-5-2-11 默认详情视图基础布局base-layout

详情视图template
<view name="viewExample">
    <template slot="actions">
        <action name="back"/>
    </template>
    <template slot="fields">
        <pack widget="group">
            <field data="id"/>
            <field data="name" widget="string"/>
            <field data="code"/>
        </pack>
        <pack widget="tabs">
            <pack widget="tab" title="商品列表">
                <field data="items" />
            </pack>
            <pack widget="tab" title="子订单列表">
                <field data="orders" />
            </pack>
        </pack>
    </template>
</view>

图3-5-2-12 详情视图template

最终可执行视图
<view type="detail" model="xxx" name="viewExample">
    <action-bar>
        <action name="back"/>
    </action-bar>
    <detail>
        <group>
            <field data="id"/>
            <field data="name" widget="string"/>
            <field data="code"/>
        </group>
        <tabs>
            <tab title="商品列表">
                <field data="items" />
            </tab>
            <tab title="子订单列表">
                <field data="orders" />
            </tab>
        </tabs>
    </detail>
</view>

图3-5-2-13 最终可执行视图

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

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

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

相关推荐

  • 3.2 Oinone以模块为组织

    模块(module):是按业务领域划分和管理的最小单元,是一组功能、界面的集合。 带大家快速认识下如何构建一个oinone的模块并启动它。我会从以下几个维度去介绍模块的构建与启动方式、模块详解。让大家直观且全方位地了解oinone的模块所包含的内容 构建第一个Module 启动前端工程 应用中心

    Oinone 7天入门到精通 2024年5月23日
    1.2K00
  • 5.4 基础支撑之商业关系域

    PamirsPartner作为商业关系与商业行为的主体,那么PamirsPartner间的关系如何描述,本文将介绍两种常见的设计思路,从思维和实现两方面进行对比,给出oinone为啥选择关系设计模式的原因。 一、两种设计模式对比 设计模式思路介绍 角色设计模式思路介绍 从产品角度枚举所有商业角色,每个商业角色对应一个派生的商业主体,并把主体间的关系类型进行整理。 图5-4-1 角色设计模式 关系设计模式思路介绍 从产品角度枚举所有商业角色,每个商业角色对应一个派生的主体间商业关系 图5-4-2 关系设计模式 设计模式对应实现介绍 角色设计模式实现介绍 不单商业主体需要扩展,关系也要额外维护,可以是字段或是关系表。一般M2O和O2M字段维护,M2M关系表维护。 创建合同场景中甲方选择【商业主体A】,乙方必须是【商业主体A】有关联的经销商、分销商、零售商、供应商等,则在角色设计模式下就非常麻烦,因为关系都是独立维护的 图5-4-3 角色设计模式实现介绍 关系设计模式实现介绍 只需维护商业关系扩展 同时在设计上收敛了商业关系,统一管理应对不同场景都比较从容 图5-4-4 关系设计模式实现介绍 二、oinone商业关系的默认实现 首先oinone的商业关系选择关系设计模式 其次模型上采用多表继承模式,父模型上维护核心字段,子模型维护个性化字段。

    2024年5月23日
    71300
  • 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.2K00
  • 4.2.3 框架之SPI机制

    SPI(Service Provider Interface)服务提供接口,是一套用来被第三方实现或者扩展的API,它可以用来启用框架扩展和替换组件,简单来说就是用来解耦,实现组件的自由插拔,这样我们就能在平台提供的基础组件外扩展新组件或覆盖平台组件。 目前定义SPI组件 ViewWidget 视图组件 FieldWidget 字段组件 ActionWidget 动作组件 表4-2-3-1 目前定义SPI组件 前提知识点 使用 TypeScript 装饰器(注解)装饰你的代码 1. 通过注解定义一种SPI接口(Interface) @SPI.Base<IViewFilterOptions, IView>('View', ['id', 'name', 'type', 'model', 'widget']) export abstract class ViewWidget<ViewData = any> extends DslNodeWidget { } 图4-2-3-1 代码示意 2. 通过注解注册提供View类型接口的一个或多个实现 @SPI.Base<IViewFilterOptions, IView>('View', ['id', 'name', 'type', 'model', 'widget']) export abstract class ViewWidget<ViewData = any> extends DslNodeWidget { } 图4-2-3-2 代码示意 3. 视图的xml内通过配置来调用已定义的一种SPI组件 <view widget="form" model="demo.shop"> <field name="id" /> </view> 图4-2-3-3 代码示意 图4-2-3-4 组件继承示意图 当有多个服务提供方时,按以下规则匹配出最符合条件的服务提供方 SPI匹配规则 SPI组件没有严格的按匹配选项属性限定,而是一个匹配规则 按widget最优先匹配,配置了widget等于是指定了需要调用哪个widget,此时其他属性直接忽略 按最大匹配原则(匹配到的属性越多优先级越高) 按后注册优先原则

    2024年5月23日
    75200
  • 4.2.4 框架之网络请求-HttpClient

    oinone提供统一的网络请求底座,基于graphql二次封装 一、初始化 import { HttpClient } from '@kunlun/dependencies'; const http = HttpClient.getInstance(); http.setMiddleware() // 必须设置,请求回调。具体查看文章https://shushi.yuque.com/yqitvf/oinone/vwo80g http.setBaseURL() // 必须设置,后端请求的路径 图4-2-4-1 初始化代码示例 二、HttpClient详细介绍 获取实例 import { HttpClient } from '@kunlun/dependencies'; const http = HttpClient.getInstance(); 图4-2-4-2 获取实例 接口地址 import { HttpClient } from '@kunlun/dependencies'; const http = HttpClient.getInstance(); http.setBaseURL('接口地址'); http.getBaseURL(); // 获取接口地址 图4-2-4-3 接口地址 请求头 import { HttpClient } from '@kunlun/dependencies'; const http = HttpClient.getInstance(); http.setHeader({key: value}); 图4-2-4-4 请求头 variables import { HttpClient } from '@kunlun/dependencies'; const http = HttpClient.getInstance(); http.setExtendVariables((moduleName: string) => { return customFuntion(); }); 图4-2-4-5 variables 回调 import { HttpClient } from '@kunlun/dependencies'; const http = HttpClient.getInstance(); http.setMiddleware([middleware]); 图4-2-4-6 回调 业务使用-query private http = HttpClient.getInstance(); private getTestQuery = async () => { const query = `gql str`; const result = await this.http.query('module name', query); console.log(result) return result.data[`xx`]['xx']; // 返回的接口,打印出result对象层次返回 }; 图4-2-4-7 业务使用-query 业务使用-mutate private http = HttpClient.getInstance(); private getTestMutate = async () => { const mutation = `gql str`; const result = await this.http.mutate('module name', mutation); console.log(result) return result.data[`xx`]['xx']; // 返回的接口,打印出result对象层次返回 }; 图4-2-4-8 业务使用-mutate 三、如何使用HttpClient 初始化 在项目目录src/main.ts下初始化httpClient 初始化必须要做的事: 设置服务接口链接 设置接口请求回调 业务实战 前文说到自定义新增宠物表单,让我们在这个基础上加入我们的httpClient; 第一步新增service.ts 图4-2-4-8 新增service.ts service.ts import { HttpClient }…

    2024年5月23日
    87700

Leave a Reply

登录后才能评论