Range Slider Interval

Range Slider Interval UIパターンの使用方法

この例では、ユーザーが1～50の価格範囲を選択できる間隔範囲スライダを作成します。

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

   Range Slider Intervalウィジェットが表示されます。

   

2. ツールボックスからRange Slider Intervalウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグし、［Properties］タブで、MinValue、MaxValue、InitialIntervalStart、InitialIntervalEndの各値を入力します。この例では、静的な値を追加しています。

   

3. OnChangeイベントを作成するため、［Properties］タブの［Handler］ドロップダウンで［New Client Action］を選択します。

   

   デフォルトで、InitialIntervalStart入力パラメータとInitialIntervalEnd入力パラメータが作成されます。

   

4. ツールボックスからContainerウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグし、コンテンツを［Container］プレースホルダに追加します。この例では、各入力パラメータにテキストとExpressionを追加しています。

   

5. 各Expressionの変数を作成するため、画面名を右クリックして［Add Local Variable］を選択し、［Properties］タブで名前とデータ型を入力します。この例では、Currencyデータ型のLowerPrice変数とHighestPrice変数を作成しています。

   

6. IntervalStart変数をExpressionにバインドするため、Expressionウィジェットをダブルクリックし、［Expression Value］エディタで先ほど作成した変数を選択して［Done］をクリックします。

   

7. IntervalEnd入力パラメータについて手順6を繰り返します。

8. パラメータが範囲スライダの選択を読み取るようにするため、クライアントアクションをダブルクリックし、ツールボックスからAssignアクションをクライアントアクションに追加します。

   

9. Assignアクションの変数と値の割り当てを設定します。

   

10. ［Properties］タブで（オプションの）プロパティを設定し、範囲スライダのルックアンドフィールを変更できます。

    

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

プロパティ