1

5장 – 파이어몽키 HD 애플리케이션 만들기

소개 ............................................................................................................................................................................ 2

파이어몽키 비즈니스 애플리케이션 플랫폼(FMX) ............................................................................................... 3

파이어몽키 HD 애플리케이션 ................................................................................................................................ 6

FMX.Forms.TApplication / FMX.Forms.TScreen

파이어몽키 애플리케이션 디자인 .......................................................................................................................... 8

투명도(Opacity) ..................................................................................................................................................... 19

TCanvas .................................................................................................................................................................. 19

FMX 캔버스 DrawArc 예제 (델파이와 C++)

FMX TBrush 예제 (델파이와 C++)

파이어몽키 애플리케이션에서 메뉴 사용 ........................................................................................................... 35

다른 폼 안에 폼 끼어 넣기 .................................................................................................................................. 37

파이어몽키 애플리케이션 스타일 사용자 정의 .................................................................................................. 40

파이어몽키 원시 컨트롤 및 스타일 컨트롤 ....................................................................................................... 47

그리드와 스트링그리드 ......................................................................................................................................... 52

파이어몽키 애플리케이션 출력 ............................................................................................................................ 54

TLang를 사용하여 파이어몽키 다국적 언어 UI지원 ......................................................................................... 59

요약, 전망, 해야 할 일, 참고자료 ....................................................................................................................... 60

2

소개

파이어몽키는 드래그&드롭 사용자 인터페이스 컨트롤의 전체 제품 군을 포함하고 있습니다. 사용자

인터페이스를 설계 버튼, 메뉴, 텍스트, 콤보 박스, 테이블, 탭, 패널 등을 선택하여 유저 인터페이스를

설계합니다. 컨트롤은 완벽하게 사용자 정의 할 수 있으며 파이어몽키 HD 스타일을 사용하여 원하는

대로 스타일을 제어 할 수 있습니다.

파이어몽키 HD 스타일은 마크 업 언어의 전문가가 되거나 프로그래밍하지 않고 HD 사용자 인터페이

스의 모양과 느낌을 완벽하게 제어 할 수 있습니다. 스타일은 개발자 나 디자이너에 의해 생성되거나

수정 될 수 있습니다. 기존의 스타일 라이브러리에서 선택하여 애플리케이션 대한 사용자 정의 인터페

이스를 만들거나

또는 더 전통적인 고유의 OS의 모습을 원한다면 파이어몽키는 윈도우 7, 맥 OS X와 iOS 유저 인터페

이스를 처리 할 수 있는 옵션을 사용합니다.

5 장에서는 윈도우 및 맥킨토시 HD 유저 인터페이스 설계에 초점을 맞춰 여러분의 애플리케이션의 스

타일을 선택하는 절차를 따라 해보겠습니다. 또한 사용자 정의 스타일에 의해 특정 컴포넌트의 모양과

느낌을 사용자 정의하는 방법에 대해 배워보겠습니다.

3

파이어몽키 비즈니스 애플리케이션 플랫폼(FMX)

FMX는 파이어몽키 애플리케이션 플랫폼의 단위입니다. 파이어몽키는 개인에서 기업까지 전체 범위를

대상으로, 다양한 플랫폼에서 시각적으로 매력적인 응용 프로그램을 만들 수 있는 현대적인 데스크톱

및 모바일 장치에서 그래픽 처리 장치(GPU)를 활용합니다. 파이어몽키의 주요 기능은 다음과 같습니다:

윈도우, 메뉴, 타이머, 대화 상자와 같은 OS 기능을 위한 크로스 플랫폼 추상화 계층

2D 와 3D 그래픽

강력한 그래픽 엔진

빠른 실시간 안티 – 알리아스(별칭) 벡터 그래픽, 알파 블렌딩 및 그래디언트로 독립적인

해상도

WYSIWYG 디자이너와 속성 편집기

향상된 GUI 엔진 – 윈도우 창, 텍스트박스, 숫자박스, 메모, 엔젤박스, 리스트박스와 기타 등등

샘플 스타일 테마를 사용한 그래픽 스타일에 기초한 고급 스키닝 엔진

내장된 붓, 펜, 형상 및 변형 세트가 있는 2D 그래픽 도형 원형

향상된 애니메이션은 백그라운드 스레드에서 최소한의 CPU 사용 및 자동 프레임 속도

보정으로 정확하고 사용하기 쉽게 계산됩니다.

그림자 드리우기와 흐리게 하기 등 소프트웨어에서 렌더링 되는 비트맵 효과

유연한 레이아웃과 도형과 다른 컨트롤들의 조합

레이어드 폼, 유니코드 사용 가능

읽기/쓰기를 지원하는 JPEG, PNG, TI FF, 및 GIF 포맷

다국적-언어 엔진, 에디터와 예제

다음 그림은 파이어몽키 계층 구조를 구성하는 주요 클래스의 관계를 보여줍니다.

또한 다음에서 개략적인 파이어몽키 계증 구조 포스터(PDF 파일)를 다운로드 받으실 수 있습니다

http://www.embarcadero-info.com/firemonkey/firemonkey_chart_poster.pdf.

4

HD 애플리케이션과 컴포넌트 렌더링

HD 애플리케이션 및 컴포넌트가 어떻게 렌더링 되는지 이해하기 위해, FMX 클래스 계층 구조를 살펴

보겠습니다. TFmxObject는 TComponent에서 파생되었으며 오브젝트 라이프 사이클을 제공하는 FMX

루트를 형성합니다.

TControl은 TFmxObject에서 계승되는데 캔버스를 포함하고 이미지를 추가합니다.

TControl의 두 개의 연관 하위 클래스는 FMX.Objects 유니트에 있는 원시 클래스와 FMX.Controls,

FMX. ExtCtrls 및 다른 유니트에 있는 사용자 상호 작용 스타일의 컨트롤입니다. 원시 클래스들은

도형과 이미지 같은 오브젝트를 포함합니다:

TShape

TImage

TPaintBox

그리고 그들의 자식 클래스입니다:

TLine

TRectangle

TRoundRect

TText

TStyledControl에서 계승 받은 스타일 된 컨트롤들은 다음을 포함합니다:

TPanel

TLabel

TCheckBox

TImageControl

TCalendar

5

그림 대 합성

원시 컨트롤은 TControl.Paint 프로시저를 오버라이드하여 캔버스에 직접 그립니다. TStyledControl을

구체화하는 각 스타일은 원형과 하위컨트롤들의 트리 구조입니다. 스타일은 결국 원형의 레이어

세트에 해결하고, 그 원형은 컨트롤을 렌더링 할 수 있는 캔버스에 차례로 그립니다. 컴포넌트는 하나

기술 또는 다른 기술, 또는 사용자 정의 원형을 포함하는 컨트롤과 함께 두의 조합으로 그려 질 수

있습니다.

TStyledControl의 하위 클래스는 TStyledControl.GetStyleObject에서 클래스 이름을 기반으로 간단한

검색 루틴을 사용하여, 폼의 StyleBook 속성에 할당된 것 중에서 자신의 스타일 리소스 검색을

시도합니다.

프로그램 개발자는 적절한 이름으로 스타일을 만들어 컨트롤을 사용자 정의 할 수 있습니다. 그

스타일이 자동으로 컨트롤의 모든 인스턴스에 적용됩니다. 또한 StyleLookup 속성을 설정하여 개별

컨트롤에 스타일을 지정할 수 있습니다.

스타일 테마는 주제에 적합한 이름으로 스타일을 만들어 사용자 정의 컨트롤에 대한 스타일을 포함 할

수 있습니다.

일치하는 스타일이 없는 경우 컨트롤의 형태를 정의하려면 컴포넌트 작성자는 GetStyleObject를

재정의(오버라이드) 할 수 있습니다. 예를 들어, 플랫폼-지정 스타일은 RCDATA로 번들 됩니다:

각 플랫폼의 완성된 스타일을 .style 파일로 저장합니다.

프로젝트의 .rc 파일을 생성하고, RCDATA로 적절한.style 파일을 참조합니다. .rc 파일은 .res

파일로 컴파일 됩니다.

조건 컴파일 지시어를 사용하여 각 플랫폼의 .res 파일을 포합합니다.

GetStyleObject에서 스트림으로 RCDATA를 찾아 결과로 스타일을 재구성하기 위해

CreateObjectFromStream 사용합니다.

6

파이어몽키 HD 애플리케이션

File > New > FireMonkey HD Application – Delphi 또는 File > New > FireMonkey HD Application

– C ++Builder 메뉴 항목을 사용하여 파이어몽키 HD 애플리케이션 생성을 시작합니다. 프로젝트

마법사는 파이어몽키 애플리케이션에 대한 프레임 워크를 생성하고 기본 폼(FMX.Forms.TForm )을

표시하면서 폼 디자이너를 엽니다.

모든 파이어몽키 애플리케이션에서, 폼 파일은 윈도우 전용 VCL 폼 파일에 사용되는 .DFM 대신에

확장자 .fmx을 갖습니다.

FMX.Forms.TApplication

TApplication은 윈도우 애플리케이션을 캡슐화합니다. TApplication에 소개된 메소드와 속성은 윈도우

및 맥 OS X 운영 체제에서 파이어몽키 애플리케이션을 생성, 실행, 유지 및 파괴와 관련된 기본

동작을 반영합니다.

각 GUI 애플리케이션은 자동으로 애플리케이션의 인스턴스로 애플리케이션 변수를 선언합니다.

TApplication는 컴포넌트 팔레트에는 표시되지 않으며, 시각적으로 조작 할 수 있는 폼 디자이너에서

사용할 수 없습니다, 그래서 published 속성이 없습니다. 그럼에도 불구하고, public 속성의 일부는

Project > Options 대화상자의 폼과 애플리케이션 페이지에서 설정하거나 설계 시점에 수정할 수

있습니다.

7

애플리케이션 표시에 영향을 미치는 TScreen의 전체 속성과 메소드에 대해 살펴보겠습니다.

FMX.Forms.TScreen

TScreen (FMX.Forms 유니트에 정의되어 있는)은 프로그램이 실행되고 있는 스크린의 상태를

표시합니다. TScreen은 다음을 지정하는 속성들을 가지고 있습니다:

프로그램에서의 폼과 데이터 모듈의 수

애플리케이션에 의해 인스턴스 된 폼과 데이터 모듈 리스트.

델파이:

Label1.Text :=

'# of Forms in the Application: '

+ IntToStr(Screen.FormCount);

Label2.Text :=

'# of Data Modules in the Application: '

+ IntToStr(Screen.DataModuleCount);

C++:

Label1->Text = "# of Forms in the Application: "

+ IntToStr(Screen->FormCount);

Label2->Text = "# of DataModules in the Application: "

+ IntToStr(Screen->DataModuleCount);

8

파이어몽키 애플리케이션 디자인

파이어몽키는 윈도우, 맥 OS X 및 모바일용으로 구현되는 크로스 플랫폼 추상화의 상단에 경량 GUI

컨트롤을 사용합니다. 경량 컨트롤은 모든 픽셀이 파이어몽키에 의해 그려진 다는 것을 의미하며,

네이티브 (헤비급) 컨트롤은 사용되지 않습니다.

파이어몽키는 자신의 컨트롤 및 애플리케이션 디자인 규칙을 만들 수 있습니다.

파이어몽키 좌표 시스템 사용

파이어몽키 폼 디자이너에서, 좌표계의 원래는 하단-오른쪽이며 상단-왼쪽으로 확장합니다. 좌표는

부동 소수점 숫자로 표현됩니다. 지원되는 모든 플랫폼은 정사각형 픽셀을 사용합니다. 하나의 좌표

단위는 일반적으로 몇 가지 예외를 제외하고는 하나의 픽셀에 매핑 합니다:

2D 컨트롤의 Position 속성은 X 와 Y 속성을 갖는 TPosition 입니다. 별도의 Width 와 Height

속성은 크기를 나타냅니다.

3D 오브젝트는 Z 속성이 추가된 TPosition3D를 사용합니다, 양수 값이 스크린을 포인팅하는

(X 는 왼쪽으로 가고 Y 는 아래를 가리킵니다 그래서 이것은 "오른쪽-규칙"을 따릅니다)

Depth 속성, position 과 size 속성은 컴포넌트를 설명하는 경계박스(bounding box) 종류의

하나를 지정합니다: 그것이 콘텐트 박스입니다. 파이어몽키 3D 애플리케이션은 7장에서

