メインコンテンツまでスキップ

リスナーとブロードキャスター

📚 Source Page

このチュートリアルでは、JUCEの重要なコンセプトであるリスナーとブロードキャスターのシステムを紹介します。ボタンのクリックに応答する簡単なアクションの実装を通して、この概念を見ていきます。

レベル初心者

プラットフォーム：Windows, macOS, Linux, iOS, Android

クラス： Button,TextButton,Button::Listener,Time

スタート​

このチュートリアルのデモ・プロジェクトのダウンロードはこちらから：PIP|ZIP.プロジェクトを解凍し、最初のヘッダーファイルをProjucerで開く。

このステップにヘルプが必要な場合は、以下を参照してください。Tutorial: Projucer Part 1: Getting started with the Projucer.

デモ・プロジェクト​

このチュートリアルのデモ・プロジェクトでは、1つのボタンと1つのラベルを持つシンプルなユーザー・インタフェースを紹介します。インタフェースは次のスクリーンショットに似ているはずです：

基本的なボタンとラベルのインターフェイス。
基本的なボタンとラベルのインターフェイス。

インタフェースは提供された状態では何もしない。ボタンをクリックすると、ラベルに現在の日付と時刻が表示されるようにコードを追加する。

インタフェースの設定​

についてMainContentComponentクラスは2つの子コンポーネントで構成されています。TextButtonオブジェクトとLabelオブジェクトATextButtonオブジェクトは、特定のテキストを含むボタンを表示できます。Labelオブジェクトはテキストを表示できる。

注記

についてTextButtonクラスは1種類のボタンを実装している。ボタンの種類はたくさんある。ButtonクラスはJUCEで利用可能です。のAPIリファレンスドキュメントを参照してください。ToggleButton,ShapeButton,ImageButton,DrawableButtonそしてArrowButtonのクラスがある。

を宣言した。MainContentComponentクラスは以下の通りである：

class MainContentComponent   : public juce::Component
{
public:
    //==============================================================================
    MainContentComponent()
    {
        // ...
    }
 
    ~MainContentComponent()
    {
        // ...
    }
 
    void resized() override
    {
        // ...
    }
 
private:
    juce::TextButton checkTheTimeButton;
    juce::Label timeLabel;
 
    //==============================================================================
    JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR (MainContentComponent)
};
JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR#define JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR(className)This is a shorthand way of writing both a JUCE_DECLARE_NON_COPYABLE and JUCE_LEAK_DETECTOR macro for ...Definition juce_PlatformDefs.h:262

ボタンとラベルはMainContentComponentオブジェクトに表示される。MainContentComponentビルダー

    MainContentComponent()
    {
        addAndMakeVisible (checkTheTimeButton);
        checkTheTimeButton.setButtonText ("Check the time...");
 
        addAndMakeVisible (timeLabel);
        timeLabel.setColour (juce::Label::backgroundColourId, juce::Colours::black);
        timeLabel.setColour (juce::Label::textColourId, juce::Colours::white);
        timeLabel.setJustificationType (juce::Justification::centred);
 
        setSize (600, 110);
    }

ここでは、ボタンのテキストを設定し、ラベルの特定の外観を設定します。これにより、ラベルは黒い背景に白いテキストを表示します。デフォルトでは、ラベルはテキストを表示しません。

リスナー・ベース・クラスの追加​

JUCEでは、ボタンやスライダーなど、他のオブジェクトに状態の変化を知らせる必要のあるコントロールの多くはブロードキャスターオブジェクトの変更に対応するために、他のクラスがブロードキャスター・オブジェクトの変更に応答するためには、他のクラスがリスナーリスナーは、そのブロードキャスターの特定のタイプに登録する必要があります。リスナーはまた、そのタイプの少なくとも1つの特定のブロードキャスターオブジェクトに登録される必要があります。(JUCEのブロードキャスター・リスナーシステムはobserver pattern.)多くの放送局オブジェクトは、ネストされたListenerクラスを継承することで、そのタイプのブロードキャスターのリスナーになることができる。例えばButtonクラスは、ネストされたクラスButton::Listenerそのためである。

