JUCEプログラミング、Parent and child components、親と子のコンポーネント1

JUCEプログラミング、「Parent and child components」のチュートリアルを進めていきます。

公式ドキュメントはこちらのページになります。

こんな人の役に立つかも

・JUCEプログラミングを勉強している人

・JUCEプログラミングのチュートリアルを進めている人

・Parent and child componentsチュートリアルを進めている人

Componentの階層構造

Componentを階層構造にして、パート毎に分割して作成するとGUIの配置や、ユーザーの操作への応答性という面でメリットがあるとのことです。

コンポーネントを親子にして配置する、ということは、実際にはメインのクラスからComponentクラスを継承したクラスのオブジェクトを作成する、ということのようですね。

デモプログラムは、graphicsクラスの説明でも使われた家のシーンを描くというものを「背景」、「家」などといった部分に分けてクラス化してメインのクラスから階層構造的に呼び出してpaintする、ということを行います。

今回は、ProjucerのAudioアプリの枠で新規作成したプロジェクトでクラスを「.h」と「.cpp」に分けて作成していきます。

まずは、最初の「scene」というクラスを「MainComponent」クラスの子として登録して背景の水色を描画してみたいと思います。

MainComponent.h

ここからの作業は、ProjucerのAudioの項目で新規作成したものにプログラミングをしていきます。

//[1]シーンを描画するクラスを作成します。
class SceneComponent : public juce::Component
{
public:
    SceneComponent();

    void paint(juce::Graphics& g) override;

    void resized() override;

private:
    JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR(SceneComponent)
};

[1]で、シーン（背景）を描画するためのクラスを定義します。juce::Componentクラスを継承して作成します。コンストラクタ、paint関数、resize関数をpublicに定義しておきます。

class MainComponent  : public juce::AudioAppComponent
{
public:
//...略...
private:
    SceneComponent scene;//[2]ここにシーンコンポーネントを定義します。

    JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR (MainComponent)
};

MainComponentクラスのprivateな定義として、先ほど作成した「SceneComponent」クラスのオブジェクト「scene」を[2]のように定義します。

MainComponent.cpp

MainComponentクラス

MainComponentのコンストラクタです。中身をデフォルトのものから、次のように変更しました。sceneを可視化するだけです^^;

MainComponent::MainComponent()
{
    addAndMakeVisible(scene);
    setSize(600, 400);
}

次に、resize関数です。

void MainComponent::resized()
{
    scene.setBounds(0, 0, getWidth(), getHeight());
}

Componentクラスの「setBounds」関数を使用して、sceneオブジェクトを配置していきます。左上の原点0,0に、MainComponentの幅と高さをそれぞれ「getWidht」「getHeight」関数で取得しています。そのため、sceneのpaint関数での描画がアプリのウィンドウ全体に表示されるようになっています。

SceneComponentクラス

SceneComponentクラスの関数もそれぞれ定義しておきます。

//SceneComponentクラスの関数
SceneComponent::SceneComponent()
//コンストラクタ
{

}

void SceneComponent::paint(juce::Graphics& g)
{
    g.fillAll(juce::Colours::lightblue);
//ライトブルーに塗りつぶしています。
}

void SceneComponent::resized()
{

}

コンストラクタとresize関数は、今後ここに子コンポーネントが追加されて行きます。paint関数では、全体をライトブルーに塗りつぶす処理を行っています。

動作検証、改善点

このアプリを実行すると、次のように全体がライトブルーの画面となりました。

なんとなく、子コンポーネントを利用して、GUIを切り分けていく、という意味が理解できました。

ほんとは、SceneComponent.hとかのファイルに分けるべきなのでしょうが、まずは、Projucerから吐き出されたAudioの枠で動作するようにしてみました。

次の記事「親と子のコンポーネント２」はこちらです。