다루도록 하겠습니다.

파이어몽키 컨트롤은 소유주, 부모 및 자식 컨트롤을 가질 수 있습니다

파이어몽키의 모든 컴포넌트는 다른 컴포넌트의 부모가 될 수 있습니다. 폼은 보통 화면 안의 모든

컨트롤들을 소유하며, 다음과 같은 규칙을 따르는 폼 디자이너에 배치됩니다.

코드로 컴포넌트를 생성 할 때, 폼이 메모리에 남아 있는 동안 해당 컴포넌트가 지속되기를 원하는

경우, 폼을 소유주 컴포넌트로 지정합니다. 폼은 Self (델파이), this(C ++) 또는 기존 컴포넌트의

소유주로 사용합니다. 소유주 컴포넌트는 자신이 메모리에서 해제될 때 컨트롤들의 해제 책임이

있습니다.

잠깐 사용하는 컴포넌트의 경우에는, 널 값을 소유주로 줍니다. 컴포넌트 사용이 완료되면 코드를

작성하여 컴포넌트를 해제해야 합니다. 가장 좋은 방법은 try / finally 블록을 사용하여 심지어 예외가

있는 경우에도 컴포넌트가 해제 되도록 합니다.

폼에 보여지는 컴포넌트인 경우, 어디에 속하는지 명시해야 합니다. 예를 들어 설계 시에 버튼을 폼

위에 올려 놓거나 다른 컨트롤 위에 배치하면 폼의 자식이 되거나, 해당 컨트롤의 트리 구조 아래에

추가되어 해당 컨트롤의 자식이 됩니다. 폼 디자이너에 배치된 컴포넌트가 자동으로 이 작업을

9

수행하고, 트리 구조가 스트럭쳐 뷰에 표시됩니다. 코드로 컨트롤을 생성할 때, Parent 속성에 폼이나

적절한 부모 컨트롤을 지정합니다.

자식 컴포넌트의 위치는 부모를 기준으로 합니다. 좌표가 제로인 경우, 자녀는 부모와 같은 상단

왼쪽에 시작합니다.

부모는 반드시 컨테이너와 같은 컨트롤에 제한되지 않습니다. 또한, ClipChildren 속성 기본값은

false로 True 이면, 컨트롤의 콘텐트 상자 밖에서 자식들의 드로잉을 허용하지 않습니다.

예를 들면, TLabel 은 TEdit의 자식이 될 수 있습니다. 레이블은 음수 값의 position을 가질 수 있으며,

TEdit 컨트롤의 위나 아래에 위치합니다. TEdit를 이동하면 모두 함께 이동합니다. TLayout는 다른

컨트롤을 정렬하는 컨테이너로 사용할 수 있습니다.

공유 좌표 공간뿐만 아니라, 자식 개체는 가시성, 투명도, 회전, 및 스케일 같은 다른 속성들을

공유합니다. 부모 컨트롤의 이러한 속성들을 변경하면 하위 트리에 있는 모든 자식 컨트롤에 영향을

미칩니다.

Margins 과 Padding 을 사용하여 정렬

컨트롤의 Align 속성은 자동으로 위치를 결정하거나, 처음에 부모의 크기가 조정되기 때문에 부모의

사면 또는 센터에 따라 크기 조절됩니다. 디폴트 값은 alNone로, 자동 계산이 수행되지 않으며,

컨트롤은 있는 그대로 유지됩니다. TAlignLayout 속성은 많은 다른 가능한 값들을 가지고 있는 열거

타입입니다.

TAlignLayout 은 다음 값 중 하나를 가질 수 있습니다:

alNone – 컨트롤은 위치한 곳에 그대로 남아 있습니다. 이 것이 기본 값입니다. 자동 위치 및

크기 조정이 수행되지 않습니다.

alTop – 컨트롤을 이동하여 부모 컨트롤의 위에 고정하고 부모의 너비에 꽉 차게 사이즈

조정합니다. 컨트롤의 높이는 영향을 미치지 않습니다. 대부분의 측면이 고정되어 있는 다른

컨트롤이 이미 부모 영역의 부분을 차지하고 있다면, 컨트롤은 부모의 나머지 너비를 채우기

위해 크기를 조절합니다.

alBottom - 컨트롤을 이동하여 부모 컨트롤의 밑에 고정하고 부모의 넓이에 꽉 차게 사이즈

조정합니다. 컨트롤의 높이는 영향을 미치지 않습니다. 대부분의 측면이 고정되어 있는 다른

컨트롤이 이미 부모 영역의 부분을 차지하고 있다면, 컨트롤은 부모의 나머지 너비를 채우기

위해 크기를 조절합니다.

alLeft - 컨트롤을 이동하여 부모 컨트롤의 왼쪽에 고정하고 부모의 높이에 꽉 차게 사이즈

조정합니다 컨트롤의 너비는 영향을 미치지 않습니다. 측면이 고정되어 있는 다른 컨트롤이

이미 부모 영역의 부분을 차지하고 있다면, 컨트롤은 부모의 나머지 높이를 채우기 위해

크기를 조절합니다.

alRight - 컨트롤을 이동하여 부모 컨트롤의 오른쪽에 고정하고 부모의 높이에 꽉 차게

10

사이즈 조정합니다 컨트롤의 너비는 영향을 미치지 않습니다. 측면이 고정되어 있는 다른

컨트롤이 이미 부모 영역의 부분을 차지하고 있다면, 컨트롤은 부모의 나머지 높이를 채우기

위해 크기를 조절합니다.

alMostTop - 컨트롤을 이동하여 부모 컨트롤의 위에 고정하고, 최상위로 설정하고, 부모의

너비를 채우기 위해 크기를 조절합니다. 컨트롤의 높이는 영향을 미치지 않습니다.

alMostBottom - 컨트롤을 이동하여 부모 컨트롤의 밑에 고정하고, 최하위로 설정하고, 부모의

너비를 채우기 위해 크기를 조절합니다. 컨트롤의 높이는 영향을 미치지 않습니다.

alMostLeft - 컨트롤을 이동하여 부모 컨트롤의 왼쪽에 고정하고, 가장 왼쪽으로 설정하고,

부모의 높이를 채우기 위해 크기를 조절합니다. 컨트롤의 너비는 영향을 미치지 않습니다.

alMostRight - 컨트롤을 이동하여 부모 컨트롤의 오른쪽에 고정하고, 가장 오른쪽으로

설정하고, 부모의 높이를 채우기 위해 크기를 조절합니다. 컨트롤의 너비는 영향을 미치지

않습니다.

alClient – 컨트롤은 사이즈를 조절하여 부모의 클라이언트 영역을 채웁니다. 측면이 고정되어

있는 다른 컨트롤이 이미 부모 영역의 부분을 차지하고 있다면, 컨트롤은 크기를 조절하여

부모의 남아있는 영역을 채웁니다.

alContent – 컨트롤을 사이즈 조절하여 부모의 전체 범위를 채워 덮어 씌웁니다.

alCenter - 컨트롤을 부모 컨트롤의 중앙으로 이동합니다. 컨트롤의 사이즈는 영향을 미치지

않습니다 측면이 고정되어 있는 다른 컨트롤이 이미 부모 영역의 부분을 차지하고 있다면,

컨트롤은 부모의 남아있는 영역의 중앙으로 이동합니다.

alVertCenter - 컨트롤은 부모의 클라이언트 영역 안에 수직 중심에 놓이며 부모의 높이를

채우기 위해 사이즈 조절합니다. 컨트롤의 너비는 영향을 미치지 않습니다. 측면이 고정되어

있는 다른 컨트롤이 이미 부모 영역의 부분을 차지하고 있다면, 컨트롤은 부모의 나머지

높이를 채우기 위해 크기를 조절합니다.

alHorzCenter - 컨트롤은 부모의 클라이언트 영역 안에 수평 중심에 놓이며 부모의 너비를

채우기 위해 사이즈 조절합니다. 컨트롤의 높이는 영향을 미치지 않습니다. 측면이 고정되어

있는 다른 컨트롤이 이미 부모 영역의 부분을 차지하고 있다면, 컨트롤은 부모의 나머지

너비를 채우기 위해 크기를 조절합니다

alHorizontal – 컨트롤은 부모의 너비를 채우기 위해 사이즈 조절합니다. 컨트롤의 높이는

영향을 미치지 않습니다. 측면이 고정되어 있는 다른 컨트롤이 이미 부모 영역의 부분을

차지하고 있다면, 컨트롤은 부모의 나머지 너비를 채우기 위해 크기를 조절합니다

alVertical - 컨트롤은 부모의 높이를 채우기 위해 사이즈 조절합니다. 컨트롤의 너비는 영향을

미치지 않습니다. 측면이 고정되어 있는 다른 컨트롤이 이미 부모 영역의 부분을 차지하고

있다면, 컨트롤은 부모의 나머지 높이를 채우기 위해 크기를 조절합니다.

정렬의 대부분은 자동 정렬을 위한 값: 부모의 마진과 컨트롤의 여백에 의해 계산됩니다.

Margins 은 종이의 관점에서, 인쇄 페이지에 여백과 같이 부모의 콘텐트 상자의 내부 공간을

설정합니다. 예들 들어, 부모의 Top 과 Left 여백이 모두10 이라면, 자동으로 왼쪽 상단에 위치한

컴포넌트는 position 이 10,10으로 되어 있을 것입니다.

더 정확하게, 자동으로 위치하는 것은 컨트롤의 콘텐트 상자가 아니라 레이아웃 상자입니다. 두 개의

차이가 있다면 그것은 컨트롤의 여백 채우기(Padding)입니다. 패딩은 컨트롤의 콘텐트 상자의 외부에

11

따로 공간을 설정합니다. 패딩이 증가함에 따라 레이아웃 상자의 크기는 동일하게 유지되며, 패딩이

제한되어 있다면 콘텐트 상자는 줄어듭니다. 10,10 예로 돌아가서, Top 과 Left padding 이 모두 5

라면, 컨트롤의 위치는 15,15가 될 것입니다.

패딩은 자동으로 부모에 의해 배치된 컨트롤들 사이의 분리를 보장하고, 마진은 이러한 컨트롤들과

부모의 가장자리 사이의 공간을 보장 합니다. 그것은 마진과 패딩의 양수 값입니다; 음수 값도 사용할

수 있습니다. 음수 마진은 부모의 콘텐트 박스의 외부에 자식을 배치하고 ClipChildren 속성이 False

이면 여전히 렌더링 됩니다. 음수 패딩은 컨트롤의 콘텐트 박스를 계산된 레이아웃 박스의 오부에

배치합니다.

12

스케일링과 회전

컨트롤의 최종 렌더링 위치에 영향을 미치는 일반적으로 사용 가능한 두 개의 다른 속성은 scale 과

rotation입니다. 스케일과 회전은 컨트롤의 position 또는 size 속성은 변경하지 않습니다. 이 속성들은

폼 디자이너에 반영됩니다: 선택된 오브젝트의 8개의 잡는 점(4개의 코너와 4개의 면)은 실제 콘텐트

상자를 표시하고, 규모와 회전을 적용하기 전에 수동으로 설정하거나, 레이아웃을 통해 계산됩니다.

컨트롤의 Scale 속성은 그 위치와 같은 타입의 인스턴스로 표시됩니다: 2D 오브젝트용 TPosition 과

3D 오브젝트용 TPosition3D . X, Y, 및 Z 값은 디폴트로 1로 지정되는데 오브젝트가 모든 차원에서

사이즈 조절이 안 된다는 의미입니다. 스케일 값은 각 축에 대한 간단한 배율입니다. 1 보다 큰 값은

그 축을 따라 확장합니다. 1 보다 작지만 0 보다 큰 값은 축을 따라 줄거나 사라집니다. 모든 축을

0으로 스케일 값을 주면 컨트롤이 사라집니다. 통일된 스케일링은 모든 축에 동일한 값을 줍니다.

2D 스케일링은 항상 컨트롤의 원래 위치, 콘텐트 박스의 왼쪽 상단에서 정박해 있습니다. 음수

스케일링은 원래 자리에서 피봇 합니다. 예를 들면, 음수 X scale 은 컨트롤을 아래 그리고 왼쪽으로

렌더링 하여, 콘텐트 박스의 왼쪽 가장자리에 내립니다. 3D 스케일링은 오브젝트의 센터에 있습니다.

(7장은 3D 파이어몽키 애플리케이션 작성에대해 다룹니다).

