Mendix始めてみました（３）

[前記事](https://qiita.com/lacky-lacky/items/6fc2ec78c95ea0aaebf0)

# 初めに
前回までは色々とMendixがどのようなものか見てみましたので
今回は実際に機能の部分に触れてみたいと思います。

# 新しいページを作ってみた
Mendix Studio Proでプロジェクトを作成します。
ここの表題では、新しいページを作ってみたいと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1991436/df2a67e8-b976-b202-ab2d-ad343ea90d0a.png)
プロジェクトっぽく、ページ毎にフォルダを切りたいと思います。
- Add folder→新しいフォルダを追加
- Add page →ページを追加
- Add microflow →新しいマイクロフローを追加
左下の赤枠の感じでフォルダ構成を決めてみました。

# ページ遷移について
新しいページを作ってみたら次はページ移動する仕組みを作ってみたいですね。
ページを移動する為にボタンを配置します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1991436/c06dff90-0a7c-535f-b80e-97fbf6ab86b3.png)
ツールボックスにページを開くボタンがあります。
これを使ってみましょう。
設定は以下の通り。
On ClickでShow a pageを選択。
下のPageで新しく作ったページを選択。
それ以外のボタン名などは任意で入力。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1991436/88de3079-ae1d-1517-d70d-08f55289f7a1.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1991436/a187bdaa-e230-7197-2bab-662fad9a77a3.png)
では、実際に動かしてみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1991436/6bc75d20-944b-c880-144f-2cfd0d02f9a6.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1991436/5c3b8d82-8b45-f285-5499-37cfbe64763e.png)
ページが移動することが分かりました。

# ページ遷移（応用編）
実際にjavaScriptなどをやっていて分かる方もいるかと思いますが、
ページ遷移する際に、ログを表示したり色々なアクションをして
普通はページ遷移しますよね。
Mendixでもそれが可能みたいです。
実際に試してみたいと思います。

- ページ情報を作る
Domain Modelに下記図のようなエンティティを作成してください。
各情報の中身はString型で作りましょう。
とりあえず、それっぽくpageNoとtitleというのを作りました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1991436/01fb865c-0ab4-2451-4a97-9da43fecda14.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1991436/eb8e8801-13a9-b495-b224-41710e5e23f3.png)


- ページ情報を持たせてみる
次に、ＨＯＭＥページを開くときに、先ほどのエンティティを
持たせてみたいと思います。
Navigationで以下の設定をします。
ここで、Homeを開くときにOpen_HomePageという
アクションが動くように設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1991436/30293235-5d18-7ba5-4c44-6da6dd16e16d.png)

- Open_HomePageの中身
HomePageInfoというオブジェクトで
homeInfoエンティティにPageNoとtitleを設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1991436/2d2a5eeb-66c0-cf97-4088-7e84ae9e6efa.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1991436/d599be36-5375-30c2-a5a2-692caa8eecb5.png)
EndEventでobjectの戻り値を設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1991436/60f571ef-0f53-b722-8460-54ba2f4218e2.png)
これでhomeInfoエンティティにpageNoとtitleの情報を持った状態で
homePageに遷移することができます。

- homePage画面
toolバーからtextを選択して、先ほど設定したものが
表示されるのか確認していましょう。
textは以下のように配置してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1991436/db366062-680d-9a86-5b53-d050a47fd225.png)
実際に動かしてみると「Topページ」が表示されたことが分かります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1991436/2d508ee4-4d82-83c3-c1e0-0cc2924f3e5a.png)

- ナビゲーションメニューから遷移する
画面左にメニューを追加することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1991436/99c3d2bb-94a9-bd86-951a-ba4e61e23723.png)

左メニューにページ01へ行くためのメニューができました。
ボタンをセットした時と同じように遷移します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1991436/33c4b4c7-f6ce-a53c-b6ca-1f37e287e4ff.png)


# まとめ
今回は、画面遷移する方法を身に着けてみました。
プログラム言語でやるように簡単にボタンを押したときの
アクションを作ることが出来たり、
値を次のページに持っていくことができたりすることが
できることが分かりました。