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：

教師Teacher：

地址Location：

報名人員Trainee：

課程培訓活動TrainingEvent：
這是一個一對多的資料結構，所以需要依附于其他的資料表，下面會說到怎么配置，這里就列舉需要創建的屬性

四、專案實作

根據以上分析結果，我們可以根據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步驟，我這里列舉一下需要選擇圖示、列名稱、和頁面命名，

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.資料新增 小節完成資料新增點擊跳轉，我這邊列出來頁面命名、圖示、以及名稱，

5. 完成以上操作以后，我們就可以對培訓活動進行新增操作，我們可以看到在新增頁面會自動帶出課程和培訓課程的老師，還有培訓地址資訊，到這一步就完成了關系型一對多資料模型的創建，