Mendix敏捷开发零基础学习《一》-基础（数据模型、页面创建、数据源绑定、属性绑定、关系型数据模型）

Mendix敏捷开发零基础学习《一》

一、环境依赖

1. Mendix账号： 需要用公司邮箱注册
   注册地址： https://signup.mendix.com/link/signup/?ref=158899
2. 开发工具： MendixStudioPro 8.12.4
   下载链接: https://pan.baidu.com/s/1BBdli6iJ2ZV5Y7uEJTkCuA 提取码: yttq
3. 系统要求： win10
4. 安装JDK： OpenJDK11U-jdk_x64_windows_hotspot_11.0.3_7
   下载连接：https://pan.baidu.com/s/1PE4GBkBoL-8Wjx-mvelzVA 提取码：4cqt
5. 安装.NET环境： Microsoft .NET Framework 4.7.2
   下载连接：https://pan.baidu.com/s/12LQqGpMFVKzyNcrUZGkinw 提取码：hosx
6. 安装C++环境： Microsoft Visual C++ 2010 SP1 Redistribution Package
   下载连接：https://pan.baidu.com/s/11gVjinWdhY3J1XfX9VrPvg 提取码：sygg

二、业务场景

现有一学校，需要记录课程信息（课程信息里边包含该课程需要几天、价钱、说明等）、教师信息(姓名、邮箱等)、课程位置（标题、地址等）、报名人员（名称、地址、邮箱等）、课程培训活动等，方便维护系统。

三、需求分析

根据业务场景分析，我们需要创建五个数据模型（课程Courses、教师Teacher、地址Location、报名人员Trainee、课程培训活动TrainingEvent），分别来存储这些信息。下边列举一下具体的属性有哪些：

课程Courses：

属性	备注	类型
Title	标题	String
Description	说明	String
Duration	需要多久/天	Integer
Price	价钱	Decimal

教师Teacher：

属性	备注	类型
Name	名称	String
EmailAddress	邮箱地址	String

地址Location：

属性	备注	类型
Name	名称	String
Address	地址	String

报名人员Trainee：

属性	备注	类型
Name	名字	String
Address	地址	String
EmailAddress	邮箱地址	String

课程培训活动TrainingEvent：
这是一个一对多的数据结构，所以需要依附于其他的数据表，下面会说到怎么配置，这里就列举需要创建的属性

属性	备注	类型
startDate	开始时间	Date and time（这是Mendix提供的时间类型）
endDate	结束时间	Date and time（这是Mendix提供的时间类型）

四、项目实现

根据以上分析结果，我们可以根据MendixStudioPro开发工具实现基础的业务场景，下面开始：

1、创建项目

1. 打开MendixStudioPro新创建一个空白项目，选择New App 按钮。
   
2. 选择Starter Apps，选择Blank App模版。这里有很多模版，有机会可以试试。
   
3. 然后点击Use this starting point开始使用当前模版
   
4. 我们在App Name填写项目名称，在EnableOnlineServices选择No（该选项是否需要联机服务，联机服务会很慢，所以选择NO。我们在本地也不需要联机服务！），在Project Directory选择项目要保存的路径。一般情况下只需要填写这三项内容即可。点击Create app创建我们的项目工程。
   
5. 我们新创建的工程，进来以后有我们常用的三大块，1.是我们页面的目录树。2.是我们设计页面的工作台。3.是我们常见的一些组件，比如按钮、表格等。
   

2、创建数据模型

1. 根据需求，我们首先需要创建数据模型，Mendix创建数据模型很简单，双击左侧目录树的DomainModel，然后在打开的页面点击Entity按钮，就会出来Entity的数据表。
   

2. 双击Entity数据表，设计课程Courses 数据结构，在弹出的页面上输入Name属性（当前实体的名称），然后点击New新建实体中的属性。
   

3. 在弹出的页面上输入Name（属性的名称），选择Type（数据类型）为String（字符类型），输入MAX length（最大长度）为200，然后点击OK。
   

4. 循环2-3步骤创建其他的属性，这里就不列举了，因为创建方式都是一样的。

5. 循环1-3步骤将其余的数据表结构创建好。
   

