Text Area（テキスト･エリア）

Text Areaはスクリーン上にテキストを表示します。 Text Area内のテキストは、サイズ、色、カスタム･フォント、ダイナミック･テキストなどで完全に設定可能です。 TouchGFX Designerでのテキストの処理方法については、「テキストとフォント」の記事を参照してください。

シミュレータで実行されるText Area

ウィジェット･グループ

Text Areaは、TouchGFX DesignerのMiscellaneousウィジェット･グループ内にあります。

TouchGFX DesignerのText Area

プロパティ

TouchGFX DesignerのText Areaのプロパティは以下のとおりです。

プロパティ･グループ	プロパティの説明
Name	ウィジェットの名前。 Nameは、TouchGFX Designerおよびコードで使用される一意の識別子です。
Location	XおよびYは、親を基準としてウィジェットの左上隅の位置を指定します。 WおよびHは、ウィジェットの幅と高さを指定します。 <br/Auto-sizeは、テキスト入力に従ってウィジェットのサイズを自動的に設定するかどうかを指定します。 Lockは、ウィジェットを現在のX、Y、W、Hでロックするかどうかを指定します。 ウィジェットをロックすると、スクリーンを通したウィジェットとのインタラクションも無効になります。 Visibleは、ウィジェットの可視性を指定します。 ウィジェットを非表示にすると、スクリーンを通したウィジェットとのインタラクションも無効になります。
Text	IDは、使用されるテキストを指定します。 ウィジェットが自動生成のテキストを使用している場合、IDには'Auto-generated'と表示されます。 Translationは、表示されるテキストのコンテンツを指定します。 Typographyは、テキストのフォーマットを指定します。 Alignmentは、テキストの水平方向の配置を指定します。 ダイナミック･テキスト入力用に最大2つのワイルドカードを作成できます。これらは'<tag>'と示されます（'tag'には任意の文字列を入れることができます）。 テキスト設定の詳細については、「テキストとフォントの使用」セクションを参照してください。
Appearance	Colorは、表示されるテキストの色を指定します。 Alphaは、ウィジェットの透明度を指定します。 ウィジェットのアルファ値の範囲は0〜255です。 0は完全に透明で、255は塗りつぶされた状態です。 Line Spacingは、ライン間のスペースを指定します。 Text Rotationは、テキストの回転角度を設定します。
Mixins	Draggableは、実行時にウィジェットをドラッグ可能にするかどうかを指定します。 ClickListenerは、ウィジェットがクリックされたときにコールバックを発行するかどうかを指定します。 FadeAnimatorは、ウィジェットがAlpha値への変更をアニメーション化できるかどうかを指定します。 MoveAnimatorは、ウィジェットがXおよびY値への変更をアニメーション化できるかどうかを指定します。

インタラクション

以下のセクションでは、Text Areaによってサポートされるアクションとトリガについて説明します。

アクション

ウィジェット固有のアクション	説明
Set text	ウィジェットのテキストを設定します。
Resize widget	ウィジェットのサイズを変更します。
Set wildcard	ウィジェットのワイルドカードを設定します。 このアクションを機能させるためには、ワイルドカードをText Areaに追加しておく必要があります。

標準のウィジェット･アクション	説明
Move widget	時間の経過に伴ってウィジェットを新しい位置に移動します。
Fade widget	時間の経過に伴ってウィジェットのアルファ値を変更します。
Hide widget	ウィジェットを非表示にします（可視性をfalseに設定します）。
Show widget	非表示のウィジェットを表示します（可視性をtrueに設定します）。

トリガ

Text Areaはトリガを発行しません。

パフォーマンス

Text Areaはテキスト描画に依存します。 テキスト描画は一般的な画像描画と非常によく似ています（ただし、テキスト文字の特性から、かなりの量のアルファブレンディングが行われます）。 このため、Text Areaはほとんどのプラットフォーム上で高速処理のウィジェットであると見なされます。

テキスト描画のパフォーマンスの詳細については、「一般的なUIコンポーネントのパフォーマンス」セクションを参照してください。

例

生成済みコード

View基底クラスの生成済みコードを見ると、TouchGFX DesignerによるText Areaの設定方法がわかります。

Screen1ViewBase.hpp

touchgfx::TextAreaWithOneWildcard textArea;

/*
 * Wildcard Buffers
 */
static const uint16_t TEXTAREA_SIZE = 20;
touchgfx::Unicode::UnicodeChar textAreaBuffer[TEXTAREA_SIZE];

Screen1ViewBase.cpp

textArea.setPosition(40, 111, 400, 50);
textArea.setColor(touchgfx::Color::getColorFromRGB(60, 180, 230));
textArea.setLinespacing(0);
Unicode::snprintf(textAreaBuffer, TEXTAREA_SIZE, "%s", touchgfx::TypedText(T_TOUCHGFXID).getText());
textArea.setWildcard(textAreaBuffer);
textArea.setTypedText(touchgfx::TypedText(T_SINGLEUSEID1));

Tip

ユーザ･コードでは、これらの関数や、TextAreaクラスで使用可能なその他の関数を使用できます。 ウィジェットの外観を変更する場合には、 textArea.invalidate() またはtextArea.invalidateContent() を呼び出して、再描画を行う必要があります。

分節不備 textArea.invalidateContent()

を使用する場合は、ウィジェットの表示の変更前後に textArea.invalidateContent() を呼び出す必要があります（ワイルドカード･バッファの内容を変更する場合など）。

言語を変更する場合には、境界領域（ウィジェット･コンテンツの領域）の再計算をトリガする必要があります。 このためには、言語の変更が完了した後に textArea.setTypedText(...) を呼び出します。

ユーザ･コード

次の例は、ワイルドカードを使用して実行時にテキストを変更するために、handleTickEvent()関数を実装する方法を示しています。 このコードを実行すると、このセクションの冒頭で示したアプリケーションが作成されます。

Screen1View.hpp

class Screen1View : public Screen1ViewBase
{
public:
    Screen1View();
    virtual ~Screen1View() {}
    virtual void setupScreen();
    virtual void tearDownScreen();

    virtual void handleTickEvent();
protected:
    uint8_t counter;
    bool flag;
};

Screen1View.cpp

Screen1View::Screen1View():
    counter(0),
    flag(true)
{}

void Screen1View::handleTickEvent()
{
    counter++;
    if(counter%120 == 0) // every 2s
    {
        if(flag)
        {
            Unicode::snprintf(textAreaBuffer, TEXTAREA_SIZE, "%s", touchgfx::TypedText(T_STMICROID).getText());
            flag = false;
        }
        else
        {
            Unicode::snprintf(textAreaBuffer, TEXTAREA_SIZE, "%s", touchgfx::TypedText(T_TOUCHGFXID).getText());
            flag = true;
        }
        textArea.invalidate();
        counter = 0;
    }
}

TouchGFX Designerの例

Text Areaをさらに探索するには、次の例のいずれかを使用して、TouchGFX Designer内で新しいアプリケーションを作成してみてください。

TouchGFX DesignerのText Example

TouchGFX DesignerのArabic Text Example

API参照

Further reading

TextAreaクラスのAPI参照