第三回関西勉強会演習資料 GeneXus 16U4+Wwplus 年 1 月 27 日初版コンサルティング部三浦正之

(1)

第三回関西勉強会

演習資料

GeneXus 16U4+Wwplus12

2020 年 1 月 27 日初版

コンサルティング部三浦正之

(2)

関西勉強会: 演習

本資料は、ジェネクサス・ジャパンの明示的許可なしには、いかなるメディアにも複写することはできません。

登録商標

GeneXus は、GeneXus S.A. の登録商標です。本書において取り上げているその他の商標はすべて、それぞれの所有財産です。

免責事項

本書の内容は個人的使用の学習を目的として提供するものです。それ以外の目的の本コンテンツの利用に伴うあらゆる責任は負いかねます。

(3)

2 ページ

GeneXus の基本機能について学んでみよう～ GeneXus による WEB アプリケーションの試作～ ... 3

新しいナレッジベースの作成 ... 6 データモデルの「自動正規化」とトランザクションオブジェクト ... 7 手動で一覧画面を作成してみよう「拡張テーブルコンセプト」 ... 11 自動で一覧画面を作成してみよう「パターン」 ... 14 編集画面をカスタマイズする「宣言型言語」 ... 16 サポートエンド対策「ソースコードの再生成」 ... 18

Work With Plus に初挑戦！エクセルライクな顧客管理システムに拡張 ... 19

画面の見た目を美しくする方法～テーマの設定方法 ... 31

マテリアルデザインを意識したスマホ WEB アプリの実装（上級者向け） ... 31

テーマオブジェクト（CSS）の重要性 (超上級者向け) ... 41

(4)

関西勉強会: 演習 3 ページ

GeneXus の基本機能について学んでみよう

～ GeneXus による WEB アプリケーションの試作～

学習のねらい １．本章では、一般的な業務システムで利用されるリレーショナルデータベースを利用した WEB アプリケーションの試作を通じて、GeneXus のコンセプトのうち次の基礎的な概念の理解を目指します。・ナレッジベースの作成・拡張テーブルコンセプト・宣言型プログラミング２．この演習の理解を基に、講義では GeneXus の目標と次のアーキテクチャーの理解を深めます。・生成されるアプリケーションのアーキテクチャー例・仕様解析機構・フレームワーク・ジェネレータと Future proof 題材ここでは、次ページに示す「顧客マスタ」と「業種マスタ」の管理を行います。

(5)

4 ページ業種マスタの一覧画面：

(6)

5 ページ顧客マスタ：

(7)

新しいナレッジベースの作成

アプリケーションの開発を開始するために、GeneXus を起動して、「Osaka1」という名前のナレッジベースを作成します。プロトタイプ環境は「 C# Environnment 」を選択します。 アドバイス: ナレッジベースとは「知識の入れ物」です。アプリケーション１つにつき、１つ作成します。他社製品ではいわゆる 「プロジェクト」「リポジトリ」と呼ばれているものです。 • ナレッジベースの作成：メニューより [ファイル] → [新規] → [ナレッジベース]

• ナレッジベースは今回 c\models の下に作成します。「ドキュメント」「デスクトップ」というフォルダや、「Documents and Settings」内のフォルダには作成しないでください。こうしたフォルダには、Windows の特別な権限が求められるためです。 • インストールしたばかりの方は、 [KB エクスプローラー] ウィンドウ、[プロパティ]ウインドウ、 [出力]ウインドウをピンでと

めて、常時オープンにしておきましょう。

• [ナレッジベースナビゲーター] ウィンドウ内でのうち、 [設定] セクションにも注目してください。ナレッジベース全体の設定 は、ここから行われます。

(8)

データモデルの「自動正規化」とトランザクションオブジェクト

アプリケーションを構築するためには、システム化対象業務からエンティティを識別することから開始し、それをト ランザクションオブジェクトで表していきます。 業種マスタのための「BusinessType」トランザクション アドバイス: • オブジェクトを作成する方法は複数あります: o [開始ページ] から作成 o メニューから作成: [ファイル] → [新規] → [オブジェクト] o Ctrl+N で作成 • 新しい項目属性を追加するときにピリオド (.) を入力すると、トランザクションの名前が自動で挿入されます。 実行し、試作内容を確認します。F5 キーを押します。

(9)

関西勉強会: 演習 8 ページ初めてビルドする際に、以下の手順が必要となります。データベースとプログラムをローカルに作成するため、次のようなダイアログボックスが開き、データベース名、DB サーバーへの接続方法を指定する必要があります。指定した名前のデータベースがそのサーバーに存在しない場合 は、そのデータベースが GeneXus により自動的に作成されます。 次に、[影響分析 (Impact Analysis) ] が表示されます。これから実行するデータベースの作成と、そのデータベース に含まれる BusinessType テーブルに関する詳細情報を示しています。 [作成] をクリックして、GeneXus にデータベースの作成を許可してください。 お手元の PC の接続情報にあった指定をしてください。 Database name ： Osaka1

