Skip to main content

 

はじめに

 

リアクティブWebアプリにのみ適用されます

 

OutSystems

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

リアクティブWebアプリの導入ガイドについては、当社のトレーニング「リアクティブWeb開発者への道」をご覧ください。OutSystemsのこの新しいタイプのアプリの詳細については、フォーラムの投稿「次世代のWebアプリ」をご覧ください。

OutSystemsではリアクティブWebアプリの開発を迅速に行うことができます。この例では、OutSystemsインストールに含まれるスプレッドシートを使用してデータベースエントリを作成し、すべてを結び付けるためのユーザーインターフェイスとロジックをToDoアプリに追加します。

実行する手順の概要を以下に示します。

  1. リアクティブWebアプリを作成し、名前を付け、初期色を選択します。
  2. Excelからデータをインポートして、データベースモデルを自動的に作成します。
  3. データベースのデータをリスト表示する画面を作成します。
  4. レコードの追加と更新を行う画面を作成します。
  5. レコードを削除する機能を実装します。
  6. ブラウザでアプリケーションをテストします。

リアクティブ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」アプリを作成しましょう。

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

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

  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ファイルからデータベーステーブルを作成する

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

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

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

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

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

新しい空の画面を作成する

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

DataタブとTaskエンティティ

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

Tasks画面

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

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

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

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

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

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

    Formをドラッグする

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

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

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

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

  2. Data]タブで、Taskエンティティを展開し、CreateOrUpdateTaskエンティティアクションをIfTrueブランチにドラッグします。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」に変更します。

    Actionsプレースホルダにプラスアイコンを追加する

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

    タスクの追加を許可する

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

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

  • Was this article helpful?