2017.08.01Tips

簡単に複雑な画面が作成できる(タブ切り替え編)

  • このエントリーをはてなブックマークに追加

Mendixはノンプログラミングで画面を作成することが出来ますが、単純な画面だけではなく、複雑な画面も簡単に作成することが出来ます。

今回はタブ切り替えの画面の作成方法について紹介します。

 

前提

  • 一覧画面から詳細画面(タブ切り替えあり)を表示するアプリケーションを作成します
  • 一覧画面のリストには詳細画面のデータが表示されます
  • 画面に表示するデータ(エンティティ)はドメインモデルに定義されているものとします
  • タブ切り替え以外の手順(一覧画面の作成、メニューへの画面の追加など)は省略します

 

画面作成

①詳細画面の雛型を作成します。

②上部メニューのContainerから「Tab Container」を選択し、①で作成した画面に配置します。

③それぞれのタブに名称を付け、画面に表示するエンティティの項目を配置します。

これで、タブ切り替えの画面は出来上がりです。

 

動作確認

まずは、タブが切り替わることを確認します。

アプリケーションを実行して、一覧画面から「New(新規作成)」ボタンをクリックし、今回作成したタブ切り替えの詳細画面を開きます。

左側のタブだけの情報が表示されていることが分かります。

右側のタブをクリックします。表示が切り替わることが分かります。

続いて、入力した情報が正しく登録されることを確認します。

それぞれのタブの項目に情報を入力し、「Save」ボタンをクリックします。

一覧画面に戻ります。

タブ切り替えの画面で入力した情報が表示されていることから、正しく登録されたことが分かります。

 

まとめ

いかがでしたでしょうか。

スクラッチでタブ切り替えの画面を作成しようとすると、タブ別のhtmlの作成と表示を制御するjavascriptの作成など、多くの手間とスキルを必要としますが、Mendixではそれらが無くても簡単にタブ切り替えの画面を作ることができます。

他にもMendixから提供されている部品を使用するだけで、作成出来る複雑な画面がありますので、それについても順次紹介していきたいと思います。

 

  • このエントリーをはてなブックマークに追加