Layouts and Snippets

Size: px

Start display at page:

Download "Layouts and Snippets"

ぜんまののした
5 years ago
Views:

1 レイアウトとスニペット Mendix バージョン開発者製作日修正日 5 Robin Ernste 11 19, : , :28 この章ではレイアウトとスニペットを使ったページ作成の基礎を学習します目次 Layouts レイアウト Page Components ページ構成要素 The value of Layouts レイアウトの値... 2 Styling スタイルを設定する Creating a new layout レイアウトを新規作成する Layout Widgets レイアウトウィジェット... 4 Desktop, Tablet or Mobile? デスクトップタブレットモバイルの区別 Menu Widgets メニューウィジェット Menu Bar メニューバー Navigation Tree ナビゲーションツリー Simple Menu Bar シンプルメニューバー Menu Source メニューソース Project Navigation プロジェクトナビゲーション Device Profiles デバイスプロフィール Menu Document メニュー文書 Redirection to Device Types デバイスタイプに基づくリダイレクト Snippets スニペット Layout Examples レイアウトの例... 6 Example 例 Related content 関連するコンテンツ

2 1 Layouts レイアウトレイアウトから始めましょうレイアウトの構成要素と実際の価値はどのようなものでしょうか 1.1 Page Components ページ構成要素ページは下記の 2 つの重要な要素から構成されていますレイアウト: ページの構造 PowerPoint に事前設定されているレイアウトのようなものコンテンツ: ページ構造の範囲内で表示されるものページをモデリングする際ページ作成時にレイアウトを選択しましたまたその存在も確認しましたここではレイアウトとレイアウトで何を追加できるのかに注目します 1.2 The value of Layouts レイアウトの値レイアウトはページのテンプレートとして使い回せるデフォルトのページ構造を定義するこ 2

とによりユーザーインターフェースを構造化するために使われますこの構造を使いエンドユーザーに見せるアプリケーション表示をデザインすることができますアプリをモデリングする前にユーザーインターフェース構造を事前に定義することが推奨されますここではレイアウトがない状態から始めましたが基本的ながらも事前に定義済みのレイアウトもいくつかあります DesktopLayout

3 とによりユーザーインターフェースを構造化するために使われますこの構造を使いエンドユーザーに見せるアプリケーション表示をデザインすることができますアプリをモデリングする前にユーザーインターフェース構造を事前に定義することが推奨されますここではレイアウトがない状態から始めましたが基本的ながらも事前に定義済みのレイアウトもいくつかあります DesktopLayout ロゴ入りのヘッダーとメニューバーが入る仮コンテンツ入りテキスト入りのフッター PopupLayout 一般的に仮コンテンツのみが含まれる大抵はまずデスクトップ用のアプリケーションインターフェースから作成しますですがアプリは簡単にモバイルやタブレット用に変換できますデバイス特有のレイアウト要件に合わせ各デバイスに一式のレイアウトを用意することが可能ですデバイス特有のレイアウトが出来上がったらそれをテンプレートとして使用しデバイス特有のページを作成することができます 3

4 2 Styling スタイルを設定するレイアウト以外にもお客様ブランドに合った色使いを適用するなどアプリケーションには特定のルックフィールを持たせるべきですこの作業は CSS ファイルを介して Mendix のページ要素に接続されている一連の設定済みのクラスを使って CSS/Bootstrap で行いますアプリケーションデザインのこの部分はとても素晴らしく柔軟性は高いのですがこれは高度な作業であるため CSS や HTML に関する特定の知識が必要になります現段階ではデフォルトのスタイル設定を使用します 2.1 Creating a new layout レイアウトを新規作成する前述のとおりベーシックなアプリ開発の基本要件を満たしたレイアウトが既に一定数用意されていますですがより洗練されたアプリを作成する場合はレイアウトをさらに高度なセットアップが必要です以下の節ではレイアウトを新規作成するための基礎を説明します 2.2 Layout Widgets レイアウトウィジェットまず考えるべきはレイアウトの新規作成に必要な要素にはどのようなものがあるかということです基本的なデザイン方法はその後に説明します各要素のプロパティは Mendix のオンライン資料に記載されていますレイアウトコンテナレイアウトコンテナはレイアウトをヘッダーサイドバーフッターなどのリージョンに区分しますトップレベルのウィジェットはレイアウトコンテナのみに制限しなければなりませんまたレイアウトコンテナを直接別のレイアウトコンテナに入れることが可能ですリージョンリージョンを使ってレイアウトコンテナを分割しレイアウト要素を特定の固定位置に置くことができます各リージョンにはプレースホルダーまたは特定のウィジェットが含まれています 4

