チュートリアルComboBoxクラス

This tutorial introduces the コンボボックス class, which is a component for displaying lists of items to the user. The contents of a コンボボックス object can be modified dynamically, and can be used for text input, too.

レベル：初級

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

クラス：コンボボックス, ラベル, フォント, カラー, カラー

はじめる

Download the demo project for this tutorial here: ピップ | ジップ. Unzip the project and open the first header file in the Projucer.

If you need help with this step, see チュートリアルProjucerパート1：Projucerを始める.

The demo project

The demo project displays a piece of text at the top of the window within a ラベル component (see チュートリアルLabelクラス). A コンボボックス component contains the items プレーン, 太字, and イタリック. The user can select one of these items to change the style of the text within the label.

The ComboBox class

This tutorial introduces many of the features of the コンボボックス class. A コンボボックス component contains a list of text strings. Each of these text strings is associated with an ID number (an イント value). You can query which item is currently selected, either by:

retrieving the currently selected ID using the コンボボックス::getSelectedId() function; or
requesting the currently displayed text using the コンボボックス::getText() function.

The コンボボックス class is also a broadcaster. To listen for changes you can register a コンボボックス::リスナー class (see チュートリアルリスナーとブロードキャスター) or alternatively use a Lambda function with the コンボボックス::onChange helper object.

Let's examine the demo project. In our メインコンテンツコンポーネント class we have four private members:

juce::Label textLabel { {}, "すばしっこい茶色の狐は、怠け者の犬を飛び越える。"};
    juce::Font textFont { 12.0f }；
    juce::ComboBox styleMenu；

The ラベル and フォント objects are configured in the constructor:

MainContentComponent()
    {
        addAndMakeVisible (textLabel)；
        textLabel.setFont (textFont)；

Adding items

Items can be added to a コンボボックス object one at a time using the コンボボックス::addItem() function. Here we add the "Plain", "Bold", and "Italic" items with ID numbers 1, 2, and 3 respectively:

// コンボボックスに項目を追加する
        addAndMakeVisible (styleMenu)；
        styleMenu.addItem ("Plain", 1)；
        styleMenu.addItem ("Bold", 2)；
        styleMenu.addItem ("Italic", 3)；
 
        styleMenu.onChange = [this] { styleMenuChanged(); }；
        styleMenu.setSelectedId (1)；
 
        setSize (400, 200)；
    }

Responding to changes

We could have registered our メインコンテンツコンポーネント object as a listener to get notified when the スタイルメニュー コンボボックス object is changed by the user in the application. But in this case we implement the コンボボックス::onChange helper object to directly call the styleMenuChanged() function:

styleMenu.onChange = [this] { styleMenuChanged(); }；

The styleMenuChanged() function handles changes to the スタイルメニュー object:

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)；
    }

Here you can see that we set the テキストフォント フォント object appropriately based on the user's selection. Then we use this font to update the テキストラベル ラベル object's font.

Using item ID numbers

