チュートリアルラジオボタンとチェックボックス

ラジオボタンとチェックボックスを使用して、アプリケーションに選択可能なオプションを追加します。

レベル：初級

プラットフォーム：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 illustrates the use of radio buttons and checkboxes in JUCE. These are normally implemented using the トグルボタン class, although any JUCE ボタン component can be used as an individual toggle button or as part of a "radio group". The demo application presents some headings (using the ラベル class) and a series of トグルボタン components:

The demo application

Radio buttons and checkboxes

This tutorial examines the use of the ボタン class for creating on/off style options. Normally you will use the トグルボタン class for this, but as mentioned above, any button can be set up to be a toggle-type button. The standard トグルボタン component comprises a piece of text and a "bubble" to the left of the text that either contains a tick, or not. (And this appearance can be customised, if you wish, using the ルックアンドフィール class.) These two states can be seen in the screenshot in the previous section.

In the メインコンテンツコンポーネント constructor, the "male" and "female" buttons are set up as follows:

addAndMakeVisible (maleButton)；
        addAndMakeVisible (femaleButton)；
        maleButton .onClick = [this] { updateToggleState (&maleButton, "Male"); }；
        femaleButton.onClick = [this] { updateToggleState (&femaleButton, "Female"); }；

Here you can see that トグルボタン objects are configured in the same way as テキストボタン objects (as seen in チュートリアルリスナーとブロードキャスター). To make these two toggle buttons mutually exclusive, we need to add them to the same "radio group". This will allow only one of these buttons to be toggled on at any one time (and toggling the other button on will, in turn, switch the other one off). A 無線グループID is a non-zero integer that is used to identify the group of buttons than must be mutually exclusive. In addition to this, all buttons with the same 無線グループID must be child components of the same parent component for this to work. (You would need to implement this mutually exclusive behaviour yourself if the buttons are within different parent components or different windows.)

We use an enumerated value (性別ボタン) as our 無線グループID in this example:

enum RadioButtonIds
    {
        性別ボタン = 1001
    };

Then we use the ボタン::setRadioGroupId() function to set the 無線グループID.

maleButton .setRadioGroupId (GenderButtons)；
        femaleButton.setRadioGroupId (GenderButtons)；

注記

Notice that the setRadioGroupId() function is a member of the ボタン class, not just the トグルボタン class. Any button can be part of a radio group, but it probably only makes sense if that button is set up to expect to be toggled on and off (rather than simply intercept click events).

The other three トグルボタン objects are configured without adding them to a radio group:

addAndMakeVisible (sportButton)；
        addAndMakeVisible (artButton)；
        addAndMakeVisible (filmButton)；
        sportButton.onClick = [this] { updateToggleState (&sportButton, "Sport"); }；
        artButton .onClick = [this] { updateToggleState (&artButton, "Art"); }；
        filmButton .onClick = [this] { updateToggleState (&filmButton, "Film"); }；

注記

ボタン objects can be removed from a radio group by calling the ボタン::setRadioGroupId() function with a zero argument.

Responding to toggle state changes

Responding to buttons that can be toggled on or off is similar to responding to regular button clicks. We need to specify the function we want to call when the button is toggled by assigning a lambda function to the ボタン::onClick helper object (as you can see in the code snippets above).

The difference is that we also need to check the toggle state of the button in our updateToggleState() function. To do this we can call the ボタン::getToggleState() function. Again this is a member of the ボタン class, so this is valid for any button (but again, probably only makes sense if you expect the button to be toggled on and off, as it will return 擬似 in other cases).

void updateToggleState (juce::Button* button, juce::String name)
    {
        auto state = button->getToggleState()；

この例では、トグルの変更をロガーにポストしています：

juce::String stateString = state ?"ON" : "OFF"；
 
        juce::Logger::outputDebugString (name + " Button changed to " + stateString)；
    }

Notice in particular, that when you toggle on either the "Male" or "Female" button that the other button turns "off" そして this is reported by the updateToggleState() function.

Add some additional トグルボタン objects, of course you can easily add more hobbies. But you could also add more options under the gender category, for example "Prefer not to say" or "Other".

Using other buttons as toggles

As hinted at above, いずれも button can be used as a toggle button. To illustrate, let's convert all of the トグルボタン objects in the demo project into テキストボタン objects. The obvious thing that we need to do here is change the type of the member variables to the テキストボタン class:

juce::Label genderLabel { {}, "I identify my gender as..." }；
    juce::ToggleButton maleButton { "男性" }、
                       femaleButton { "Female" }；
 
    juce::Label hobbiesLabel { {}, "私の趣味は..."};
    juce::ToggleButton sportButton { "Sport" }、
                       artButton { "Art" }、
                       filmButton { "Film"}；
 
    //==============================================================================
    JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR (MainContentComponent)
};

But in order to make the buttons toggle-able using mouse clicks, we need to call the Button::setClickingTogglesState() function. To do this, add the following code anywhere within the メインコンテンツコンポーネント constructor:

maleButton .setClickingTogglesState (true)；
        femaleButton .setClickingTogglesState (true)；
        sportButton .setClickingTogglesState (true)；
        artButton .setClickingTogglesState (true)；
        filmButton .setClickingTogglesState (true)；

このコードを実行すると、元のアプリケーションと同じように使えるが、外観が異なるものが出来上がる：

Using text buttons as toggle buttons

注記

See チュートリアルJUCEの色 for guidance on customising the colours of the text button in its on and off states.

Using text to display button toggle state

There may be cases where you want to change the text displayed depending on the button's toggle state, too. To do this, you can simply call the Button::setButtonText() function within your updateToggleState() function. To try this, revise the updateToggleState() function as follows:

void updateToggleState (juce::Button* button, juce::String name)
    {
        auto state = button->getToggleState()；
        juce::String stateString = state ?"ON" : "OFF"；
        juce::String selectedString = state ?" (selected)" : ""；
 
        juce::Logger::outputDebugString (name + " Button changed to " + stateString)；
        button->setButtonText (name + selectedString)；
    }

この場合、ボタンがトグル・オンの状態であれば、通常のボタン・テキストに"(selected) "というテキストを追加するだけである。

注記

This technique will work with both テキストボタン components, as shown here, and トグルボタン components.

これで我々のアプリケーションは以下のスクリーンショットのようになる：

Changing button text based on toggle state

概要

このチュートリアルでは、チェックボックスとラジオボタン形式のコントロールの使い方を紹介しました。特に、自分のアプリケーションで以下のようなことができるようになるはずです：

• Use トグルボタン objects and respond to changes in state.
• Change a トグルボタン object's text, depending on its state.
• Group トグルボタン objects to form "radio groups" when only one button within a group may be on at any one time.
• Use other ボタン components as toggles.

関連項目

• チュートリアルリスナーとブロードキャスター
• チュートリアルJUCEの色
• チュートリアルLabelクラス
• チュートリアルComboBoxクラス
• チュートリアルスライダークラス