プレースホルダープレースホルダーはそのレイアウトに基づくページかマスターレイアウトとしてそのレイアウトを定義する別のレイアウトで表示物を置くエリアを定義するために使えますページ内の埋まっているエリアはそのページのコンテンツ表示エリアとしてそのページに定められるとおりに動的にデータを表示します別のレイアウトからレイアウトが継承されている場合そのエリアに別のレイアウト

5 プレースホルダープレースホルダーはそのレイアウトに基づくページかマスターレイアウトとしてそのレイアウトを定義する別のレイアウトで表示物を置くエリアを定義するために使えますページ内の埋まっているエリアはそのページのコンテンツ表示エリアとしてそのページに定められるとおりに動的にデータを表示します別のレイアウトからレイアウトが継承されている場合そのエリアに別のレイアウトコンテナを置きそれ特有のレイアウトを定義することができますあるいはエリアを空のままにしページ内で埋めることも可能です継承オプションでレイアウトを別のレイアウトに基づかせることができますここではマスターレイアウトと呼んでいますレイアウトをマスターレイアウトに基づかせる場合そのレイアウトはマスターレイアウトで定義されるとおりにエリアを埋めるかプレースホルダーでエリアを新たに定義することができますマスターレイアウトに基づくレイアウトを使用しているページではマスターレイアウトではなくこのレイアウトで定義されたエリアしか表示されま 5

6 せん 3 Desktop, Tablet or Mobile? デスクトップタブレットモバイルの区別デスクトップタブレットそしてモバイルの 3 種類のデバイスを区別させることができます実際にはすべてのページに作成される HTML は HTML5 であるためどのページもすべてのデバイスタイプで開けますしかしながら各デバイスには特定の UI デザイン要件がありますそのためデバイスタイプごとにそのデバイスタイプ特有のニーズに合わせた一連のレイアウトを定義するのが妥当でしょうデフォルトではデスクトップとモバイル用のレイアウトは既に用意されていますレイアウトのデザインは独自のニーズに合わせてカスタマイズできますデフォルトのレイアウトを任意の形に変更拡張することも必要に応じてレイアウトを新規作成することも可能ですこれらのレイアウトは慎重にデザインしてくださいたとえばモバイルアプリの場合リージョン数は多すぎない方がいいでしょうでなければ画面がいっぱいになってしまいエンドユーザーは混乱します一方デスクトップアプリケーションではコンテンツや詳細をたくさん表示させるために様々なリージョンが必要になるかもしれません 3.1 Layout Examples レイアウトの例 6

画面幅を調節することでモデラーでエンドユーザー向けのページビューを模倣することができますたとえばデスクトップ用レイアウトの画面幅は 800 ですがデフォルトのモバイル用レイアウトの幅は 500 です画面幅プロパティはモデラーのビューにしか適用されません実際のページ幅は開いているブラウザまたはオプションのポップアップ寸法で決まりますレイアウト

