最初のリアクティブWebアプリを作成する

リアクティブWebアプリを作成する

それでは、サンプル「todo」アプリを作成しましょう。

1. Service Studioで、［New Application］をクリックして［Reactive Web App］を選択します。［Next］をクリックします。

   

2. 新しいアプリのプロパティで、かなり興味深い項目の設定を行います。アップロードアイコンをクリックしてアイコンをアップロードします（1）。次に、アプリに「ToDo」という名前を付け（2）、説明を追加し（3）、いずれかの色を選択して初期色を変更します（4）。［Create app］をクリックして次の手順に進みます。

   

3. アプリケーションのプロパティの画面で、［Choose module type］に［Reactive Web App］が選択されていることを確認します。［Create module］をクリックしてモジュールを作成し、編集のために開きます。

   

Excelファイルからデータベーステーブルを作成する

OutSystemsでは、アプリケーションのデータをリレーショナルデータベースに保存します。つまり、アプリケーション作成の最初の手順はデータモデルを定義することです。

これを行うには、以下のタスク情報が含まれているExcelファイルを使用します。

• Description
• Due Date
• Is Active

ToDoモジュールで、右上の［Data］タブを開きます。Entitiesフォルダを右クリックして［Import New Entities from Excel］を選択し、ディレクトリC:\Program Files\OutSystems\Development Environment 11.0\Service Studio\TutorialResourcesにあるデフォルトで使用可能なサンプルファイルTasks.xlsxを選択します。ダイアログの［Import］をクリックして確定します。

Excelファイルをインポートする際、OutSystemsはデータベースにデータを保存するために、必要なカラム（OutSystemsでは「アトリビュート」）を持つデータベーステーブル（OutSystemsでは「エンティティ」）を作成します。

また、OutSystemsはバックグラウンドで、Excelファイルの各行を対応するデータベースレコードにインポートするロジックも作成します。アプリケーションをパブリッシュした後、バックグラウンドのロジックによってExcelファイルのデータがデータベースに読み込まれます。本チュートリアルではサーバーデータベースにのみデータを保存します。

タスクを表示する画面を作成する

これですべてのタスクを表示する画面を作成できるようになりました。

右上の［Interface］タブを開き、［UI Flows］の下にある［MainFlow］をダブルクリックします。次に、ツールボックスから［Main Editor］ウィンドウの空いている領域に Screenをドラッグします。Emptyテンプレートを選択し、Tasksという画面名を付け、［Create Screen］をクリックします。

Taskエンティティを、［Data］タブから［Main Editor］ウィンドウの画面の［Content］プレースホルダにドラッグします。

これにより、ページネーションをサポートするテーブルが自動的に作成されます。

タスクを編集する画面を作成する

レコードを編集する画面の作成は、テーブルの作成と同じくらいすばやくできます。

行内の最初のタスクのタイトルを右クリックし、［Link to > (New Screen)］をクリックします。Emptyテンプレートを選択し、「TaskDetail」という画面名を付け、［Create Screen］をクリックします。

これにより、タスクのタイトルが新しく作成された画面にリンクされます。この新しい画面を使用してタスクを編集しますが、そのためにはフォームが必要です。

1. Formウィジェットを、ツールボックスから［TaskDetail］画面の［Content］プレースホルダにドラッグします。

   

2. ［Data］タブにあるTaskエンティティを、事前に作成したFormにドラッグします。

   

次に、エンドユーザーが［Save］ボタンを押したときに実行されるロジックを定義します。

1. ［Save］ボタンの空いている領域をダブルクリックして、ボタンに関連するロジックを定義します。これにより、SaveOnClickという名前の新しい画面アクションが作成されます。

2. ［Data］タブで、Taskエンティティを展開し、CreateOrUpdateTaskエンティティアクションをIfのTrueブランチにドラッグします。SourceプロパティをGetTaskById.List.Currentに設定します。

3. タスクを保存したらメイン画面にリダイレクトされるように、Tasksを［Interface］タブからEndノードにドラッグします。

   

タスクの完了を許可する

次に、タスクを完了したものとしてマークする機能を追加しましょう。これを実装するには、完了したタスクを削除する機能を追加します。

1. テーブルの最後の列にあるチェックマークアイコンを削除します。Buttonウィジェットをドラッグし、ボタンのTextプロパティに「Done」と入力します。

2. ボタンの空いている領域をダブルクリックして、クリックに関連するロジックを定義します。

3. ［Data］タブで、Taskエンティティを展開し、［Data］タブのTaskエンティティにあるDeleteTaskエンティティアクションをDoneOnClickアクションのフローにドラッグします。IdプロパティをGetTasks.List.Current.Task.Idに設定します。

4. Refresh Dataをツールボックスからアクションフローにドラッグし、DeleteTaskアクションの後、GetTasks Aggregateを選択して、画面で使用可能なタスクを更新します。

   

タスクの追加を許可する

また、以下のとおり、タスクの編集ですでに使用されている画面にリンクすることで、エンドユーザーはすべてのタスクを表示する画面から新しいタスクを追加できるようになります。

1. ［Interface］タブのUI Flows > MainFlowに移動し、［Tasks］画面をダブルクリックして、メインエディタですべてのタスクを含む画面を開きます。

2. Buttonウィジェットを、ツールボックスから画面の右上にある［Actions］プレースホルダにドラッグします。ボタンのラベルを「Add」に変更します。

   

3. ボタンセレクタを右クリックし、［Link > MainFlow\TaskDetail］を選択します。

   

リアクティブWebアプリをテストする

この段階でリアクティブWebアプリをテストします。［ 1-Click Publish］ボタンをクリックし、ご利用の環境にアプリケーションをパブリッシュします。アプリケーションがデプロイされたら、［［］ボタンをクリックして、アプリケーションをブラウザでテストします。