2015년 12월 29일 온라인으로 진행된 '파이어몽키 레이아웃 이해와 활용' 세미나 발표자료입니다. 세미나는 현재 다시보기를 통해 확인하실 수 있습니다: https://goo.gl/YeB2Ex​

1. embt.co/sprint-fmx-layoutsBlog Notes:
파이어몽키 레이아웃 이해와 활용
Developer Skill Sprint
Tips, Tricks and Techniques
윈도우10, 맥, 모바일 그리고 사물인터넷 개발을 위한
최고의 애플리케이션 개발 플랫폼
김현수(험프리)
RAD Studio 에반젤리스트
데브기어
tech.devgear.co.kr
hskim@embarcadero.kr

2. embt.co/sprint-fmx-layoutsBlog 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을 지원합니다.

3. embt.co/sprint-fmx-layoutsBlog Notes:
Agenda
• 하나의 폼으로 다양한 해상도 지원
• 앵커(Anchor)
• 정렬(Alignment)
• 공백(Spcaing)
• 레이아웃(Layout)
• 그 이상
FMX 레이아웃: http://embt.co/fmxlayouts

4. embt.co/sprint-fmx-layoutsBlog Notes:
앵커(Anchor)
• 부모의 가장자리에서의 상대적인 위치
– Top
– Bottom
– Left
– Right
• 기본으로 Top, Left
• 부모의 크기변경에 따라 이동
• 각 컨트롤들은 0~4개의 앵커
DocWiki: http://embt.co/fmxanchors

5. embt.co/sprint-fmx-layoutsBlog 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

6. embt.co/sprint-fmx-layoutsBlog Notes:
공백 – 마진(Margin)과 패딩(Padding)
• 마진(Margin)
– 형재(부모)와의
공백http://embt.co/fmxmargin
s
• 패딩(Padding)
– 자식과의 공백
– http://embt.co/fmxpadding

7. embt.co/sprint-fmx-layoutsBlog Notes:
TFlowLayout
• 같은 자식 컨트롤의 정렬
• 추가된 순서로 레이아웃 정렬
• TFlowLayoutBreak 이용 강제 줄바꿈
DocWiki: http://embt.co/tflowlayout

8. embt.co/sprint-fmx-layoutsBlog Notes:
TGridLayout
• 동일한 크기의 그리드안에 자식 컨트롤 정렬
• 부모의 크기 조절로 그리드 정렬
• ItemWidth와 ItemHeight속성 이용
• 개별 컨트롤 마진으로 여백 지정
DocWiki : http://embt.co/tgridlayout

9. embt.co/sprint-fmx-layoutsBlog Notes:
TGridPanelLayout
• 특정 행과 열의 그리드 생성
• 자식의 앵커 또는 크기 변경하지 않음
• 각 셀마다 하나의 자식 컨트롤 보유
• 자식의 높이, 너비, 정렬과 앵커 설정 가능
• 컨트롤이 여러 행과 셀을 차지할 수 있음
DocWiki : http://embt.co/tgridpanellayout

10. embt.co/sprint-fmx-layoutsBlog Notes:
TScaledLayout
• 크기 변경 시 자식 컨트롤 비율 적용
• 컨트롤의 가로/세로 비율이 유지되지 않음
• 가로/세로 비율을 유지하려면 Align을 Fit으로 설정
DocWiki: http://embt.co/tscaledlayout

11. embt.co/sprint-fmx-layoutsBlog Notes:
TScrollBox
• 자식들은 부모보다 많은 공간 활용
• 일반적으로 Top, Left 기준으로 자식들을 배치
• 스크롤해 추가 자식들 표시
• 참조:
– TVertScrollBox, THorzScrollBox, TFramedScrollBox and
TFramedVertScrollBox
– DocWiki: http://embt.co/tscrollbox

12. embt.co/sprint-fmx-layoutsBlog Notes:
TTabControl
• 컨트롤을 탭의 자식 컨트롤로 그룹
• 한번에 하나의 탭만 표시
• TabPosition := PlatformDefault으로 플랫폼의 기본동작
사용
• TabPosition := None 탭 네이비게이션 숨김
• TTabChangeAction 이용해 전환 애니메이션
DocWiki: http://embt.co/usingttabcontrol

13. embt.co/sprint-fmx-layoutsBlog Notes:
프레임(Frames)
• 사용자 인터페이스 재사용
– 레이아웃과 모든 이벤트 핸들러
– 유닛의 모든 코드
• 하나 또는 여러개의 프레임을 만들고,
현재 레이아웃 기반으로 위치변경
– 예:
• 모바일에서는 한화면 씩 표시
• 태블릿에서는 나란히 화면 표시
DocWiki: http://embt.co/workingwithframes
https://commons.wikimedia.org/wiki/File:Oil_painting_frame_Wellcome_L0067855.jpg

14. embt.co/sprint-fmx-layoutsBlog Notes:
TMultiView
• 여러 모드를 제공하는 슈퍼 패널
• 지원모드
– PlatformDefault
– Drawer
– NavigationPane
– Panel
– Popover
– Custom
• MasterPane, DetailPane, MasterButton 지정
• PlatformDefault로 플랫폼 및 방향 지정
• 사용자 정의 레이아웃과 동작 지원
DocWiki: http://embt.co/usingmultiview

15. embt.co/sprint-fmx-layoutsBlog Notes:
데모
트라이얼 무료
다운로드!!
devgear.co.kr/products/

16. embt.co/sprint-fmx-layoutsBlog 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/

17. embt.co/sprint-fmx-layoutsBlog 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/