7 画面幅を調節することでモデラーでエンドユーザー向けのページビューを模倣することができますたとえばデスクトップ用レイアウトの画面幅は 800 ですがデフォルトのモバイル用レイアウトの幅は 500 です画面幅プロパティはモデラーのビューにしか適用されません実際のページ幅は開いているブラウザまたはオプションのポップアップ寸法で決まりますレイアウトコンテナでレイアウト構造を定義したら次はリージョンのコンテンツを定義する必要がありますこれはページ専用の要素を使ってページごとに行うことができますたとえば何もないエリアにデータウィジェットを追加しますあるいはレイアウト内でこのレイアウトのページに使われる要素を定義することも可能です一般的にはレイアウトで全般的なアプリ操作か特定機能に関する特定操作を定義しますソースが必要なデータや入力ウィジェット以外のあらゆるウィジェットを使用できます最も便利なウィジェットのタイプはメニューウィジェットとスニペットですこれらについて詳しく学習していきましょう 4 Menu Widgets メニューウィジェット 4.1 Menu Bar メニューバーメニューバーウィジェットではメニュー項目が水平に設定されています各項目にサブ項目を設定しメニュー上のメイン項目から展開させることが可能ですサブ項目は 1 段階までしか認められていませんつまりサブ項目にさらにサブ項目を設定することはできませんメニュー項目がクリックされると設定されたページまたはマイクロフローに遷移します 7

4.2 Navigation Tree( ナビゲーションツリー ) ナビゲーションツリーウィジェットにはツリー構造のメニューが設定されています各項目にはメイン項目から展開できるサブ項目を設定できますナビゲーションツリー形式のメニュー構造では最大 3 段階まで項目を展開させることができますメニュー項目がクリックされると設定されたページまたはマイクロフローに遷移します 4.

8 4.2 Navigation Tree( ナビゲーションツリー ) ナビゲーションツリーウィジェットにはツリー構造のメニューが設定されています各項目にはメイン項目から展開できるサブ項目を設定できますナビゲーションツリー形式のメニュー構造では最大 3 段階まで項目を展開させることができますメニュー項目がクリックされると設定されたページまたはマイクロフローに遷移します 4.3 Simple Menu Bar( シンプルメニューバー ) シンプルメニューバーウィジェットでは画像と見出しで構成されるメニューが水平に設定されています各項目にサブ項目を設定することはできませんメニュー構造は 1 段階しか認められていませんメニュー項目がクリックされると設定されたページまたはマイクロフローに遷移します 4.4 Menu Source( メニューソース ) メニューウィジェットに表示される項目はメニューのソースによって決まりますメニューウィジェットには Navigation 文書か Menu 文書で設定されたメニューが読み込まれますソースとして Project navigation を選択している場合は正しい操作メニューを設定するためにデバイスタイプを指定しなければなりません 8

6 Device Profiles( デバイスプロフィール ) Mendix のナビゲーションモデルの中心はデスクトップタブレット携帯電話の 3 種類のデバイスです各デバイスに別々のホームページやメニューを定義できますデスクトップ

9 4.5 Project Navigation( プロジェクトナビゲーション ) Navigation 文書はエンドユーザー向けのアプリケーションのメイン操作構造を定義するものですこれを使いアプリケーションのホームページを設定したりメニューウィジェットで使用するメニュー構造を定義したりすることができますホームページはユーザーロールに基づき変えることができますセキュリティを有効にしている場合メニューにはユーザーがアクセスできる項目しか表示されません 4.6 Device Profiles( デバイスプロフィール ) Mendix のナビゲーションモデルの中心はデスクトップタブレット携帯電話の 3 種類のデバイスです各デバイスに別々のホームページやメニューを定義できますデスクトップデバイスタイプは常に有効ですがタブレットや携帯電話デバイスタイプは適宜無効にできますユーザーが Mendix アプリケーションに移動すると自動的に該当のデバイスタイプのホームページにリダイレクトされます ( 下記の Redirection to Device Types 節をご覧ください ) 9

メニュー項目の一覧から構成されていますオプションでサブ項目が含まれる場合もありますウィジェットごとに一定数の項目段階が認められています 4.

