ねらい：
GX16より搭載されたBYODSの考えに基づいて、既存のデザインシステムを、GeneXusアプリケーションに取り 込む基礎を学びます。
出来上がり完成図：
スマホWEBアプリケーションを対象にGoogle社が提唱している「マテリアルデザイン」をGeneXusに取り込ん でみましょう。ここではCSSライブラリのmaterializeを試してみます。
ベースに採用するCSSをGX標準のbootstrapの代わり に、CSSライブラリのmaterialize(v1)を採用
マテリアルデザインの代表的な波紋のエフェクトを、ク リック時に行うようにします。
関西勉強会: 演習
32 ページ 断り書き:
保守の観点では「標準のデザインシステム」でのカスタマイズをお勧めします。CSSやJavaScriptは、保守がしにくくGXの 標準サポート対象ではありません。要件を満たすために必要というときに、こちらのテクニックをご参考にしてください。継 続的な保守の観点では、GXのパートナー様のテンプレートをご利用いただくのも有意義な方法です。
KB準備：
※この演習のブラウザはChomeをお勧めします。
１．新規KBを作成します。
２．次のXPZをインポートします。
http://www.gxsupport.jp/Osaka1_sample.xpz ３．ビルドを行います。動作確認します。
４．次のURLから、CSSライブラリをダウンロードします。
http://www.gxsupport.jp/materialize-v1.0.0.zip 拡張子をzipからgxlibraryに変更します。
５．次のページに沿ってKBでファイルを追加します。
関西勉強会: 演習
33 ページ
（既定値でOK）
関西勉強会: 演習
34 ページ Base styleをBootstrapからmaterializeに変更します。
ここまでで、ベースとなるCSSの変更が指定できました。
ビルドして動作確認するにはF5を押します。
クロームの次の操作に留意します。
キャッシュのリフレッシュ操作：CTRL+F5 スマホエミュレーション操作：F12
関西勉強会: 演習
35 ページ アドバイス: 今回講師が、用意したgxlibrary形式のファイルの作り方について
CSSライブラリをgxlibrary形式のファイルにする手順：
１．お目当てのCSSライブラリのサイトに行き、ライセンス条項を確認します。
https://materializecss.com/
今回の研修で使ったものは、2020年 1月現在、MIT ライセンスで商用利用や個人利用が認められていますが、著作権やライセンス表記 が義務づけられています。一般に、オープンなCSSライブラリの利用は、リーガルチェックの上でのご利用をお勧めします。
２．Zipファイルをダウンロードします。
https://materializecss.com/getting-started.html
３．念のため、圧縮時に作られる余計なフォルダ階層materializeを無くすためにZipファイルを解凍し、再圧縮します。
←ダウンロード直後、余計な階層があります（不要）。
←直下にcssフォルダ群を置くように再圧縮しました。
4.拡張子zipをgxlibraryにします。
関西勉強会: 演習
36 ページ ベースカラーを変えます。
アドバイス:
こちらのサイトを眺めながら、配色を検討しました。
https://materializecss.com/color.html
関西勉強会: 演習
37 ページ 波紋エフェクトを行うボタンの部品（ユーザーコントロールオブジェクト）に着手します。
このHTMLタグの取得方法：次ページのURLからコピーしましょう。（コピペでOK）
関西勉強会: 演習
38 ページ アドバイス:
こちらのサイトから、コンポーネントを探しました。
https://materializecss.com/buttons.html
WEBパネルに、ユーザーコントロールオブジェクトを配置します。
このHTMLを、ユーザーコントロールオブジェクトにコ ピーします。
関西勉強会: 演習
39 ページ 補足：きちんとマテリアライズのアイコンを表示させたい方へ（手が早い人用）
今回のCSSライブラリの仕様上、iタグを利用するには、次<link>タグが必要です。
そのため、スタートイベントで、次の指示を行うことで、実装が可能です。
（WEBパネルで確認済ですが、マスターページでもよいはずです）
Form.HeaderRawHTML='<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">'
関西勉強会: 演習
40 ページ アドバイス: クリックイベントの実装
今回の演習はここまでですが、実際にはクリックイベントの実装などが求められます。 詳しくは下のURLをご覧くだ さい。
ユーザー コントロール オブジェクト
http://wiki.genexus.jp/hwikibypageid.aspx?39356
{{OnClick}}
WEBパネル側の実装
関西勉強会: 演習
41 ページ