[JUCE]튜토리얼9 The Lable class

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

tutorial_label.zip

데모 프로젝트

데모 프로젝트는 몇개의 레이블을 포함하고 있다. 이 중에서 일부는 텍스트를 표시하기위한 것이며, 다른것은 텍스트를 입력받기위한 것이다. 데모 프로젝트를 실행하면 아래와 같다.

하얀색 백그라운드를 클릭하면 수정이 가능하게된다. 레이블은 미묘한 경계와 탈자 기호가 나타난다. 

텍스트를 입력하면 레이블에 보여진다.

레이블에서 돌아서거나 클릭하면 편집 가능 상태가된다. 이것은 리스너에게 브로드 캐스팅되는 변경을 커밋한다. 이 경우 텍스트를 대문자로 변환하여 다른 레이블에 표시한다.

텍스트를 표시하고 입력할 때 Label 클래스를 여러 가지 용도로 사용한다. 여기에는 약간 다른 방식으로 사용되는 다섯개의 레이블이 있다.

- 제목으로 있는 상단의 초록색 레이블

- 두개의 고정된 오렌지색 레이블

- 두개의 직사각형 박스의 동적으로 텍스트가 변경되어 디스플레이되는 레이블

두 번째 직사각형 상자는 텍스트 입력 상자와 구별하기 위해 아주 약간 회색으로 표시된다.

텍스트 표시하기

이 튜토리얼에서는 Label 클래스의 대부분의 중요 기능을 설명한다. 가장 기본적인 레이블의 특색은 어떤 텍스트를 디스플레이한다는 점이다. 텍스트를 컴포넌트의 paint() 함수안에서 그릴 수 있지만 일반적으로 Label 객체(또는 경우에따라 TextEditor 객체)를 사용하여 텍스트 레이아웃을 관리하는 것이 훨씬 편하다.

예상대로 텍스트는 레이블 객체에서 아무 폰트,사이즈로 Label객체에서 디스플레이할 수 있다. 텍스트는 왼쪽,오른쪽,가운데,위,아래 및 기타 다양한 옵션을 사용하여컴포넌트 내에서 정렬 될 수도 있다.

Note: Label 클래스에는 동일한 글꼴,크기 및 양쪽 맞춤의 텍스트가 하나만 포함될 수 있다. 여러개를 다른 스타일로 표시하기위해서는 TextEditor 클래스를 참조해라. TextEditor클래스는 또한 경계선과 여러 스크롤바를 많은 양의 텍스트에서 디스플레이할 수 있다.

만약 컴포넌트의 범위가 너무 작으면 모든 텍스트가 디스플레이하는걸 요구되는데 그러면 Label 클래스가 몇가지 텍스트를 딱맞게 만들도록 시도한다.

첫번째로 글꼴의 글리프(문자 코드에서 뜻과 소리를 지니지 않은 도형 기호(구두점,괄호 공백 등) 추상화를 포함 -위키백과)를 좀더 좁게 만든다.  

만약 글리프가 너무 좁으면 텍스트를 읽을 수 없으므로 특정 지점을 넘어서면 문자를 포기한다. 이 경우에는 텍스트가 짤려 생략(...)으로 표시된다.

텍스트 입력 레이블에서 "The quick brown fox jumps over the lazy dog"를 넣어 확인할 수 있다.

원본 텍스트는 거의 맞지만 가로축에서는 약간 부셔졌다. 대문자버전은 대게 소문자 글리프보다 넓기때문에 더 넓다. Label 클래스는 대문자 버전이 너무 커서 가로축의 텍스트를 짓눌러 읽기 쉽도록 결정하였다. 이 경우 LAZY가 짤려 L로 바뀌고 생략(...)이 추가되었다.