注記

についてButton::Listenerクラスのインスタンスを含む、さまざまなボタンタイプをリッスンするために使用できます。TextButtonクラスは次のようになる。

を使用する。Button::Listenerクラスをベース・クラスとして追加する必要がある。私たちの場合はButton::Listenerクラスをベース・クラスとしている。MainContentComponentクラス[1]:

class MainContentComponent   : public juce::Component,
                               public juce::Button::Listener // [1]
{
public:

カスタム・クラスは、同じようにリスナー・ベース・クラスを追加することで、異なるタイプのブロードキャスターのリスナーになることができる。

リスナーのコールバックを宣言する​

通常、各リスナークラスは少なくとも1つのpure virtual関数を呼び出します。これは、ブロードキャスター・オブジェクトがその変更をブロードキャストする必要があるときに、コールバックとして呼び出される関数である。コードをコンパイルして使うためには、これをオーバーライドしなければならない。

注記

リスナー・クラスは、オーバーライドされるかもしれない他の仮想関数をしばしば含むが、それらは必要なケースが少ないのでオプションである。のドキュメントを参照してください。Slider::Listenerクラスの例である。

についてpure virtual関数のButton::ListenerクラスはButton::Listener::buttonClicked()関数を追加する必要があります。その宣言を追加する必要がある。[2]我々のMainContentComponentクラスは次のようになる：

    MainContentComponent()
    {
        // ...
    }
 
    ~MainContentComponent()
    {
        // ...
    }
 
    void resized() override
    {
        // ...
    }
 
    void buttonClicked (juce::Button* button) override // [2]
    {
    }
 
// ...
buttonfloat float UnityEventModifiers int buttonDefinition juce_UnityPluginInterface.h:200

リスナー・コールバックの実装​

ではMainContentComponent::buttonClicked()関数に渡される。ここでは、変更をブロードキャストしたオブジェクトへのポインタが渡される。そして、このポインターを他のオブジェクトと比較することで、どのオブジェクトが変更されたかを判断できる：

    void buttonClicked (juce::Button* button) override  // [2]
    {
        if (button == &checkTheTimeButton)                                                      // [3]
        {
            auto currentTime = juce::Time::getCurrentTime();                                          // [4]
 
            auto includeDate = true;
            auto includeTime = true;
            auto currentTimeString = currentTime.toString (includeDate, includeTime);           // [5]
 
            timeLabel.setText (currentTimeString, juce::dontSendNotification);                        // [6]
        }
    }
  • [3]ここでは、関数に渡されたポインタとボタンのアドレスを比較して、それが一致するかどうかを確認する。今回のようにボタンが1つしかない場合でも、この処理を行う必要がある。ポインタとベースとなるButtonクラスのインスタンスを持つButtonのようなサブクラスがあります。TextButtonクラスは次のようになる。
  • [4]これはTimeクラスを使ってオペレーティング・システムから現在時刻を取得する。
  • [5]を変換する。Timeオブジェクトを読みやすい文字列に変換する。2つのboolのドキュメントを参照のこと）。Time::toString()関数を参照)。
  • [6]ここでは、ラベル内に表示されるテキストを更新する。
注記

