Skip to main content

 

 

 

 
Language:

 

 
モバイルアプリとリアクティブWebアプリにのみ適用されます

 

 
 
OutSystems

Counter

Counter UIパターンを使用すると、数値情報を通知として表示することができます。たとえば、未読メール、未開封メッセージ、新しいタスクがあるときにそれらの数をユーザーに通知する場合に、Badge UIパターンがよく使用されます。

Counter UIパターンの使用方法

以下の例は、プラットフォームの登録ユーザー数を表示する方法を示しています。

  1. Service StudioのツールボックスでCounterを検索します。

    Counterウィジェットが表示されます。

  2. ツールボックスから、Counterウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。

    デフォルトで、Counterウィジェットには[Content]プレースホルダが含まれています。

  3. Aggregate(この例ではプラットフォームのすべてのユーザーを取得します)を作成するため、画面名を右クリックして[Fetch Data from Database]を選択します。

  4. データベースエンティティを追加するため、画面をクリックし、[Select Source]ポップアップで関連するエンティティを選択して[OK]をクリックします。この例では、Userエンティティを選択します。

    GetUsers Aggregateが作成されます。

  5. 画面をもう一度開くため、[Interface]タブを選択し、画面をダブルクリックします。

  6. ツールボックスからExpressionウィジェットを[Content]プレースホルダにドラッグし、Expressionエディタで以下のExpressionを入力し、[Done]をクリックします。

    GetUsers.Count

これで、先ほど作成したAggregateのCountプロパティを表示するためのExpressionが作成されました。これにより、プラットフォームのユーザー数が取得されて表示されます。

  1. Properties]タブでオプションのプロパティを設定し、高さや方向などのCounterのルックアンドフィールをカスタマイズできます。

これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。

プロパティ

プロパティ 説明
BackgroundColor(Color Identifier型): オプション カウンタの背景色。事前定義された利用可能なバッジの色は、赤、オレンジ、黄、ライム、緑、青、紫、ピンクなどです。

  • 空白 - カウンタには背景色が適用されません。これがデフォルトです。
  • Entities.Color.Red - 赤色のカウンタが表示されます。
IsVertical(Boolean型): オプション Trueの場合、コンテンツは縦方向に表示されます。Falseの場合、コンテンツは横方向に表示されます。これがデフォルトです。
Height(Text型): オプション カウンタの高さ(ピクセル単位)。デフォルトでは、カウンタの高さは100(ピクセル単位)になります。
ExtendedClass(Text型): オプション Counter UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。

  • 空白 - カスタムスタイルを追加しません(デフォルト値)。
  • "myclass" - 適用されるCounter UIのスタイルに_myclass_というスタイルを追加します。
  • "myclass1" "myclass2" - 適用されるCounter UIのスタイルに_myclass1_というスタイルと_myclass2_というスタイルを追加します。
  • Was this article helpful?