Note: 각 Label 객체에 대해 Label::setMinimumHorizontalScale()함수를 통해 텍스트의 크기를 변경할 수 있다. 1.0f값을 사용하면 배율이 비활성화된다. Font::getHeight() 함수를 사용하여 특정 글꼴의 한 줄을 필요한 높이를 측정 할 수 있다. 전체 문자열이 한 줄에 들어가야하는 너비를 측정하려면  Font::getStringWidth() 함수를 사용할 수 있다.

기본 레이블 구성

MainContentCompont 생성자에서 각각의 레이블이 어플리케이션안에 구성되있다. 첫번째로 제목을 16point bold 폰트로 설정하고 포함해야하는 텍스트, 텍스트의 색으로 설정하고 텍스트를 가운데에 맞춘다.

부모 컴포넌트에 레이블을 추가하자.

addAndMakeVisible (titleLabel);

레이블 폰트 설정

titleLabel.setFont (Font (16.0f, Font::bold));

레이블에 표시될 텍스트

titleLabel.setText ("Click in the white box to enter some text...", dontSendNotification);

레이블 텍스트 색상 설정

titleLabel.setColour (Label::textColourId, Colours::lightgreen);

레이블 텍스트 디스플레이

titleLabel.setJustificationType (Justification::centred);

다른 컴포넌트에 레이블 첨부

이름에서 추측할 수 있듯이, 레이블 컴포넌트는 자주 다른 컴포넌트의 레이블로 사용된다. 이 경우 Label 객체는 다른 컴포넌트에 첨부될 수 있다. 한번 라이블이 첨부되면 자신의 컴포넌트가 필요한 곳에 배치해야만한다. 첨부된 레이블은 자신의 부모 구성 컴포넌트의 소유자를 따른다. 여기서는 inputLable 객체(텍스트를 입력을 표시하는 Text input:) 객체가 inputText 객체에 첨부된다. 두번째 인자는 Label::attachToComponent() 함수로 레이블이 소유자의 왼쪽 또는 위에 첨부되어야하는지 여부를 나타낸다. true 인수는 왼쪽에 첨부됨을 의미한다.

addAndMakeVisible (inputLabel);

inputLabel.setText ("Text input:", dontSendNotification);

inputLabel.attachToComponent (&inputText, true);

inputLabel.setColour (Label::textColourId, Colours::orange);

inputLabel.setJustificationType (Justification::right);

대문자 텍스트를 표시하는 레이블도 비슷하게 설정된다.

addAndMakeVisible (uppercaseLabel);

uppercaseLabel.setText ("Uppercase:", dontSendNotification);

uppercaseLabel.attachToComponent (&uppercaseText, true);

uppercaseLabel.setColour (Label::textColourId, Colours::orange);

uppercaseLabel.setJustificationType (Justification::right);

addAndMakeVisible (uppercaseText);

uppercaseText.setColour (Label::backgroundColourId, Colours::lightgrey);

resized() 함수에서 다섯 개의 레이블 중 세 개의 레이블만 배치해야한다.

void resized() override

{

titleLabel.setBounds (10, 10, getWidth() - 20, 30);

inputText.setBounds (100, 50, getWidth() - 110, 20);

uppercaseText.setBounds (100, 80, getWidth() - 110, 20);

}

레이블 수정가능하게 만들기

마지막으로 MainContentComponent 생성자에서 설정한 레이블을 수정가능한 텍스트필드로 만들어보자. MainContentComponent를 리스너로 추가한다.

addAndMakeVisible (inputText);

inputText.setEditable (true);

inputText.setColour (Label::backgroundColourId, Colours::white);

inputText.addListener (this);

Note: 기본값 행동은 레이블이 수정가능하게 Label::setEditable()함수로 설정할때 한번 클릭으로 편집하게 보여준다. 레이블을 두번클릭으로 수정가능하게 할 수 있다. 만약 사용자가 텍스트를 입력한 후 레이블을 클릭하면 "Return"키를 누르지 않아도 확인된다. 또한 원하는 경우 사용자가 데이터 입력을 확인하기 위해 "Return"키를 눌러야하는지 확인하기위해 이를 변경할 수도 있다. 자세한 정보는 이 함수의 API를 참조해라.

