Mendix始めてみました（３）

前記事

初めに

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

新しいページを作ってみた

Mendix Studio Proでプロジェクトを作成します。
ここの表題では、新しいページを作ってみたいと思います。

プロジェクトっぽく、ページ毎にフォルダを切りたいと思います。

• Add folder→新しいフォルダを追加
• Add page →ページを追加
• Add microflow →新しいマイクロフローを追加
  左下の赤枠の感じでフォルダ構成を決めてみました。

ページ遷移について

新しいページを作ってみたら次はページ移動する仕組みを作ってみたいですね。
ページを移動する為にボタンを配置します。

ツールボックスにページを開くボタンがあります。
これを使ってみましょう。
設定は以下の通り。
On ClickでShow a pageを選択。
下のPageで新しく作ったページを選択。
それ以外のボタン名などは任意で入力。


では、実際に動かしてみましょう。


ページが移動することが分かりました。

ページ遷移（応用編）

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

• ページ情報を作る
  Domain Modelに下記図のようなエンティティを作成してください。
  各情報の中身はString型で作りましょう。
  とりあえず、それっぽくpageNoとtitleというのを作りました。
  
  

• ページ情報を持たせてみる
  次に、ＨＯＭＥページを開くときに、先ほどのエンティティを
  持たせてみたいと思います。
  Navigationで以下の設定をします。
  ここで、Homeを開くときにOpen_HomePageという
  アクションが動くように設定します。
  

• Open_HomePageの中身
  HomePageInfoというオブジェクトで
  homeInfoエンティティにPageNoとtitleを設定します。
  
  
  EndEventでobjectの戻り値を設定します。
  
  これでhomeInfoエンティティにpageNoとtitleの情報を持った状態で
  homePageに遷移することができます。

• homePage画面
  toolバーからtextを選択して、先ほど設定したものが
  表示されるのか確認していましょう。
  textは以下のように配置してください。
  
  実際に動かしてみると「Topページ」が表示されたことが分かります。
  

• ナビゲーションメニューから遷移する
  画面左にメニューを追加することができます。
  

左メニューにページ01へ行くためのメニューができました。
ボタンをセットした時と同じように遷移します。

まとめ

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