Server name ： localhost\sqlexpress Use trusted connection ： Yes

(10)

9 ページビルドの結果、業種マスタの編集画面は、作成されましたか？

引き続き、エンティティの識別を行い、ほかのトランザクションを作成します。

(11)

関西勉強会: 演習 10 ページ 検討してみましょう： Customer テーブルに BusinnessTypeName 項目属性が含まれていないのはなぜでしょうか。言い換えると、トランザクション構造の一部であるにもかかわらず、物理テーブルに含まれていないものがあるのはなぜでしょうか。（答え）：トランザクションオブジェクトの内容が自動的に正規化されて、テーブルが決定しているため アドバイス： GeneXus で、あえて項目を冗長に持ちたいときは、別名の項目属性を持つ必要があります。 試してみましょう：

「BussinessType」と「Customer」は関連付けられています。BussinessType Id を Customer の構造の一部にすると、GeneXus は、「Customer」の BussinessTypeId を外部キーと認識し、データの整合性を自動的に維持します。次の操作を行い、確認してみましょう:

• 存在しない業種番号（例：999）を Customer の登録画面でしてみてください。 • 顧客にすでに関連付けられている業種を、削除してみてください。削除できましたか。

アドバイス：

(12)

関西勉強会: 演習 11 ページ ちょっと一息コーナー データモデルが不明瞭な中で試作する際のアドバイス: システム化対象業務の外側から、システム側に流入してくるデータフローに着目し、ここからトランザクションを入れて試作を開始しましょう。システムからアウトプットする画面・帳票の試作は、トランザクションを入れて、ナレッジベース上に、データモデルが獲得できたあと行います。システムの外側と、システムの内側の接点は、一般にマン・マシンインターフェースと呼ばれます。GeneXus の世界では、これをユーザービューと呼びます。ユーザービューをトランザクションオブジェクトとして投入することが、GeneXus におけるアプリケーション開発の最初の一歩になります。 よくある質問: Q:新規にアプリを作成する実際のプロジェクトでは、データモデルを分析してから、試作をしてもかまいませんか？ A:はい、それでも実装できます。ただ、要件定義の段階で、試作を通じて項目を具体化していくことも可能です。各プロジェクトの特性に基づきご判断ください。 Q:既存システムのデータベースをもっているのですが、GeneXus で作り直す必要がありますか？ A:本勉強会では取り扱いませんが、DBRET（データビューオブジェクト）を使うことで、既存のデータベースにアクセスする GeneXus アプリケーションを開発することができます。

手動で一覧画面を作成してみよう「拡張テーブルコンセプト」

次の図のような一覧画面を作成してみましょう。出来上がり完成図：

(13)

12 ページグリッドをドラッグアンドドロップ

(14)

関西勉強会: 演習 13 ページ項目を選択します（CTRL を押しながら選択します）。 実行し、試作内容を確認します。F5 キーを押します。 検討してみましょう： グリッドに、さらに CustomerID や CustomerName を加えます。何件のレコードが表示されますか？答え：顧客マスタに登録している件数が表示されます。 アドバイス： 拡張テーブルコンセプトの考え方では、リレーションシップに基づき、自動的に Join が行われ、N 側のテーブルを軸に、問い合わせが行われます。そのため、開発者は SQL を使って、Join（テーブル間の連携）を指示する必要がありません。要件を定義する際は、GeneXus のコンセプト（自動生成できる内容）にそって定義することでより確実に高い生産性を達成できます。

(15)

14 ページ

自動で一覧画面を作成してみよう「パターン」

ここでは、GeneXus のフレームワークである「パターン」を利用して、一覧画面を作成します。

(16)

15 ページ実装方法：

次のようにチェックボックスにチェックをいれて、保存操作をします。

注:

• GeneXus には、トランザクションごとにオブジェクトを自動作成する「Work With」パターンがバンドルされています。 • 「Work With」以外にも「Work With Plus」というオプション製品のパターンもあります。

(17)

編集画面をカスタマイズする「宣言型言語」

できあがり完成図：「顧客名」が未入力 (空) の場合、エラーメッセージが表示され、登録処理を完了できないようにルールを定義します。実装方法：このエラーメッセージの表示を指示します。

(18)

関西勉強会: 演習 17 ページ F5 キーを押し、実行し、結果を確認します。 補足: • 「CustomerName」と指定する際に、CTRL+SPACE は重要な操作です。 • ルールは、セミコロン「;」で終了します。 • オブジェクト保存時のエラー（パーシングエラー）の際は、カッコ、ダブルクォーテーション、セミコロンなどが半角であることを確認してください。