2D 회전에서, 피봇은 조정됩니다. RotationCenter 속성은 항상 TPosition 이지만 값은 단위 좌표에

있습니다: 0,0는 컨트롤의 왼쪽 위이며, 1,1는 오른쪽 하단에 있습니다. 기본 값은 컨트롤의 중심인:0.5,

0.5 입니다. 콘텐트 상자의 가로 세로 비율은 중요하지 않습니다. 그 피봇 포인트에서

RotationAngle은 시계 방향의 각도입니다.

3D에서, X, Y, 와 Z 축에서 각도를 지정하는 RotationAngle 와 TPosition3D를 사용하여 회전은 항상

중앙에서부터 있습니다. 회전은 오른쪽 규칙을 따릅니다; 예를 들어, X와 Y 회전 0으로, Z 축은

스크린에 맞추고, z축에 양수 회전은 시계 방향으로 회전합니다.

2D에서는, 스케일링은 원래대로이며, 회전은 조절하기 때문에 스케일링은 회전하기 전에 발생합니다.

3D에서는, 스케일링과 회전 모두 중심에서부터 발생하기 때문에 순서는 중요하지 않습니다.

레이아웃과 사이즈 조절된 레이아웃

레이아웃은 다른 그래픽 오브젝트의 컨테이너입니다. 필요할 때 레이아웃을 사용하거나

같은 부모 아래에서 여러 그래픽 컨트롤을 구성합니다.

예를 들어 동일한 레이어에 그룹화된 많은 그래픽 컨트롤을 사용하여 풍부한 파이어몽키

애플리케이션을 작성해야 할 때, 이 레이아웃을 사용할 수 있습니다. 레이아웃의 가시성에 영향을 주어

한 번에 레이아웃에 있는 모든 컨트롤의 가시성을 설정할 수 있습니다.

13

레이아웃을 용하여 컴포넌트 정렬

이 데모는 원형 패턴에서 2D 컴포넌트를 정렬하기 위해 파이어몽키 레이아웃을 어떻게 사용하는지

방법을 보여줍니다.

1. File > New > FireMonkey HD Application – Delphi 또는 File > New > FireMonkey HD

Application– C ++Builder를 선택합니다.

2. 폼 위에 TLayout를 추가합니다.

3. 폼에 TButton 과 TLabel를 추가하고 스트럭쳐 뷰에서 TLayout를 부모로 합니다.

14

4. 오브젝트 인스팩터에서, 다음과 같이 수정합니다:

button에서, Align 속성을 alMostTop로 지정합니다.

label에서, Align 속성을 alVertCenter로 지정합니다.

layout에서, RotationCenter.X를 0.5로 그리고 RotationCenter.Y를 1로 설정하여 하단

가장자리의 중간에 있는 회전 중심점을 이동합니다.

RotationAngle를 -90로 지정하여 레이아웃을 회전합니다.

5. 스트럭처 뷰에서, 레이아웃에서 오른쪽 마우스 클릭하여 폼 위의 레이아웃을 복사 및 붙여 넣기

하여 아래 이미지에 나와있는 단계를 수행하십시오.

15

6. 두 번째 레이아웃의 RotationAngle 속성을 -60로 지정하여 회전합니다.

7. 마지막 수정된 레이아웃까지 복사와 붙여 넣기를 계속하여 RotationAngle이 90이 될 때까지 이전

레이아웃 보다 30도 높게 RotationAngle 값을 수정합니다.

이것이 완성된 패턴입니다:

16

8. F9를 눌러 프로젝트를 실행합니다. 결과가 아래와 같은 모습으로 보여 질 것입니다:

9. 다른 시각적 인 효과를 얻으려면, 오브젝트 인스펙터로 가서, 폼 위의 각 패널의 RotationAngle

속성 값을 90으로 줍니다:

17

레이아웃을 사용하여 스케일 효과 주기

이 데모는 동시에 버튼 세트를 사이즈 조절 하기 위한 파이어몽키 레이아웃 사용 방법에 대해

성명합니다.

1. 앞의 데모에서 작성한 폼 위에, TScaledLayout 와 TTrackBar를 추가합니다.

2. 오브젝트 인스펙터에서, 다음과 같이 수정합니다:

track bar에서:

ο Align 속성을 alMostBottom로 지정합니다.

ο Max 속성을 2로 지정합니다.

ο Frequency 속성을 0.01로 지정합니다.

Scale layout에서, Align 속성을 alCenter로 지정합니다.

3. 스트럭쳐 뷰에서, 모든 레이아웃을 선택합니다 (각 레이아웃에서 Ctrl+Click).

4. TScaledLayout 아래로 레이아웃을 드래그&드롭 합니다.

5. 폼 디자이너에서, TScaledLayout 을 사이즈 조절하여 전체 패턴이 TScaledLayout에 맞추어 집니다.

선택된 모든 레이아웃으로 TScaledLayout 안에 전체 패턴을 중앙에 놓습니다.

6. 오브젝트 인스펙터에서, 다음과 같이 TScaledLayout을 크기 조절합니다:

Scale 속성의 좌표를 0.5로 설정합니다.

Trackbar의 Value 속성을 0.5로 설정합니다.

7. TTrackBar를 더블 클릭하여 OnChange 이벤트 핸들러를 아래와 같이 작성합니다.

// Delphi version of the implementation

procedure TForm1.TrackBar1Change(Sender: TObject);

18

begin

ScaledLayout.Scale.X := TrackBar.Value;

ScaledLayout.Scale.Y := TrackBar.Value;

end;

// C++ version of the implementation

void __fastcall TForm3D1::TrackBar1Change(TObject *Sender)

{

ScaledLayout->Scale->X = TrackBar->Value;

ScaledLayout->Scale->Y = TrackBar->Value;

}

8. F9를 눌러 프로젝트를 실행합니다. 결과가 아래와 같이 표시됩니다:

버튼들이 스케일 될 때, 비활성화 되지 않습니다. 스케일이 사용되는 것과 상관없이 활성화 상태로

남아 있습니다.

19

투명도(Opacity)

파이어몽키 시각적 컨트롤의 Opacity 속성은 컨트롤의 투명도를 지정할 수 있습니다.

Opacity는 컨트롤의 자식에도 역시 적용됩니다. Opacity는 0과 1사이의 값을 가질 수 있습니다.

Opacity가 1이라면, 컨트롤이 완전히 불투명이며 0 인 경우, 컨트롤은 완전히 투명합니다. 1 이상의

값은 1로 처리되고 0 미만의 값은 0로 취급됩니다.

TCanvas

파이어몽키의 TCanvas 클래스는 폼의 그리기 영역에 대한 접근을 제공합니다. 캔버스를 사용하여 폼의

클라이언트 영역에 직접 그릴 수 있습니다.

TCanvas 는 이미지를 만드는데 도움을 주는 속성, 이벤트, 및 메소드를 제공합니다:

사용할 브러시, 선 긋기, 폰트 유형을 지정합니다.

다양한 도형과 선들 그리기와 채우기.

텍스트 쓰기.

그래픽 이미지 렌더링.

현재 이미지의 변경 사항에 대한 응답 활성화.

TCanvas 그리기 함수들입니다:

DrawArc

DrawBitmap

DrawEllipse

DrawLine

DrawPath

DrawPolygon

DrawRect

DrawRectSides

DrawThumbnail

20

FMX 캔버스 DrawArc 예제 (델파이와 C++)

이 예제는 DrawArc와 FillArc 함수 사용 방법과 그 결과를 보여줍니다.

이 예제를 작성하고 테스트하기 위해, File > New > FireMonkey HD Application -Delphi 또는 File >

New > FireMonkey HD Application - C ++Builder를 사용하여 애플리케이션을 생성하고. 폼 위에

다음과 같은 컨트롤을 추가합니다:

TImage 컴포넌트 Align 속성을 alMostLeft로 설정하고 폼 너비의 대략 70% 정도 차지하도록

TImage의 넓이의 사이즈를 조절합니다.

TPanel 컴포넌트. Align 속성을 alClient로 설정합니다. TPanel은 폼의 남은 공간을 꽉 차게

차지합니다. 패널 안에 다음 컴포넌트들을 내려 놓습니다.

o 한 개의 TGroupBox 컴포넌트. 그룹 박스의 Text 속성을 “Center”로 설정합니다. TPanel의

왼쪽 상단에 이 그룹 박스를 내려 놓고 TPanel의 너비의 약 절반을 차지하도록 크기를

조정합니다.

그룹 박스 안에 내려 놓습니다:

■ 원호의 중심 좌표를 설정하는 두 개의 TEdit 오브젝트 이름을 CenterXEdit 와

CenterYEdit으로 줍니다. CenterXEdit 와 CenterYEdit의 Text 속성을 각각 100 과

200으로 지정합니다.

■ 2개의 TLabels. 각 Text 속성을 X 와 Y로 설정합니다.

o 한 개의 TGroupBox 컴포넌트. 그룹 박스의 Text 속성을 “Radius”로 설정합니다. 이 그룹

박스를 “Center” 그룹 박스의 왼쪽에 위치시키고 TPanel의 남아 있는 절반을 차지하도록

크기를 조정합니다.

그룹 박스 안에 내려 놓습니다:

■ 원호의 빛을 설정하는 두 개의 TEdit 오브젝트. 이름을 RadiusXEdit 와

RadiusYEdit으로 줍니다. RadiusXEdit 와 RadiusYEdit의 Text 속성을 각각 200과

220으로 지정합니다.

21

■ 2개의 TLabels. 각 Text 속성을 X 와 Y로 설정합니다.

o 한 개의 TGroupBox 컴포넌트. 그룹 박스의 Text 속성을 “Angles” 로 설정합니다. TPanel의

너비에 꽉 차게 크기를 조정합니다. 이 그룹 박스를 “Center” 와 “Radius” 그룹 박스 바로

아래에 위치시킵니다.

그룹 박스 안에 내려 놓습니다:

■ 시작 각도 및 스윕 각도를 설정하는 두 개의 TEdit 오브젝트. 이름을

StartAngleEdit 와 SweepAngleEdit으로 줍니다. StartAngleEdit 와 SweepAn gleEdit

Text 속성을 각각 100 과 -90로 설정합니다.

■ 2개의 TLabel 컴포넌트. 각 Text 속성을 “Start Angle” 과 “Sweep Angle”로

설정합니다.

o 한 개의 TGroupBox를 그룹 박스 안에 내려 놓습니다: 그룹 박스의 Text 속성을 “Colors”로

지정합니다.

■ 선 그리기와 선 채우기를 위한 색상을 선택하기 위한 두 개의 TColorComboBoxes.

이름을 StrokeColorComboBox 와 FillColorComboBox로 지정합니다. 오브젝트

인스펙터를 사용하여, Color 속성을 각각 Blue 와 Turquoise로 지정합니다(또는

좋아하는 색상을 선택합니다).

■ 2개의 TLabels 컴포넌트. 각 TColorComboBox 의 왼쪽에 위치시키고 text 속성을

“Stroke Color” 와 “Fill Color”로 지정합니다.

o 투명도를 지정하기 위한 TEdit를 그룹 박스 아래에 내려 놓습니다

■ 이름을 OpacityEdit라고 줍니다. OpacityEdit의 Text 속성을 100으로 설정합니다(참고:

100 = 100% 투명. 0 = 안보임) OpacityEdit 왼쪽에 TLabel를 내려 놓습니다. Text

속성을 “Opacity”로 지정합니다.

o “Colors” 그룹 박스 아래에 원호를 그리고 채우기 위한 2 개의 버튼을 내려 놓습니다. 이름을

DrawButton 과 FillButton으로 지정합니다. Text 속성을 “Draw Button” 과 “Fill Button”으로

지정합니다. FillButton의 Align 속성을 alMostBottom로 설정하고 DrawButton의 Align

속성을 alMostBottom으로 설정합니다.

컨트롤들을 추가한 후에, 이름을 변경하고 배치하여, 아래와 같은 모습이 될 것입니다:

22

DrawArc 예제는 세 개의 이벤트 핸들러가 필요합니다: FormCreate, FillButtonClick 및 FillArcClick.

오브젝트 인스펙터에서, 폼을 선택하고 이벤트 탭에서 OnCreate 이벤트를 더블 클릭하여 이벤트

핸들러를 생성합니다. FormCreate 이벤트 핸들러에 아래에 나와있는 코드를 추가합니다. 오브젝트

인스펙터에서, DrawButton을 선택하고 이벤트 탭에서 OnClick 이벤트를 더블 클릭하여 이벤트

