본 포스팅은 이전 포스팅에 이어서 작성하는 글입니다.
Component
이전 포스팅에서 JuceApplication과 DocumentWindow에 대해서 이야기 해보았다. 프로세스와 프로세스에 종속 된 윈도우라는 관계상 별도의 클래스로 나눈 것을 어렵지 않게 볼 수 있다. 하지만 윈도우 내의 UI 및 내용들을 별도의 클래스로 쪼갠 것은 보기 쉽지않은 구조다.
JUCE에서는 Component 클래스를 통해서 윈도우 내의 내용들을 정의를 해야 하는 구조다. 기본적으로 JUCE 상의 모든 UI는 Component 클래스를 상속받는다. 어찌보면 프로그래머가 원하는 UI를 직접 정의하여 윈도우에 배치하는 구조라고도 볼 수 있다.
Example Code
class SweetComponent : public juce::Component {
public:
SweetComponent() {
addAndMakeVisible(&sweetButton);
sweetButton.setButtonText("Sweet");
sweetButton.onClick = [this]() { onClickSweetButton(); };
setSize(600, 400);
}
~SweetComponent() override { }
void paint(juce::Graphic& g) override {
g.fillAll(getLookAndFeel().findColour(juce::ResizableWindow::backgroundColourId));
g.setFont (juce::Font (16.0f));
g.setColour (juce::Colours::white);
g.drawText ("Hello World!", getLocalBounds(), juce::Justification::centred, true);
}
void resized() override {
sweetButton.setBounds(10, 10, getWidth() - 20, 20);
}
private:
juce::TextButton sweetButton;
auto onClickSweetButton() -> void {
juce::AlertWindow::showAsync(
juce::MessageBoxOptions()
.withIconType(juce::MessageBoxIconType::InfoIcon)
.withTitle("Sweet Message")
.withMessage("You pressed sweet button")
.withButton("Ok"),
nullptr
);
}
JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR(SweetComponent)
};먼저 생성자부터 살펴보도록하자. 생성 시점에서의 코드는 상당히 직관적인데, 멤버변수인 버튼을 추가하고 기본적인 설정을 해주는 것이다. 그리고는 크기를 지정해준다. 그 다음으로는 컴포넌트를 새로 그릴 때와 크기를 재조정 할 때의 이벤트 메소드들이다.
paint 메소드에서 Graphic을 인자로 넘겨주고 있는 것을 볼 수 있다. Graphic 는 그래픽의 컨텍스트를 담고 있는 객체로, Component 가 새로이 그릴 때 전달되는 인자값이다. 여기서 fillAll , drawText 가 컴포넌트에서 새로 그리는 부분이다.
fillAll 은 컴포넌트 전체를 지정한 색으로 채우는 것이다. 그리고 drawText 는 텍스트를 그리는 것인데, 앞서서 폰트와 색상값을 지정해주는 것을 볼 수 있다. 그리고 resized 메소드에서는 윈도우의 크기에 따라 버튼의 크기가 반응하여 조정이 되게끔 처리한다.
그리고 버튼의 이벤트 메소드를 지정해주는 부분을 살펴보도록하자. 단순하게 메시지 창을 띄우는 코드다. 2가지 옵션이 있는데, 네이티브 메시지 박스를 호출하느냐 아니면 JUCE의 메시지 박스를 호출하느냐를 선택 할 수 있다. 이 부분은 그냥 취향의 영역으로 좋을 대로 선택하면 된다. 그리고 메시지 박스가 사라질 때에 무엇을 할 지에 대해 callback 함수를 지정 해 줄 수 있다.
