Skip to main content

 

 

 

 
Language:

 

 
モバイルアプリとリアクティブWebアプリにのみ適用されます
Service Studioバージョン :
 
 
OutSystems

Mouse Events

Mouse Events UIパターンは、ユーザーが非常に高い精度でインターフェイス上の要素を選択する必要があるときに使用できます。

Mouse Events UIパターンの使用方法

以下の例は、Mouse Events UIパターンを使用し、画面でマウスを左右にドラッグした距離を表示する方法を示しています。

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

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

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

  3. ツールボックスから、Center Contentウィジェットを画面のメインコンテンツ領域にドラッグします。

  4. Properties]タブで、Nameプロパティに名前を入力します。この例では、「card」と入力しています。

  5. 画面名を右クリックして[Add Local Variable]を選択し、ローカル変数を2つ追加します。

    この例では、「Drag」と「Distance」という名前を付けます。いずれのローカル変数もTextデータ型です。

  6. 関連するコンテンツをCenter Contentウィジェットのプレースホルダに追加します。

この例では、[Center]プレースホルダにテキストと2つのExpressionを追加し、[Bottom]プレースホルダにテキストを追加しています。

各Expressionにローカル変数(DragDistance)を設定します。

  1. 画面名を右クリックして[Add Client Action]を選択し、クライアントアクションを追加します。

  2. クライアントアクションの名前を入力します。この例では、「MouseEventsMove」と入力しています。

  1. クライアントアクションを右クリックして[Add Input Parameter]を選択し、入力パラメータを2つ追加します。

    この例では、OffsetXOffsetYの各入力パラメータを追加し、それぞれのデータ型をDecimalに設定しています。

  2. 関連するコンテンツをクライアントアクションに追加します。この例では、以下のように追加しています。

  3. Mouse Eventsウィジェットを選択し、WidgetIdPreventDefaultsHandlerの各プロパティを設定します。

    この例では、WidgetIdを「card.Id」に、PreventDefaultsを[False]に、OffsetXを「OffsetX」に、OffsetYを「OffsetY」に設定しています。

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

プロパティ

プロパティ 説明
WidgetId(Text型): 必須 構成するマウスイベントに応答する要素。
PreventDefaults(Boolean型): オプション Trueの場合、画面や他のウィジェットへのイベントの反映を停止します。これがデフォルトです。Falseの場合、画面や他のウィジェットへのイベントの反映が有効になります。
  • Was this article helpful?