10 4.7 Menu Document( メニュー文書 ) メニュー文書はメニューウィジェットが使うナビゲーションメニューを定義するものです通常アプリケーションのメインメニューはデバイスタイプで定義しますが Menu Document はサイドバーなどの補助メニューとして使うことができますメニューはメニュー項目の一覧から構成されていますオプションでサブ項目が含まれる場合もありますウィジェットごとに一定数の項目段階が認められています 4.8 Redirection to Device Types( デバイスタイプに基づくリダイレクト ) Mendix Runtime はユーザーが使用しているデバイスに基づき自動的にユーザーを該当の 10

デバイスタイプのホームページにリダイレクトしますこれはデバイスのブラウザから送られるユーザー-エージェントの文字列を確認することで実行していますリダイレクトのデフォルト設定は右の表でハイライトされますサーバーのカスタム設定範囲内で特定のユーザーインターフェースの文字列を設定することも可能ですこれは高度な設定で時間的都合により基礎部分では説明しません

スニペットスニペットとはページやレイアウトで使い回せるインターフェース部品のことですスニペットを利用することで Mendix ビジネスエンジニアがインターフェースで修正しなければならない個所が減り遷移がスムーズでユーザーフレンドリーな体験が可能になりますテンプレートグリッドのコンテンツ領域とデータビューの両方に使えるスニペットを用意することも可能ですスニペットに施した変更は

11 デバイスタイプのホームページにリダイレクトしますこれはデバイスのブラウザから送られるユーザー-エージェントの文字列を確認することで実行していますリダイレクトのデフォルト設定は右の表でハイライトされますサーバーのカスタム設定範囲内で特定のユーザーインターフェースの文字列を設定することも可能ですこれは高度な設定で時間的都合により基礎部分では説明しません有効でないデバイスタイプの場合は以下の表のとおりに別のデバイスタイプにフォールバックしますまた Mendix アプリケーションに移動する際の URL にプロフィールクエリ文字列パラメーターを追加することでクライアントに特定のデバイスタイプを使用するように強制することも可能です Desktop Tablet また Phone の値を使うことができます 5 Snippets スニペットスニペットとはページやレイアウトで使い回せるインターフェース部品のことですスニペットを利用することで Mendix ビジネスエンジニアがインターフェースで修正しなければならない個所が減り遷移がスムーズでユーザーフレンドリーな体験が可能になりますテンプレートグリッドのコンテンツ領域とデータビューの両方に使えるスニペットを用意することも可能ですスニペットに施した変更はそのスニペットが使用されているすべての個所に反映されますまたスニペットはそこに置かれるウィジェットのコンテクストの役割を果たすエンティティを定義することもできますたとえばスニペットに Course エンティティを設定すれば最初にデータビューを定義する必要なくスニペットに Course Title を表示させるテキストボックスを置くことができますスニペットでエンティティを定義する場合そのスニペットを 11

12 使用するすべての個所でスニペットがそのエンティティ例: データビューのコンテクスト範囲内で使われていることを確保しなければなりません 5.1 Example 例 6 Related content 関連するコンテンツ 3_2 はじめての一覧ページと詳細ページを作成する 3_3 一覧ページでデータをフィルターする 3_4 レイアウトとスニペット 3_5 ナビゲーション構成を設定する 3_6Koala を使って Mendix_UI_Framework をセットアップする 3_7Mendix_UI_Framewok をセットアップする Scout and Windows 10 Workaround Set Up Mendix UI Framework with Just CSS Find the Root Cause of Runtime Errors 12

13 This Japanese translation is provided for by Buildsystem Co. Ltd., based on Mendix copyrighted documentation and materials which can be found here as licensed under CC BY

Create a custom theme with the Mendix UI Framework

Create a custom theme with the Mendix UI Framework Mendix UI Framework を使ってテーマをカスタマイズする Mendix バージョン開発者製作日修正日 5 Erik Heddema 11 19, 2015 08:33 11 30, 2015 10:29 この章では Mendix UI Framework を使ったテーマのカスタマイズ方法を説明します