핸들러를 생성합니다. DrawButtonClick 이벤트 핸들러에 아래에 나와있는 코드를 추가합니다. 오브젝트

인스펙터에서, FillButton 을 선택하고 이벤트 탭에서 OnClick 이벤트를 더블 클릭하여 이벤트 핸들러를

생성합니다. FillButtonClick 이벤트 핸들러에 아래에 나와있는 코드를 추가합니다.

이 예제는 비트맵의 캔버스 위에 원호를 그리고 채웁니다. 비트맵은 TImage상에 표시됩니다.

// Delphi

// Add the following code to the OnCreate event handler

// of the form.

procedure TForm1.FormCreate(Sender: TObject );

begin

//initializes the bitmap

Image1.Bitmap.Create(Round(Image1.Width),

Round(Image1.Height));

end ;

// Add the following code to the OnClick event handler

// of the DrawButton and FillButton:

procedure TForm1.DrawButtonClick(Sender: TObject);

var

23

Center, Radius: TPointF;

Opacity, StartAngle, SweepAngle: Single ;

begin

// takes the information from the edits

// checks whether all the values are valid

if (TryStrToFloat(CenterXEdit.Text, Center.X) and

TryStrToFloat(CenterYEdit.Text, Center.Y) and

TryStrToFloat(RadiusXEdit.Text, Radius.X) and

TryStrToFloat(RadiusYEdit.Text, Radius.Y) and

TryStrToFloat(StartAngleEdit.Text, StartAngle) and

TryStrToFloat(SweepAngleEdit.Text, SweepAngle) and

TryStrToFloat(OpacityEdit.Text, Opacity)) then

begin

Image1.Bitmap.Canvas.BeginScene;

Image1.Bitmap.Canvas.Stroke.Color := StrokeColorComboBox.Color;

// draws the arc

Image1.Bitmap.Canvas.DrawArc(Center, Radius, StartAngle,SweepAngle, Opacity);

Image1.Bitmap.BitmapChanged;

Image1.Bitmap.Canvas.EndScene;

end

else

// displays message if not all edits have numerical values

ShowMessage('All Edits text should be numbers')

end ;

procedure TForm1.FillButtonClick(Sender: TObject);

var

Center, Radius: TPointF;

Opacity, StartAngle, SweepAngle: Single;

begin

// takes the information from the edits

// checks whether all the values are valid

24

if (TryStrToFloat(CenterXEdit.Text, Center.X) and

TryStrToFloat(CenterYEdit.Text, Center.Y) and

TryStrToFloat(RadiusXEdit.Text, Radius.X) and

TryStrToFloat(RadiusYEdit.Text, Radius.Y) and

TryStrToFloat(StartAngleEdit.Text, StartAngle) and

TryStrToFloat(SweepAngleEdit.Text, SweepAngle) and

TryStrToFloat(OpacityEdit.Text, Opacity)) then

begin

Image1.Bitmap.Canvas.BeginScene;

Image1.Bitmap.Canvas.Fill.Color := FillColorComboBox.Color;

Image1.Bitmap.Canvas.FillArc(Center, Radius, StartAngle,SweepAngle, Opacity);

Image1.Bitmap.BitmapChanged;

Image1.Bitmap.Canvas.EndScene;

end

else

// displays a message if not all edits have numerical values

ShowMessage('All Edits text should be numbers')

end ;

C++ Code

// Add the following code to the OnCreate event

// handler of the form.

void __fastcall TForm2::FormCreate(TObject *Sender) {

// initializes the bitmap

Image1->Bitmap = new TBitmap(int(Image1->Width), int(Image1->Height));

}

// Add the following code to the OnClick event

// handler of the DrawButton and FillButton:

void __fastcall TForm2::DrawButtonClick(TObject *Sender) {

TPointF Center, Radius;

TClipRects *AClipRect;

25

Single Opacity, StartAngle, SweepAngle;

// takes the information from the edits

// checks whether all the values are valid

if (TryStrToFloat(CenterXEdit->Text, Center.X)

&& TryStrToFloat(CenterYEdit->Text, Center.Y)

&& TryStrToFloat(RadiusXEdit->Text,Radius.X)

&& TryStrToFloat(RadiusYEdit->Text, Radius.Y)

&& TryStrToFloat(StartAngleEdit->Text, StartAngle)

&& TryStrToFloat(SweepAngleEdit->Text, SweepAngle)

&& TryStrToFloat(OpacityEdit->Text,Opacity)) {

Image1->Bitmap->Canvas->BeginScene();

Image1->Bitmap->Canvas->Stroke->Color =

StrokeColorComboBox->Color;

// draws the arc

Image1->Bitmap->Canvas->DrawArc(Center, Radius,StartAngle,SweepAngle,Opacity);

Image1->Bitmap->BitmapChanged();

Image1->Bitmap->Canvas->EndScene();

}

else {

// displays message if not all edits have numerical values

ShowMessage("All Edits text should be numbers");

}

}

// -------------------------------------------------------------

void __fastcall TForm2::FillButtonClick(TObject *Sender) {

TPointF Center, Radius;

Single Opacity, StartAngle, SweepAngle;

// takes the information from the edits

// checks whether all the values are valid

if (TryStrToFloat(CenterXEdit->Text, Center.x)

&& TryStrToFloat(CenterYEdit->Text, Center.y)

&& TryStrToFloat(RadiusXEdit->Text,Radius.x)

&& TryStrToFloat(RadiusYEdit->Text, Radius.y)

26

&& TryStrToFloat(StartAngleEdit->Text, StartAngle)

&& TryStrToFloat(SweepAngleEdit->Text, SweepAngle)

&& TryStrToFloat(OpacityEdit->Text,Opacity)) {

Image1->Bitmap->Canvas->BeginScene();

Image1->Bitmap->Canvas->Fill->Color =

FillColorComboBox->Color;

// fills the arc

Image1->Bitmap->Canvas->FillArc(Center,Radius,StartAngle,SweepAngle,Opacity);

Image1->Bitmap->BitmapChanged();

Image1->Bitmap->Canvas->EndScene();

}

else {

// displays a message if not all edits have numerical values

ShowMessage("All Edits text should be numbers");

}

}// -------------------------------------------------------------

이것은 윈도우상에서 컴파일하고 실행 한 후에 예제 폼이 어떻게 표시되는지를 보여주는 예제입니다:

27

FMX TBrush 예제 (델파이와 C++)

이 예제는 TBrush의 다른 속성들을 어떻게 사용하는지 보여주는 파이어몽키 HD 애플리케이션입니다

- http://docwiki.embarcadero.com/CodeSamples/en/FMX TBrush_(Del phi)와

http://docwiki.embarcadero.com/CodeSamples/en/FMX TBrush_(C%2B%2B).

이 예제는 다음과 같은 컴포넌트를 사용합니다:

3 개의 ListBoxItem 오브젝트를 가지고 있는 한 개의 TComboBox 오브젝트.

1 개의 Ellipse 오브젝트.

2 개의 ColorListBox 오브젝트.

4 개의 Label 오브젝트.

4 개의 Image 오브젝트.

폼은 아래 그림과 같이 보여집니다.

타원, 콤보박스, 및 레이블을 제외하고 모든 컴포넌트들은 비활성화 합니다. 콤보박스 위의 한 개의

레이블을 제외하고 레이블의 text 속성을 널( ' ' )값으로 설정합니다. 한 개의 레이블의 text 속성은

“타원에 대한 스타일 선택:”로 설정합니다. 이미지 오브젝트의 Bitmap 속성에 서로 다른 비트맵

파일들을 로드 합니다

//Delphi

procedure TForm1.ColorListBox1Change(Sender: TObject);

begin

// Verify the Style of the TBrush and use the

28

// selected color accordingly (as the color

// of the brush or as the first gradient color)

if (Ellipse1.Fill.Kind = TbrushKind.bkSolid) then

Ellipse1.Fill.Color := ColorListBox1.Color

else

Ellipse1.Fill.Gradient.Color := ColorListBox1.Color;

end ;

procedure TForm1.ColorListBox2Change(Sender: TObject);

begin

// Use the selected color as the second

// color of the gradient

Ellipse1.Fill.Gradient.Color1 := ColorListBox2.Color;

end ;

procedure TForm1.FormCreate(Sender: TObject );

begin

Ellipse1.Fill.Kind := TbrushKind.bkNone;

end ;

procedure TForm1.Image1Click(Sender: TObject );

begin

// Set the Brush's pattern to be the first image

Ellipse1.Fill.Bitmap.Bitmap := Image1.Bitmap;

Ellipse1.Repaint;

end ;

procedure TForm1.Image2Click(Sender: TObject );

begin

// Set the Brush's pattern to be the second image

Ellipse1.Fill.Bitmap.Bitmap := Image2.Bitmap;

Ellipse1.Repaint;

end ;

procedure TForm1.Image3Click(Sender: TObject );

begin

// Set the Brush's pattern to be the third image

Ellipse1.Fill.Bitmap.Bitmap := Image3.Bitmap;

Ellipse1.Repaint;

29

end ;

procedure TForm1.Image4Click(Sender: TObject );

begin

// Set the Brush's pattern to be the fourth image

Ellipse1.Fill.Bitmap.Bitmap := Image4.Bitmap;

Ellipse1.Repaint;

end ;

// Set the style of the TBrush according to the

// selected option and

// enable the components needed to set the

// other TBrush properties

procedure TForm1.ListBoxItem1Click(Sender: TObject);

begin

Label3.Text := 'Choose a color:';

Label4.Text := '';

Label2.Text := '';

Ellipse1.Fill.Kind := TbrushKind.bkSolid;

ColorListBox1.Enabled := True ;

ColorListBox2.Enabled := False ;

Image1.Enabled := False;

Image2.Enabled := False;

Image3.Enabled := False;

Image4.Enabled := False;

end ;

procedure TForm1.ListBoxItem2Click(Sender: TObject);

begin

Label3.Text := 'Choose the top color:';

Label4.Text := 'Choose the bottom color:';

Label2.Text := '';

Ellipse1.Fill.Kind := TbrushKind.bkGradient;

30

ColorListBox1.Enabled := True ;

ColorListBox2.Enabled := True ;

Image1.Enabled := False;

Image2.Enabled := False;

Image3.Enabled := False;

Image4.Enabled := False;

end ;

procedure TForm1.ListBoxItem3Click(Sender: TObject);

begin

Label2.Text := 'Choose an image:';

Label3.Text := '';

Label4.Text := '';

Ellipse1.Fill.Kind := TbrushKind.bkBitmap;

ColorListBox1.Enabled := False ;

ColorListBox2.Enabled := False ;

Image1.Enabled := True ;

Image2.Enabled := True ;

Image3.Enabled := True ;

Image4.Enabled := True ;

Ellipse1.Fill.Bitmap.WrapMode := TWrapMode.wmTileStretch;

end ;

// C++

void __fastcall TForm1::ColorListBox1Change(

TObject *Sender) {

// Verify the Style of the TBrush and use

// the selected color accordingly (as the

// color of the brush or as the first gradient color)

if (Ellipse1->Fill->Kind == TBrushKind::bkSolid)

Ellipse1->Fill->Color = ColorListBox1->Color;

else

Ellipse1->Fill->Gradient->Color =

ColorListBox1->Color;

31

}

// -----------------------------------------------------

void __fastcall TForm1::ColorListBox2Change(

TObject *Sender) {

// Use the selected color as the second

// color of the gradient

Ellipse1->Fill->Gradient->Color1 =

ColorListBox2->Color;

}

// -------------------------------------------------------

void __fastcall TForm1::FormCreate(TObject *Sender) {

Ellipse1->Fill->Kind = TBrushKind::bkNone;

}

// --------------------------------------------------------

void __fastcall TForm1::Image1Click(TObject *Sender) {

// Set the Brush's pattern to be the first image

Ellipse1->Fill->Bitmap->Bitmap = Image1->Bitmap;

Ellipse1->Repaint();

}

// --------------------------------------------------------

void __fastcall TForm1::Image2Click(TObject *Sender) {

// Set the Brush's pattern to be the second image

Ellipse1->Fill->Bitmap->Bitmap = Image2->Bitmap;

Ellipse1->Repaint();

}

// --------------------------------------------------------

void __fastcall TForm1::Image3Click(TObject *Sender) {

// Set the Brush's pattern to be the third image

Ellipse1->Fill->Bitmap->Bitmap = Image3->Bitmap;

32

Ellipse1->Repaint();

}

