チュートリアルComboBoxクラス
このチュートリアルではComboBoxクラスは、ユーザーにアイテムのリストを表示するためのコンポーネントです。リストの内容はComboBoxオブジェクトは動的に変更でき、テキスト入力にも使える。
レベル初心者
プラットフォーム：Windows, macOS, Linux, iOS, Android
クラス： ComboBox,Label,Font,Colour,Colours
スタート
このチュートリアルのデモ・プロジェクトのダウンロードはこちらから：PIP|ZIP.プロジェクトを解凍し、最初のヘッダーファイルをProjucerで開く。
このステップでヘルプが必要な場合は、以下を参照してください。Tutorial: Projucer Part 1: Getting started with the Projucer.
デモ・プロジェクト
デモ・プロジェクトでは、ウィンドウ上部のLabelコンポーネントTutorial: The Label class). AComboBoxコンポーネントにはプレーン,太字そしてイタリック.ユーザーはこれらの項目のいずれかを選択して、ラベル内のテキストのスタイルを変更することができます。
ComboBoxクラス
の機能の多くを紹介します。ComboBoxクラスAComboBoxコンポーネントには、テキスト文字列のリストが含まれている。これらのテキスト文字列はそれぞれID番号(int値)。どの項目が現在選択されているかは、以下の方法で問い合わせることができる：
- を使用して、現在選択されているIDを取得する。ComboBox::getSelectedId()または
- を使用して、現在表示されているテキストを要求する。ComboBox::getText()関数である。
についてComboBoxクラスはブロードキャスターでもある。変更を聞くにはComboBox::Listenerクラス（参照Tutorial: Listeners and Broadcastersを使ってラムダ関数を使うこともできる。ComboBox::onChangeヘルパーオブジェクト。
デモ・プロジェクトを見てみよう。私たちのMainContentComponentクラスには4人のプライベートメンバーがいる：
juce::Label textLabel { {}, "The quick brown fox jumps over the lazy dog." };
juce::Font textFont { 12.0f };
juce::ComboBox styleMenu;
についてLabelそしてFontオブジェクトはコンストラクタで設定される：
MainContentComponent()
{
addAndMakeVisible (textLabel);
textLabel.setFont (textFont);
アイテムの追加
アイテムはComboBoxオブジェクトを1つずつComboBox::addItem()関数を使う。ここでは、ID番号1、2、3の「プレーン」、「ボールド」、「イタリック」項目をそれぞれ追加する：
// add items to the combo-box
addAndMakeVisible (styleMenu);
styleMenu.addItem ("Plain", 1);
styleMenu.addItem ("Bold", 2);
styleMenu.addItem ("Italic", 3);
styleMenu.onChange = [this] { styleMenuChanged(); };
styleMenu.setSelectedId (1);
setSize (400, 200);
}
変化への対応
登録することもできた。MainContentComponentオブジェクトをリスナーとして使用する。styleMenu ComboBoxオブジェクトはアプリケーション内でユーザーによって変更される。しかし、この場合ComboBox::onChangeヘルパー・オブジェクトを直接呼び出すstyleMenuChanged()関数である：
styleMenu.onChange = [this] { styleMenuChanged(); };
についてstyleMenuChanged()関数はstyleMenuオブジェクトがある：
void styleMenuChanged()
{
switch (styleMenu.getSelectedId())
{
case 1: textFont.setStyleFlags (juce::Font::plain); break;
case 2: textFont.setStyleFlags (juce::Font::bold); break;
case 3: textFont.setStyleFlags (juce::Font::italic); break;
default: break;
}
textLabel.setFont (textFont);
}
ここではtextFont Fontオブジェクトをユーザーの選択に応じて適切に変更します。次に、このフォントを使ってtextLabel Labelオブジェクトのフォント。
アイテムID番号の使用
アイテム ID には任意の整数を使用できます。ただしゼロ。ゼロには特別な意味がある。これは、どの項目も選択されていないことを示すのに使われる（項目がまだ選択されていないか、あるいはComboBoxオブジェクトが他のカスタム・テキストを表示している）。
1、2、3のような単純な数字をコードに使用することで、管理は簡単だ。しかし、アプリの開発が進むにつれて、これはすぐに管理しきれなくなる。この場合はenum.プライベートのenum私たちのスタイルのために：
enum FontStyles
{
stylePlain = 1,
styleBold,
styleItalic,
numberOfStyles
};
そして、これらの値をComboBoxオブジェクトがある：
addAndMakeVisible (styleMenu);
// add items to the combo-box
styleMenu.addItem ("Plain", 1);
styleMenu.addItem ("Bold", 2);
styleMenu.addItem ("Italic", 3);
styleMenu.onChange = [this] { styleMenuChanged(); };
styleMenu.setSelectedId (stylePlain);
そして、我々のstyleMenuChanged()関数である：
void styleMenuChanged()
{
switch (styleMenu.getSelectedId())
{
case stylePlain: textFont.setStyleFlags (juce::Font::plain); break;
case styleBold: textFont.setStyleFlags (juce::Font::bold); break;
case styleItalic: textFont.setStyleFlags (juce::Font::italic); break;
}
textLabel.setFont (textFont);
}
少なくとも、これでコードはずっと読みやすくなる。
IDナンバーを使用する他の一般的な戦略は以下の通り：
- 配列を使用して、コンボボックスの項目に関連するデータを格納します。IDを配列のインデックスとして使用できますが、インデックス0は未使用のままにするか、オフセットを使用する必要があります。たとえば、IDを100から始めることができます（100、101、102など）。ID100は配列のインデックス0と関連付けられ、100を足したり引いたりすることで、IDとインデックスを簡単に変換することができます。
- アプリのコンボボックスごとに、異なる範囲の整数のバッチを使う。例えば、あるコンボボックスには100, 101, 102...、別のコンボボックスには200, 201, 202...といった具合です。
- アイテムテキストのハッシュを使う次のように使用できます。String::hashCode()を取得する。おそらく文字列の一意なハッシュコードを返します。しかし、これはゼロを返す可能性があることに注意してください（空の文字列にこの関数を使用すると、ハッシュコードはゼロを返します）。
セクションと仕切り
コンボボックスの項目リストには、仕切りやセクションの見出しを含めることができます。これは非常に長いリストでは特に便利です。テキストの色を変えるコンボボックスをアプリに追加してみよう。まずenum私たちの色のために：
enum TextColours
{
black = 1,
white,
red,
darkred,
indianred,
green,
darkgreen,
lightgreen,
blue,
darkblue,
lightblue,
numberOfColours
};
そして新しいメンバーが加わった。MainContentComponentクラスである：
juce::Label textLabel { {}, "The quick brown fox jumps over the lazy dog." };
juce::Font textFont { 12.0f };
juce::ComboBox styleMenu;
juce::ComboBox coloursMenu;
の中でMainContentComponentコンストラクタに新しいコンボボックスをセットアップするコードを追加する必要がある。ここでは2つの新しい関数を紹介する、ComboBox::addSeparator()そしてComboBox::addSectionHeading():
addAndMakeVisible (coloursMenu);
coloursMenu.addItem ("Black", black);
coloursMenu.addItem ("White", white);
coloursMenu.addSeparator();
coloursMenu.addSectionHeading ("Reds");
coloursMenu.addItem ("Red", red);
coloursMenu.addItem ("Dark Red", darkred);
coloursMenu.addItem ("Indian Red", indianred);
coloursMenu.addSeparator();
coloursMenu.addSectionHeading ("Greens");
coloursMenu.addItem ("Green", green);
coloursMenu.addItem ("Dark Green", darkgreen);
coloursMenu.addItem ("Light Green", lightgreen);
coloursMenu.addSeparator();
coloursMenu.addSectionHeading ("Blues");
coloursMenu.addItem ("Blue", blue);
coloursMenu.addItem ("Dark Blue", darkblue);
coloursMenu.addItem ("Light Blue", lightblue);
coloursMenu.onChange = [this] { coloursMenuChanged(); };
coloursMenu.setSelectedId (black);
coloursMenu.setEditableText (true);
setSize (400, 200);
}
セクション見出しなしでセパレーターを使うことも、セパレーターなしでセクション見出しを使うこともできるが、これらは一 緒に使うとうまくいく。
セパレーターとセクション見出しは選択できず、関連するID番号もありません。
の変更を処理する新しい関数を実装する必要がある。coloursMenuオブジェクトがある：
void coloursMenuChanged()
{
juce::Colour textColour;
switch (coloursMenu.getSelectedId())
{
case black: textColour = Colours::black; break;
case white: textColour = Colours::white; break;
case red: textColour = Colours::red; break;
case darkred: textColour = Colours::darkred; break;
case indianred: textColour = Colours::indianred; break;
case green: textColour = Colours::green; break;
case darkgreen: textColour = Colours::darkgreen; break;
case lightgreen: textColour = Colours::lightgreen; break;
case blue: textColour = Colours::blue; break;
case darkblue: textColour = Colours::darkblue; break;
case lightblue: textColour = Colours::lightblue; break;
}
textLabel.setColour (juce::Label::textColourId, textColour);
}
Colours::lightblueconst Colour lightblueDefinition juce_Colours.h:114
Colours::greenconst Colour greenDefinition juce_Colours.h:102
Colours::darkblueconst Colour darkblueDefinition juce_Colours.h:72
Colours::darkredconst Colour darkredDefinition juce_Colours.h:82
Colours::whiteconst Colour whiteDefinition juce_Colours.h:188
Colours::blueconst Colour blueDefinition juce_Colours.h:60
Colours::blackconst Colour blackDefinition juce_Colours.h:58
Colours::indianredconst Colour indianredDefinition juce_Colours.h:106
Colours::darkgreenconst Colour darkgreenDefinition juce_Colours.h:76
Colours::redconst Colour redDefinition juce_Colours.h:165
Colours::lightgreenconst Colour lightgreenDefinition juce_Colours.h:118
の境界を設定することをお忘れなく。coloursMenuオブジェクトをresized()関数である：
void resized() override
{
textLabel .setBounds (10, 10, getWidth() - 20, 20);
styleMenu .setBounds (10, 40, getWidth() - 20, 20);
coloursMenu.setBounds (10, 70, getWidth() - 20, 20);
}
プロジェクトを実行すると、ウィンドウは次のようになるはずだ：
ラベルテキストの色を変更できるようになりました。
テキスト入力
コンボボックスのデフォルトの動作は、ユーザーがリストされた項目のみを選択できるようにすることです。しかし、コンボボックスを編集可能にして、ユーザーが他のテキストを入力できるようにすることができます。コンボボックスのMainContentComponentコンストラクタでcoloursMenuオブジェクトを編集可能にする：
coloursMenu.setEditableText (true);
では、この関数にcoloursMenuオブジェクトで、テキストを16進数のカラーコードとして扱います。カラーコードはARGB形式です（例えば、"ff8888888 "は不透明な中間灰色になります）：
概要
このチュートリアルではComboBoxクラスです。このチュートリアルを読めば、次のことができるようになるでしょう：
- コンボボックスを作成し、そこに項目を追加する。
- コンボボックスの項目に関連するID番号を管理します。
- コンボボックスで選択されている項目を変更するユーザーに対応する。
- コンボボックスにカスタムテキストを入力できるようにする。
- コンボボックスの項目を無効にしたり有効にしたりする。