チュートリアル：アプリケーションウィンドウ
このチュートリアルでは、アプリケーション・ウィンドウを持つ最小限のアプリケーションを作成する方法と、そのウィンドウのサイズと外観をカスタマイズする方法を示します。これは、あらゆるJUCE GUIアプリケーションにとって重要です。
レベル：初級
プラットフォーム：Windows, macOS, Linux
クラス： JUCEAアプリケーション, ドキュメントウィンドウ, リサイズ可能ウィンドウ
はじめる
Launch the Projucer and create a new GUI application project with the name メインウィンドウチュートリアル. In the 自動生成するファイル： field make sure you select Main.cppファイルのみを作成する.
If you need help with this step, see チュートリアルProjucerパート1：Projucerを始める.
Modify the MainWindowTutorialApplication class to include the following メインウィンドウ class as follows:
//==============================================================================
class MainWindowTutorialApplication : public juce::JUCEApplication
{
public:
//...
//==============================================================================
class MainWindow : public juce::DocumentWindow
{
public:
MainWindow (juce::String name) : DocumentWindow (name,
juce::Colours::lightgrey,
DocumentWindow::allButtons)
{
centreWithSize (300, 200);
setVisible (true);
}
void closeButtonPressed() override
{
juce::JUCEApplication::getInstance()->systemRequestedQuit();
}
private:
JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR (MainWindow)
};
private:
std::unique_ptrメインウィンドウ
};
DocumentWindowタイトルバーと最大化、最小化、閉じるボタンを持つサイズ変更可能なウィンドウ定義 juce_DocumentWindow.h:58
nameint UnityEventModifiers const char * nameDefinition juce_UnityPluginInterface.h:195
JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR#define JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR(className)これは、JUCE_DECLARE_NON_COPYABLE と JUCE_LEAK_DETECTOR の両方のマクロを ...定義 juce_PlatformDefs.h:245 に記述する省略記法です。
ColoursContains a set of predefined named colours (mostly standard HTML colours)定義 juce_Colours.h:37
定義 juce_AudioWorkgroup_mac.h:24
Add the following line to the イニシャライズ() function:
void initialise (const juce::String& commandLine) override
{
mainWindow.reset (new MainWindow (getApplicationName()))；
}
Finally, add the following line to the シャットダウン function:
void shutdown() override
{
mainWindow = nullptr；
}
The demo project
The demo project is a very minimal JUCE app that has only one source file: メイン.cpp. The only thing it does is to create and display an empty application window. This window should open when you run the app:
このウィンドウをドラッグして移動したり、最大化・最小化したり、閉じてJUCEアプリを終了することができます。
The C++ code in this app is just about the minimum amount of code required for a working app. The application class itself (derived from the JUCEAアプリケーション class) will be covered in a later tutorial. For now, all the app is really doing is the single line of code in the app's MainWindowTutorialApplication::initialise() function:
void initialise (const juce::String& commandLine) override
{
mainWindow.reset (new MainWindow (getApplicationName()))；
}
This creates a new instance of the メインウィンドウ class, which leads to the application window being shown.
Any code that you put into the application's イニシャライズ() function will be executed as soon as the app starts.
The main window implementation
The MainWindow class
Now let's take a look at the implementation of this メインウィンドウ class. It derives from the JUCE ドキュメントウィンドウ class, a resizable window with a title bar, and maximise, minimise, and close buttons. These are all of the elements you would expect from an application window.
一般的には、このようにしてアプリケーションのさまざまなコンポーネントを実装します。必要な機能を提供する適切なJUCE基本クラスを継承した新しいクラスを作成します。この新しいクラスでは、その上に独自のカスタム機能を追加することができます。
The メインウィンドウ constructor is defined as follows:
MainWindow (juce::String name) : DocumentWindow (name、
juce::Colours::lightgrey、
DocumentWindow::allButtons)
{
centreWithSize (300, 200)；
setVisible (true)；
}
First, the base class (ドキュメントウィンドウ) is initialised, which requires three parameters:
- タイトルバーに表示されるウィンドウの名前。
- ウィンドウの背景色。
- タイトルバーの隅にどのボタンを表示するか。
Looking at the code in メイン.cpp, you may notice that the first parameter is actually passed to the メインウィンドウ constructor by the app's イニシャライズ() function. This is simply the name of the app (and part of the information auto-generated by プロジューサー when a project is created, along with the app's version number and and a few other things).
アプリのタイトルバーに表示される文字列を変更してみてください。
Setting the background colour
The next two arguments, the background colour and the buttons, are set directly in the メインウィンドウ constructor. Most common colours have predefined constants in JUCE and can be directly used like in this example. So you could replace the カラー::ライトグレー constant with, for example, constants 色::赤 or カラー::ブルー to quickly change the background colour of the whole app window. Of course, it is also possible to define your own custom colours. See チュートリアルJUCEの色 for a more detailed introduction to colours in JUCE.
Using bitmask arguments for the buttons
The third argument passed to the ドキュメントウィンドウ base class constructor is the DocumentWindow::allButtons constant. It indicates that all three default buttons (maximise, minimise, and close) should be shown in the title bar. You can change this property by using the following other constants, defined in the 列挙 DocumentWindow::TitleBarButtons：
Using the C++ operator | (the bitwise OR operator), you can define any other combination of the three possible buttons. For example, to show only the close and minimise buttons, you could type:
MainWindow (juce::String name) : DocumentWindow (name、
juce::Colours::lightgrey、
DocumentWindow::closeButton | DocumentWindow::minimiseButton)
{
centerWithSize (300, 200)；
setVisible (true)；
}
This approach to pass a combination of flags to a function is called a ビットマスク and is found in many other places in JUCE.
Setting the window size
When the メインウィンドウ object is created, the constructor's body is executed. The first statement calls the Component::centreWithSize() function to set the window's position and size. The second statement, a call to the Component::setVisible() function, is always required for the window to be shown after it has been created.
Using the Component::centreWithSize() function, you can specify the initial width and height of the window in pixels. The function will set the size to the one specified, and then centre the component with respect to its parent component. The ドキュメントウィンドウ class derives from the トップレベルウィンドウ class, which does not have a parent component, so it will be centered with respect to the whole screen.
You may wish to specify another position for the window. The function Component::setBounds() offers more options in this case. To try this out, change the line containing the call to the centerWithSize() function to this:
setBounds (50, 50, 800, 600)；
これにより、サイズが800×600ピクセルに設定され、ウィンドウの位置が画面左上に近づきます（画面端から50ピクセル離れます）。
Component::setBoundsRelative()関数を使用して、絶対ピクセルではなく、画面サイズからの相対的な位置とサイズを設定します。
You can learn more about sizes, bounds and positions in チュートリアル親子コンポーネント.
Other customisation options
Making the window resizable
The JUCE ドキュメントウィンドウ class itself inherits from the リサイズ可能ウィンドウ class. This base class adds the functionality to make the window resizable by the user. This can be enabled with the function ResizableWindow::setResizable().
Add the following line to the メインウィンドウ constructor:
setResizable (true, true)；
Take a look at the documentation for the ResizableWindow::setResizable() function to look up what its two boolean arguments mean. The first one determines whether the window should be resizable at all. The second one lets you add a handle to the bottom right corner to resize the window. If this argument is 擬似, the window will instead be resizable by dragging with the mouse at any of the window's edges.
Using a native title bar
これまでのところ、アプリのメイン・ウィンドウにはJUCEのルック＆フィールを使っている。その主な利点は、ど のデスクトップ・オペレーティング・システム（Windows、Mac OS X、Linux）でも同じように見え、同じように動作することです。
However, the JUCE ドキュメントウィンドウ class allows you to let the window use the typical native window apperance for the operating system you run it on. This is achieved using the function DocumentWindow::setUsingNativeTitleBar(). Add the following line to the メインウィンドウ constructor:
setUsingNativeTitleBar (true)；
これでアプリケーションのウィンドウはこのようになる：
Please note that this will adjust not only the appearance, but also the behaviour of the window to match that of a native operating system window. For example, now the useBottomRightCornerResizerを使用します。 argument to the ResizableWindow::setResizable() function will not change the resizing behaviour of the window anymore. Instead, for resizing with the mouse, the window will adopt whatever behaviour is the native look-and-feel of the operating system you are running.
ほとんどのアプリの場合、メインアプリのウィンドウはネイティブのルック＆フィールの方が適しています。
More customisation options
Have a look at the documentation for the ドキュメントウィンドウ and リサイズ可能ウィンドウ classes. Experiment with other functions not covered here that let you customise other aspects of the app's window.
概要
こ のチュートリアルでは、基本的な JUCE アプリのメイン・ウィンドウの動作を設定する方法について説明しました。例えば、サイズの調整、リサイズ可能なウィンドウ、タイトルと外観の設定、タイトルバーに表示するボタンの定義などです。また、ネイティブタイトルバーに切り替えて、実行中のオペレーティングシステム上でよりネイティブなウィンドウのように感じられるようにする方法についても説明しました。
Notes
- 後に、複数の異なるウィンドウで構成される、より複雑なアプリを作りたくなるかもしれない。同じテクニックを使って、それぞれのウィンドウの動作をコントロールすることができる。