// --------------------------------------------------------

void __fastcall TForm1::Image4Click(TObject *Sender) {

// Set the Brush's pattern to be the fourth image

Ellipse1->Fill->Bitmap->Bitmap = Image4->Bitmap;

Ellipse1->Repaint();

}

// Set the style of the TBrush according

// to the selected option and

// enable the components needed to set

// the other TBrush properties

// -------------------------------------------------------

void __fastcall TForm1::ListBoxItem1Click(TObject *Sender) {

Label3->Text = "Choose a color:";

Label4->Text = "";

Label2->Text = "";

Ellipse1->Fill->Kind = TBrushKind::bkSolid;

ColorListBox1->Enabled = True;

ColorListBox2->Enabled = False;

Image1->Enabled = False;

Image2->Enabled = False;

Image3->Enabled = False;

Image4->Enabled = False;

}

// --------------------------------------------------------

void __fastcall TForm1::ListBoxItem2Click(TObject *Sender) {

Label3->Text = "Choose the top color:";

Label4->Text = "Choose the bottom color:";

Label2->Text = "";

33

Ellipse1->Fill->Kind = TBrushKind::bkGradient;

ColorListBox1->Enabled = True;

ColorListBox2->Enabled = True;

Image1->Enabled = False;

Image2->Enabled = False;

Image3->Enabled = False;

Image4->Enabled = False;

}

// --------------------------------------------------------

void __fastcall TForm1::ListBoxItem3Click(TObject *Sender) {

Label2->Text = "Choose an image:";

Label3->Text = "";

Label4->Text = "";

Ellipse1->Fill->Kind = TBrushKind::bkBitmap;

ColorListBox1->Enabled = False;

ColorListBox2->Enabled = False;

Image1->Enabled = True;

Image2->Enabled = True;

Image3->Enabled = True;

Image4->Enabled = True;

Ellipse1->Fill->Bitmap->WrapMode = TWrapMode::wmTileStretch;

}

// --------------------------------------------------------

34

추가적인 캔버스, 브러시 및 비트맵 예제

여러 가지 추가적인 파이어몽키 캔버스, 브러시와 비트맵 예제 프로그램이 엠바카데로 DocWiki에

있습니다.

델파이 파이어몽키 코드 예제들

http://docwiki.embarcadero.com/CodeSamples/en/FMX TBitmapCanvas(Delphi)

http://docwiki.embarcadero.com/CodeSamples/en/FMX TBitmapClear(Delphi)

http://docwiki.embarcadero.com/CodeSamples/en/FMX TBitmapManipulationFunctions_(Delphi)

http://docwiki.embarcadero.com/CodeSamples/en/FMX TBitmapPixels_(Delphi)

http://docwiki.embarcadero.com/CodeSamples/en/FMX TBitmapScanLine(Delphi)

http://docwiki.embarcadero.com/CodeSamples/en/FMX TBitmapStartL ine(Delphi)

http://docwiki.embarcadero.com/CodeSamples/en/FMX TBrush(Delphi)

http://docwiki.embarcadero.com/CodeSamples/en/FMX TCanvasSaveCanvas_(Delphi)

http://docwiki.embarcadero.com/CodeExamples/en/FMXTCanvasDrawArc(Delphi)

http://docwiki.embarcadero.com/CodeExamples/en/FMXTCanvasClippingFunctions(Delphi)

http://docwiki.embarcadero.com/CodeExamples/en/FMXTCanvasDrawFunctions(Delphi)

http://docwiki.embarcadero.com/CodeExamples/en/FMXTCanvasFillFunctions(Delphi)

C++ 파이어몽키 코드 예제들

http://docwiki.embarcadero.com/CodeSamples/en/FMX TBitmapCanvas_(C%2B%2B)

http://docwiki.embarcadero.com/CodeSamples/en/FMX TBitmapClear_(C%2B%2B)

http://docwiki.embarcadero.com/CodeSamples/en/FMX TBitmapManipulationFun

ctions_(C%2B%2B)

http://docwiki.embarcadero.com/CodeSamples/en/FMX TBitmapPixels_(C%2B%2B)

http://docwiki.embarcadero.com/CodeSamples/en/FMX TBitmapScanLine_(C%2B%2B)

http://docwiki.embarcadero.com/CodeSamples/en/FMX TBitmapStartLine_(C%2B%2B)

http://docwiki.embarcadero.com/CodeSamples/en/FMX TBrush_(C%2B%2B)

http://docwiki.embarcadero.com/CodeSamples/en/FMX TCanvasSaveCanvas_(C%2B%2B)

http://docwiki.embarcadero.com/CodeExamples/en/FMXTCanvasClippingFunctions_(C%2B%2B)

http://docwiki.embarcadero.com/CodeExamples/en/FMXTCanvasDrawArc_(C%2B%2B)

http://docwiki.embarcadero.com/CodeExamples/en/FMXTCanvasDrawFunctions_(C%2B%2B)

http://docwiki.embarcadero.com/CodeExamples/en/FMXTCanvasFillFunctions_(C%2B%2B)

35

파이어몽키 애플리케이션에서 메뉴 사용

파이어몽키는 폼에 표시되는 가벼운 스타일의 메뉴와 기본 메뉴를 모두 지원합니다.

드롭-다운 메뉴

전통 데스크톱 OS 드롭 다운 메뉴는 TMenuBar에 호스팅 됩니다. 완전히 스타일을 제어할 수 있는

컨트롤입니다. TMenuItem는 트리 구조의 루트 역할을 합니다. 자식들의 첫 번째 세대는 메뉴 바에서

볼 수 있습니다. 부모 항목을 클릭했을 때 2 세대 항목은 부모 아래에 표시됩니다. 나중에 세대는

오른쪽에 있는 하위 메뉴로 표시됩니다.

메뉴 항목은 텍스트 레이블과 옵션인 비트맵 이미지를 갖습니다. 아이템들은 IsChecked 트리거 속성을

통해 체크됩니다. AutoCheck 속성을 True로 설정하면 메뉴 아이템이 클릭될 때마다 자동으로

IsChecked 속성이 토글링 됩니다. 메뉴 항목들의 그룹은 각 항목의 RadioItem 속성을 True로 지정하고

GroupIndex 속성을 동일한 임의의 값으로 설정해서, 최대 하나의 항목만 선택되도록 지정 할 수

있습니다.

OnClick 이벤트 핸들러에서 메뉴 액션을 구현합니다. ShortCut 속성에 단축키를 지정합니다.

메뉴 분리 항목을 생성하려면, Text 속성에 단일 하이픈 - 마이너스 문자(유니코드 포인트 U+002D,

ASCII 45)로 지정합니다.

기본 메뉴

TMenuBar.UseOSMenu 속성을 True로 지정하면 파이어몽키는 기본 메뉴의 결과로, OS 호출로 메뉴

트리를 생성하도록 합니다. 윈도우상에서, 이 메뉴는 부모 폼의 상단에 위치하고 현재 스타일 테마를

사용하여 표시됩니다. 맥 OS X 상에서, 메뉴는 애플리케이션에 포커스가 올 때마다 메인 스크린의

상단의 전역 메뉴 바에 표시됩니다.

팝업 메뉴

팝업 프로시저가 호출되는 경우에만 나타나는 메뉴를 기술하기 위해 TPopupMenu를 사용합니다.

TPopupMenu는 팝업 프로시저의 매개변수에 따라 가리키는 좌표에 표시됩니다.

TPopupMenu는 TMenuItems로 이루어집니다. 몇 가지 방법으로 메뉴 항목을 추가합니다:

설계 시에 메뉴 항목을 추가하기 위해 다음 중 어떠한 작업이든 수행할 수 있습니다:

o 컴포넌트를 오른쪽 마우스 클릭하고 컨텍스트 메뉴에서 Add Item을 선택합니다.

o 컴포넌트를 더블 클릭하고 아이템 디자이너에서 Add Item 버튼을 클릭합니다.

36

o 컴포넌트를 오른쪽 마우스 클릭하고 컨텍스트 메뉴에서 Items Editor를 선택하고, Add

Item 버튼을 클릭합니다.

실행 시에 메뉴 항목을 추가하기 위해, TPopupMenu의 AddObject 프로시저를 사용합니다.

투명 폼 투명 폼을 사용하여 파이어몽키 애플리케이션을 작성할 수 있습니다. 새로운 파이어몽키 HD

애플리케이션을 생성합니다. 폼 위에 버튼을 내려 놓습니다. 버튼을 더블 클릭하여 OnClick 이벤트

핸들러를 생성합니다.

코드 라인을 추가합니다:

Application.Terminate(); // Delphi

Application->Terminate(); // C++

오브젝트 인스펙터에서, 폼의 Transparent 속성을 True로 설정합니다.

버튼을 클릭하여 프로그램을 종료합니다.

37

다른 폼 안에 폼 끼어 넣기 이 예제는 컴포넌트의 Parent 속성을 변경하여 다른 폼의 내부에 한 폼을 삽입하는 방법을 보여줍니다.

http://docwiki.embarcadero.com/CodeExamples/en/FMX EmbeddedForm_ (Delphi)

이 예제를 작성하고 테스트하기 위해:

1. File > New > FireMonkey HD Application – Delphi 또는 FireMonkey HD Application –

C++Builder를 선택하여 파이어몽키 HD 애플리케이션을 생성합니다.

2. File > New > Other.. > Delphi Projects > Delphi Files > FireMonkey HD Form 또는 File > New >

Other.. > C++Builder Projects > C ++Builder Files > FireMonkey HD Form을 선택하여 프로젝트에

두 번째 화면을 추가합니다.

3. 오브젝트 인스펙터에서 두 폼의 Name 속성을 ParentForm과 EmbeddedForm (또한 그 폼의

Caption 속성과 유니트 파일들의 이름)로 지정합니다. ParentForm은 애플리케이션에 의해서 생성되는

마지막 폼이라는 것을 확인하십시오. Project > Options 메뉴 항목을 사용하여, Forms 카테고리를

클릭하고 EmbeddedForm 폼을 “Auto -create forms” 에서 “Available forms”으로 옮깁니다.

38

4. ParentForm에 TPanel을 추가합니다.

5. EmbeddedForm에 다른 컨트롤을 추가합니다(저는 캘린더와 버튼을 추가했습니다).

6. 추가되는 폼에 대해서 ParentForm 유니트에 알려줄 필요가 있습니다. File > Use Unit 메뉴 항목을

선택하여 implementation 부분에 유니트를 추가합니다.

또는 ParentForm의 소스 코드의 implementation 섹션에 코드를 추가합니다.

39

Uses EmbeddedFormUnit;

[todo C++ code]

7. TParentForm 클래스 private 섹션에 아래의 메소드를 추가합니다:

procedure EmbedForm(AParent:TControl;

AForm:TCustomForm);

8. ParentForm 유니트 implementation 섹션에 아래의 코드를 추가합니다:

// AParent can be any control, such as a panel or a

// tabsheet item of a TabControl.

procedure TParentForm.EmbedForm(AParent:TControl;

AForm:TCustomForm);

begin

while AForm.ChildrenCount>0 do

AForm.Children[0].Parent:=AParent;

end;

9. ParentForm을 선택하고 오브젝트 인스펙터에서 이벤트 탭을 클릭하고 OnCreate 이벤트를 더블

클릭하여 FormCreate 이벤트 핸들러를 생성합니다. 아래 코드를 이벤트 핸들러에 추가합니다:

EmbedForm(Panel1, TEmbeddedForm.Create(Self));

10. 프로그램을 실행합니다. 삽입된 폼에 어떤 컨트롤을 내려 놓았느냐에 따라 프로그램이 다음과

같이 보여질 것입니다:

40

파이어몽키 애플리케이션 스타일 사용자 정의 파이어몽키 컨트롤들은 하위컨트롤들의 트리 배열이고 원시적인 모양과 브러시, 효과로 장식됩니다.

이러한 컨트롤들은 스타일 북에 저장된 스타일로 정의됩니다. 스타일의 각 요소는 내부적으로

리소스로 불립니다; 이 용어는 여러 가지 다른 의미를 가지고 있기 때문에, 스타일-리소스 용어는

명확성을 위해 사용됩니다. 스타일은 하위 클래스 작성 없이 사용자 정의를 할 수 있습니다. 제품과

함께 제공되는 파이어몽키 스타일들은