3、创建页面

1. 表结构有了，我们开始搭建我们的页面程序，点击左侧目录树的Home Web（该页面是我们程序的主入口）。
   
2. 我们根据业务场景需要先创建四个部分，第一部分是课程Courses，第二部分是地址Location，第三部分是教师Teacher，第四部分是报名人员Trainee，所以我们需要分为四列。 点击当前内容，右击该区域的上标题栏目右击选择Add column left添加四列。Mendix会自动将内容分为四等分。
   
3. 添加好四列以后，我们在3区域的Building blocks搜索组件card，选择Card Action组件，然后拖入到每一列当中。
   
4. 双击下列红框中，我们将图标进行更换
   
5. 在弹出的页面中点击Select按钮。
   
6. 在弹出的页面搜索book，选择下列图标，然后点击select按钮，就可以把当前图标更换为符合我们需求的图标。
   
7. 选择好以后，开发工具会自动跳转到第5步的页面，给他赋予一个点击事件，我们就让他点击以后跳转一个列表页面，在On click下拉列表中选择Show a page
   
8. 选择好以后系统会弹出一个选择页面的窗体，我们这时是没有页面的，所以点击New按钮新创建一个页面。
   
9. 我们在新弹出的窗口Page name中填写页面名称（需要英文），因为我们需要让他跳转到列表页所有选择Lists->List Default（默认列表页），在NavigationLayout下拉框中选择Atlas_Default选项（跳转），该选项是点击按钮以后页面的打开方式，弹出或跳转等。然后点击OK按钮
   
10. 开发工具会自动跳转到第5步的页面，然后点击OK按钮。该功能和页面就创建好了。
    
11. 创建完成以后，左侧目录树就会出现我们刚才创建的页面。
    
12. 说一个简单的方式，可以直接将Open Page按钮复制刚才我们的操作。就是将刚才创建的页面直接拖到Open Page上就可以了。
    
13. 拖好以后双击 Open Page按钮，将名字改为自己的，在Caption输入框中直接改，然后点击ok就可以了。
    
14. 其他几列也同样的循环4-13步骤，我这里列举一下需要选择图标、列名称、和页面命名。

名称	图标	页面命名
Courses	book	Courses_Overview
Locations	map	Locations_Overview
Teachers	user	Teachers_Overview
Trainess	education	Trainess_Overview

4、数据源绑定

1. 将其余的三列创建好以后，点击上方Run Locally按钮发现项目是运行报错，是因为我们还没有跟数据进行绑定。所以才会导致运行报错。
   
2. 将页面跟数据进行绑定，双击Courses_Overview页面，在UnKnown右击选择Select data source（选择数据源），
   
3. 在弹出的页面上点击Select按钮
   
4. 在弹出的页面上选择我们刚才创建的数据模型Courses，然后点击Select按钮。
   
5. 开发工具会自动跳转到3步骤，点击OK按钮，该页面就和Courses数据模型绑定成功。
   
6. 开发工具会弹出一个提示框来询问我们是否自动的响应页面属性，我们选择NO按钮不需要。
   

5、属性绑定

1. 双击 页面上的Title属性，在弹出的窗口选择Edit按钮，来跟数据模型中的属性进行绑定。
   

2. 在弹出的窗口上选择New按钮。
   

3. 在弹出的窗口上选择Select，开发工具会弹出Courses数据模型的所有属性，我们选择Title属性即可，然后点击Select按钮。
   

4. 点击OK按钮，完成选择
   

5. 然后系统会自动出现一个Index序号，我们将这个需要输入到Caption中（代表刚才双击页面上Title属性显示序号{1}的数据），然后点击OK按钮->OK按钮 完成数据绑定。
   

6. 循环 1-5步骤，将其他 属性 进行绑定。
   

7. 循环目录四、项目实现 的 4和5章节的步骤点击跳转，将其余的 页面 (Locations_Overview、Teachers_Overview、Trainess_Overview)进行数据绑定。然后我们点击Run Locally运行项目，然后点击View按钮进行预览。
   
   

8. 我们可以点击我们创建的四部分，进行查看。
   

6、数据新增

