Json-GUI：动态生成基于表单的Web界面的AngularJS前端模块

SoftwareX 9（2019）28原始软件出版物Json-GUI-用于动态生成基于表单的Web界面的模块Antonella GaliziaP.，Gabriele Zereik，Luca Roverelli，Emanuele Danovaro，Andrea Clematis，Daniele应用数学与信息技术研究所ar t i cl e i nf o文章历史记录：接收11四月2018收到修订版2018年9月27日关键词：AngularJSWeb表单科学门户a b st ra ctJson-GUI是一个AngularJS前端模块，可以动态生成基于表单的Web界面。从描述输入列表的正式JSON配置对象开始，Json-GUI能够在运行时构建表单框架接口，具有标准和个性化的验证规则，从而可以定义输入字段之间的约束验证数据存储为JSON对象或文本文件。Json-GUI已被科学社区利用，以有效地减少科学网关中自定义用户界面的开发和维护。此外，Json-GUI还可以用于开发通用Web表单。版权所有©2018作者.由爱思唯尔公司出版这是CC BY-NC-ND下的开放获取文章许可证（http://creativecommons.org/licenses/by-nc-nd/4.0/）。代码元数据当前代码版本1.1.3用于此代码版本的代码/存储库的永久链接https://github.com/ElsevierSoftwareX/SOFTX_2018_32法律代码许可证Apache许可证2.0使用git的代码版本控制系统使用的软件代码语言、工具和服务JavaScript、HTML、CSS、AngularJS、Bootstrap编译要求，操作环境依赖AngularJS，Bootstrap，JQuery如果可用，链接到开发人员文档/手册https://github.com/portalTS/json-gui/wiki问题支持电子邮件gabrielezereik@gmail.com1. 动机和意义计算科学代表了一个广泛的领域，其中利用先进的计算能力来理解和解决复杂的跨学科问题。当前的技术和基础架构代表了重要的推动因素，因为它们支持软件、数据、仪器、计算服务和其他特定领域资源的大规模共享[1]。科学门户是一个集成的生态系统，它利用网络技术使共享更容易，并保护用户免受低层次技术问题的影响。科学网关是面向领域的，提供的工作流配置接口主要是基于最终用户的知识获取。大多数可用的工具包*通讯作者。电子邮件地址：galizia@ge.imati.cnr.it（A. Galizia），zereik@ge.imati.cnr.it（G.Zereik），roverelli@ge.imati.cnr.it（L. Roverelli），danovaro@ge.imati.cnr.it（E. Danovaro），clematis@ge.imati.cnr.it（A. Clematis），dagostino@ge.imati.cnr.it（D.科学网关的设计框架使用基于API的接口将前端和后端通过这种方法， 网关社 区可以将 精力集中在 社区特定 的图形用 户界面（GUI）的设计上。然而，前端解决方案的开发对于非IT专家来说可能是一项具有挑战性的任务[3]。考虑到这一愿景，我们开发了Json-GUI，这是一个由一组可重用的AngularJS1指令组成的前端库，它允许为AngularJS应用程序动态生成功能齐全的基于表单的Web界面。从正式的JSON2配置对象开始，Json-GUI简化并自动化了标准Web表单的设计和实现;该工具包括附加值功能，如验证，约束和直接使用地理地图。Json-GUI改善了与用户在新需求的启发中的交互，1 AngularJS官方网站，https://angularjs.org。2 http://www.json.org网站。https://doi.org/10.1016/j.softx.2018.11.0072352-7110/©2018作者。由Elsevier B. V.发布。这是CC BY-NC-ND许可证下的开放获取文章（http://creativecommons.org/licenses/by-nc-nd/4.0/）。可在ScienceDirect上获得目录列表SoftwareX期刊主页：www.elsevier.com/locate/softxA. 加利齐亚湾泽赖克湖Roverelli等人/SoftwareX 9（2019）2829允许支持敏捷方法的GUI改进的快速和增量实施[4]。表单生成一组经过验证的数据作为输出，这些数据存储为JSON对象或文本文件。在science gateway上下文中，输出文本文件可以被定制为用作运行模型的配置文件，因此它们可以被任何后端技术传递和处理Json-GUI已在多个科学环境中使用[5-商业工具以及任何需要定义基于表单的Web界面的地方。本文的组织如下：在下一节中，分析了科学背景和类似工具;在第3节中，从逻辑、架构和功能的角度描述了Json-GUI;在第4节中，我们讨论了使用Json-GUI开发基于表单的科学门户Web GUI的第5节强调了该工具的好处和附加值特征，而最后一节总结了本文。2. 科学和技术背景最近，已经开发了几种成熟度和完整性水平不同的工具在下文中，我们简要概述了在这一快速发展的领域中目前可用的不同可能性。大多数工具都面向支持Web/商业社区;它们可以提供有吸引力的接口来定义表单，潜在地隐藏编程方面，与第三方框架深度集成，原生地实现通常更面向商业用途的服务json-editor3代表一个简单但完整的编辑器，它从JSON模式开始生成Web表单，并返回一个JSON对象，其中包含通过表单填充的字段和值不支持定义JSON模式。Alpaca4提供了一个现成的JSON模式库，用于定义字段类型、控件、模板等。必须通过文本编辑器使用该库来创建HTML文件，该文件将为Web和移动应用程序生成交互式表单。Schema Form5是一组AngularJS指令，类似于Alpaca，它提供了一组开箱即用的JSON模式，但提供了用户友好的界面来创建表单的初始模式JotForm6和form.io>7代替允许完全跳过手动的第一个模式生成，并通过使用拖放接口和服务自主管理这一部分大多数引用的工具支持多种类型的参数，集成了有价值的外部服务，例如。Paypal或Braintree付款，并支持扩展原生提供的参数/服务的可能性所有工具都实现了复杂程度不同的验证规则，从基本到自定义的验证逻辑，但它们都不允许定义完整的自定义约束，对来自不同表单字段的一组值进行此外，由于这些工具是为通用目的而设计的，因此无法在地图上界定标记和地理没有证据表明科学界采用和利用上述工具，从这些有趣的软件的开发中获得了一些好处Json-GUI代表了弥补这一差距的尝试，尽管在某些地方简化了与以前工具相关的功能，但它已经在几个科学背景下证明了其有效性：它3 http://jeremydorn.com/json-editor网站。4 www.alpacajs.org网站。5 http://schemaform.io/网站。6 www.jotform.com网站。7 form.io.已被用于为天体物理学社区开发EXTraS项目的科学网关[5]，用于水文气象社区科学网关的重构[7]，更一般地说，用于打扮Airavata，一个支持固体科学网关开发的强大中间件，以及EasyGateway工具包[6]。在这些项目中，Json-GUI被用来开发GUI来配置模型运行，以及生成可用于模型执行的特定软件所使用的配置文件。Json-GUI在科学网关中的集成可以顺利实现，因为只有模型配置组件利用Json-GUI。科学网关的现有提交处理器组件实际上被提供有通过GUI收集的数据，即用于配置模型运行的参数，并且其可以在不修改的情况下运行模型。该架构模式如图1所示，并在[6]中进行了详细讨论。3. 软件描述Json-GUI在运行时生成一个完整的基于表单的Web GUI，用户可以利用它来插入异构值。表单的字段和相关的自定义规则是通过操作一个参数数组（实际上是一个JSON对象）来定义的。通过表单收集的输入数据存储为JSON对象，可以转换为具有用户定义格式的文本文件。与Bootstrap8完全集成并基于响应式技术，Json-GUI在实现模型-视图-控制器模式的同时也适当地解决了移动与敏捷方法和模型[8，9]保持一致，Json-GUI允许灵活的需求方法和快速的用户反馈，并通过与用户的交互周期和GUI的增量改进来减少部署时间开发阶段收敛于领域特定知识的启发和用户界面集成的几次迭代，即通过Json-GUI构建这一过程的逻辑阶段如图所示。 二、从与科学家的交互开始，引出第一轮需求，并导出JSON对象的定义。在这个阶段，主要参与者是数据科学家和Web表单用户。此时，Json-GUI自动生成JSON对象对应的Web表单，用户/科学家可以填写定义字段对应的值一旦Web表单被编译，Json-GUI就会生成输出：一个JSON对象，它可以被定制并用于最终目标。生成的输出是一个通用的Json对象，因此，它可以被任何中间件、工作流管理器或本地调度器处理如果表单处于验证阶段，科学家和Json-GUI用户之间的交互可以继续引发更多的需求，修改JSON对象并导致正确的Web表单。此外，由于该工具的基础是模型-视图-控制器模式，Json-GUI加快了这一阶段的速度，使Web表单的运行时可视化成为可能，减少了派生信息的获取/集成的迭代持续时间，从而缩短了最终GUI的开发时间由于定义用于生成Web表单的输入可能会变得有点挑战性，因此我们开发了一个图形工具来构建相应的JSON对象，称为Json-GUI-Builder。9通过一个简单的界面，构建器完全支持开发者，即Json-GUI用户，定义参数和相关的验证，约束和条件规则。Builder作为单独的工具提供，因为它也可以自主使用即定义任何类型的JSON对象，并且没有依赖项8 https://getbootstrap.com网站。9 https://github.com/portalTS/Json-gui-builder网站。30A. 加利齐亚湾泽赖克湖Roverelli等人/SoftwareX 9（2019）28Fig. 1. 在科学网关中集成Json-GUI的架构方法。图二.Json-GUI使用的逻辑模式。实际上是在这两个工具之间实现的。然而，没有Builder的Json-GUI就不那么有趣了，这两种工具的结合代表了两者的附加值。在第4节中，报告了Json-GUI-Builder图形用户界面的两个示例。表单域输入对象的核心是一个参数数组，其中每个元素定义（并呈现）表单的单个输入字段可能的输入形式有：integer和float分别生成一个指定整数和浮点数的字段;datetime生成一个指定日期的字段，包括小时和分钟;select生成一个组合框，从可用的值中选择一个值;text生成一个纯文本输入字段;domains，生成一个地理地图，可以绘制矩形域和单个标记;fileupload定义一个输入框，上传一个或多个文件。Json-GUI提供了高级功能，通过定义来丰富表单验证检查-每个参数类型都有内部的格式验证，例如浮点数和整数类型都有内置的数字格式验证。此外，还可以为行为规范添加自定义验证：例如，用户可以定义一个有效的日期时间输入，如果它早于特定日期-1970年1月1日。约束规则-由于参数值可能相互影响其行为，因此可以实现不同输入之间的约束：如果时间范围必须固定，则可以将“开始日期”参数值设置为仅在“结束日期”参数值之前有效。 这使得Json-GUI有可能指定基于HTML5表单的经典接口的所有标准约束。Conditions-Json-GUI提供了指定条件（常量或取决于值本身）以激活/停用输入表单中的参数的可能性。 这允许在管理（例如）Select和Domain参数时使用动态行为来丰富表单界面。一Select参数的常见示例可以是在线支付，Json-GUI允许呈现不同的形式取 决 于 支 付 方 法 字 段 的 值 的 字 段 ： 如 果 选 择 的 值 是“Paypal”，则GUI呈现用于“Paypal”登录的字段，具有信用卡值，GUI呈现用于信用卡配置的字段（例如，信用卡号、CVV、所有者的姓名和姓氏）等。当考虑域参数时，确保了相同级别的动态性，因为地理域的数量依赖于用户交互并且是先验未知的：取决于用户绘制的域的数量，GUI可以显示不同的表单域和信息。例如图 4考虑了三个地理域，并为每个域显示相关的地理坐标···A. 加利齐亚湾泽赖克湖Roverelli等人/SoftwareX 9（2019）2831图三.Json-GUI使用的逻辑模式。作为Json-GUI实现的标准行为，如果违反了上述规则/检查之一，则无法提交表单，也不会生成输出。如果在相关参数的定义过程中指定，则可以显示自定义消息 例子报告在其余的部分和图。8.第八条。软件构架Json-GUI提供了一个两级软件架构，如图所示。3 .第三章。更高的级别名为Form，由JSON对象自动呈现的Web表单GUI这包括参数之间的验证检查和每个值的收集，以构建整体输出，即可能按照用户定义的格式存储在文本文件中的参数和相应值的对。较低的级别，名为Fields，由定义每个参数类型的AngularJS指令此级别定义表单字段的各个行为，包括内部验证。每个验证规则可以是通用的，也可以是特定的。Json-GUI被设计为易于安装，扩展或自定义。10特别是，由于该工具是开源的，并使用免费技术开发，用户可以修改css默认值设置和使用首选的css文件，从而改变表单的呈现方式。此外，用户可以通过添加新字段的逻辑定义来呈现他/她自己的自定义字段;类似地，用户可以扩展Json-GUI Builder以获得Builder支持。软件功能JSON对象的基本元素，Json-GUI的输入，是一个参数，包含值和应用于它的所有条件。Json-GUI对象的每个参数都具有以下结构：参数：{value：{type：“parameterType”}，DisplayName：{type：“string”}，dbName：{type：“string”}，isValid：{type：“string”}，parameterType：{type：“enum（'float'，...，'fileupload'）"}，parameterCategory：{type：“integer”}，computedResult：{type：“string”}，dependencies：[{type：“string”}，...]，需要：{type：“boolean”}，可编辑：{type：“boolean”}，描述：{type：“string”}}10 https://github.com/portalTS/json-gui/wiki网站。DisplayName 属性定义要在接口中显示的参数的名称，而dbName是内部使用的唯一标识符。parameterType定义要在支持的类型中指定的类型。parameterCategory属性允许对表单中的参数进行逻辑分组，例如：出现在同一个标签中。该参数也可以根据需要进行标记，可以指定默认值是否可以编辑。描述属性包含信息框中显示的文本，可用作对用户的提示。dependency属性是一个数组，其中包含对当前参数所依赖的参数的引用。这些是应在isValid属性中使用此属性是一个字符串，包含一个JavaScript函数体，可能用于定义自定义验证。以下是一个示例，其中还为无效条件设置了自定义消息：isValid：“if（parameter.value

下载后可阅读完整内容，剩余1页未读，立即下载