1 Star 1 Fork 0

feng3d / objectview

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

ObjectView

什么是ObjectView

ObjectView是feng3d中实现由数据对象自动生成界面的一套框架。

解决的问题

减少了绝大多数的界面逻辑代码编写,解决了数据对象与界面同步问题,极大的提升了UI开发效率。

实现原理

  1. (核心)针对对象的每一条需要显示的属性自动生成一个OAV(ObjectAttributeView也称为对象属性界面),实现对象属性与界面的对应关系,需要提供属性值与OAV双向同步功能(数据发生变化后界面实时刷新,用户在界面上操作是实时更改数据)。
  2. (可选)支持多个属性进行分组自动生成一个OBV(ObjectBlockView也称为对象属性块界面),实现对象属性组与界面的对应关系。
  3. (可选)支持数据对象自动生成生成一个OV(ObjectView也称为对象界面),实现对象与界面的对应关系。

提供API

/**
 * 获取对象界面
 * @param object 用于生成界面的对象
 * @param param 参数
 */
feng3d.ObjectView.getObjectView(object: Object, param?: GetObjectViewParam): IObjectView

ObjectView框架初始化后仅仅需要调用一下代码便可以实现从数据对象到界面的转换。

var view = feng3d.ObjectView.getObjectView(object);

ObjectView初始化

    // 对默认界面进行配置
    feng3d.objectview.defaultBaseObjectViewClass = "OVBaseDefault";
    feng3d.objectview.defaultObjectViewClass = "OVDefault";
    feng3d.objectview.defaultObjectAttributeViewClass = "OAVDefault";
    feng3d.objectview.defaultObjectAttributeBlockView = "OBVDefault";
    // 对自定义属性进行指定显示OAV组件
    feng3d.objectview.setDefaultTypeAttributeView("Boolean", { component: "OAVBoolean" });
    feng3d.objectview.setDefaultTypeAttributeView("String", { component: "OAVString" });
    feng3d.objectview.setDefaultTypeAttributeView("number", { component: "OAVNumber" });

实现技巧

  1. 通过 feng3d.Watcher.watch 实现数据属性的变化监听,从而更新OAV实现数据到UI的同步。
  2. 通过装饰器 @oav 来标记数据对象指定属性对应哪个OAV在UI中显示,以及如何分组,显示参数等信息。

框架边界

只处理数据对象与界面的对应关系,并不会实际去处理具体的OAV、OBV、OV的实现与数据绑定逻辑,更是与具体的UI框架无关。也就意味着可以运用到HTMLElement、egret、layabox等任意的UI框架中去,甚至可以轻松翻译为其他语言以及其他语言UI框架中去。

源码

https://gitee.com/feng3d/feng3d/blob/master/modules/objectview/src/ObjectView.ts

历史版本

https://github.com/wardenfeng/ObjectView-as

https://github.com/wardenfeng/ObjectView-ts

实现OAV数据绑定依赖模块

https://gitee.com/feng3d/feng3d/blob/master/modules/watcher/src/Watcher.ts

参考示例

https://gitee.com/feng3d_admin/objectview-jqueryui

项目使用案例

下图中feng3d编辑器的右侧红框部分Inspector模块所有显示均使用ObjectView进行构建。

The MIT License Copyright (c) 2014-2021 feng Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

ObjectView是feng3d中实现由数据对象自动生成界面的一套框架。 转移至 https://gitlab.com/feng3d/objectview 展开 收起
TypeScript 等 2 种语言
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
TypeScript
1
https://gitee.com/feng3d/objectview.git
git@gitee.com:feng3d/objectview.git
feng3d
objectview
objectview
master

搜索帮助