연습하기: 인터페이스에 버튼을 추가하고 버튼을 사용하여 텍스트 입력 레이블을 지워라 (리스너,브로드케스트 튜토리얼 참조)

변경 사항에 대한 응답

labelTextChanged() 함수는 Label::Listener 클래스를 위한 콜백함수다. 여기 라벨이 바뀌는걸 확인하고 입력된 텍스트를 가져오고 String 클래스를 사용하여 대문자로 바꿔보고 uppercaseText 레이블로 설정하자.

void labelTextChanged (Label* label) override

{

if (label == &inputText)

uppercaseText.setText (inputText.getText().toUpperCase(), dontSendNotification);

}

Note: sendNotification 대신에 dontSendNotification을 Label::setText()를 호출할때 사용할 수 있다. 이것은 레이블의 리스너가 변경내용(현재 내용과 다른 텍스트인 경우)를 사용자가 인터페이스에서 변경하는 것외에도 알리게된다.

연습하기:다른 레이블을 추가하여 소문자로 변경시키게 디스플레이하자

다른 커스텀

레이블은 여러 줄 문자를 표시할 수 있다. 편집기에서 편집 가능한 레이블을 커스텀할수도 있다.

여러라인 텍스트 디스플레이

TextEditor 클래스는 많은 양의 텍스트를 유연하게할 수 있다. Label 클래스는 여러라인에 텍스트를 디스플레이할 수 있다. 이렇게 하기위해 컴포넌트의 높이가 둘 이상의 텍스트 행을 표시 할 만큼 충분히 큰지 확인해야한다.

이를 설명하기위해 MainContentComponent클래스에 다음 멤버를 추가한다.

Label infoLabel;

MainContentComponent 생성자에 다음 코드를 추가하자

addAndMakeVisible (infoLabel);

String infoText;

infoText << "This simple application takes some text input from the user, ";

infoText << "converts it to uppercase, and displays this in another label. ";

infoText << "The application demonstrates a number of useful features of the Label class.";

infoLabel.setText (infoText, dontSendNotification);

infoLabel.setColour (Label::backgroundColourId, Colours::lightgrey);

마지막으로 infoLable 컴포넌트의 범위를 resized() 함수안에서 설정하자

infoLabel.setBounds (10, 110, getWidth() - 20, getHeight() - 120);

Note: 이전 연습하기에서 버튼과 다른 레이블을 추가한 경우 경계를 약간 조정해야할 수도 있다.

컴파일 후 실행하면 아래와 같다.

에디터 모습 바꾸기

몇가지 에디터의 기능을 바꿀수 있다. Label 클래스 자체를 통하여. 에디터가 Label 클래스를 에디터에 복제하여 글꼴스타일과 색을 만들때 Label::Colourlds 값은 에디터와 연관있다. 예를들어 레이블을 편집할 때 테두리 주위의 테투리를 변경하려면 Component::setColour() 함수에 Label::outlineWhenEditingColourld() 함수 값을 사용할 수 있다.

addAndMakeVisible (inputText);

inputText.setEditable (true);

inputText.setColour (Label::backgroundColourId, Colours::white);

inputText.setColour (Label::outlineWhenEditingColourId, Colours::orangered);

inputText.addListener (this);

다른 커스텀은 Label::Listener::editorShown() 가상함수를 구현하여 수행할 수 있다. 예를 들어, 다음과 같이 편집할 때 텍스트를 기울임 꼴로 만들 수 있다.

void editorShown (Label* label, TextEditor& editor) override

{

if (label == &inputText)

{

Font editorFont (editor.getFont());

editorFont.setItalic (true);

editor.setFont (editorFont);

}

}

Note: 실제로 대규모 응용프로그램의 경우 특히 LookAndFeel 클래스를 사용하여 모든 컴포넌트의 모양을 사용자 지정하여 응용프로그램의 전체 일관성을 유지할 수 있다.