※この記事は「Outsystems 入門 ～Webアプリケーションを作成しよう～」の連載記事です。連載トップはこちら
第6回 ウィジェットをカスタマイズして画面デザインを変更しよう！～その①～
今回より数回に渡り、Webアプリケーションのユーザインターフェース(UI)を作成する「ウィジェット」を取り上げていきます。
ウィジェットについて基本的な知識を知っていただきつつ、前回までに作成したLibraryアプリケーションをブラッシュアップしていきましょう！
ウィジェットとは？
今回のテーマである「ウィジェット」ですが、簡単に述べると画面のデザイン・UIを構成する部品となります。
それでは、実際にウィジェットとはどのようなものか見てみましょう。
ServiceStudioで「Interface」タブを開き、BookDetail画面選択し表示してください。
画面が表示されると、ServiceStudioの左側にアイコンが並ぶエリアが表示されます。 ここに並んでいるアイコンが、画面デザインの部品となるウィジェットです。 利用用途に応じて、沢山の種類のウィジェットが用意されています。
Tips ツールボックス
上の図でウィジェットアイコンが並んでいたエリアは、ツールボックスといいます。
ここで、このツールボックスは必ずしもウィジェット一覧が表示されるエリアという訳ではないことに注意してください。
上の画像内では、ツールボックス内に「ウィジェット」が表示されているのですが、これはServiceStudio上で現在表示しているものが”画面”だからです。
例えば、前回学習したアクションをServiceStudioで表示させている場合は、ツールボックス上にウィジェットは表示されません。
（前回学習した通り、ロジックツールというロジックを作成する部品が表示されます）
アクションの作成時に、画面のデザインを作るウィジェットが並んでいても使いにくいですよね？
ツールボックスは、必要な時に必要なものを表示するエリアとなります。
ウィジェットの配置方法とButtonウィジェット
ウィジェットの配置方法ですが、画面上の配置したい場所にドラッグ＆ドロップするだけです。
今回は画面上にボタンをもう一つ追加してみましょう。
以下のように、画面上にボタン（ウィジェット）が配置されました。 配置したボタンは今後使わないため、Deleteキーを押して画面から削除しておいてください。 （Ctrl＋Zキーで戻るでもOKです）
Buttonウィジェットをもう少し踏み込んで確認するために、すでに作成してある画面上のSaveボタンを選択してみましょう。 ウィジェットを選択すると、画面右下のエリアにウィジェットのプロパティが表示されます。 このエリアは、プロパティエディターといいます。 ※プロパティ…設定項目のようなものです
例えば、ボタンには「Save」と表示されていますが、これはこのボタンのLabelプロパティに「Save」と設定されているからです。
ボタンウィジェットのLabelプロパティは、ボタンの表示文字を設定するプロパティとなっています。
「Save」という英語表記だとわかりにくいので、Labelプロパティを日本語の「保存」に変更してみましょう。
ボタンの表示が「保存」に変わったことが分かると思います。
このように、ウィジェットの表示や動作の設定はプロパティを変更することによって変えることができます。
また、同様にCancelボタンについても「戻る」という表記に変更しておきます。
ちなみに、変更したら1-Click Publishボタンでパブリッシュを実施することを忘れないようにしましょう。
ウィジェットとは何か、だいたい理解していただけましたでしょうか？
それでは、このBookDetail画面で用いられている別のウィジェットも確認していきましょう。
Inputウィジェット
テキストボックスを作成します。BookDetail画面で利用されている箇所は下記の通りです。
Inputウィジェットのプロパティでは、
・入力最大文字数を決める（Max.Lengthプロパティ）
・入力された内容を保存する変数を指定する（Variableプロパティ）
・入力可能行数を指定する（Text Linesプロパティ）
・入力書式を指定する（Typeプロパティ）
などの設定ができます。
Labelウィジェット
テキストボックスなどの入力項目の項目名を作成します。
BookDetail画面では、下記の箇所に利用されています。
Labelウィジェットのプロパティでは
・表示する内容を設定する（Valueプロパティ）
・このラベルと関連付ける入力ウィジェットを指定する（Input Widgetプロパティ）
などの設定ができます。
ちなみに、BookDetail画面のラベルはすべて英語となっており読みにくいため、この際下記のように日本語に変更してしましましょう。
変更するラベルを選択し、Valueプロパティを書き換えます。
Input_Calendar ウィジェット
日付を入力させたい項目について、カレンダーを表示して日付を選択し入力できるようにします。
BookDetail画面では、下記の箇所に利用されています。
ここで、BookDetail画面の「入荷日」の入力の際の挙動を確認してみましょう。
入荷日のInputウィジェットをクリックすると、下記のようにカレンダーが表示され、選択した日が入荷日のInputウィジェット内にセットされます。
この表示されているカレンダーがInput_Calendarウィジェットです。
上記のように、Input_Calendarウィジェットは、Inputウィジェットとセットで利用します。
この関連付けについては、Input_CalendarウィジェットのInputWigetIdプロパティで設定します。
Formウィジェット
HTMLフォームを作成します。
BookDetail画面では、下記の箇所に利用されています。
このBookDetail画面は、Entityのドラッグ＆ドロップで画面を丸ごと自動作成(スキャフォールディング）しましたが、自動作成ではなく画面内に入力フォームを手動で作成する場合は、以下のような手順で作成します。
①ツールボックスから、「Form」ウィジェットを画面上にドラッグ＆ドロップする
②Dataタブを開き、画面で編集したいEntityを①で配置したFormウィジェット上にドラッグ＆ドロップする
③フォーム内にドラッグ＆ドロップしたEntytyの各フィールドが入力項目として画面上に自動生成される。
フォームを配置した上で、Entityをドラッグ＆ドロップすることで、そのEntityの各列に対する入力ウィジェットをOutsystemsが自動配置してくれます。
ちなみにこの画面にはすでに同様のフォームが作成されていますので、今回作ったフォームウィジェットは削除しておきましょう。
さて、今回はここまでとします。ウィジェットとは何か？という点と、基本的なウィジェットの一部をご紹介しました。
次回は、このBookDetail画面の残りのウィジェットを紹介していこうと思います。