についてdontSendNotification議論[7]は、ラベルがこの変更をリスナーに伝えるのを防ぎます。(Labelオブジェクトもリスナーを持つことができます）。この場合、リスナーを持つことができないことは分かっています（私たち自身のプライベート・メンバーだからです）。

放送局へのリスナー登録​

ブロードキャストされたメッセージを受信するには、リスナー・オブジェクトを1つ以上のブロードキャスター・オブジェクトに登録する必要がある。この場合TextButtonオブジェクトを返します。通常、これはリスナー・サブクラスのコンストラクタ内で行われる。[7]:

    MainContentComponent()
    {
        addAndMakeVisible (checkTheTimeButton);
        checkTheTimeButton.setButtonText ("Check the time...");
        checkTheTimeButton.addListener (this); // [7]
注記

ほとんどの放送局オブジェクトはaddListener()この目的のためにChangeBroadcasterオブジェクトは例外です。ChangeBroadcaster::addChangeListener()関数の代わりに)。

放送局へのリスナー登録解除​

放送局もまたremoveListener()関数もある。例えばButton::removeListener()関数を使用します。このボタンは、リスニングを実行しているのと同じクラスが所有しているので、実際には必要ボタンがリスナーと同時に破壊されるので、リスナーを削除する。念のため可能性があるこれをデストラクタに追加する：

~MainContentComponent()
{
    checkTheTimeButton.removeListener (this);
}
警告

リスナーを適切に削除することは、より複雑なブロードキャスターとリスナーのシステムをセットアップする場合に重要である。

アプリケーションをビルドして実行します。ボタンをクリックすると、ラベルに時間が表示されるはずです。

ボタンで現在時刻を表示する。
ボタンで現在時刻を表示する。
注記

このセクションの完成したコードはListenersAndBroadcastersTutorial_02.hファイルを参照してください。

エクササイズ

表示されるテキストのフォーマットを変更してみてください。これはTime::toString()関数を使います。また、ラベルが絶対時間ではなく、ボタンをクリックする間のミリ秒数を表示するようにコードを変更することもできる。

注記

この練習のコードの実装例はListenersAndBroadcastersTutorial_03.hファイルを参照してください。

Buttonコールバックの簡素化​

このチュートリアルで示したようなリスナーやブロードキャスターのパラダイムを使う代わりに、最新のC++標準のラムダ関数を使うことで、ボタンのコールバックを単純化できます。これは、複雑な実装を必要としない単純なコールバックには特に有効です。

まずはButton::Listenerクラスを作成し、次のようにMainContentComponentクラスの定義を復元する：

class MainContentComponent   : public juce::Component
{
public:

では、MainContentComponentをリスナーとして追加する代わりにButtonラムダ関数をButton::onClickヘルパーオブジェクト[8]以下の通りである：

    MainContentComponent()
    {
        addAndMakeVisible (checkTheTimeButton);
        checkTheTimeButton.setButtonText ("Check the time...");
        checkTheTimeButton.onClick = [this] { checkTime(); };   // [8]

これはButtonオブジェクトを呼び出します。Buttonがクリックされる。

最後に、コールバック関数の名前をcheckTime()に変更します。[9]へのポインタをチェックするif() ステートメントを削除する。Buttonオブジェクトをチェックする必要がないからだ。Buttonはもうその関数を呼び出さない：

    void checkTime() // [9]
    {
        auto currentTime = juce::Time::getCurrentTime();
 
        auto includeDate = true;
        auto includeTime = true;
        auto currentTimeString = currentTime.toString (includeDate, includeTime);
 
        timeLabel.setText (currentTimeString, juce::dontSendNotification);
    }
注記

コードの実装はListenersAndBroadcastersTutorial_04.hファイルを参照してください。

概要​

このチュートリアルでは、JUCEにおけるブロードキャスターとリスナーのシステムの基本を紹介しました。このチュートリアルではボタンに焦点を当てましたが、同じテクニックはJUCEコードの多くの領域に適用できます。特に、以下のことを学びました：

  • カスタム・クラスの1つをリスナー・タイプのオブジェクトにする方法
  • リスナーのコールバック関数の追加方法
  • ブロードキャスター・オブジェクトのリスナーとしての登録と登録解除の方法
  • を使って現在時刻にアクセスする方法Timeクラスである
  • ラムダ関数でコールバックを単純化する方法。

参照​