Jump to content
과거의 기술자료(읽기 전용): https://tech.devgear.co.kr ×
과거의 기술자료(읽기 전용): https://tech.devgear.co.kr

  • VCL과 FMX에서 두 프레임워크 모두에서 사용할 수 있는 UI 컨트롤 개발하기(Bruno Fierens)

    Kori

    By Kori

     공유하기

    CodeRage XI의 세션 중 "Developing User Interface Controls for Both VCL and FMX with Bruno Fierens"를 번역했습니다.

    VCL 및 FMX 애플리케이션에서 사용할 수 있는 커스텀 UI(사용자 인터페이스) 컨트롤을 만들려고 할 때 당면하는 과제와 해결책을 알아본다. 이 세션에서는 VCL과 FMX 프레임워크의 차이 중 커스텀 UI 컨트롤 개발과 관련된 사항들을  설명한다. 그리고 이러한 차이점을 고려하여 단일 소스 코드 기반으로 VCL과 FMX 애플리케이션 모두에 사용할 수 있는 커스텀 UI 컨트롤을 만들 수 있는 추상화 계층인 FNC(프레임워크 중립 컴포넌트)를 소개한다. 데모들 통해 샘플 컨트롤을 차근차근 만드는 과정을 모두 보여준다. 그리고 같은 방식으로 이미 tmssoftware.com에서 제작하여 제공하고 있는 컨트롤들에 대한 개요를 안내한다.

    원본 비디오 (총 57분)

     

    목차

    Q&A

     

    크로스-프레임워크 UI 컨트롤 개요

    크로스-프레임워크 UI 컨트롤의 장점

    • 친숙함: 학습 곡선 없음
    • 서로 다른 프레임워크를 사용하는 프로젝트 간에 (비즈니스 로직 뿐만 아니라) UI 코드도 호환할 수 있음
    • 하나의 견고하고 신뢰할 수 있는 UI 컨트롤 세트를 보유 (서로 다른 구현 여러개를 따로 관리할 필요 없음)
    • VCL, FMX 기본 컨트롤들(TEdit, TListBox, TButton, TLabel, ...)은 코드 인터페이스 수준에서 이미 어느 정도 구현이 같음


    UI 컨트롤 아키텍처 / 모델

    • UI 컨트롤 입력 (키보드, 마우스, 터치, 스크롤, 드래그&드롭)
    • UI 컨트롤 표현 (그리기)
    • UI 컨트롤 데이터-바인딩


    UI 컨트롤 환경

    델파이와 C++빌더 IDE에 설치되고 개발 화면과 실행 중에 사용가능하며 VCL과 FMX 프레임워크 모두에서 사용 가능함

     

    VCL 프레임워크와 FMX 프레임워크 간의 차이로 인한 어려움 

    당면 과제 1: 클래스 계층

    [VCL]

        uses 
          Classes, VCL.Controls;

        TMyControl = class(TCustomControl)

    [FMX]

        uses
          Classes, FMX.Controls;

        TMyControl = class(TControl)

     

    당면 과제 2: '동일한' 클래스 이름을 IDE에 동시에 설치하는 문제

        package VCLPack;

        requires
           rtl,
           vcl;

        contains
          VCL.MyControl in 'VCL.MyControl.pas';
        end.


        package FMXPack;

        requires
          rtl,
          fmx;

        contains
           FMX.MyControl in 'FMX.MyControl.pas';
        end.

    컨트롤 유닛 파일이 달라야 함. 동시에 여러 곳에 설치되는 패키지 안에서는 같은 유닛을  사용할 수 없음 (해결할 트릭이 필요함)

     

    당면 과제 3: 프레임워크 사이의 차이점

    • 프레임워크는 운영 체제(OS)을 추상화 해 놓은 것이다
    • RTL 코드와 프레임워크 코드를 가능한 많이 사용하는 것이 바람직하다
    • 프레임워크는 서로 다른 운영 체제 간의 차이점을 추상화 한다

     

    VCL 프레임워크와 FMX 프레임워크 간의 차이점 상세

    프레임워크 간의 차이점 상세: 좌표(coordinate) 체계

    [VCL]

    • 정수 기반 좌표 체계

    [FMX]

    • 부동 소수점 기반 좌표 체계
    • FMX는 배율 확대(scaling) 및 회전(rotation) 가능

    그리기(painting)과 마우스 다루기에 영향을 줌

     

    프레임워크 간의 차이점 상세: 기본적인 클래스들이 다름

    서로 다른 타입들이 많다. 그 중 몇 가지는 성가실 정도로 다르다.

    [VCL]

    • TFont: color 프로퍼티가 있음 

    [FMX]

    • TFont: color 프로퍼티가 없음, TFill을 사용해서 텍스트에 색상을 반영함

     

    프레임워크 간의 차이점 상세: UI 입력 다루기

    필수적인 키보드 입력과 마우스 입력에 대한 서명(Signature, 파라미터)이 다름

    [VCL]
        procedure MouseDown(Button: TMouseButton; Shift: TShiftState; X, Y: Integer); override;
        procedure MouseMove(Shift: TShiftState; X, Y: Integer); override;
        procedure MouseUp(Button: TMouseButton; Shift: TShiftState; X, Y: Integer); override;
        procedure KeyDown(var Key: Word; Shift: TShiftState); override;
        procedure KeyPress(var Key: Char); override;
        procedure KeyUp(var Key: Word; Shift: TShiftState); override;

    [FMX]
        procedure MouseDown(Button: TMouseButton; Shift: TShiftState; X, Y: Single); override;
        procedure MouseMove(Shift: TShiftState; X, Y: Single); override;
        procedure MouseUp(Button: TMouseButton; Shift: TShiftState; X, Y: Single); override;
        procedure KeyDown(var Key: Word; var KeyChar: WideChar; Shift: TShiftState); override;
        procedure KeyUp(var Key: Word; var KeyChar: WideChar; Shift: TShiftState); override;

     

    프레임워크 간의 차이점 상세: UI 입력 다루기

    더 심하게는,

    [VCL]

        procedure WMGetDlgCode(var Message: TWMGetDlgCode); 
        message WM_GETDLGCODE;
        procedure DragDrop(Source: TObject; X, Y: Integer); override;

    [FMX]

        procedure DialogKey(var Key: Word; Shift: TShiftState); override;
        procedure DragDrop(const Data: TDragObject; const Point: TPointF); override;

     

    프레임워크 간의 차이점 상세: UI 그리기(painting)

    [VCL]

        Control.Canvas: TCanvas

          VCL.Graphics
            TCanvas = class(TCustomCanvas) 

    [FMX]
        Control.Canvas: TCanvas

          FMX.Graphics
            TCanvas = class abstract(TInterfacedPersistent)


    프레임워크 간의 차이점 상세: UI 캔버스(canvas)

    [VCL]

    •    TCanvas는 윈도우에서 GDI를 감싼 래퍼(wrapper)이다 
    •    정수 좌표 체계
    •    24bit 색상 공간 + 시스템 색상
    •    TBrush, TPen
    •    MoveTo()/LineTo()
    •    Rectangle()
    •    Polyline(), Polygon()
    •    + 더 많은 차이점이 있음

    [FMX]

    •    TCanvas는 OpenGL, Quartz, GDI+ 등 여러 가지를 하나로 둘러싼 래퍼(wrapper)이다. 
    •    부동 소수점 좌표 체계
    •    32bit 색상 공간 + 투명도(opacity)
    •    TFill, TStroke
    •    DrawLine()
    •    FillRect()
    •    DrawPolygon() / FillPolygon()
    •    + 더 많은 차이점이 있음


    프레임워크 간의 차이점 상세: 목적이 같은데 타입은 다름

    [VCL]

       TColor: clRed, clYellow, clGreen, ...

       Key : VK_F1, VK_DELETE, VK_UP, ...

       TAlignment : taLeftJustify, taCenter, taRightJustify

    [FMX]
      
       TAlphaColor: claRed, claYellow, claGreen, ...

       Key : VKF1, VKDELETE, VKUP, ...

       TTextAlign = (Center, Leading, Trailing);


    프레임워크 간의 차이점 상세: 이미지 파일 유형 지원

    [VCL]

    • TBitmap: Windows BMP files
    • TPicture: 기반 클래스와 자손 클래스들로 구성됨  
    • TPNGImage, TJPEGIImage, TGIFImage

    [FMX]

    • TPicture: BMP, GIF, JPEG, PNG를 지원 

     

    FNC (Framework Neutral Components, 프레임워크 중립 컴포넌트 세트) 개요

    FNC 기반 요소 개요

    기반(Base) 클래스들:

    • TTMSFNCCustomControl
    • TTMSFNCCustomScrollControl
    • TTMSFNCCustomComponent

    기반(Base) 그래픽 라이브러리:

    • TTMSFNCGraphics

    FNC 공통(common) 타입들:

    •   TTMSFNCGraphics: Canvas
    •   TTMSFNCGraphicsStroke: line style, width, color
    •   TTMSFNCGraphicsFill: solid, gradient fill
    •   TTMSFNCGraphicsFont: font with suppor for text color
    •   TTTMSFNCGraphicsColor: gcRed, gcGreen, ...
    •   TTMSFNCBitmap: one class covering BMP,JPEG,PNG,IMG support 


    FNC 기반 (base) 컨트롤 클래스들 

     TTMSFNCCustomControl 클래스와 해당 가상(virtual) 메서드(method)들

      protected
        procedure HandleMouseLeave; virtual;
        procedure HandleMouseEnter; virtual;
        procedure HandleMouseDown({%H-}Button: TTMSFNCMouseButton; {%H-}Shift: TShiftState; {%H-}X, {%H-}Y: Single); virtual;
        procedure HandleMouseMove({%H-}Shift: TShiftState; {%H-}X, {%H-}Y: Single); virtual;
        procedure HandleDblClick({%H-}X, {%H-}Y: Single); virtual;
        procedure HandleMouseUp({%H-}Button: TTMSFNCMouseButton; {%H-}Shift: TShiftState; {%H-}X, {%H-}Y: Single); virtual;
        procedure HandleKeyPress(var {%H-}Key: Char); virtual;
        procedure HandleKeyDown(var {%H-}Key: Word; {%H-}Shift: TShiftState); virtual;
        procedure HandleDialogKey(var {%H-}Key: Word; {%H-}Shift: TShiftState); virtual;
        procedure HandleKeyUp(var {%H-}Key: Word; {%H-}Shift: TShiftState); virtual;
        procedure HandleMouseWheel({%H-}Shift: TShiftState; {%H-}WheelDelta: Integer; var {%H-}Handled: Boolean); virtual;
        procedure HandleDragOver(const {%H-}Source: TObject; const {%H-}Point: TPointF; var {%H-}Accept: Boolean); virtual;
        procedure HandleDragDrop(const {%H-}Source: TObject; const {%H-}Point: TPointF); virtual;
        procedure Paint; virtual;


    TTMSFNCCustomScrollControl 클래스는 TTMSFNCCustomControl의 자손이다.

      protected
        procedure SetHScrollValue(AValue: Single); virtual;
        procedure SetVScrollValue(AValue: Single); virtual;
        function GetHScrollValue: Single; virtual;
        function GetVScrollValue: Single; virtual;

      public
        function HorizontalScrollBar: TScrollBar;
        function VerticalScrollBar: TScrollBar;

     

    [데모] FNC(프레임워크 중립적인) UI 컨트롤을 직접 만들기

    • 사용자 지정 그리기(painting)을 가지는 컨트롤
    • 키보드 입력을 다루는 컨트롤
    • 마우스 입력을 다루는 컨트롤
    • 이미지(PNG)를 사용하는 컨트롤

    coderage11_TMSFNC18.png

    (시작 위치는 17:11 지점입니다. 이 데모부터 비디오를 보려면 위 이미지를 클릭하세요)

     

    [데모] TMS FNC UI 컴포넌트들

    TMS FNC Grid

    coderage11_TMSFNC91.png

    (시작 위치는 38:03 지점입니다. 이 데모부터 비디오를 보려면 위 이미지를 클릭하세요)

     

    TMS FNC Planner

    coderage11_TMSFNC92planner.png

    (시작 위치는 40:06 지점입니다. 이 데모부터 비디오를 보려면 위 이미지를 클릭하세요)

     

    TMS FNC Richeditor

    coderage11_TMSFNC93richEditor.png

    (시작 위치는 41:47 지점입니다. 이 데모부터 비디오를 보려면 위 이미지를 클릭하세요)

     

    TMS FNC Treeview

    coderage11_TMSFNC94treeView.png

    (시작 위치는 44:04 지점입니다. 이 데모부터 비디오를 보려면 위 이미지를 클릭하세요)

     

    TMS FNC ReponsiveList

    coderage11_TMSFNC95responsiveList.png

    (시작 위치는 45:31 지점입니다. 이 데모부터 비디오를 보려면 위 이미지를 클릭하세요)

     

    자료 링크

    TMS FNC UI Pack:

    샘플 컨트롤 전체 소스:

     

    Q&A

    FNC는 VCL 스타일을 지원하나요?

    • 네, (세미나 발표 시점인 2016년의 최신 버전 기준인 1.6에서) VCL 스타일과 FMX 스타일을 모두 지원합니다.

    현재 VCL용으로 제공되는 "TMS 다이아그램 스튜디오"를 FMX용으로도 제공할 계획이 있나요?

    • "TMS 다이아그램 스튜디오"를 FNC 기술로 옮겨서 VCL과 FMX에서 모두 사용할 수 있도록 일원화하는 것을 고려하고 있습니다.

    데모에서 보여준 "FNC Planner(플래너)"는 안드로이드에서 작동하나요?

    • 네, 맞습니다. FNC 컨트롤들은 파이어몽키(FMX) 프레임워크에서 지원하는 모든  타겟 플랫폼을 지원합니다. 또한 모바일에서 작동하게 되는지 여부를 탐지하여, 그 경우에는 터치 스트린에서 손가락을 사용하여 조작하기에 더 쉽도록 반응합니다.

    FNC 다운로드 링크는 어디에 있나요?

    FNC RichEditor가 HTML을 지원하나요?

    • FNC RichEditor는 HTML 가져오기/내보내기를 지원합니다. 물론 HTML을 다루는 기능 자체는 RAD 스튜디오 자체의 RichEditor 기능입니다. 그 기능은 마이크로소프트의 워드패드의 일종이라고 생각하면 됩니다. 예를 들어 MS 워드패드에서 HTML을 읽어왔을 때 워드패드에서 처리하지 못하는 것이 있다면 FNC RichEditor 역시 그런 것들을 무시하게 됩니다. 하기만 그 외에 모든 것들 폰트, 색상, 하이퍼링크, 이미지 등등은 HTML을 파싱(parsing)하여 RichEditor로 가져옵니다. 

    FNC UIPack을 구입하면 데모에서 보여준 것처럼 사용자 지정(custom) 컨트롤을 FNC 프레임워크 기반으로 만드는 것이 가능한가요?

    • 네. 물론입니다. 데모에서 트랙바를 직접 만드는 것을 보여주었는데, FNC를 설치하고 나서 똑같은 방법으로 하면 됩니다. TMS FNC Custom Control을 상속받고, (TCanvas와 호환되는) TMS FNC Graphics 를 사용하고, 마우스나 키보드에 반응할 수 있는 메서드들을 사용하면 됩니다. 

    FNC 프레임워크를 기반으로 새 컴포넌트를 만들어서 외부에 재배포할 수 있나요? 관련 라이선스는 어떻게 되어 있나요?

    • 현재 핵심 모듈인 프레임워크 중립 레이어는 재배포 대상이 아닙니다. 만약 새 컴포넌트를 만들어서 외부에 재배포하는데 관심이 있는 사용자가 있다면 그 수요를 검토한 후 정책 변경을 고려해 볼 수 있습니다. 관심이 있다면 저(Bruno Fierens)에게 이메일을 보내주세요. 현재 우리는 우리의 컴포넌트들 중에서 가장 많이 사용되는 것들을 이 새 프레임워크로 옮기는 것에 주력하고 있습니다. 따라서 이런 결정에는 사용자들이 원하는 방향과 기능 요구가 가장 중요합니다. 의견이나 질문이 있으면 언제든지 이메일을 보내주세요.

    튜토리얼 도움말이 TMS FNC UIPack 홈페이지에 있나요? 

    • 우리 매뉴얼 페이지에서 PDF로 다운로드 받을 수 있습니다. 또한, TMS FNC UIPack을 설치하면, 관련된 모든 PDF 가이드 문서들도 함께 설치됩니다. PDF 가이드에는 광범위한 전체 정보가 들어 있습니다. 이 컴포넌트들의 기능 대부분을 반영하는 50 가지가 넘는 데모가 VCL과 FMX 용으로 들어 있습니다. 


    (안드로이드, iOS를 포함하여) 멀티-플랫폼 용으로 컴포넌트를 디자인할 때 어떻게 하면 되는지 데모가 있나요?

    • 오늘 보여준 데모는 안드로이드와 iOS에서 모두 작동합니다. 이 세션에서 사용된 모든 데모의 소스 코드와 PDF 문서와 발표 자료를 모두 받을 수 있습니다. 이 프레임워크를 사용하여 만들고 싶은 UI 컨트롤이 있다면 참고하기 바랍니다.


     

     공유하기
    Go to 엠바카데로 기술자료

    User Feedback

    Recommended Comments


×
×
  • Create New...

중요한 정보

이용약관 개인정보보호정책 이용규칙 이 사이트가 더 잘 작동하기 위해 방문자의 컴퓨터에 쿠키가 배치됩니다. 쿠키 설정 변경에서 원하는 설정을 할 수 있습니다. 변경하지 않으면 쿠키를 허용하는 것으로 이해합니다.