• 項目属性に適用した IsEmpty() メソッドは、項目属性が空の場合は True を返し、それ以外の場合は False を返します。 この１行を記載します

(19)

サポートエンド対策「ソースコードの再生成」

GeneXus は、KB に基づき、ソースコードを生成できます。次の実験をしてみましょう。 [ターゲット環境のディレクトリ]を開きます。ソースコードを観察してみましょう。例：customer.cs ディレクトリ上のソースコードを削除しても、次の「すべてリビルド」操作で回復することができます。 アドバイス: • この特性を活かして、最新バージョンの GeneXus で最新の環境に沿ったコード生成をし直すことが可能です。 • 開発元は、ジェネレータの進化により、技術の変化からお客様を守る特性を「Future proof」と呼び、日本市場ではサポートエンド対策として高く評価されています。

(20)

19 ページ

Work With Plus に初挑戦！エクセルライクな顧客

管理システムに拡張

ねらい：よりデザイン性を高め、エクセルライクな一覧画面に仕上げるために、WorkwithPlus を利用してみます。 WorkwithPlus によるオブジェクト生成、柔軟なデータモデルの変更への対応を確認します。できあがり完成図：・エクセルライクなフィルタ・ソート指定・全文検索の機能（複数の項目を横断検索できます）・条件付き書式・CSV エクスポート機能

(21)

20 ページ KB 準備：

「GeneXus の基本機能について学んでみよう～ GeneXus による WEB アプリケーションの試作～」の KB をそのまま利用できます。未実装の方は、次の３ステップを行ってください。１．新規 KB を作成します。２．次の XPZ をインポートします。 http://www.gxsupport.jp/Osaka1_sample.xpz ３．ビルドを行います。動作確認します。

(22)

(23)

22 ページ Step1:Vertical を選択します。

(24)

関西勉強会: 演習 23 ページ STEP2:お好みの色を選択して、「次＞」に進んでください。 STEP3:時間の関係上、今回は「なし」にします。 STEP4:既定値のまま次に進みます。 STEP5:ヘッダーを外します。

(25)

24 ページ STEP6:banner and modules にします。

STEP7:間隔をコンパクトにし、既定値のまま次に進みます。

(26)

25 ページ STEP9: 次の構成を選択します。

STEP10: 既定値のまま次に進みます。

(27)

26 ページ（注意）前回の章の実装の結果、次の２つのトランザクションに、すでに、Workwith パターンが適用されています。

それぞれインスタンスを右クリックし、削除をしてください。

BusinessType と、Customer を開き、[Patterns]->[Work with Plus]->Selection を選択しパターンを適用します。

(28)

関西勉強会: 演習 27 ページ・エクセルライクなフィルタ・ソート指定・全文検索の機能（複数の項目を横断検索できます）引き続き、条件書式の機能を確認します。ここでは例として、業種 ID(BusinessTypeID)が 1 の顧客の背景色を変更します。 できあがり完成図：

(29)

(30)

関西勉強会: 演習 29 ページ CSV エクスポートの機能を実装します：実装方法： Name プロパティを、コンボボックスから[ExportCSV]を選択します。オブジェクトを保存し、F5 を押して動作確認をしてください。

(31)

関西勉強会: 演習 30 ページ 余力がある方へ：データモデルの変更 Customer トランザクションに会社の画像を記録できるようにしましょう。 Step1:Structure に、customerImage を追加します。 Step2:インスタンスの更新を行います。（歯車をクリックします） 動作確認：一覧画面、編集画面どちらにも、反映されていることを確かめてください。

(32)

画面の見た目を美しくする方法～テーマの設定方法

マテリアルデザインを意識したスマホ WEB アプリの実装（上級者向け）

ねらい： GX16 より搭載された BYODS の考えに基づいて、既存のデザインシステムを、GeneXus アプリケーションに取り込む基礎を学びます。出来上がり完成図：

スマホ WEB アプリケーションを対象に Google 社が提唱している「マテリアルデザイン」を GeneXus に取り込んでみましょう。ここでは CSS ライブラリの materialize を試してみます。

ベースに採用する CSS を GX 標準の bootstrap の代わりに、CSS ライブラリの materialize(v1)を採用

マテリアルデザインの代表的な波紋のエフェクトを、クリック時に行うようにします。

(33)

関西勉強会: 演習 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 でファイルを追加します。

(34)

33 ページ（既定値で OK）

(35)

34 ページ Base style を Bootstrap から materialize に変更します。

ここまでで、ベースとなる CSS の変更が指定できました。ビルドして動作確認するには F5 を押します。

クロームの次の操作に留意します。

キャッシュのリフレッシュ操作：CTRL+F5 スマホエミュレーション操作：F12

