はじめに
本記事ではOutSystems11を利用します。
環境構築が済んでいない方は前回の記事を参照してください。
1.アプリ作成
Service Studioを起動し、New Applicationをクリックします。
From scratch → Reactive Web Appを選択し、次に進みます。
アプリ名とアプリの説明を入力しCreate Appボタンを押すとアプリが作成されます。
2.モジュール作成
1つのアプリケーションは複数のモジュールによって構成されます。
モジュールとはアプリケーションの機能や画面がまとめられたものだと思っていただければOKです。
試しにモジュールを1つ作ってみましょう。
Module Nameを決め、Choose module TypeがReactive Web Appになっていることを確認し、Create Moduleボタンを押すとモジュールが作成されます。
3.画面を作成
UI FlowsでいずれかのUI Flowを選択し、右クリックで開くメニューからAdd Screenを選択します。
Emptyを選択し、Create Screenボタンを押すと画面が作成されます。
OutSystemsには様々なウィジェットがありますが、試しに画面上に1つ入力欄を作ってみましょう。
画面左のウィジェットのリストからInputをドラッグ&ドロップで画面に配置します。
（もしくは画面上で右クリックすると開かれるメニューのInsert WidgetからInputを選択します）
これでInputが配置できました。
InputにはVariable(変数)を割り当てる必要があります。
Screenを選択し右クリックで開かれるメニューからAdd Local Variableを選択します
これでVariableが作成されました。
Variableは名前、説明文、データ型、デフォルト値を自由に変更できます。
今回は試しに数値型のVariableに設定しましょう。
Data TypeからIntegerを選択します。
また、名前をTestNumberに変更しました。
そして先ほど配置したInputに、TestNumberを割り当てましょう。
数値型のVariableを割り当てたためこのInputは、数値を入力できる入力欄になりました。
実際の画面上でこのInputに入力された数値が、TestNumberに保持されます。
4.ロジックを作成
入力欄に入力された数値が10以上かどうか判定するボタンを作成し、判定結果に応じたテキストを画面に表示するロジックを作ってみましょう。
まず、Inputを配置した時と同じ要領で、画面にButtonを配置します。
続いて判定結果を表示するテキスト（Expression）を配置します。
そして先ほどと同じ要領でText型のVariableを作り、このExpressionに割り当てます。
今回はResultTextという名前にしました。
実際に数値を判定するロジックを作成しましょう。
Screenを選択し右クリックで開かれるメニューからAdd Client Actionを選択します
Client Actionは他のプログラミング言語での関数にあたります。
Client Actionも名前と説明文を設定できるので、必要に応じて設定しましょう。
今回はNumberCheckという名前にしました。
OutSyetemsではフローチャートを描くイメージでロジックを作成していきます。
まずInputに入力された数値が10以上かどうか判定します。
画面左のアイコンの一覧からIfをドラッグ&ドロップで配置します。
これが他のプログラミング言語でのIf文にあたります。
Inputに入力された数値はTestNumberに保持されているため、ConditionにTestNumber >= 10と入力しましょう。
そしてAssignを2つ配置し、IfからFalse、Trueのコネクタをそれぞれ繋げましょう。
コネクタはIfから線を引くイメージでドラッグすると設定できます。
そしてIfの条件がFalseの場合とTrueの場合それぞれのAssignにテキストを設定しましょう
全てのフローが最後はEndで終わる必要があるため、どちらの分岐もEndにコネクタを繋げます。
これでロジックは作成できました。
最後に配置したボタンにNumberCheckを割り当てます。
これでボタンが押された際にNumberCheckが実行されることになります。
5.作成した画面を実際に開いてみる
画面上部のPublishを押すと、モジュールに加えた変更がコンパイルされます。
Publishが完了したらScreenを選択し、右クリックで表示されるメニューからOpen in browserをクリックしましょう。
画面が開かれるので、実装したロジックが期待通りに動作するかどうか試してみましょう。
最後に
今回は初歩的な部分しか触れませんでしたが、次回以降はデータベース等も含めた開発について紹介していこうと思っています。