html最早的设计目标只是作为某种多媒体文档展现技术,其设计者显然无法预料到今天Web应用的蓬勃发展,一些设计缺陷也就难以避免。特别是html规范中缺乏对于复杂交互式组件模型的支持,直接导致企业应用的前台开发困难重重。AJAX技术可以看作是对这种困境的一种改良性响应,它试图通过javascript语言在应用层创建并维护一系列复杂的交互机制。很多完善的ajax框架走得相当遥远,最终基本将html作为一种底层“汇编”语言来使用。例如,一个很整齐美观的类Excel表格可能是由一个个div拼接而成,与html原生的table元素已经没有任何关系。
Witrix平台中对于前台html模型也作了一定的增强,但基本的设计思想是尽量利用原生控件,并尽量保持原生控件内在的数据关系,而不是重新构建一个完整的底层支撑环境。采用这种设计的原因大致有如下几点:
1. 前台技术目前竞争非常激烈,我们优先选择的方式是集成第三方组件,尽量保持原生环境有利于降低集成成本。
2. 通过javascript构造的控件可能存在性能瓶颈和其他浏览器内在的限制。例如一般Ajax框架提供的Grid控件都无法支撑大量单元格的显示。
3. Witrix平台的tpl模板技术可以非常方便的生成html文本,并提供强大的控件抽象能力,因此在前台动态创建并组织界面元素在Witrix平台中是一种不经济的做法。
4. Witrix平台提供的分解机制非常细致,存储于不同地方的不同来源的代码会在不同的时刻织入到最终的页面中,基于原生环境有利于降低平台快速演进过程中的设计风险。
Witrix平台中对于html模型的增强主要关注于以最少的代码实现界面控件与业务逻辑的自然结合。基本结构包括:
1. 通过ControlManager对象在前台建立一种container结构,统一管理控件的注册和获取。js.makeControl(elmOrId)返回特殊注册的控件对象或者根据原生html元素生成一个包装对象。
2. 通过js.getWxValue(elm)和js.setWxValue(elm,value)这两个函数统一对控件的值的存取过程。
3. 通过js.regListener(elm,listenerFunc)统一管理控件之间的相关触发,实现控件之间的相互监听。当js.setWxValue(elm,value)被调用时,注册在ControlManager中的listenerFunc将被调用。
4. stdPage.setFieldValue(fieldName,value)和stdPage.getFieldValue(fieldName,value)统一针对业务字段的值的存取过程,这里fieldName对应于实体上的业务字段名。
5. 通过ajax.addForm(frmId)等函数统一前台提交参数的提取过程,通过stdPage.buildAjax()等函数统一后台服务的调用方式。
6. 通过stdPage对象统一封装业务场景中的"常识"。
基于以上一些基础机制,Witrix平台即可提供一些复杂的业务组件封装。例如<input name="productCode" onkeypress="stdPage.keyPressToLoadRefByCode({objectName:'SomeProduct',queryField:'productCode'})" .../>通过简单的调用一个js函数即可实现如下功能:
a. 在文本框中输入回车的时候自动提交到后台查找对应产品代码的产品,并更新前台多个相关字段的值
b. 如果没有查找到相应产品,则弹出对话框根据界面上已有的部分字段信息提示客户添加新的产品信息。
c. 如果找到多个对应产品,则弹出列表允许客户选择其一。
d. 具体的处理过程可以通过函数参数进行精细的控制。
在meta文件中,结合上下文环境中的元数据信息,我们在缺省情况下可以直接使用 <ds:LoadRefByCodeInputor objectName="SomeProduct" />标签,不需要任何其他附加参数。
Witrix平台中一般利用原生控件来保存数据值,而不是将数据保存在分离的js对象中。例如对于一个选择控件,经常要求选择得到的是实体的id,而显示在界面上的是某个其他字段的值。Witrix平台中一般的实现结构是
<input type="hidden" name="${fieldName}" value="${entity[dsMeta.idField]}" id="${id}" textId="text_${id}" />
<input type="text" value="${entity[dsMeta.nameField]}" id="text_${id}" />
通过textId等扩展属性即可明确定义控件多个部分之间的关联关系,同时保证控件的实现完全与html规范相兼容。
Witrix平台中目前使用的"标准化"的扩展属性有textId(对应文本显示控件的id), showName(某些无文字显示的选择控件需要保留显示字段值), op(字段作为查询条件提交时的比较算符),validator(字段值对应的检验函数),setWxValue/getWxValue(重定义控件值的存取行为),serializer(特殊处理前台控件的提交参数)等。扩展属性不仅可以引入说明信息,还可以引入丰富的控件行为。
分享到:
相关推荐
2.2 HTML 5增强的iframe元素 34 2.3 HTML 5保留的通用属性 40 2.4 HTML 5新增的通用属性 44 2.5 HTML 5新增的结构元素 48 2.6 HTML 5新增的语义元素 55 2.7 HTML 5头部和元信息 59 2.8 HTML 5新增的拖放API ...
它希望能够减少浏览器对于需要插件的丰富性网络应用服务(plug-in-based rich internet application,RIA),如Adobe Flash、Microsoft Silverlight,与Oracle JavaFX的需求,并且提供更多能有效增强网络应用的标准集...
随着虚拟现实和增强现实的出现,这个演示可以成为一段很好的代码,可以用来激发新的想法。 PS看看Leap Motion,它可以成为一个有趣的界面; 特别是对于虚拟现实!它是如何工作的 ? 它非常易于使用,这一切都归功于...
探索并可视化增强回归树的结果 作者:让-巴蒂斯特·乔夫雷(Jean-Baptiste Jouffray)(2019) 通讯: 概述 包含一组R函数,这些函数使用 (Wickham 2016)来探索和可视化包中装有gbm.step例程的增强回归树的结果...
UberBackbone.View 这种增强的视图允许在基本主干视图中找不到的多种功能管理子视图自动附加外部html模板在标有数据绑定属性的模板 dom 元素上自动缓存 jQuery 对象模型-视图结合使用或UberBackbone.ListView 提供...
带有A框架的Blender模型预览要求记号笔 摄像头
插件以增强基因敲除.js。 在Model-View-ViewModel中,想法是为您的控件提供一个ViewModel。 每个html元素都是一个小控件。 当您组合html元素时,就是在制作复合控件。 如果每个html控件都有一个标准的ViewModel,...
适合初学的人。...另一个参照深入理解OpenCV书中第三章的代码,添加读取OBJ模型的环节,没有纹理。作为刚入手的可以参考一下,并贴一个博客地址配置环境和理解代码:http://www.cnblogs.com/Alip/p/7026512.html
OVATION Prime是弥散,单能,质子和波极光的季节性模型。 OVATION Prime模型是用IDL...http://sourceforge.net/p/ovation-prime/code/HEAD/tree/trunk/README.pdf?format=raw这里提供了用于运行历史时期模型的Web界面:...
AndAR - Android 增强现实 描述 AndAR 是一个在 Android 平台上启用增强现实的项目。 整个项目是在 GNU 通用公共许可证下发布的。 这意味着你可以在你的任何项目中自由使用它,只要你在相同的许可下许可它们,这意味...
增强的,适合移动设备的UI 支持图像拖放 使用原始JavaScript,HTML和CSS。 删除jQuery和Bootstrap 默认情况下切换到TensorFlow 2.0和 将Docker基本映像升级到Python 3(2020年) 如果您需要使用Python 2.x或...
html、css和JavaScript语言,根据识别图生成的.mind文件调用摄像头进行识别,识别后叠加渲染gltf模型并进行追踪,同时模型进行动作展示。 AR大部分的时候实现方式都是基于高通Vuforia或者EasyAR等基于Unity3d的引擎...
Kero是一个用于扩展MVVM架构中数据模型的JS类库,实现了数据和UI的双向绑定,帮助开发者快速构建数据驱动型应用,解决复杂数据交互问题。Kero 做为 MVVM 架构中 Model 层的增强,主要功能有:以行、列的形式对数据做...
该模型具有将单 预测模型和情景分别加权集成的特征, 能够进一步增强组合预测方法的环境适应性和可控性. 以S 市的经济增长状 况为分析背景, 规划出了4 种备选情景; 由1979~2010 年的历史数据拟合4 种单预测...
在10分钟内使用Flask作为Web...截图:新功能:fire:增强的,移动友好的UI支持图像拖放使用原始JavaScript,HTML和CSS。 删除jQuery和Bootstrap默认情况下切换到TensorFlow 2.0和tf.keras将Docker基本映像升级到Python
11.5 盒模型 209 11.6 控制元素的显示类型和可见性 211 11.7 设置元素的高度和宽度 214 11.8 在元素周围添加内边距 217 11.9 设置边框 219 11.10 设置元素周围的外边距 222 11.11 使元素浮动 ...
为其’class view’的增强。效率和功能上都有非常大的改变。比如点击class后马上显示在整个solution中引用其的所有文件。 源码中ReferencesFinder.rar是独立辅助exe,用于查找引用。 屏幕截图见: ...
mboost实现了增强算法,用于将广义线性,加法和交互模型拟合到潜在的高维数据。 使用mboost 有关安装说明,请参见下文。 有关如何使用mboost可以在许多地方找到: 看一下教程: 访问,并在此处查看更多教程和...
它通过2路数据绑定自动将UI(视图)中的数据与JavaScript对象(模型)同步。 为了帮助您更好地构建应用程序并使其易于测试,AngularJS教浏览器如何进行依赖注入和控制反转。 它还有助于服务器端通信,用promise和递...