最初のリアクティブWebアプリを作成する
リアクティブWebアプリの導入ガイドについては、当社のトレーニング「リアクティブWeb開発者への道」をご覧ください。OutSystemsのこの新しいタイプのアプリの詳細については、フォーラムの投稿「次世代のWebアプリ」をご覧ください。
OutSystemsではリアクティブWebアプリの開発を迅速に行うことができます。この例では、OutSystemsインストールに含まれるスプレッドシートを使用してデータベースエントリを作成し、すべてを結び付けるためのユーザーインターフェイスとロジックをToDoアプリに追加します。
実行する手順の概要を以下に示します。
- リアクティブWebアプリを作成し、名前を付け、初期色を選択します。
- Excelからデータをインポートして、データベースモデルを自動的に作成します。
- データベースのデータをリスト表示する画面を作成します。
- レコードの追加と更新を行う画面を作成します。
- レコードを削除する機能を実装します。
- ブラウザでアプリケーションをテストします。
リアクティブWebアプリを作成する
リアクティブアプリの開発、実行、デプロイを行うには、以下の要件を満たす必要があります。
- Service Studio* 11.6.1以降
- Platform Server 11 - Release Oct.2019.CP1以降
- LifeTime管理コンソール - Release Sep.2019バージョン11.0.321.0以降
また、以下のコンポーネントを更新することも推奨されています。
- OutSystems UI
- OutSystems UI Templates Reactive
(*)Service StudioはDevelopment環境のインストールに含まれます。
それでは、サンプル「todo」アプリを作成しましょう。
-
Service Studioで、[New Application]をクリックして[Reactive Web App]を選択します。[Next]をクリックします。
-
新しいアプリのプロパティで、かなり興味深い項目の設定を行います。アップロードアイコンをクリックしてアイコンをアップロードします(1)。次に、アプリに「ToDo」という名前を付け(2)、説明を追加し(3)、いずれかの色を選択して初期色を変更します(4)。[Create app]をクリックして次の手順に進みます。
-
アプリケーションのプロパティの画面で、[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]をクリックします。
これにより、タスクのタイトルが新しく作成された画面にリンクされます。この新しい画面を使用してタスクを編集しますが、そのためにはフォームが必要です。
-
Formウィジェットを、ツールボックスから[TaskDetail]画面の[Content]プレースホルダにドラッグします。
-
[Data]タブにあるTaskエンティティを、事前に作成したFormにドラッグします。
次に、エンドユーザーが[Save]ボタンを押したときに実行されるロジックを定義します。
-
[Save]ボタンの空いている領域をダブルクリックして、ボタンに関連するロジックを定義します。これにより、SaveOnClickという名前の新しい画面アクションが作成されます。
-
[Data]タブで、Taskエンティティを展開し、CreateOrUpdateTaskエンティティアクションをIfのTrueブランチにドラッグします。Sourceプロパティを
GetTaskById.List.Current
に設定します。 -
タスクを保存したらメイン画面にリダイレクトされるように、Tasksを[Interface]タブからEndノードにドラッグします。
タスクの完了を許可する
次に、タスクを完了したものとしてマークする機能を追加しましょう。これを実装するには、完了したタスクを削除する機能を追加します。
-
テーブルの最後の列にあるチェックマークアイコンを削除します。Buttonウィジェットをドラッグし、ボタンのTextプロパティに「Done」と入力します。
-
ボタンの空いている領域をダブルクリックして、クリックに関連するロジックを定義します。
-
[Data]タブで、Taskエンティティを展開し、[Data]タブのTaskエンティティにあるDeleteTaskエンティティアクションをDoneOnClickアクションのフローにドラッグします。Idプロパティを
GetTasks.List.Current.Task.Id
に設定します。 -
Refresh Dataをツールボックスからアクションフローにドラッグし、DeleteTaskアクションの後、GetTasks Aggregateを選択して、画面で使用可能なタスクを更新します。
タスクの追加を許可する
また、以下のとおり、タスクの編集ですでに使用されている画面にリンクすることで、エンドユーザーはすべてのタスクを表示する画面から新しいタスクを追加できるようになります。
-
[Interface]タブのUI Flows > MainFlowに移動し、[Tasks]画面をダブルクリックして、メインエディタですべてのタスクを含む画面を開きます。
-
Buttonウィジェットを、ツールボックスから画面の右上にある[Actions]プレースホルダにドラッグします。ボタンのラベルを「Add」に変更します。
-
ボタンセレクタを右クリックし、[Link > MainFlow\TaskDetail]を選択します。
リアクティブWebアプリをテストする
この段階でリアクティブWebアプリをテストします。[ 1-Click Publish]ボタンをクリックし、ご利用の環境にアプリケーションをパブリッシュします。アプリケーションがデプロイされたら、[[
]ボタンをクリックして、アプリケーションをブラウザでテストします。