C:\Program Files(x86)\Embarcadero\RAD Studio\9.0\Redist\styles\Fmx (또는 C :\Program

Files\Embarcadero\RAD Studio\9.0\Redist\styles\Fmx for pre-Windows Vista/7 versions)에

위치하고 있습니다.

기본 스타일

파이어몽키에서, 각 컨트롤 클래스는 디폴트 스타일을 가지고 있는데, 플랫폼당 하드 코딩 합니다.

파이어몽키 스타일 디자이너(FireMonkey Style Designer)에 정의되어 있는 스타일을 보기 위해:

폼 디자이너에서 폼 위에 컨트롤을 내려 놓습니다.

컨트롤에서 오른쪽 마우스 클릭하여 Edit Default Style을 선택합니다.

이것은 내부의 하드 코딩 스타일의 복사본을 만듭니다. TStyleBook 컴포넌트가 폼 위에 추가됩니다.

예를 들면, FMX.Controls.TPanel 의 디폴트 스타일은 아래처럼 간단히 정의됩니다:

Panelstyle: TRectangle

스타일을 정의하는 스타일-리소스의 이름은 "Panelstyle"입니다. 이것은 TRectangle를 의미합니다. 이

사각형의 모양은 스타일 디자이너에서 변경될 수 있으며 폼 위의 모든 TPanel은 기본적으로 그 모양을

갖게 됩니다.

TPanel이 TRectangle로 표현돼야 한다는 규칙은 없습니다. TRoundRect 또는 TEllipse가 될 수도

있습니다. (말이 안되지만 심지어 TCalendar일 수도 있습니다. 그 결과 패널은 표시되고 피상적인

달력의 기능을 갖습니다만 TCalendar의 모든 속성 및 이벤트의 액세스 권한이 없는 것입니다.)

심지어 간단한 컨트롤은 복잡한 구성 할 수 있습니다. 다음과 같이 보이는 FMX.Controls.TCheckBox를

고려해 보십시오:

checkboxstyle: TLayout (전체 컨트롤)

TLayout (박스의 레이아웃)

■ background: TRectangle (박스 자체, 실제로 구성입니다:)

■ TGlowEffect (컨트롤에 포커스가 가면 빛납니다.)

■ TRectangle (상자를 형성하는 외부 직사각형)

■ TRectangle (내부 직사각형.)

41

■ TColorAnimation (마우스가 위로 움직일 때 색상 애니메이션.)

■ TColorAnimation (다시 백 아웃 될 때 색상 애니메이션.)

o checkmark: TPath (박스 안에 체크, 경로로 그려지고)

■ TColorAnimation (체크가 on 또는 off로 토글링 될 때 색상 애니메이션.)

text: TText (텍스트 레이블.)

스타일은 이름을 지정하여 검색하고 사용할 수 있도록 합니다. 또한, 특정 하위 요소는 이름을

지정하여

참조 할 수 있습니다. IsChecked 속성이 토글 되면, " checkmark"는 변경된 가시성을 가지고 있습니다

(색상의 투명도를 불투명에서 투명으로 애니메이션으로)변경했습니다. TCheckBox의 Text를 지정하고

이름을 지정한 기본 TText의 Text 속성을 "text"로 지정합니다.

스타일 리소스 명명 및 참조

유사한 이름을 가진 두 개의 속성은 컨트롤, 그 스타일, 그 하위컴포넌트 사이의 링크를 형성합니다:

StyleName은 스타일이나 스타일 하위 컴포넌트가 알려져 있고, 발견 할 수 있는 이름입니다.

컨트롤의 StyleLookup 속성은 해당 스타일을 채택하기 위해 원하는 스타일의 이름으로

설정됩니다. 속성 값이 비어있는 경우, 기본 스타일이 사용됩니다.

하위 컴포넌트들은 원하는 이름을 사용하여 FindStyleResource를 호출하여 찾을 수 있습니다.

이 스타일을 작성할 수 있기 때문에 컨트롤은 두 속성을 가지고 있으며, 그것은 (또는 하나의 일부)

스타일이 될 수 있습니다.

모양이 같은 간단한 컴포넌트들은 스타일을 할 수 없고 단지 스타일 요소가 될 수 있습니다.

스타일 리소스 저장

폼에 대한 스타일의 컬렉션은 TStyleBook 오브젝트로 표현됩니다. 스타일 디자이너를 열 때(컨트롤에서

마우스 오른쪽 버튼으로 클릭하고 컨텍스트 메뉴에서 기본 스타일 편집 또는 사용자 지정 스타일 편집

명령 중 하나를 선택하여) 필요한 경우 하나가 자동으로 생성됩니다. 새로 만든 개체는 폼의 StyleBook

속성으로 설정되어 폼에 대한 효과가 발생 합니다

폼은 하나 이상의 TStyleBook 개체가 있을 수 있습니다. 폼의 StyleBook 속성은 한 번에 그 중 하나를

참조 할 수 있습니다, 또는 널 값으로 지정하여 하드 코딩 된 기본 스타일로 복구할 수 있습니다.

스타일 디자이너는 한 번에 하나의 TStyleBook의 스타일을 편집합니다. 폼 위의 TStyleBook을 더블

클릭하면 그 스타일로 스타일 디자이너가 오픈 됩니다. 스타일 디자이너은 .style 파일에 텍스트

형식으로 TStyleBook을 저장 할 수 있으며, 이러한 파일을 로드 할 수 있습니다. 하드 코딩 된 기본

스타일의 전체 세트는 스타일 디자이너에 로드 할 수 있습니다.

42

사용자 정의 스타일

새로운 스타일은 기본 스타일을 수정하거나 하나의 컴포넌트와 함께 처음부터 시작하여 만들 수

있습니다.

기본 스타일을 수정하려면, 화면 디자이너에서 컨트롤을 오른쪽 마우스 클릭하여 사용자 정의 스타일

편집을 선택합니다. 생성 된 스타일 이름은 컨트롤의 이름으로부터 파생되므로, 우선 컨트롤의 좋은

이름을 선택하여 단계를 절약 할 수 있습니다. 생성 된 이름이 컨트롤의 StyleLookup 속성으로

할당되어 컨트롤에 적용됩니다. 새로운 스타일은 컨트롤의 현재 스타일의 복사본입니다.

툴 팔레트에서 사용할 수 없는 컴포넌트도 사용하여 .style 파일을 수정하고 로드하여 완전히 새로운

스타일은 생성 할 수 있습니다. 예를 들면, 현재 스타일 세트를 저장한 후에, 파일을 편집하여 최종

끝나기 전에 추가합니다:

object TBrushObject

StyleName = 'somebrush'

end

중첩 스타일

스타일은 다른 스타일의 컴포넌트를 참조 할 수 있습니다. 항상 스타일은 TStyleBook에서의 최상위

이름으로 발견됩니다. 예를 들면, 동일한 기울기를 사용하기 위해:

1. 스타일 디자이너에서, 기존의 스타일을 .style 파일로 저장합니다.

2. 텍스트 에디터로 파일을 편집하여 TBrushObject를 생성합니다. 적절한 StyleName을 사용합니다.

3. .style 파일을 로드 합니다.

4. 새로 정의 된 스타일을 선택하면 오브젝트 인스펙터에 나타납니다.

5. Brush 속성을 오픈 합니다:

a. 브러시 디자이너를 사용하여 Gradient 속성을 편집합니다(속성값의 드롭-다운 메뉴에서

Edit를 선택합니다)

b. Kind 속성을 bkGradient로 설정합니다.

6. 기울기를 사용하는 각 컴포넌트에 대해서, 예를 들어, TRectangle의 Fill 속성을 사용하여:

a. Kind 속성을 bkResource로 설정합니다.

b. Resource 속성을 오픈 합니다 (TBrushResource):

i. StyleLookup 속성을 2 단계의 기울기 이름으로 설정합니다.

43

스타일 리소스 검색 순서

스타일을 검색하기 위해 컨트롤은 다음의 대략적인 순서로 진행합니다:

1. 폼의 StyleBook 속성이 지정되어 있다면, 2 개의 이름을 사용하여 TStyleBook을 검색합니다:

a. 설정 되어 있다면 컨트롤의 StyleLookup 속성.

b. 컨트롤의 클래스 이름에서 구성된 기본 이름:

i. 첫 글자를 버립니다(표준 클래스 이름 지정 방식의 접두사 'T'가 될 것임).

ii. 'style'을 추가합니다.

2. 하드 코딩 된 기본 스타일은 세 이름을 사용하여 검색됩니다:

a. 설정 되어 있다면 컨트롤의 StyleLookup 속성.

b. 컨트롤의 클래스 이름에서 구성된 기본 이름.

c. 컨트롤의 부모 클래스 이름에서 구성된 기본 이름, 같은 절차를 사용합니다.

예를 들면, TPanel 의 디폴트 이름은 "Panelstyle" 이고 TCalloutPanel의 기본 이름은"Controlstyle"

입니다. 디폴트 이름은 "CalloutPanelstyle" 과 "Panelstyle" 입니다.

이름 검색은 대소문자를 구분하지 않습니다. 이름 일치하는 것이 발견되지 않으면 컨트롤은 콘텐트가

없으며 효과적으로 보이지 않는 것입니다. 하위컴포넌트를 검색하는데 따르는 코드는 실패할 것입니다.

(즉, 모든 내장 컨트롤은 해당 하드 코딩 스타일을 가지고 있기 때문에, 불완전하거나 잘못 번들 된

사용자 지정 컨트롤에 대해서만 발생합니다. 내장 클래스의 1대 후손은 기본 클래스 내용을 가질

것이고 두 번째 세대 자손은 비어있을 것입니다.)

폼 스타일

TForm는 컨트롤 또는 TStyledControl의 하위 클래스는 아니지만, 또한 스타일 됩니다. TForm의

StyleLookup 속성값은 디폴트로 "backgroundstyle"입니다. StyleName을 사용하는 디폴트 스타일-

리소스는 회색 사각형입니다.

로드 될 때, 리소스의 Align 속성을 alContents로 지정하여 배경으로 폼을 채웁니다.

44

파이어몽키 애플리케이션 사용자 정의 설계

시각적 컴포넌트 라이브러리에서(VCL ), 오브젝트 인스펙터에서 각 컴포넌트의 느낌-관련 속성들과

색상과 다른 모습 등을 수정 할 수 있습니다. 단, 파이어몽키에서는 이러한 속성을 볼 수 없습니다.

파이어몽키에서 각 컴포넌트의 모양과 느낌은 스타일로 정의되며 컴포넌트에 스타일을 지정합니다.

스타일의 아이디어 때문에, 애플리케이션에 다른 스타일을 적용하여 지금 전체 애플리케이션의 모양과

느낌을 쉽게 변경할 수 있습니다.

다음은 애플리케이션에서 쉽게 사용 할 수 있도록 미리 정의되어 있는 파이어몽키

스타일들입니다(C:\Users\Public\Documents\RAD Studio\9.0\Styles):

Air.Style

Amakrits.Style

AquaGraphite.Style

Blend.Style

Dark.style

FMX.Platform.iOS.style

FMX.Platform.Mac.style

FMX.Platform.Win.style

GoldenGraphite.Style

iOS.Style

iOSNative.Style

Light.Style

Mac.Style

MacBlue.Style

MacGraphite.Style

RubyGraphite.style

Windows7.Style

애플리케이션 안에서 스타일을 선택하기 위해, 두 가지 일반적인 방법이 있습니다. 1 단계는 코드를

사용하여 런타임에 스타일을 전환 할 수 있는 방법에 대해 설명합니다. 2 단계는 프로그램을 설계하는

동안 스타일을 설정할 수 있는 방법과 프로그램에서 지정된 스타일을 포함하는 방법에 대해

설명합니다.

45

1 단계: 런타임 시에 프로그램에 기존의 스타일을 적용합니다.

참고: C:\Users\Public\Documents\RAD Studio\<9.0>\Samples\FireMonkey\ControlsDemo에서

예제를 볼 수 있습니다.

ControlsDemo 샘플 프로그램은 이미 많은 파이어몽키 컴포넌트를 가지고 있으며, 런타임에 스타일을

전환을 위한 코드는 이미 구현되어 있습니다.

이 데모 애플리케이션에서 이 기능을 사용하려면 File > Load Style…,를 클릭하고 스타일 파일을

선택합니다.

이 것은 새로운 스타일로 전환하기 위한 코드입니다:

procedure TfrmCtrlsDemo.MenuItem7Click(Sender: TObject);

begin