(36)

関西勉強会: 演習 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 にします。

(37)

関西勉強会: 演習 36 ページベースカラーを変えます。 アドバイス: こちらのサイトを眺めながら、配色を検討しました。 https://materializecss.com/color.html

(38)

37 ページ波紋エフェクトを行うボタンの部品（ユーザーコントロールオブジェクト）に着手します。

(39)

関西勉強会: 演習 38 ページ アドバイス: こちらのサイトから、コンポーネントを探しました。 https://materializecss.com/buttons.html WEB パネルに、ユーザーコントロールオブジェクトを配置します。この HTML を、ユーザーコントロールオブジェクトにコピーします。

(40)

関西勉強会: 演習 39 ページ 補足：きちんとマテリアライズのアイコンを表示させたい方へ（手が早い人用） 今回の CSS ライブラリの仕様上、i タグを利用するには、次<link>タグが必要です。そのため、スタートイベントで、次の指示を行うことで、実装が可能です。（WEB パネルで確認済ですが、マスターページでもよいはずです）

Form.HeaderRawHTML=

'<link

href="https://fonts.googleapis.com/icon?family=Material+Icons"

rel="stylesheet">'

(41)

関西勉強会: 演習 40 ページ アドバイス: クリックイベントの実装 今回の演習はここまでですが、実際にはクリックイベントの実装などが求められます。詳しくは下の URL をご覧ください。ユーザーコントロールオブジェクト http://wiki.genexus.jp/hwikibypageid.aspx?39356 {{OnClick}} WEB パネル側の実装

(42)

テーマオブジェクト（CSS）の重要性 (超上級者向け)

ねらい：ここでは、下図の題材を目指し、クロームを使いながら、必要な CSS の変更を確認し、テーマオブジェクトの編集を加えていくことで、デザイン性の追求時における CSS の重要性を確認します。できあがり完成図：半透明な背景色のテーブル上の Customer Name を画像の上に浮かます。

(43)

42 ページデータモデル準備：

(44)

(45)

44 ページ table クラスを追加し、Table1 クラスを追加します。

(46)

45 ページ Table1 のプロパティを次の通り設定します。

background-color: rgba(0,0,0,0.6) !important; left:20px;

Web パネルに戻り、テーブルコントロールを差し込み、クラスに Table1 を指定します。

F5 を押してビルドします。

(47)

関西勉強会: 演習 46 ページ次のような重ね表示になりました。上記の試行の結果を、クロームで分析しましょう。ここで、Table1 がにする必要があることを理解します。また、文字色が白の attribute1 を追加し、CustomerName に設定します。だいぶよくなってきました。再びクロームで解析し

(48)

関西勉強会: 演習 47 ページ ReadonlyImageAttribute のサイズの変更を検討します。 GeneXus に同名の Class があるので、 ImageAttribute をコピーし、貼り付け、ReadonlyImageAttribute1 のサイズを見直しします。 all: initial;

(49)

(50)

（参考）メニューを搭載してみよう

できあがり完成図：ねらい：マスターページを編集し、メニューの搭載を目指します。ここではアクショングループの操作の習熟度のアップも兼ねています。 KB 準備：

「GeneXus の基本機能について学んでみよう～ GeneXus による WEB アプリケーションの試作～」の KB をそのまま利用できます。未実装の方は、次の３ステップを行ってください。１．新規 KB を作成します。２．次の XPZ をインポートします。 http://www.gxsupport.jp/Osaka1_sample.xpz ３．ビルドを行います。動作確認します。

(51)

50 ページマスターページのヘッダーを変更します。

Before

(52)

関西勉強会: 演習 51 ページ実装手順： RwdMasterPage を呼び出します。 [Events]の 29 行目をコメントアウトします。パンくずリストを cut します。 Caption を[顧客管理アプリ]に変更します。

(53)

52 ページカラーパレットから、Base と DarkBase の色を黒に変更します。

(54)

関西勉強会: 演習 53 ページメニューを加えます。 before After PC の場合：スマホの場合：実装方法：アクショングループを設置します。名前は例えば[menu]にします。

(55)

54 ページテキストブロックをアクションバーに、ドラッグアンドドロップします。

(56)

関西勉強会: 演習 55 ページキャプションはないほうがかっこいいです。各ボタンをダブルクリックして、[Events]の Start で、次のようにオブジェクトの呼び出しを行います。（CTRL+SPACE を思い出してください） F5 を押して動作確認します。

(57)

56 ページ

アドバイス: 「これはちょっとカッコ悪い・・・」という方向けのアドバイス

グループを与え、テキストブロックをその中にいれます。

第三回関西勉強会 演習資料 GeneXus 16U4+Wwplus 年 1 月 27 日初版 コンサルティング部三浦正之