Linear Gauge コントロールを使用する方法

このコントロールを使用すると、線形ゲージまたは円形ゲージを使用して、情報を範囲の形で表示できます。
文字列タイプの変数を入力し、[ Control Type ] プロパティの値を [ Linear Gauge ] に変更すると、GeneXus によって GaugeSDT という新しい SDT が自動的に生成されます。これは、コントロール全体に影響するプロパティと値に分かれており、各範囲も同様です。

Title	線形タイプの場合はコントロールの上に、円形タイプの場合はコントロールの中央に表示されるテキストです。
Type	表示する形式を選択できます。使用できる値は [ Line ] と [ Circular ] です。既定値は [ Line ] です。
Thickness	コントロールが円形タイプの場合に適用されます。円周の太さを指定できます。
Height	範囲バーの高さです。
Width
MaxValue	コントロールが表す最大値、つまり全範囲の合計値を示します。
MinValue	範囲が表す最小値を示します。
Value	現在、表されている値を示します。
ShowMinMax	最大値と最小値のインジケータの表示を有効にします。
ShowValue	値の表示を有効にします。

範囲 (各範囲に適用):

Color:	16 進数の文字列値です。例: "#F80303"
Name:	この範囲の名前です。
Length:	この範囲の長さです。

例:

ここで、Panel オブジェクトに文字列タイプの変数を置き、 [ Control Type ] プロパティを [ Linear Gauge ] に設定します (変数名は &LineGauge)。

GeneXus のコントロールタイプを変更すると、オブジェクトのプレビューが変わります。このレイアウトに示す画像は一例です。
Refresh イベントでデータをロードします。この例では、Data Provider オブジェクト (LoadData) から提供されます。構造は以下のとおりです:

GaugeSDT
{
    MaxValue   = 100
    MinValue   = 0
    Value      = 35
    Height     = 8
    ShowMinMax = False
    ShowValue  = True
    Ranges
    {
        Range
        {
            Color  = '#00FF00'//緑
            Name   = 'Low' 
            Length = 28
        }
        Range
        {
            Color     = '#FF8000'//オレンジ
            Name     = 'Medium' 
            Length     = 52
        }
        Range
        {
            Color  = '#FF0000' //赤
            Name   = 'High' 
            Length = 20
        }
    }
}

Following the same line and reusing the returned data you will change 2 properties of the control (Thickness and Type) to display the same information but using the circular type (variable &CircularGauge).コードは以下のとおりです:

Event Refresh
//Linear Gauge
    &GaugeSDT      = LoadData()
    &LineGauge     = &GaugeSDT.ToJson()

//Circular Gauge
    &GaugeSDT.Type       = 'Circular'
    &GaugeSDT.Thickness  = 35
    &CircularGauge       = &GaugeSDT.ToJson()
Endevent

このコントロールには、Attribute クラスの [ Animated ] プロパティと [ Animated Duration ] プロパティが適用されているため、ビューのロード時に表示されるアニメーションが生成されます。