if OpenDialog1.Execute then

begin

Application.StyleFileName := OpenDialog1.FileName;

end;

end;

첫째, 이 데모 코드는 파일을 선택하기 위해 사용되는 “대화 상자 열기”를 보여줍니다. 코드에서

대화상자의 이름이 OpenDialog1로 되어있습니다. 사용자가 파일을 선택했을 때, Execute 메소드는

True값을 리턴 합니다. 이 코드는 처음에 사용자가 파일을 선택했는지 확인하고

OpenDialog1.Filename로부터(사용자가 선택한 파일 이름을 가지고) Application.StyleFileName에

스타일 파일의 이름을 지정합니다.

2 단계: 설계시점에 프로그램에 기존의 스타일 적용하기

또한 디자인 타임에 TStyleBook 컴포넌트를 통해 기존 스타일을 적용 할 수 있습니다. 설계 시점에

스타일을 적용하기 위해:

1. 폼 위에 TStyleBook 컴포넌트를 내려 놓습니다. 디폴트로, 새로운 컴포넌트 이름은 StyleBook1

입니다.

2. 파이어몽키 폼을 선택하여 StyleBook 속성을 StyleBook1로 지정합니다.

3. StyleBook1 컴포넌트를 더블 클릭합니다.

4. Load… 버튼을 클릭하여 스타일을 선택합니다. 스타일들은 C:\Program

46

Files(x86)\Embarcadero\RAD Studio\9.0\Redist\styles\Fmx 에서 사용할 수 있습니다.

5. Apply를 선택하고 닫습니다. 폼 디자이너의 새로운 컨트롤은 지정한 스타일을 사용하여 렌더링

됩니다.

3 단계: 특정 컴포넌트의 스타일 수정

또한 특정 컴포넌트에 대한 스타일을 사용자 정의 할 수 있습니다.

특정 컴포넌트의 스타일을 사용자 정의하기 위해:

1. 폼 디자이너에서 컴포넌트를 선택합니다.

2. 컴포넌트에서 오른쪽 마우스 클릭하여 Edit Custom Style… 옵션을 선택합니다.

3. 오브젝트 인스펙터를 통해 특정 스타일의 속성을 수정합니다. 오브젝트 인스펙터 안에 정의된

모든 속성을 수정 할 수 있습니다.

4. Apply를 선택하고 닫고 폼 디자이너로 돌아옵니다.

5. 컴포넌트를 선택했을 때(그 스타일이 사용자 정의된), (Panel1Style1)정의된 새로운 속성을 볼 수

있습니다.

6. 지금 동일한 스타일을 다른 컴포넌트에 적용할 수 있습니다. 다른 컴포넌트를 선택하여

StyleLookup 속성을 PanelStyle1로 설정합니다.

47

파이어몽키 원시 컨트롤 및 스타일 컨트롤

원시 컨트롤(Primitive Controls)

파이어몽키 원시 컨트롤들은 FMX. Objects.TShape에서 계승 받습니다. 따라서 그들은 그리는 방법을

알고 있습니다. 드로잉은 FMX. Types.TControl 에서 소개되었던 Paint 메소드에 의해 이루어지고 각

원시 컨트롤들에서 다시 오버라이드 됩니다.

원시 컨트롤의 모양과 느낌은 Fill, Stroke, StrokeCap, StrokeDash, StrokeJoin, 및 StrokeThickness 와

같은 자신의 속성에 의해 정의됩니다,

다음은 파이어몽키 원시 컨트롤들입니다:

FMX.Objects.TLine

FMX.Objects.TRectangle

FMX.Objects.TRoundRect

FMX.Objects.TEllipse

FMX.Objects.TCircle

FMX.Objects.TArc

FMX.Objects.TCustomPath

FMX.Objects.TText

파이어몽키 원시 컨트롤 작성은 자신의 파이어몽키 원시 컨트롤을 만들기 위한 단계별 지침을

제공합니다.

http://docwiki.embarcadero.com/RADStudio/en/Creating_a_FireMonkey_Primitive_Control

48

스타일 적용된 컨트롤

파이어몽키 스타일 된 컨트롤들은 모양과 느낌을 정의하지 않습니다. 대신, 속성을 가진 원시 컨트롤의

목록을 동적으로 선택하기 위해 스타일 파일 (또는 stylebook 컴포넌트에 의해 정의된 스타일)를

읽습니다. 따라서, 스타일 된 컨트롤은 애플리케이션이 새로운 스타일로 전환 할 때 모양과 느낌을

변경 할 수 있습니다. 새로운 스타일 정의를 로드 합니다).

TLayout (CheckBoxstyle)

TLayout

TRectangle (background)

TGlowEffect

TRectangle

TRectangle

TColorAnimation

TColorAnimation

TPath (checkmark)

TColorAnimation

TText (text)