1. 我们可以发现，里边现在是空的，没有数据的。所以我们现在需要实现新增功能。
   
2. 我们现在以Courses_Overview列表页面为例，实现一下新增功能。双击目录树Courses_Overview页面，然后双击页面上Add按钮。
   
3. 我们在弹出的窗口On click下拉框中，选择Create object创建一个对象类型。
   
4. 选择好Create object后，开发工具会让我们选择对应的Entity（就是我们创建的数据模型），我们点击Select，在弹出的页面选择Courses数据模型，然后点击select按钮完成选择。
   
   
5. 紧接着我们在选择对应的页面，点击On click page中的Select按钮，来选择对应的新增页面。
6. 这个时候我们可以发现，我们是没有新增页面的，所以点击New按钮，创建一个新增页面。
   
7. 在弹出的页面会发现Page name会自动为我们创建名称，所以我们不需要更改。在Navigation layout下拉选项中选择PopupLayout（弹出页面方式），然后选择Forms中的Form Vertical。然后点击Ok->Ok按钮，完成页面创建。
   
   
8. 完成并保存以上操作以后，我们重新点击Run Locally 运行我们的项目，浏览一下。点击Courses菜单进入列表页，在列表页上点击右上角的Add按钮，这时候我们就可以发现，有弹出新增页面，可以新增数据了。
   
   
   
9. 然后我们重复当前章节的操作步骤，完成对其他 (Locations_Overview、Teachers_Overview、Trainess_Overview)页面的新增功能。这里就不一一列举了。步骤都是相同的，Entity选择对应的数据模型即可。完成以上操作以后，所有的列表页面都有新增功能了。

7、数据删除

1. 新增功能有了，肯定还需要用到删除功能，不能光新增不能删除对吧？接下来我们做一下删除功能，这里还是以Courses_Overview列表页面为例。双击打开Courses_Overview页面，在3号区域ToolBox中的widgets中搜索button按钮，找到Delete button，拖入到对应的位置，就完成删除的操作了。重复当前步骤完成其他 (Locations_Overview、Teachers_Overview、Trainess_Overview)页面的删除功能。
   

8、关系型数据模型

1. 经过以上操作我们就大体实现了四大模块（课程、老师、地址、学员）的新增和删除工作了。现在根据学校的实际需求出发，学校的维护人员需要发布培训活动，培训活动需要包含课程和培训课程的老师，还有培训地址，方便学员进行报名。需求分析完毕，接下来我们开始操作。我们首先需要在数据模型中将TrainingEvent（培训活动）的模型与课程、老师、地址进行一对多的关联，方便维护人员进行维护，双击 左侧目录树中的DoMain Model，然后在打开的窗口中从TrainingEvent模型向其他三个模型（Courses、Teacher、Location）拉箭头，就可以完成模型一对多的绑定。
   
2. 数据模型绑定成功以后，我们需要在Home_Web主页面添加新模块的入口，首先介绍一下在MendixPro中怎么操作表格。

• 如何选择行:
  鼠标点击下图所示区域是选择一整行
  
• 如何选择列:
  鼠标点击下图所示区域是选择对应的列
  
• 如何选择表格:
  鼠标点击下图所示区域是选择整个表格
  

3. 双击左侧目录树中的Home_Web页面，然后选择行以后鼠标右击选择Insert row below。
   
4. 选择Insert row below以后，页面会出现让我们选择将新建的行分成几等份，我们直接跟上一行一样，分成四等份即可。
   
5. 参考目录四中的3.创建页面章节的3-13的小节完成页面创建点击跳转，参考目录四中的4.数据源绑定小节完成数据源绑定点击跳转， 参考目录四中的5.属性绑定 小节完成属性绑定点击跳转， 参考目录四中的6.数据新增 小节完成数据新增点击跳转，我这边列出来页面命名、图标、以及名称。

名称	图标	页面命名
TrainingEvent	calendar	TrainingEvent_Overview

5. 完成以上操作以后，我们就可以对培训活动进行新增操作，我们可以看到在新增页面会自动带出课程和培训课程的老师，还有培训地址信息，到这一步就完成了关系型一对多数据模型的创建。