embt.co/sprint-fmx-layouts Blog Notes:

파이어몽키 레이아웃 이해와 활용

Developer Skill Sprint

Tips, Tricks and Techniques

윈도우10, 맥, 모바일 그리고 사물인터넷 개발을 위한

최고의 애플리케이션 개발 플랫폼

김현수(험프리)

RAD Studio 에반젤리스트 데브기어

tech.devgear.co.kr

hskim@embarcadero.kr

embt.co/sprint-fmx-layouts Blog Notes:

• Windows

• OS X

• Android

• iOS

• RAD Studio

• Appmethod

• Object Pascal

• C++

스킬 스프린트의 대상은…

• RAD Studio 10 Seattle DocWiki – http://docwiki.embarcadero.com/RADStudio/Seattle/en/

• Appmethod Summer 2015 Release DocWiki – http://docwiki.appmethod.com/appmethod/1.17/topics/en/

• 데브기어 기술 게시판 – http://tech.devgear.co.kr/

• 앱메소드는 4개의 플랫폼에서 파이어몽키

프레임워크를 지원하며, RAD 스튜디오,

델파이, C++빌더는 4개 플랫폼 외에 윈도우

VCL을 지원합니다.

embt.co/sprint-fmx-layouts Blog Notes:

Agenda

• 하나의 폼으로 다양한 해상도 지원

• 앵커(Anchor)

• 정렬(Alignment)

• 공백(Spcaing)

• 레이아웃(Layout)

• 그 이상 FMX 레이아웃: http://embt.co/fmxlayouts

embt.co/sprint-fmx-layouts Blog Notes:

앵커(Anchor)

• 부모의 가장자리에서의 상대적인 위치

– Top

– Bottom

– Left

– Right

• 기본으로 Top, Left

• 부모의 크기변경에 따라 이동

• 각 컨트롤들은 0~4개의 앵커

DocWiki: http://embt.co/fmxanchors

embt.co/sprint-fmx-layouts Blog Notes:

정렬(Alignment)

• 앵커, Size와 Position 설정에 따라 부모안에서 컨트롤 정렬. 기본값은 None.

• 가장자리 채우기 – Top, Bottom, Left, Right

• 정사각형을 유지하며 부모 채우기 – Fit, FitLeft, FitRight

• 부모의 한쪽면을 채우기 – MostBottom, MostTop, MostLeft, MostRight

• 하나의 축으로만 크기 조정(Width 또는 Height) – Vertical, VertCenter, Horizontal, HorzCenter

• 기타 정렬 – Client, Center, Contents, Scale

DocWiki: http://embt.co/fmxalignlayout

embt.co/sprint-fmx-layouts Blog Notes:

공백 – 마진(Margin)과 패딩(Padding)

• 마진(Margin) – 형재(부모)와의

공백http://embt.co/fmxmargin

s

• 패딩(Padding) – 자식과의 공백

– http://embt.co/fmxpadding

embt.co/sprint-fmx-layouts Blog Notes:

TFlowLayout

• 같은 자식 컨트롤의 정렬

• 추가된 순서로 레이아웃 정렬

• TFlowLayoutBreak 이용 강제 줄바꿈

DocWiki: http://embt.co/tflowlayout

embt.co/sprint-fmx-layouts Blog Notes:

TGridLayout

• 동일한 크기의 그리드안에 자식 컨트롤 정렬

• 부모의 크기 조절로 그리드 정렬

• ItemWidth와 ItemHeight속성 이용

• 개별 컨트롤 마진으로 여백 지정

DocWiki : http://embt.co/tgridlayout

embt.co/sprint-fmx-layouts Blog Notes:

TGridPanelLayout

• 특정 행과 열의 그리드 생성

• 자식의 앵커 또는 크기 변경하지 않음

• 각 셀마다 하나의 자식 컨트롤 보유

• 자식의 높이, 너비, 정렬과 앵커 설정 가능

• 컨트롤이 여러 행과 셀을 차지할 수 있음

DocWiki : http://embt.co/tgridpanellayout

embt.co/sprint-fmx-layouts Blog Notes:

TScaledLayout

• 크기 변경 시 자식 컨트롤 비율 적용

• 컨트롤의 가로/세로 비율이 유지되지 않음

• 가로/세로 비율을 유지하려면 Align을 Fit으로 설정

DocWiki: http://embt.co/tscaledlayout

embt.co/sprint-fmx-layouts Blog Notes:

TScrollBox

• 자식들은 부모보다 많은 공간 활용

• 일반적으로 Top, Left 기준으로 자식들을 배치

• 스크롤해 추가 자식들 표시

• 참조: – TVertScrollBox, THorzScrollBox, TFramedScrollBox and

TFramedVertScrollBox

– DocWiki: http://embt.co/tscrollbox

embt.co/sprint-fmx-layouts Blog Notes:

TTabControl

• 컨트롤을 탭의 자식 컨트롤로 그룹

• 한번에 하나의 탭만 표시

• TabPosition := PlatformDefault으로 플랫폼의 기본동작

사용

• TabPosition := None 탭 네이비게이션 숨김

• TTabChangeAction 이용해 전환 애니메이션

DocWiki: http://embt.co/usingttabcontrol

embt.co/sprint-fmx-layouts Blog Notes:

프레임(Frames)

• 사용자 인터페이스 재사용

– 레이아웃과 모든 이벤트 핸들러

– 유닛의 모든 코드

• 하나 또는 여러개의 프레임을 만들고,

현재 레이아웃 기반으로 위치변경

– 예:

• 모바일에서는 한화면 씩 표시

• 태블릿에서는 나란히 화면 표시

DocWiki: http://embt.co/workingwithframes

https://commons.wikimedia.org/wiki/File:Oil_painting_frame_Wellcome_L0067855.jpg

embt.co/sprint-fmx-layouts Blog Notes:

TMultiView

• 여러 모드를 제공하는 슈퍼 패널

• 지원모드 – PlatformDefault

– Drawer

– NavigationPane

– Panel

– Popover

– Custom

• MasterPane, DetailPane, MasterButton 지정

• PlatformDefault로 플랫폼 및 방향 지정

• 사용자 정의 레이아웃과 동작 지원

DocWiki: http://embt.co/usingmultiview

embt.co/sprint-fmx-layouts Blog Notes:

데모

트라이얼 무료 다운로드!!

devgear.co.kr/products/

embt.co/sprint-fmx-layouts Blog Notes:

학습 리소스

• CodeRage 다시보기 – http://embt.co/coderage_fireui

– http://embt.co/coderage_win10_ui

• 엠바카데로

기술문서(DocWiki)

– 총괄: http://embt.co/fmxlayouts

– 레이아웃

• http://embt.co/tflowlayout

• http://embt.co/tgridlayout

• http://embt.co/tgridpanellayout

• http://embt.co/tscaledlayout

• http://embt.co/tscrollbox

– 관련 상세내용 • http://embt.co/fmxanchors

• http://embt.co/fmxalignlayout

• http://embt.co/fmxmargins

• http://embt.co/fmxpadding

– 추가 참조

• http://embt.co/usingttabcontrol

• http://embt.co/workingwithframes

• http://embt.co/usingmultiview

트라이얼 무료 다운로드!!

devgear.co.kr/products/

embt.co/sprint-fmx-layouts Blog Notes:

Q&A

Developer Skill Sprint

Tips, Tricks and Techniques

The Ultimate Application Development platform for

Widows 10, Mac, Mobile and IoT

감사합니다

김현수(험프리)

RAD Studio 에반젤리스트 데브기어

hskim@embarcadero.kr

트라이얼 무료 다운로드!!

devgear.co.kr/products/