스타일 적용된 컨트롤이 로드 될 때 오브젝트는 스타일이름으로 로드 됩니다('<classname>style).

컨트롤은 생성됩니다. 예를 들면:

objectTLayout

StyleName = 'checkboxstyle'

Position.Point = '(352,391)'

Width = 121.000000000000000000

Height = 21.000000000000000000

DesignVisible = False

objectTLayout

Align = alLeft

Width = 20.000000000000000000

Height = 21.000000000000000000

objectTRectangle

StyleName = 'background'

Align = alCenter

Position.Point = '(3,4)'

49

Locked = True

Width = 13.000000000000000000

Height = 13.000000000000000000

HitTest = False

Fill.Color = xFFEFEFEF

Stroke.Kind = bkNone

objectTGlowEffect

Trigger = 'IsFocused=true'

Enabled = False

Softness = 0.200000002980232200

GlowColor = x82005ACC

Opacity = 0.899999976158142100

end

objectTRectangle

Align = alContents

Locked = True

Width = 13.000000000000000000

Height = 13.000000000000000000

HitTest = False

Fill.Kind = bkGradient

Fill.Gradient.Points = <

item

Color = x5FA7A7A7

end

item

Color = x5FFFFFFF

Offset = 1.000000000000000000

end>

Stroke.Color = x90404040

end

objectTRectangle

Align = alContents

Position.Point = '(2,2)'

Locked = True

50

Width = 9.000000000000000000

Height = 9.000000000000000000

Padding.Rect = '(2,2,2,2)'

HitTest = False

Fill.Kind = bkNone

Stroke.Color = x30505050

end

objectTColorAnimation

Duration = 0.100000001490116100

Trigger = 'IsMouseOver=true'

StartValue = xFFEFEFEF

StopValue = xFFA5D9FF

PropertyName = 'Fill.Color'

end

objectTColorAnimation

Duration = 0.100000001490116100

Inverse = True

Trigger = 'IsMouseOver=false'

StartValue = xFFEFEFEF

StopValue = xFFA5D9FF

PropertyName = 'Fill.Color'

end

objectTPath

StyleName = 'checkmark'

Align = alCenter

Position.Point = '(2,2)'

Locked = True

Width = 9.000000000000000000

Height = 9.000000000000000000

HitTest = False

Fill.Color = claNull

Stroke.Kind = bkNone

Data.Path = {

1200000000000000000000000000000001000000CDCC4C3E0000000001000000

51

0000003F9A99993E01000000CDCC4C3F00000000010000000000803F00000000

010000000000803FCDCC4C3E010000003333333F0000003F010000000000803F

CDCC4C3F010000000000803F0000803F01000000CDCC4C3F0000803F01000000

0000003F3333333F01000000CDCC4C3E0000803F01000000000000000000803F

0100000000000000CDCC4C3F010000009A99993E0000003F0100000000000000

CDCC4C3E010000000000000000000000030000000000000000000000}

objectTColorAnimation

Duration = 0.100000001490116100

Trigger = 'IsChecked=true'

TriggerInverse = 'IsChecked=false'

StartValue = x00034E9E

StopValue = xFF034E9E

PropertyName = 'Fill.Color'

end

end

end

end

objectTText

StyleName = 'text'

Align = alClient

Position.Point = '(21,2)'

Locked = True

Width = 99.000000000000000000

Height = 19.000000000000000000

Padding.Rect = '(1,2,1,0)'

HitTest = False

Text = 'CheckBox'

end

end

52

그리드와 스트링그리드

그리드는 개발자가 자주 사용하는 써드-파티 컴포넌트 중 가장 대중적인 카테고리 중 하나입니다.

파이어몽키는 또한 TGrid 와 TStringGrid 2개의 그리드 컴포넌트를 포합합니다.

TGrid는 표 형식으로 여러 개체의 처리를 단순화하도록 설계된 그리드 컨트롤입니다.

표 형식으로 여러 오브젝트를 표시하기 위해 TGrid 컴포넌트를 폼에 추가합니다. TGrid는 특정

오브젝트 데이터를 포함하는 한 개 이상의 다음과 같은 칼럼을 가질 수 있습니다:

TCheckColumn—체크 박스를 셀에 보유합니다.

TImageColumn—그래픽 이미지를 셀에 보유합니다.

TPopupColumn—팝업 메뉴를 셀에 보유합니다.

TProgressColumn—진행 바를 셀에 보유합니다.

TStringColumn—문자열 값을 셀에 보유합니다.

문자열 값만 갖는 그리드가 필요하다면 대신에 TStringGrid를 사용합니다.

TStringGrid 문자열의 처리를 단순화하도록 설계된 그리드 컨트롤 입니다.

표 형식으로 텍스트 데이터를 표시하기 위해 폼에 TStringGrid 오브젝트를 추가합니다. TStringGrid는

그리드의 모양뿐만 아니라, 사용자 동작에 대한 반응에서 그리드의 표 조직을 활용하는 이벤트 및

메소드를 제어하기 위한 여러 속성을 제공합니다.

TStringGrid는 그리드에서 각 문자열로 개체를 연결할 수 있는 능력을 소개합니다. 이러한 개체는

표시되는 문자열로 표현된 정보나 동작을 캡슐화 할 수 있습니다, 영국의 엠바카데로 소프트웨어

컨설턴트 스티븐 볼은 최근 " 파이어몽키를 사용한 그리드 정복하기"라는 파이어몽키 그리드에 대한

훌륭한 블로그 게시물을 작성하였습니다.

http://blogs.embarcadero.com/stephenball/2012/05/29/getting-to-grips-with-using-firemonkey-grids/

53

자신의 블로그 게시물에서 스티븐은 말합니다: 그리드를 사용시 두 가지 핵심 이벤트가 있습니다:

OnGetValue 는 열과 행 값을 읽기 위해 사용합니다.

OnSetValue 는 그리드의 값으로 오브젝트를 수정하기 위해 사용됩니다.

다른 유용한 함수 호출은 TGrid.Realign로 - 그리드 다시 그리기를 보장하기 위해 외부적으로 개체를

관리할 때 이를 호출 할 수 있습니다. 이렇게 하면 그리드가 지속적으로 변경 사항을 업데이트하려고

하지 않고 가능한 빨리 프로세스가 실행되도록 그리드를 업데이트하기 전에 여러 변경 사항이

실행되도록 할 수 있습니다.

그리드 예제에 대한 스티븐의 데모 소스는 다음 링크를 사용하여 사용할 수 있습니다

http://cc.embarcadro.com/item/28894.

54

파이어몽키 애플리케이션 출력

윈도우 또는 맥 OS X에서 파이어몽키 애플리케이션을 인쇄 할 수 있습니다. FMX.Printer.TPrinter는

윈도우 및 맥 OS X 표준 프린터 인터페이스를 포함합니다.

애플리케이션에 의해 수행 된 인쇄를 관리 하기 위해 TPrinter를 사용합니다. 전역 Printer 함수를

호출하여 TPrinter의 인스턴스를 가져옵니다.

인쇄 작업이 BeginDoc 호출로 시작됩니다. 애플리케이션은 텍스트 변수 또는 프린터의 캔버스를 통해

렌더링하여 명령을 보냅니다. NewPage 메소드를 호출하여 새 페이지로 이동합니다. 애플리케이션이

EndDoc 호출 할 때까지 작업이 오픈 되어 유지됩니다. 문제가 발생하여 성공적으로 프린터로

전송되지 않은 인쇄 작업을 종료해야 한다면 즉, Abort 메소드를 호출합니다.

인쇄 작업을 구성하기 위해 TPrinter 속성을 사용합니다. 예를 들면, 인쇄 관리자에 표시된 제목은(및

네트워크 헤더 페이지) Title 속성에 의해 결정됩니다. Copies 속성은 인쇄 할 사본의 수를 결정하고,

Orientation 은 세로 또는 가로 모드로 인쇄할지 여부를 지정합니다.

TPrinter는 어느 페이지가 현재 인쇄되고 있는지, 프린터에서 사용할 수 있는 글꼴, 용지 크기 등을

알려주는 몇 가지 읽기 전용 속성을 포함합니다.

TPrinter의 자식 클래스를 만들 때, TPrinter 하위 개체가 올바르게 작동하려면 SetPrinter 루틴을

호출해야 합니다.

파이어몽키 애플리케이션에서 인쇄하기

다음 단계는 파이어몽키 애플리케이션에서 성공적으로 인쇄하는 방법을 보여드립니다.

인쇄 작업하는 폼의 Uses절에(델파이) FMX.Printer을 추가하거나 #include 지시자(C + + 빌더)를 통해

FMX.Printer.hpp을 포함합니다.

uses FMX.Printer;

#include "FMX.Printer.hpp"

항상 폼의 캔버스대신에 프린터 캔버스를 사용하거나 또는 그래픽 컴포넌트의 캔버스(예를 들어,

이미지의 캔버스)를 사용합니다. 프린터 캔버스를 사용하지 않을 때, 항상 BeginScene로 인쇄 작업을

시작하고 EndScene으로 인쇄 작업을 종료합니다.

인쇄 품질에 대한 모든 제어에 대한 캔버스 해상도와 이동성은 둘 다에게 값을 할당하거나

SelectDPImethod을 (권장 방법)를 호출하여 값을 지정합니다, ActiveDPIIndex을 처음으로 설정합니다.

Printer.ActivePrinter.SelectDPI(1200, 1200); { one way }

Printer.ActivePrinter.ActiveDPIIndex := 1; { another way }

Printer->ActivePrinter->SelectDPI(1200, 1200); // one way

Printer->ActivePrinter->ActiveDPIIndex = 1; // another way

55

BeginDoc로 실제 인쇄 작업을 시작합니다.

Printer.BeginDoc;

Printer->BeginDoc();

EndDoc로 실제 인쇄 작업을 종료합니다.

Printer.EndDoc;

Printer->EndDoc();

인쇄 작업 하는 동안 ActiveDPIIndex는 절대 변하지 않습니다.

DPI 및 드라이버 지원에 대해서 동일한 프린터에 대한 드라이버 지원은 다른 플랫폼과 크게 다릅니다

(윈도우, 맥 OS X). 결과적으로, 윈도우 및 맥 OS X 사이에 DPI 배열에서 지원되는 해상도의 수 또는

순서가 동일하다는 사실에 의존해서는 안됩니다. 예를 들어, 윈도우를 위한 7 가지 해상도가 있는 반면

맥 OS X에서 HP 레이저 프린터를 위한 단 3가지 지원 해상도가 있습니다. 윈도우 및 맥 OS X

모두에서 인쇄 기능을 가진 애플리케이션이 있는 경우, 인쇄 출력이 두 플랫폼에서 합리적으로

유사하게 인쇄하기 위해 코드를 (주로 DPI를 지정하는)를 추가해야 합니다.

가장 좋은 방법은 인쇄하기 전에 위의 단계에서 언급한 것처럼 ActiveDPIIndex 속성을 설정하거나

SelectDPI 메서드를 호출하여 항상 DPI를 지정하는 것입니다.

ActiveDPIIndex가 주어진 프린터에 대한 기본 DPI로 설정되지 않는다는 점을 참고하십시오.

TPrinterDevice 오브젝트는 몇 가지 맥 OS X의 프린터 드라이버가 특별히 디폴트 값을 주지 않기

때문에 기본 DPI를 지원하지 않습니다. 이 때문에 애플리케이션이 시작될 때 모든 TPrinterDevice

오브젝트의 ActiveDPIIndex값은, -1로 설정되어 있습니다. -1값은 마지막 인쇄 DPI나 기본 DPI를

사용하는 것을 의미합니다. 프로그램이 시작한 후에는, 다른 인덱스 값으로 ActiveDPIIndex을 변경하지

않고 BeginDoc를 호출하지 않은 경우에만 기본 DPI를 사용할 수 있습니다.

반면에, -1로 ActiveDPIIndex를 설정할 수 있으며, 애플리케이션은 이전에 설정 한 프린터의 마지막

DPI를 사용합니다. 윈도우 및 맥 OS X 모두에 동일한 캔버스 크기를 원하기 때문에 BeginDoc를

호출하기 전에 항상 ActiveDPIIndex에 값을 설정하는 것을 잊지 말아야 합니다.

SelectDPI 메소드는 TPrinter 객체가 SelectDPI로 전달되는 매개 변수에 따라 프린터에 가장 근접한

해상도를 선택하도록 사용하기 매우 쉽습니다. 예를 들어, Printer.ActivePrinter.Select (600, 600),

ActiveDPIIndex 속성을 직접 설정하는 대신 SelectDPI 메소드로 설정하는 것은 매우 쉬운 일입니다.

윈도우에서 드라이버에 의해보고 된 프린터 해상도의 수가 맥 OS X 프린터 드라이버에서 보고 된

수와 다르다는 사실을 감안할 때, 지정된 인덱스는 사용할 수 없습니다.

결과적으로, SelectDPI를 사용하여 인쇄 DPI 설정하는 것이 더 편리한 방법입니다.

56

캔버스 프린터

스크린이나 윈도우(폼) 캔버스에 비해 프린터 캔버스 사용에는 많은 차이가 있습니다::

프린터 캔버스를 사용할 때, Canvas.Fill을 사용하여 색상을 지정하고 환경 설정을 작성해야

합니다.

(Canvas.Fill.Color:= claXXX; and Canvas.Fill.Kind:=TBrushKind.bkSolid;).

스크린이나 윈도우 캔버스를 사용할 때, Canvas.Stroke을 사용하여 색상을 지정하고 환경

설정을 작성합니다.

(Canvas.Stroke.Color:= claXXX; and Canvas.Stroke.Kind := TBrushKind.bkSolid;).

다음을 기억 하십시오:

텍스트를 인쇄하고 그 색을 변경하려는 경우 Canvas.Fill을 사용합니다..

텍스트를 제외한, 다른 것을 그릴 때 Canvas.Stroke을 사용합니다.

투명도를 지원하는 모든 루틴에(FMX.Types3D.TContext3D.FillRect 와 같은)서 투명도 매개 변수는 부동

소수점 0..1 범위 내에서 값을 갖습니다(0 투명 1은 불투명 임). 이 범위 밖의 값은 지정할 수 없습니다.

프로그래밍 인쇄 예제

다음의 예제는 이미지와 버튼을 사용합니다. 버튼을 클릭할 때마다 이미지가 프린터에 인쇄됩니다.

// Delphi

procedure TMyForm.PrintButtonClick(Sender: TObject);

var

SrcRect, DestRect: TRectF;

begin

{ Set the default DPI for the printer. The SelectDPI

routine defaults to the closest available resolution

as reported by the driver. }

Printer.ActivePrinter.SelectDPI(1200, 1200);

{ Set canvas filling style. }

Printer.Canvas.Fill.Color := claBlack;

Printer.Canvas.Fill.Kind := TBrushKind.bkSolid;

{ Start printing. }

Printer.BeginDoc;

57

{ Set the Source and Destination TRects. }

SrcRect := Image1.LocalRect;

DestRect := TRectF.Create(0, 0,

Printer.PageWidth, Printer.PageHeight);

{ Print the picture on all the surface of the

page and all opaque. }

Printer.Canvas.DrawBitmap(Image1.Bitmap, SrcRect, DestRect, 1);

{ Finish printing job. }

Printer.EndDoc;

end ;

// C++

void __fastcall TMyForm::PrintButtonClick(TObject *Sender)

{

TRectF SrcRect, DestRect;

TPrinter *Printer = Printer;

/* Set the default DPI for the printer. The SelectDPI

routine defaults to the closest available resolution

as reported by the driver. */

Printer->ActivePrinter->SelectDPI(1200, 1200);

/* Set canvas filling style. */

Printer->Canvas->Fill->Color = claBlack;

Printer->Canvas->Fill->Kind = TBrushKind(1);

/* Start printing. */

Printer->BeginDoc();

/* Set the Source and Destination TRects. */

SrcRect = Image1->LocalRect;

DestRect = TRectF(0, 0,

Printer->PageWidth, Printer->PageHeight);

/* Print the picture on all the surface of the

page and all opaque. */

Printer->Canvas->DrawBitmap(Image1->Bitmap,

SrcRect, DestRect, 1);

/* Finish the printing job. */

Printer->EndDoc();

}

58

인쇄 API에 대한 자세한 내용은 FMX.Printer 유니트에서 API 문서를 참조하십시오.

엠바카데로 DocWiki 다음 위치에 다른 델파이 인쇄 예제가 실려있습니다.

http://docwiki.embarcadero.com/CodeExamples/en/FMX.FlagsPrinting_Sample 설치 디렉터리의

C:\Users\Public\Documents\RAD Studio\9.0\Samples\FireMonkey\FlagsPrinting 에서 델파이 샘플

프로그램을 사용할 수 있습니다.

59

TLang를 사용하여 파이어몽키 다국적 언어 UI지원

TLang 컴포넌트를 사용하여 파이어몽키 HD 애플리케이션에서 문자열을 지역화 할 수 있습니다.

TLang을 사용하여 애플리케이션의 지역화를 위해 번역되는 문자열의 목록을 정의합니다. 툴

팔레트에서 TLang 컴포넌트를 폼 위에 추가하고 더블 클릭하여 언어 디자이너(Language Designer)를

엽니다.

언어 디자이너는 프로그램의 모든 문자열을 찾아 번역되는 언어의 목록을 추가 할 수 있습니다. 원래

문자열은 첫 번째 열에 배치되어 있으며 두 번째 열에 번역내용을 삽입 할 수 있습니다.

언어 디자이너에서 “Save lng-file...”을 클릭하여, 파일에 있는 모든 TLang 문자열을 저장할 수

있습니다. 또한 디자이너는 “Load lng-file....”을 클릭하여 기존의 언어 파일을 사용할 수 있도록

해줍니다.

엠바카데로 DocWiki에 TLang를 사용하는 예제 프로그램을 살펴보십시오.

http://docwiki.embarcadero.com/CodeExamples/XE2/en/FMX TLang_(Delphi)

http://docwiki.embarcadero.com/CodeExamples/XE2/en/FMX TLang_(C%2B%2B)

60

요약, 전망, 해야 할 일, 참고자료

5장에서 윈도우, 맥에 대한 HD 애플리케이션을 작성하는 방법을 배웠습니다. 보기 좋은 HD

프로그램을 작성하기 위해 스타일 및 다양한 컴포넌트를 사용하는 레이아웃에 대해 배웠습니다.

6장에서는, UI 컨트롤을 데이터베이스에 연결 하는 방법에 대해 배우겠습니다.

한편, 5장에서 배운 내용을 향상시키고 6 장을 준비하기 위해 보아야 할 동영상, 읽어야 할 기사, 몇

가지 해야 할 일이 있습니다.

해야 할 일

RAD Studio에 포함 되어 있는 HD 예제 애플리케이션을 살펴보세요. ControlsDemo의 예제를 보고

다양한 UI 컴포넌트의 모습과 작업이 어떻지 살펴봅니다.

참고 자료 링크

코스 시작하기 방문페이지 -

http://www.embarcadero.com/firemonkey/firemonkey-e-learning-series

파이어몽키 애플리케이션 플랫폼 -

http://docwiki.embarcadero.com/RADStudio/en/FireMon key_Application_Platform

파이어몽키 유튜브 자습서 시리즈 -

http://www.youtube.com/playlist?list=PL19268CFB728C1EFF

델파이:

SourceForge에 있는 RAD Studio 델파이 예제 프로그램 -

http://radstudiodemos.svn.sourceforge.net/viewvc/radstudiodemos/branches/RadStudio_XE2/Fi

reMonkey/

C++:

RAD Studio C ++ SourceForge에 있는 예제 프로그램 -

http://radstudiodemos.svn.sourceforge.net/viewvc/radstudiodemos/branches/RadStudio_XE2/C

PP/FireMonkey/

이 장은 “윈도우와 맥 개발의 시작을 위한 파이어몽키 코스북”의 5장 내용 전체입니다. 코스북

전체를 PDF로 무료 다운로드 받을 수 있습니다. http://tech.devgear.co.kr/13556