`
canonical
  • 浏览: 367035 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

HTML模型增强

阅读更多

    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(特殊处理前台控件的提交参数)等。扩展属性不仅可以引入说明信息,还可以引入丰富的控件行为。

0
0
分享到:
评论

相关推荐

    自定义HTML元素用于轻松展示3D模型

    在现代Web开发中,增强用户体验的一个重要方法是通过可视化技术,特别是展示3D模型。本文将深入探讨如何利用自定义HTML元素实现这一功能,主要针对JavaScript开发中的可视化和图表展示。 自定义HTML元素(Custom ...

    java加载obj,stl模型资源,html页面展示

    本项目涉及的是使用Java来处理3D模型(OBJ和STL格式),并通过HTML页面进行展示。以下是对这个主题的详细解释: 1. **OBJ和STL模型**: - OBJ文件格式:OBJ是一种通用的3D模型文件格式,由Wavefront Technologies...

    HTML5绘制3D城市模型动画特效.zip

    "HTML5绘制3D城市模型动画特效"是一个利用HTML5和JavaScript实现的交互式3D城市景观展示。这个项目旨在通过JavaScript特效来创建一个动态的城市模型,用户可以通过鼠标长按或拖动来观察建筑物,增加了用户体验的互动...

    HTML5devicemockupsv3利用HTML5创建一些流行移动设备外观模型

    2. **CSS3**: 层叠样式表(CSS)的第三版,带来了许多增强的样式功能,包括新的选择器、动画、过渡和3D变换。在HTML5 Device Mockups v3中,CSS3用于创建设备的3D效果、阴影、边框和渐变,使模拟看起来更真实。同时...

    Cesium地图中加载的建筑模型3D model 模型 gltf格式建筑模型

    本主题涉及的是在Cesium地图平台中加载和显示3D建筑模型,这些模型通常用于增强地理空间数据的展示,使用户能够以更直观的方式理解和探索城市环境。 Cesium是一个基于WebGL的开源JavaScript库,专门用于创建交互式...

    【3D模型】webGL人体3D动态模型

    5. **CSS和HTML**:用于构建用户界面和控制面板,用户可以通过交互来查看和控制模型的显示。 通过这个3D模型,用户可以在网页上直观地观察人体走路的细节,这对于学习人体运动学、动画设计、游戏开发等领域都有很大...

    使用threejs渲染养殖场模型源码,养殖场模型obj+mtl格式,threejs模型

    - 定义光源,例如点光源或方向光源,以增强模型的视觉效果。 - 在动画循环中调用`renderer.render(scene, camera)`来渲染每一帧。 5. **示例代码片段** ```javascript var mtlLoader = new THREE.MTLLoader(); ...

    three官网glb模型.rar

    这表明这些模型可能广泛应用于网页开发、游戏设计、虚拟现实(VR)或增强现实(AR)项目中,特别是在使用three.js作为渲染引擎的情况下。 **GLB格式详解:** GLB(GL Transmission Format)是GLTF(Graphics Library ...

    Cesium 单独加载3D模型

    它广泛应用于地理信息系统(GIS)、虚拟现实(VR)和增强现实(AR)应用中。 Cesium支持多种3D模型格式,但目前官方明确支持的是gltf(GL Transmission Format)格式。gltf是一种轻量级、高效且跨平台的3D模型格式...

    three.js展示nrrd+vtk3D模型-html展示

    在IT领域,尤其是在Web开发中,使用3D模型来增强用户体验是常见的做法。"three.js"是一个非常流行的JavaScript库,它允许开发者在浏览器中创建和展示复杂的3D图形。本项目涉及的主题是“three.js展示nrrd+vtk3D模型...

    html5表单增强,html5

    另外,HTML5的表单还支持重复模型,用户可以通过添加、删除或重新排列条目来动态管理表单数据,增强了表单的灵活性。 内建的表单验证是HTML5表单增强的另一大亮点。通过属性如`required`、`min`、`max`等,开发者...

    鸭子3D模型效果图

    在IT行业中,3D模型设计是一项...这有助于增强对3D模型的质感、比例和真实感的理解,为创建更复杂、更生动的3D内容打下坚实基础。同时,这也是一种分享和交流3D设计成果的有效方式,促进了业界的专业知识传播和创新。

    室内植物3D模型

    - 检查纹理质量,良好的材质和贴图可以增强模型的真实感。 - 考虑植物的生长习性和环境适应性,选择适合室内环境的植物种类。 - 利用3D软件的动画功能,可以为植物添加动态效果,如摇曳的叶子、生长过程等,增加真实...

    白色室内3D模型

    此外,这些模型也可以与虚拟现实(VR)和增强现实(AR)技术结合,提供更加沉浸式的体验。 总之,"白色室内3D模型"是3D建模技术在室内设计领域的具体应用,利用3ds Max等专业软件创作,结合预览图和说明文档,为...

    英雄联盟模型查看器

    总的来说,“英雄联盟模型查看器”通过WebGL技术,将原本封闭在游戏客户端内的资源开放给玩家,不仅增强了游戏的趣味性和互动性,也提供了教育和学习的价值。这种技术的应用展示了互联网技术和游戏行业的紧密结合,...

    卫生间洗漱台模型

    此外,灯光和阴影的设置也极为关键,它们可以增强模型的视觉效果,使其在渲染时更具立体感和深度。 总结起来,"卫生间洗漱台模型"是一个用于设计和预览的3D数字模型,通过3ds Max等专业软件创建,并以.max文件存储...

    html5 canvas 3D汽车模型排放尾气动画特效

    在这个特定的案例中,“html5 canvas 3D汽车模型排放尾气动画特效”是利用Canvas API构建的一个三维场景,其中包含了3D汽车模型以及模拟汽车尾气排放的动画效果。这种特效通常用于增强网站的互动性和视觉吸引力,...

    舞台舞美模型效果图

    此外,3D模型还可以借助VR(虚拟现实)或AR(增强现实)技术,为设计师和决策者提供沉浸式的体验,从而更好地评估和调整设计方案。 总结来说,"舞台舞美模型效果图"是3D建模技术在舞台艺术领域的应用,它通过3ds ...

    乡镇街道楼房3D模型

    6. **交互式展示**:在某些情况下,3D模型会被导入到虚拟现实或增强现实环境中,提供更直观的交互体验。 描述中的“乡镇街道楼房3D模型适用于室外建筑模型设计”,意味着这些模型可能用于城市规划、景观设计、房...

    商务酒店客房模型

    在IT行业中,3D模型是一种数字技术,用于创建和展示具有三维形态的对象。"商务酒店客房模型"是这种技术在酒店室内设计领域的具体应用。...同时,客户也能通过3D模型提前体验未来酒店的视觉效果,增强信任感和满意度。

Global site tag (gtag.js) - Google Analytics