[JUCE]튜토리얼1 main window

//발번역 https://juce.com/doc/tutorial_main_window

//모카  환경: 우분투 16.04

tutorial_main_window.zip

압축풀고 build->LinuxMakefile디렉토리에서 make로 빌드하고 build디렉토리로 이동하고 실행파일을 실행시켜보면 댕그러니 회색창이 보인다. 

근데 아마 헤더파일 오류가 뜨는 사람도 있을꺼다.

Projucer를 실행하고 file-> open에서 압축푼 디렉토리에서 .jucer확장파일을 열어주자.

그리고 모든 Module의  use global path를 풀어주자. 경로 오류로  make가 안되는거다. 

Path for "Linux Makefile"이 있는데 자신의 JUCE의 module이 있는곳으로 설정해주면 된다.

컨트롤+s눌러주시고 다시 make하면 잘 작동한다. (예예~~)

Main.cpp는 이 앱이 작동할 수 있도록 최소한의 코드만 가지고 있다. 

이제 Main.cpp의 아래의 코드를 보자

이것은 MainWindow클래스의 인스턴트를 생성한다. 어플리케이션(응용 프로그램) 창이 보여지도록 해준다.

Note: 당신이 어떤 코드든 어플리케이션의 initialise()함수에 집어넣으면 앱이 실행되자마자 제일 먼저 실행된다.

main window 구현

MainWindow 클래스

MainWindow클래스의 구현부분을 보자. 이것은 타이틀 바,최소화,최대화,버튼 닫기와 window 리사이즈 가능한 JUCE DocumentWindow 클래스로부터 파생되었다. 

Note: 일반적으로 이것은 어떻게 당신이 어플리케이션의 다양한 컴포넌트를 구현하는 방법이다.  당신은 새 클래스를 만들 수 있고 그것은 적절한 JUCE의 기본 클래스로부터 상속받은것이다. 새 클래스에서 당신은 당신만의 커스텀 기능을 추가할 수 있다.

MainWindow 생성자는 아래와 같이 정의되어있다.

첫번째로 기본 클래스인 DocumentWindow는 초기화되며 세 개의 매개 변수가 필요하다.

1. window에 표시되는 타이틀 바.

2. window 배경 색

3. 타이틀 바에 코너의 보여지는 버튼들

Main.cpp의 코드를 보면 당신은 주의해야 하는데 그것은 첫번재 파라미터가 실제로 어플리케이션 initialise()함수에 의해 MainWindow 생성자에 전달된다. 단순히 앱의 이름이다.

연습하기

앱에 표시되는 타이틀 바 이름을 바꿔보세요.

모카는 exhange라고 바꿔보겠다. (changed라 바꿔야하는데 실수..)

initialise함수의 new MainWindow부분을 보면 첫번재 인자로 getApplicationName()이라는 api를 호출하는데 이를 지우고 "exchange!"로 인자전달을 하면 된다.

make로 다시 빌드하고 실행해보면 바뀌어있다.

배경색 설정하기

 MainWindow의 생성자의 두번째 인자인 background color를 바꾸면 배경색이 바뀐다. Colours::lightgrey에서 Colours::red나 Colours::blue등등..

(각자 해보시길!)

버튼에 비트 마스크 인수 사용하기

세번째 인자로 전달된 DocumentWindow::allButtons는 상수이며 디폴트 버튼이다. 버튼종류에는 maximise,minimise,close가 있다.(각각 최대화,최소화,닫기) 이것들은 타이틀바에 보여지고 enum으로 정의되어있다.

DocumentWindow::TitleBarButtons:

-DocumentWindow::minimiseButton

-DocumentWindow::maximiseButton

-DocumentWindow::closeButton

C++ 연산자인 | (OR연산자)를 사용하여 여러가지 버튼을 사용할 수 있다.

MainWindow (String name) : DocumentWindow (name,

Colours::lightgrey,

DocumentWindow::closeButton | DocumentWindow::minimiseButton)

{

centreWithSize (300, 200);

setVisible (true);

}

window 크기 설정

MainWindow 객체가 생성될때 생성자의 몸체가 실행된다. centreWithSize()함수를 통해 window의 위치와 크기를 설정한다. setVisible()함수를 호출하면 항상 window가 보여지는게 필요한데 그 역할을 window를 만든 후에 해준다.

centreWithSize()함수를 통해 픽셀단위로 표시할 수 있다. 이 함수는 지정된 크기로 설정 한 다음 부모 컴포넌트와 관련하여 컴포넌트를 가운데에 배치한다.

DocumentWindow 클래스는 상위 컴포넌트가 없는 TopLevelWindow 클래스에서 파생되므로 전체 화면과 관련하여 가운데에 배치된다.

Component::setBounds()함수는 생성 위치도 제공한다.

setBounds (50, 50, 800, 600);

첫번째와 두번째 인자는 화면에 표시할 위치, 세번째와 네번째는 크기다.  centreWithSize()함수를 주석처리하고 setBounds함수를 대신 써보자.

기타 맞춤 설정 옵션

window 리사이즈 가능하게 만들기

JUCE의 DocumentWindow 클래스는 ResizableWindow 클래스를 상속한다. 이 기본 클래스는 기능을 추가하여 유저로 하여금 window가 리사이즈 가능하게 만든다. ResizableWindow::setResizeable()함수를 사용하자.

다음을 MainWindow의 생성자에 넣자.

setResizable (true, true);

//첫번째 인자는 window의 리사이즈 가능여부

//두번째 인자는 window의 오른쪽 아래 모서리로 크기조절.false면 가장자리에서 마우스로 드레그하여 크기 조절 가능

오른쪽 하단에 빗금이 보인다.

OS가 가진 기본 타이틀 바 사용하기

DocumentWindow::setUsingNativeTitleBar()함수를 사용하면 OS가 제공하는 기본 타이틀 바를 사용할 수 있다.

setUsingNativeTitleBar (true); //MainWindow의 생성자에 추가해주자.

각각 리눅스,윈도우즈,맥의 타이틀 바가 적용된다.

대부분의 앱에서 OS가 제공하는 타이틀바가 사용자가 더 친숙하게 느끼기 때문에 기본 앱 모양은 기본 앱 창에 더 적합하다.

(번역이 좀 이상한데 OS에서 제공하는 타이틀 바가 유저들이 친숙하게 느낀다.. 라는 의미. 물론 모카는 그렇게 생각안한다.)

튜토리얼1에서는 기본적인 MainWindow창에 대한 설명이 대부분이였다. 중요한것! initialise()함수가 응용 프로그램이 실행되자마자 제일 먼저 실행되는 함수라는점. 꼭 명심하자.