You can use any integer as an item ID ただし zero. Zero has a special meaning. It is used to indicate that none of the items are selected (either an item hasn't been selected yet or the コンボボックス object is displaying some other custom text).

With a small selection of items using simple numbers like 1, 2, and 3 in your code is easy to manage. This would quickly become unmanageable as you develop your app further. In our case it would be clearer to use an 列挙. Let's add a private 列挙 for our styles:

enum フォントスタイル
    {
        stylePlain = 1、
        styleBold、
        styleItalic、
        スタイル数
    };

Then we can use these values when setting up the コンボボックス object:

addAndMakeVisible (styleMenu)；
 
        // コンボボックスに項目を追加する
        styleMenu.addItem ("Plain", 1)；
        styleMenu.addItem ("Bold", 2)；
        styleMenu.addItem ("Italic", 3)；
 
        styleMenu.onChange = [this] { styleMenuChanged(); }；
        styleMenu.setSelectedId (stylePlain)；

And in our styleMenuChanged() function:

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...といった具合です。
Using a hash of the item text. You could use 文字列::ハッシュコード() to get a おそらく unique hashcode for the string. But, be aware that this may return zero (using this function on an empty string returns a hashcode of zero).

Sections and dividers

The list of items in a combo-box can contain dividers and section headings. This is especially useful in very long lists. Let's add a combo-box to our app that changes the text colour. First, let's add another 列挙 for our colours:

列挙テキスト色
    {
        黒 = 1、
        白
        赤
        darkred、
        indianred、
        緑、
        ダークグリーン
        ライトグリーン
        青、
        ダークブルー
        lightblue、
        色数
    };

And a new member to our メインコンテンツコンポーネント class:

juce::Label textLabel { {}, "すばしっこい茶色の狐は、怠け者の犬を飛び越える。"};
    juce::Font textFont { 12.0f }；
    juce::ComboBox styleMenu；
    juce::ComboBox colorsMenu；

In the メインコンテンツコンポーネント constructor we need to add the code to set up the new combo-box. Here we introduce two new functions, コンボボックス::addSeparator() and コンボボックス::addSectionHeading():

addAndMakeVisible (colorsMenu)；
 
        colorsMenu.addItem ("Black", black)；
        colorsMenu.addItem（"白"、白）；
        colorsMenu.addSeparator()；
 
        colorsMenu.addSectionHeading（「赤」）；
        colorsMenu.addItem（「赤」、赤）；
        colorsMenu.addItem（「ダークレッド」、darkred）；
        colorsMenu.addItem ("Indian Red", indianred)；
        colorsMenu.addSeparator()；
 
        colorsMenu.addSectionHeading（「グリーン」）；
        colorsMenu.addItem（「グリーン」、green）；
        colorsMenu.addItem（「ダークグリーン」、ダークグリーン）；
        colorsMenu.addItem（「ライトグリーン」、ライトグリーン）；
        colorsMenu.addSeparator()；
 
        colorsMenu.addSectionHeading（「ブルー」）；
        colorsMenu.addItem（「ブルー」、blue）；
        colorsMenu.addItem ("Dark Blue", darkblue)；
        colorsMenu.addItem（「ライトブルー」、ライトブルー）；
 
        coloursMenu.onChange = [this] { coloursMenuChanged(); }；
        colorsMenu.setSelectedId（黒）；
 
        coloursMenu.setEditableText (true)；
 
        setSize (400, 200)；
    }

セクション見出しなしでセパレーターを使うことも、セパレーターなしでセクション見出しを使うこともできるが、これらは一緒に使うとうまくいく。

注記

セパレーターとセクション見出しは選択できず、関連するID番号もありません。

We need to implement a new function to handle the changes to the カラーメニュー object:

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:105
Colours::greenenconst Colour greenDefinition juce_Colours.h:93
Colours::darkblueconst Colour darkblueDefinition juce_Colours.h:63
Colours::darkredconst 色 darkredDefinition juce_Colours.h:73
Colours::whiteconst 色 whiteDefinition juce_Colours.h:179
Colours::blueconst Colour blueDefinition juce_Colours.h:51
Colours::blackconst Colour blackDefinition juce_Colours.h:49
Colours::indianredconst Colour indianredDefinition juce_Colours.h:97
Colours::darkgreenconst Colour darkgreenDefinition juce_Colours.h:67
Colours::redconst カラー redDefinition juce_Colours.h:156
Colours::lightgreenconst Colour lightgreenDefinition juce_Colours.h:109

Don't forget to set the bounds of the カラーメニュー object in the リサイズ function:

void resized() override
    {
        textLabel .setBounds (10, 10, getWidth() - 20, 20)；
        styleMenu .setBounds (10, 40, getWidth() - 20, 20)；
        colorsMenu .setBounds (10, 70, getWidth() - 20, 20)；
    }

プロジェクトを実行すると、ウィンドウは次のようになるはずだ：

ラベルテキストの色を変更できるようになりました。

Text entry

The default behaviour of a combo-box is to allow the user to select only the items listed. But, you can make the combo-box editable to allow the user to enter other text. In the メインコンテンツコンポーネント constructor let's make our カラーメニュー object editable:

概要

This tutorial has introduced the コンボボックス class. After reading this tutorial you should be able to:

コンボボックスを作成し、そこに項目を追加する。
コンボボックスの項目に関連するID番号を管理します。
コンボボックスで選択されている項目を変更するユーザーに対応する。
コンボボックスにカスタムテキストを入力できるようにする。
コンボボックスの項目を無効にしたり有効にしたりする。

はじめる​

The demo project

The ComboBox class

Adding items​

Responding to changes​

Using item ID numbers​

Sections and dividers​

Text entry​

概要

関連項目