自定义组件(Pluggable Widget)开发入门篇_mendix自定义组件-程序员宅基地

技术标签: widget  Mendix  低代码开发  低代码  

摘要

本篇介绍如何构建一个Pluggable Widget,手把手教你从零开始做自己的Pluggable Widget。通过本篇,您将学习构建Pluggable Widget 的环境搭建,学习制作一个动态数据绑定并能进行数据回传的Text input 组件。
官方教学中文版,附送教学源码
链接:https://pan.baidu.com/s/1mz0Z293Cvsy4W9ZBJxfqiw
提取码:SIMX

1. 环境安装:以window操作系统为例

Node.js安装:

自定义组件的相关依赖通过node.js来管理。
首先在打开URL:Node.js 中文网 (nodejs.cn)
1.png
具体安装教程请参考:https://blog.csdn.net/qq_38162116/article/details/118576023

Yeoman 安装

简介:
Yeoman 是一个通用的脚手架系统,允许创建任何的 app 。它可以迅速搭建一个新项目,并且简化现有项目的维护。
Yeoman 构建的项目与语言无关。 它可以构建任何语言的项目 (Web, Java, Python, C#, 等)。
Yeoman 本身不能做任何操作。 每个操作都是由 generators 基本插件在 Yeoman 环境中完成的。 这里有很多公共的 generators, 您可以很轻松地创建一个 generator 去匹配任何工作流。 Yeoman 总是可以为您需要的脚手架工具作出正确的选择。

打开控制台 powershell
安装Yeoman指令:
npm install -g yo

Mendix Pluggable Widget安装

Mendix Pluggable Widget是构建自定义组件的重要生成工具,帮我们导入相关依赖,安装Mendix Pluggable Widget Generator 指令:
npm install -g @mendix/generator-widget
下载一个IDE编辑软件——此处推荐Microsoft Visual Studio Code:https://code.visualstudio.com/
当安装好环境后,您可以向自己确认以下几个问题的答案:

  • 我是否可以看懂基本的JavaScript和TypeScript 语法?
  • 我是否使用了解过React 和React Native框架?
  • 我想通过自定义组件完成什么样的工作或贡献?

2. 在开始制作自定义组件前,需要完成的工作

1.在Mendix Studio Pro中 创建一个空的Mendix 项目,这个项目的目的是测试自定义组件。2.png
2. 在如图所示点击Show App Directory in Explorer,找到 Project文件夹
3.png
3. 在下图目录中建立一个文件夹来存放创建Pluggable Widget,如 plug_Widget_WorkArea(此处可自定义名称)
4.png
4. 创建自定义组件项目
通过指令进入我们刚刚创建的文件夹,输入指令:
yo @mendix/widget TextBox
5.png
上图出现后,生成器会问您几个问题,问题的答案参考下面:

  • Widget name: {Your widget name},您的部件名称
  • Widget Description: {Your widget description} 您的部件描述
  • Organization Name: {Your organization name} 您的组织名称
  • Copyright: {Your copyright date} 版权日期
  • License: {Your license}
  • Initial Version:{Your initial version number}最初版本号码
  • Author: {Your author name} 作者名称
  • Mendix App path: …/…/ Mendix 项目路径,它会自己生成到widget文件夹下
  • Programming language: TypeScript 或者JavaScript;(建议选择JavaScript)
  • Widget type: For web and hybrid mobile apps
  • Widget template: Empty widget (recommended for more experienced developers)
  • Unit tests: No
  • End-to-end tests: No
    6.png
    输入
    Code open TextBox
    7.png
    下图为打开后点击package.json文件您能看到的工程项目信息,一般来说不需要自己修改。
    8.png
    项目目录介绍:
    9.png

3. 开发组件

3.1自定义组件功能:

动态展示在text box 输入的string。在自定义组件中输入删除,也会同时影响textbox 的string。
功能的简单预览实现可参考文章 ,以mendix的方式实现
https://mendix.bbscloud.com/post/fa7017202ada44729a9c849b60aa641b

3.2 自定义组件预览

首先要了解Pluggable Widget Property Types - 自定义组件的属性类型。您可以参考此网站:https://docs.mendix.com/apidocs-mxsdk/apidocs/pluggable-widgets-property-types
在开发之前,先通过指令 npm run build构建widget
10.png

然后在mendix项目中,选择App - Synchronze App Directory,就可以在tool box中找到刚刚我们构建的自定义组件的名称。
11.png
把Enter to Action Widget拖进 home_web.page文件中的data view组件中。
12.png
双击这个自定义组件,查看项目生成的基本属性。这里可以看到基本属性有Default value,它的描述是 Sample text input。
13.png

3.3 自定义组件编辑

首先编辑展示在Mendix studio Pro的UI(如下图所示)。
13.png
在EnterToAction.xml文件中编辑输入

                <caption>attribute</caption> 
                <description>The attribute connect to the text box</description>
                <attributeTypes>
                    <attributeType name="String"/>

                </attributeTypes>
            </property>
            <property key="action" type="action">
                <caption>On Enter</caption>
                <description>Action to be performed when enter key is pressed</description>
            </property> 

上面xml 文件代码若要深入理解它的涵义,您可参考:https://docs.mendix.com/apidocs-mxsdk/apidocs/pluggable-widgets-property-types#action
14.png
编辑完成后,重复章节 - 自定义组件预览后,右键点击自定义组件 - 更新自定义组件
15.png
双击自定义组件检查UI
16.png
为自定义组件配置属性,运行检查效果
17.png

3.4 实现数据绑定 Data Binding

数据获取,需要对React进行系统学习,此案例希望参考代码的注释部分。
首先需要主要编辑的两个文件是

<?xml version="1.0" encoding="utf-8"?>
<widget id="mendix.entertoaction.EnterToAction" pluginWidget="true" needsEntityContext="true" offlineCapable="true" supportedPlatform="Web"
    xmlns="http://www.mendix.com/widget/1.0/"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.mendix.com/widget/1.0/ ../node_modules/mendix/custom_widget.xsd">
    <name>Enter To Action</name>
    <description>Trigger an action when the user hits the enter key in a text input</description>
    <icon/>
    <properties>
        <propertyGroup caption="General">
            <!-- <property key="sampleText" type="string" required="false">
                <caption>Default value</caption>
                <description>Sample text input</description>
            </property> -->
            <systemProperty key="Label"/>
            <property key="attribute" type="attribute" >
                <caption>attribute</caption>
                <description>The attribute connect to the text box</description>
                <attributeTypes>
                    <attributeType name="String"/>

                </attributeTypes>
            </property>
            <property key="action" type="action">
                <caption>On Enter</caption>
                <description>Action to be performed when enter key is pressed</description>
            </property>
        </propertyGroup>
    </properties>
</widget>

EnterToAction.jsx文件代码如下:

import {
     Component, createElement } from "react";

import "./ui/EnterToAction.css";

export default class EnterToAction extends Component {
    
    constructor(props){
    //当你实现自定义组件,需要实现多个method的时候,首先你需要创建构造方法
        super(props);
        this.handleChange=this.handleChange.bind(this);
        this.handleKeyPress= this.handleKeyPress.bind(this);
    }
    handleChange(event){
    
        const{
    attribute}=this.props;
        attribute.setValue(event.target.value);//当自定义组件内地数据改变,实现数据回传到mendix提供的textbox中
    }
      //action 接口实现如下:
            
            // export interface ActionValue {
    
            //     readonly canExecute: boolean;
            //     readonly isExecuting: boolean;
            //     execute(): void;
            // }
    handleKeyPress(event){
    //实现按键Enter,执行action,action包括调用微流纳流等;
        const{
    action}=  this.props;
        if(event.which===13 && action.canExecute){
    
            action.execute();
          
        }

    }
    render() {
    
        const{
    attribute}= this.props;//获得数据从EnterToAction.xml的属性
      return(<input
        type="text"
        className={
    'form-control ${this.props.class}'}//设置UI style
        value={
    attribute.value}//显示从EnterToAction.xml的属性获得的数据。
        onChange={
    this.handleChange}//调用当value变化时的方法
        onKeyPress={
    this.handleKeyPress}//调用按Enter键时的方法。
       />) ;
    }
}

3.5 Demo展示

在完成对以上代码编辑后,这里通过在Terminal终端执行npm run build或者npm run dev进行调试工作。
实现效果如下图所示:
TextBoxHelloWorld.gif

在这里插入图片描述

Mendix官网:https://www.mendix.com/zh/

Mendix中国论坛:https://forum.mendix.tencent-cloud.com/

Mendix行业解决方案:https://solutions.mendix.com/

Mendix平台指南:https://www.mendix.com/evaluation-guide/

Mendix动画展示:https://www.mendix.com/demos/

谢谢阅读!

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Mendix/article/details/118754155

智能推荐

【手写数字识别】之训练调试与优化_如何改进手写数字识别的性能?-程序员宅基地

手写数字识别模型训练的优化思路包括计算分类准确率和检查模型训练过程,使用PLT库或tb-paddle进行可视化。

keil5在原有工程上修改工程名_keil 修改什么会改变.uvoptx-程序员宅基地

文章浏览阅读1.4k次。keil建立工程,需要添加启动文件,需要修改魔术棒设置,需要添减文件和文件路径等等…,不难,倒是很麻烦;如果有现成的工程(往往都会有现成的工程),只需要稍微修改工程信息,借助这个基础工程会节省很大的开发周期;故,说明下如何简单快速的修改工程;简单3个步骤 很实用!!!1.在工程文件目录中,将old.uvoptx和old.uvprojx名字改成new.uvoptx和new.uvprojx。并其他 .uvoptx文件统统删除。如:2.双击打开new.uvproj,点击,在弹出的界面上,双击“Progec_keil 修改什么会改变.uvoptx

android 4.3 动态权限,安卓Android 4.3系统更新内容介绍:注重细节-程序员宅基地

文章浏览阅读233次。总是搜索Wi-Fi信号在Wi-Fi的高级设置中,有一个“总是搜索Wi-Fi信号”(Scanning always available)选项,而且该选项默认是开启的。这意味着Wi-Fi开关总是保持开启状态,这并不是bug。鉴于目前越来越多的应用需要定位,而通过Wi-Fi定位耗电比通过GPS定位低得多,所以谷歌开启此选项的目的是为了省电,而不是耗电。当然,对于不想或者不需要通过Wi-Fi定位的玩家,可..._scanning always available

简述软件工程、软件开发方法、软件开发工具相关概念及之间的关系_试说明软件、工程、软件工程、软件过程含义及其相互关系-程序员宅基地

文章浏览阅读1.2w次。1.软件工程:软件工程是研究和应用如何以系统性的、规范化的、可定量的过程化方法去开发和维护软件,以及如何把经过时间考验而证明正确的管理技术和当前能够得到的最好的技术方法结合起来的学科。2.软件开发方法:开发软件的方法。已形成了八类软件开发方法。1.Parnas方法2.SASD方法3.面向数据结构的软件开发方法4.问题分析法5.面向对象的软件开发方法6.可视化开发方法7.ICASE8.软件重用和组件连接3.软件开发工具:软件开发工具是用于辅助软件生命周期_试说明软件、工程、软件工程、软件过程含义及其相互关系

a113 智能音箱芯片方案_最全盘点!智能音箱十大主芯片商及18大代表产品产业链...-程序员宅基地

文章浏览阅读298次。据国外媒体VentureBeat报道,市场调研公司Canalys发布的报告显示,2018年第二季度,全球智能音箱出货量增长了187%。苹果、谷歌、小米、亚马逊等公司的智能音箱总出货量为1680万台,高于第一季度的900万台。图片来源于市场调研公司Canalys具体产品拆解信息如下:1、Amazon Echo Dot智能蓝牙音箱2、谷歌Home Mini3、苹果HomePod4、天猫精灵M15、天猫..._智能音箱 t113 芯片

微信invalid signature,微信IOS分享失效,微信刷新之后IOS不能分享,spa单页面微信分享,wx.ready不执行?_weixin-js-sdk ios分享必须刷新页面-程序员宅基地

文章浏览阅读2.3k次,点赞2次,收藏7次。微信的坑,哭着也要填完。小白选手刚接触微信公众号网页,产品出来个需求,要求h5网页在任何页面都可以分享,并且分享的内容是自定义的(B端配置),我一听这还不简单,微信官方文档里写的明明白白,好说。我用的是vue2版本+微信的jssdk是npm安装的1.4.0的版本。使用的是vue-router的< history >模式。大概有ABCD四个页面吧。自己想的很美好,也上网查阅了前辈们说的大概意思就是:ios页面在根目录下执行一次config接口注入权限验证配置Android页面每个页面都执_weixin-js-sdk ios分享必须刷新页面

随便推点

h5学习笔记:横排导航(2)_h5怎么做横向导航-程序员宅基地

文章浏览阅读1.5k次。使用flex的布局可以让横排导航变得更加容易,但是对于IE 8 9 那样就不好意思了。将显示方法设置为flex,那样子导航也很容易出来了。 默认组合ul 和li 是竖排的布局,为了让菜单能够横向,于是从以前的做法可以采取float然后让每一个元素都产生偏向左边的做法。而flex的布局可以让这块变得容易.menu{ display: flex; }这样子就可以让每一个li进_h5怎么做横向导航

Go 开发 HTTP 的另一个选择 fasthttp-程序员宅基地

文章浏览阅读522次。2019独角兽企业重金招聘Python工程师标准>>> ..._go fasthttp 路由参数

前端用serialize()提交表单后端接收不到数据_cshap 后台接收.serialize-程序员宅基地

文章浏览阅读880次。如题,需要在input标签中加入name属性才能序列化<form id="loginForm" name="login" method="post" action=""> <input type="hidden" name="action" value="login"/> <table> <tr> <td> ..._cshap 后台接收.serialize

OpenStack Ironic 裸金属的配置及使用_ironic 裸金属管理流程-程序员宅基地

文章浏览阅读3.3k次,点赞4次,收藏13次。环境当前OpenStack版本为 Rocky操作系统为 CentOS 7.6api节点即控制节点conductor节点即裸金属计算节点控制节点 node1、node2、node3计算节点 node1、node2、node3、node4裸金属服务节点 node4虚拟IP vip一、安装软件包在所有节点上都安装 yum 仓库yum install centos-release-openstack-rocky -y在api节点上安装//openstack-nova-serialpr_ironic 裸金属管理流程

debounce防抖函数的使用(js和vue)__.debounce使用-程序员宅基地

文章浏览阅读3.1k次。debounch防抖函数主要应用场景,解决按钮快速点击,多次请求的问题和input输入框多次请求的问题。接下来直接介绍在js和vue项目中的使用方式。lodash工具库地址:https://lodash.com/docs#debounce三个参数: _.debounce(func, [wait=0], [options={}]) options有如下三个可选参数配置:leading:指定在延迟开始前是否执行func(默认为false)。 maxWait:设置func...__.debounce使用

在线去水印软件-程序员宅基地

文章浏览阅读382次。网址:在线去水印软件https://www.shuiyinyun.com/news.html下面,具体来操作下如何使用水印云转实现在线去水印.打开软件界面后,将所需去除水印的图片添加进去,然后点击“开始去水印”仅仅几秒后,就可转换完成,将图片去水印后的图片下载到本地即可。...

推荐文章

热门文章

相关标签