Search results for '파이어몽키'

  1. 2014.10.20 -- "나의 도서관 앱" 개발 따라하기 - (2) 데이터베이스 만들기, 실제 데이터 연결 (9)
  2. 2014.10.17 -- 재사용 가능한 프레임으로 UI 구현하기(사진, 웹페이지)
  3. 2014.10.16 -- "나의 도서관 앱" 개발 따라하기 - (1) 사용자화면 만들기와 기능 구현하기
  4. 2014.10.15 -- [XE7] 안드로이드에서 MessagDlg 사용방법(주의 점) (1)
  5. 2014.10.10 -- 엠바카데로 제공 프리미엄 스타일 팩 사용(VCL / FMX) (2)
  6. 2014.10.06 -- 8단계로 완성하는 "2014년 출시 앨범" 앱 개발 따라하기
  7. 2014.10.01 -- REST Debugger 활용 팁(Copy Components)
  8. 2014.09.23 -- IoT와 RAD Studio(Bluetooth 이용)
  9. 2014.09.22 -- XE7으로 연동한 모토로라 모토360 (1)
  10. 2014.09.22 -- 병렬(패러럴) 컴퓨팅 라이브러리 소개
  11. 2014.09.17 -- iOS 개발환경에서 OpenSSL 라이브러리 설치 방법
  12. 2014.09.17 -- 멀티 디바이스 디자이너 소개
  13. 2014.09.17 -- 다양한 형태로 표시되는 적응형 컴포넌트 TMultiView 소개
  14. 2014.09.15 -- 멀티 디바이스 디자이너에 사용자 정의 View를 추가하기 (1)
  15. 2014.09.12 -- "Could not load SSL library." 오류 대응(XE7: BaaS, RESTClient, DataSnap)
  16. 2014.09.12 -- [NFC] 안드로이드에서 NFC 연동 방법
  17. 2014.08.26 -- 공백을 포함한 앱의 이름 설정하는 방법(iOS, 안드로이드)
  18. 2014.08.26 -- [REST Client] RESTRequest 비동기 호출방법
  19. 2014.08.24 -- RAD Studio 안드로이드 배포 시 INSTALL_PARSE_FAILED_INCONSISTENT_CERTIFICATES
  20. 2014.08.20 -- REST Client 컴포넌트 - 마블(Marvel) 개발자 API 사용

"나의 도서관 앱" 개발 따라하기 - (2) 데이터베이스 만들기, 실제 데이터 연결

2014.10.20 15:07

업데이트

  • 2015-02-25 : "2. 프로젝트 소스에서 데이터베이스와 연결"에서 Fields를 생성해 자동증가 속성을 주도록 변경


이번 글에서는 감명깊게 읽은 도서 정보, 리뷰를 기록할 수 있는 "나의 도서관 앱" 개발과정의 두번째 따라하기를 진행합니다.

첫번째 사용자화면 만들기와 기능 구현하기를 먼저 진행하시기 바랍니다.

따라하기 2 - 데이터베이스 만들기, 실제 데이터 연결

  1. "나의 도서관"앱에서 사용할 데이터베이스 만들기 
  2. 프로젝트 소스에서 데이터베이스와 연결 
  3. 데이터와 화면요소 연결하기 
  4. 데이터 입력, 수정, 삭제 기능 구현하기 
  5. 데이터베이스 파일과 라이선스파일 배포 등록하기 
  6. 원하는 모바일 디바이스에 배포하고 실행! 끝~

1, "나의 도서관"앱에서 사용할 데이터베이스 만들기

앱에서 사용할 데이터베이스를 생성합니다. 데이터베이스는 엠바카데로 제품 중 무료로 사용할 수 있는 IBLite 기반으로 진행합니다.

  1. IB Console을 실행(시작 > 프로그램 > Embarcadero InterBase XE3)합니다.
  2. Database > Create Database 메뉴 선택 후 아래 정보를 입력 후 OK 버튼을 눌러 데이터베이스 생성합니다.
    • File Name : 프로젝트 파일 하위에 "DB" 폴더 생성 후 지정(파일명은 반드시 "BOOKLOG.GDB"(확장자 입력)로 지정)
    • Default Character Set :UTF8(한글입력 시 필수)
    • Password of user : masterkey
  3. 데이터베이스 접속 창이 표시되면 위에서 입력한 "masterkey" 비밀번호를 입력 후 Connect 버튼을 눌러 접속합니다.
    (Display Character Set은 UTF8로 설정되었는지 확인)
  4. Tool > Interactive SQL 메뉴를 선택 하고 아래의 쿼리 입력 후 실행(Query > Execute, F5)하여 테이블과 트리거를 생성합니다.

    /* 테이블 생성 */
    CREATE TABLE "BOOK_LOG" (
      "BOOK_SEQ"		INTEGER NOT NULL,
      "BOOK_TITLE"		VARCHAR(50) NOT NULL,
      "BOOK_AUTHOR"		VARCHAR(30) NOT NULL,
      "BOOK_PUBLISHER"	VARCHAR(30),
      "BOOK_PHONE"		VARCHAR(20),
      "BOOK_WEBSITE"	VARChAR(100),
      "BOOK_COMMENT"	VARCHAR(1000),
      "BOOK_THUMB"		BLOB SUB_TYPE 0 SEGMENT SIZE 80,
      "BOOK_IMAGE"		BLOB SUB_TYPE 0 SEGMENT SIZE 80,
      CONSTRAINT "BOOK_SEQ_PK" PRIMARY KEY ("BOOK_SEQ")
    );
    
    /* BOOK_SEQ 자동증가 */
    CREATE GENERATOR "BOOK_SEQ_GEN";
    CREATE TRIGGER "SET_BOOK_SEQ" FOR "BOOK_LOG"
    ACTIVE BEFORE INSERT POSITION 0 AS
    BEGIN
        new.BOOK_SEQ = gen_id(BOOK_SEQ_GEN, 1);
    END;
create_script.sql

2, 프로젝트 소스에서 데이터베이스와 연결

데이터 연결 컴포넌트를 이용해 프로젝트에서 앞에서 만든 BOOKLOG.GDB와 연결합니다

데이터 연결 작업은 DataAccessModule.pas에서 진행합니다.

데이터 연결 컴포넌트 설정

  1. 데이터 모듈에 TFDConnection을 추가합니다.
  2. 추가된 FDConnection1을 더블클릭 해 FireDAC Connection Editor를 표시하고 아래와 같이 설정합니다.
    • Drive ID : IB
    • Database : 앞에서 생성한 BOOKLOG.GDB 선택택
    • User_Name : sysdba
    • Password : masterkey
    • CharacterSet : UTF8
  3. Test 버튼을 눌러 연결을 확인하고 OK 버튼을 눌러 창을 닫습니다.
  4. FDConnection1LoginPrompt 속성을 False로 설정합니다.
  5. Connected 속성을 True로 설정합니다.

데이터 질의(Query) 컴포넌트 설정

  1. 데이터 모듈에 TFDQuery 컴포넌트를 추가합니다.
  2. FDQuery1의 Connection속성을 FDConnection1으로 설정(확인)합니다.
  3. CachedUpdates 속성을 True로 설정합니다.
  4. FDQuery1 컴포넌트를 더블클릭 후 아래 쿼리문을 설정합니다.
    • SQL Command : SELECT * FROM BOOK_LOG
    • Execute 버튼 클릭 해 쿼리문 확인
    • OK 버튼 클릭
  5. Active 속성을 True로 변경합니다.

    데이터 질의(Query) 컴포넌트 필드 추가 / 자동증가 필드 설정

    1. FDQuery1 선택 후 오른쪽 마우스 메뉴에서 Fields Editor... 메뉴를 실행합니다.
    2. Fields Editor 창의 오른쪽 마우스 메뉴에서 Add all fields 메뉴를 실행 해 모든 필드를 추가합니다.
    3. BOOK_SEQ(FDQuery1BOOK_SEQ)항목 선택 후 AutoGenerateValue 속성을 arAutoInc로 선택합니다.

    화면 구성시 샘플데이터로 사용했던 PrototypeBindSource1을 데이터 모듈에서 삭제(선택 후 Delete 키)합니다.


    3, 데이터와 화면요소 연결하기

    View > LiveBindings Designer 메뉴를 통해 라이브 바인딩 디자이너를 표시하고, 아래 그림을 참고해 화면요소에 데이터를 연결합니다. (지금은 데이터베이스에 데이터가 없으므로 연결을 해도 화면의 변화가 없습니다.)

    도서목록

    도서 상세보기

    새로운 도서추가

    4, 데이터 입력, 수정, 삭제 기능 구현하기

    화면에서 입력받은 데이터를 입력, 수정, 삭제하는 기능을 구현합니다.


    데이터 모듈에 데이터 처리 메소드 추가

    1. DataAccessModule.pas으로 이동 후 FDConnection1 컴포넌트의 BeforeConnect 이벤트에 아래의 코드를 입력합니다.
      procedure TDataModule1.FDConnection1BeforeConnect(Sender: TObject);
      begin
      // 윈도우가 아닌 경우 데이터베이스 경로를 배포경로로 조정
      {$IFNDEF MSWINDOWS}
        FDConnection1.Params.Values['Database'] := TPath.Combine(TPath.GetDocumentsPath, 'BOOKLOG.GDB');
      {$ENDIF}
      end;
    2. DataAccessModule.pas의 코드 에디터 창을 표시합니다.(폼 디자이너에서 F12)
    3. 상단 uses절에 FMX.Graphics, System.IOUtils를 추가합니다.
    4. 선언부 public 영역에 아래의 코드를 입력합니다.
        public
          { Public declarations }
          procedure Connect; // 데이터베이스 연결
          procedure AppendMode; // 입력 모드로 변경
          procedure EditMode; // 수정 모드로 변경
          procedure SetImage(ABitmap: TBitmap); // 이미지저장(본문, 목록의 썸네일 이미지)
          procedure SaveItem; // 항목 저장(입력/수정)
          procedure CancelItem; // 입력/수정 모드 취소
          procedure DeleteItem; // 선택항목 삭제
        end;
    5. 구현부(선언부에 입력 후 Ctrl + Shift + C 누르면 구현부 자동 생성)에 아래의 코드를 입력합니다.
      // 입력/수정 모드 취소
      procedure TDataModule1.CancelItem;
      begin
        if FDQuery1.UpdateStatus = TUpdateStatus.usInserted then
          FDQuery1.Cancel;
      end;
      
      // 데이터베이스 연결
      procedure TDataModule1.Connect;
      begin
      {$IFNDEF MSWINDOWS}
        FDConnection1.Params.Values['Database'] := TPath.Combine(TPath.GetDocumentsPath, 'BOOKLOG.GDB');
      {$ENDIF}
        FDConnection1.Connected := True;
        FDQuery1.Active := True;
      end;
      
      // 현재항목 삭제
      procedure TDataModule1.DeleteItem;
      begin
        FDQuery1.Delete;
        FDQuery1.ApplyUpdates(0);
        FDQuery1.CommitUpdates;
        FDQuery1.Refresh;
      end;
      
      // 수정모드
      procedure TDataModule1.EditMode;
      begin
        FDQuery1.Edit;
      end;
      
      // 입력모드
      procedure TDataModule1.AppendMode;
      begin
        FDQuery1.Insert;
      end;
      
      // 항목 저장
      procedure TDataModule1.SaveItem;
      begin
        FDQuery1.Post;
        FDQuery1.ApplyUpdates(0);
        FDQuery1.CommitUpdates;
        FDQuery1.Refresh;
      end;
      
      // 이미지 저장(본문이미지와 목록에 표시할 썸네일)
      procedure TDataModule1.SetImage(ABitmap: TBitmap);
      var
        Thumbnail: TBitmap;
        ImgStream, ThumbStream: TMemoryStream;
      begin
        if FDQuery1.UpdateStatus = TUpdateStatus.usUnmodified then
          FDQuery1.Edit;
      
        ImgStream := TMemoryStream.Create;
        ThumbStream := TMemoryStream.Create;
        try
          ABitmap.SaveToStream(ImgStream);
          Thumbnail := ABitmap.CreateThumbnail(100, 100);
          Thumbnail.SaveToStream(ThumbStream);
      
          (FDQuery1.FieldByName('BOOK_IMAGE') as TBlobField).LoadFromStream(ImgStream);
          (FDQuery1.FieldByName('BOOK_THUMB') as TBlobField).LoadFromStream(ThumbStream);
        finally
          ImgStream.Free;
          ThumbStream.Free;
        end;
      end;

    화면 기능과 데이터 처리 메소드 연결

    1. 폼 디자이너로 돌아와 아래의 코드를 참고해 데이터 처리기능을 추가합니다.

      procedure TForm1.FormCreate(Sender: TObject);
      begin
        TabControl1.TabPosition := TTabPosition.None;
        TabControl1.TabIndex := 0;
      
        OverflowMenu.Visible := False;
      
        vsbEditFocus.OnCalcContentBounds := CalcContentBoundsProc;
      
        DataModule1.Connect; // 데이터베이스 연결
      end;
      
      procedure TForm1.btnNewItemClick(Sender: TObject);
      begin
        DataModule1.AppendMode; // 입력 모드로 변경
        GotoNew;
      end;
      
      // 수정
      procedure TForm1.lstItemModifyClick(Sender: TObject);
      begin
        OverflowMenu.Visible := False;
        DataModule1.EditMode; // 수정 모드로 변경
        GotoNew;
      end;
      
      // 삭제
      procedure TForm1.lstItemDeleteClick(Sender: TObject);
      begin
        OverflowMenu.Visible := False;
      
        MessageDlg('해당 정보를 삭제하시겠습니까?', TMsgDlgType.mtWarning,
          [TMsgDlgBtn.mbYes, TMsgDlgBtn.mbNo], 0, procedure(const AResult: TModalResult)
          begin
            if AResult = mrYes then
            begin
              DataModule1.DeleteItem; // 선택항목 삭제
              GotoList;
            end;
          end);
      end;
      
      procedure TForm1.btnCancelClick(Sender: TObject);
      begin
        DataModule1.CancelItem; // 입력/수정 모드 취소
        GotoList;
      end;
      
      procedure TForm1.btnSaveItemClick(Sender: TObject);
      begin
        DataModule1.SaveItem; // 현재항목 저장
        GotoList;
      end;
      
      procedure TForm1.ChangeImageEvent(Image: TBitmap);
      begin
        imgNewItem.Bitmap.Assign(Image);
        DataModule1.SetImage(Image); // 이미지 저장
      end;

    5, 데이터베이스 파일과 라이선스파일 배포 등록하기

    이제 모든 개발이 완료되었습니다. IBLite 데이터베이스를 이용한 경우에는 IBLite 데이터베이스 파일과 IBLite 라이선스 파일과 라이브러리를 앱 배포시 함께 배포해야 합니다.


    IBLite 데이터베이스 파일 배포 등록하기

    1. Project > Deployment 메뉴를 선택해 배포 관리자 화면을 표시합니다.
    2. Add files 버튼을 누르고 1단계에서 만든 BOOKLOG.GDB 파일을 선택해 추가합니다.
    3. 설정선택 콤보박스를 Android platform과 iOS Device platform으로 선택하고 각각 아래를 참고해 Remote Path를 수정합니다.
      • Android platform - assets\internal\
      • iOS Device platform - StartUp\Documents\

    IBLite 라이선스 파일과 라이브러리 배포 등록하기

    1. IBLite, IBTOGO 테스트 라이선스 배포방법 페이지를 참고해 reg_iblite.txt 파일을 다운로드 합니다.
      1. https://reg.codegear.com/srs6/activation.do 페이지 이동
      2. 제품구매(또는 트라이얼 다운로드) 시 받은 라이선스 메일을 참고해 Serial Number와 Registration Code 입력 후 Next 버튼 클릭
      3. 하단에서 파일 다운로드 기능을 이용해 C:\Users\Public\Documents\Embarcadero\InterBase\redist\InterBaseXE3 경로에 파일 다운로드
      4. 다운로드된 텍스트파일(reg_XXXXXXX.txt)를 "reg_iblite.txt"로 이름 변경
    2. 배포 관리자 화면에서 Add Featured Files 버튼 클릭 후 Interbase TOGO 라이브러리 선택
      1. InterBase ToGo > iOSDevice 항목 선택 > reg_ibtogo.txt 선택해제
      2. InterBase ToGo > Android 항목 선택 > reg_ibtogo.txt 선택해제

    (옵션)앱 이름을 바꾸고 아이콘으로 단장하기

    앱의 이름 바꾸기

    1. Project > Option 메뉴 선택 후 Version Info 메뉴 선택 합니다.
    2. 상단의 타겟 플랫폼을 선택 후 플랫폼에 맞는 항목을 입력합니다.
      • 안드로이드 : label
      • iOS(아이폰) : CFBundleDisplayName
    3. 각각 '나의 도서관' 입력 후 OK 버튼으로 저장합니다.

    앱의 아이콘/스플래쉬 이미지 바꾸기

    1. Project > Option  메뉴 선택 후 Application 항목을 선택합니다.
    2. 상단의 Target에서 플랫폼을 선택 후 목록에 있는 아이콘과 스플래쉬 이미지를 지정합니다.
      (목록의 이미지 크기에 맞는 이미지를 준비해야 합니다. 샘플아이콘 다운로드)

    6, 원하는 모바일 디바이스에 배포하고 실행! 끝~

    • 배포를 원하는 플랫폼을 선택하고 Run > Run Without Debugging 메뉴를 통해 배포 및 실행합니다.
      (안드로이드 개발환경 설정은 앱메소드 튜토리얼 동영상을 통해 확인할 수 있습니다.)

    개발도구

    참고








    저작자 표시 비영리 동일 조건 변경 허락
    신고

    험프리.김현수 파이어몽키

    1. Blog Icon
      더스틴

      안녕하세요. 좋은 내용 올려주셔서 감사합니다.
      소스중에 아래 부분은 C++빌더로는 어떻게 표현되는 것인지요?
      (FDQuery1.FieldByName('BOOK_IMAGE') as TBlobField).LoadFromStream(ImgStream);

    2. 아래 링크를 참고하시면 도움이 되실것 같네요.^^(제가 C++ 문법이 짧아서요^^)
      http://codeback.net/cbuilder/using-tblobfield-and-tblobstream-in-cbuilder
      해결되시면 해결하신 내용 좀 남겨주세요. 제가 C++빌더로 컨버전해보고 싶네요.(가능하시면 소스코드 보내주시면 감사하겠습니다^^)

    3. Blog Icon
      더스틴

      위에 제가 질문 드린 내용은 해결되었습니다. 아래와 같이 하면 잘되더군요. ^^
      dynamic_cast<TBlobField*>(FDQuery1->FieldByName("BOOK_IMAGE"))->LoadFromStream(ImgStream);
      아무튼 빠른 피드백 감사합니다.
      김현수님의 블로그 내용이 많은 도움 됩니다. 정말 감사드려요.

    4. 네 도움이 되셨다고하니 기쁘네요.
      앞으로도 좋은 내용으로 보답하겠습니다.^^

    5. Blog Icon
      아이리스

      죄송한데 계속 ibconsol애서요. Bad parameters on attach or create database
      CHARACTER SET UTF8 is not defined 이런문구가 뜨면서 데이터베이스 생성이 안됩니다. 캐릭터셋을 none
      하면 만들어지기는 하는데 이번에 델파이에서는 type mismatch for field ' BOOK_TITLE', expecting: WideString actual:String. 이런 에러 문구가 떠서 엑티브를 할수가 없군요. 문자형셋이 안맞아서 그런거 같은데 해결법좀요

    6. Blog Icon
      하이길동

      안녕하세요 다름이 아니오라 db관련으로 궁금한것이 있어 이렇게 문의드립니다
      interbase 나 firebird로 된 sql문을 sqlite로 바꾸려면
      어떻게 해야 되는지 알고 싶어 문의드립니다
      sqlite에 없는 것 같은 generator 같은것(????)
      sqlite로 작성하니 여기서부터 에러가 계속 나서 ~
      "BOOK_THUMB" BLOB SUB_TYPE 0 SEGMENT SIZE 80,
      "BOOK_IMAGE" BLOB SUB_TYPE 0 SEGMENT SIZE 80,
      CONSTRAINT "BOOK_SEQ_PK" PRIMARY KEY ("BOOK_SEQ")
      );

      /* BOOK_SEQ 자동증가 */
      CREATE GENERATOR "BOOK_SEQ_GEN";
      CREATE TRIGGER "SET_BOOK_SEQ" FOR "BOOK_LOG"
      ACTIVE BEFORE INSERT POSITION 0 AS
      BEGIN
      new.BOOK_SEQ = gen_id(BOOK_SEQ_GEN, 1);
      END;

    7. 자동증가 필드를 지원하는 방식은 DB마다 다른데요.
      구글에서 "sqlite 자동증가"로 검색해 보시면 첫번째 링크인 볼랜드 포럼에서 다음 내용을 참고할 수 있네요.
      http://interbase.borlandforum.com/impboard/impboard.dll?action=read&db=bcb_tip&no=835

    8. Blog Icon
      이성열

      너무나 많은 도움 받고 갑니다.
      나도 모르게 북마크에 추가하게 되네요.

    9. 응원에 힘이납니다^^ 더 좋은 자료로 보답하겠습니다.

    재사용 가능한 프레임으로 UI 구현하기(사진, 웹페이지)

    2014.10.17 16:14

    사진 찍기와 웹페이지 표시와 같은 기능은 앱에서 많이 사용됩니다.

    이렇게 빈번히 사용하는 기능을 매번 구현하지 않고 프레임으로 구현 후 재사용하는 방법을 소개합니다.


    모바일 앱에서는 위와 같은 UI를 많이 사용합니다. 매번 해당 UI를 구현하려면 상당히 번거롭습니다.

    아래와 같이 짧은 코드로 위의 2가지 기능을 쉽게 사용할 수 있습니다.

    uses PhotoFrame, WebBrowserFrame;
    
    procedure TForm1.Button1Click(Sender: TObject);
    begin
      TfrPhoto.CreateAndShow(Self, ChangeImageEvent, nil);
    end;
    
    procedure TForm1.ChangeImageEvent(Image: TBitmap);
    begin
      Image1.Bitmap.Assign(Image);
    end;
    
    procedure TForm1.Button2Click(Sender: TObject);
    begin
      TfrWebBrowser.CreateAndShow(Self, Edit1.Text);
    end;
    
    procedure TForm1.FormKeyUp(Sender: TObject; var Key: Word; var KeyChar: Char;
      Shift: TShiftState);
    begin
      if Key = vkHardwareBack then
      begin
        if Assigned(frPhoto) then
        begin
          frPhoto.CloseFrame;
          Key := 0;
        end;
    
        if Assigned(frWebBrowser) then
        begin
          frWebBrowser.CloseFrame;
          Key := 0;
        end;
      end;
    end;

    위 소스코드에서는 TfrPhoto와 TfrWebBrowser를 이용해 사진기능과 웹브라우저 기능을 모두이용하고, 

    안드로이드 백버튼에 대한 처리까지 되어있습니다.

    (PhotoFrame에서 iOS와 안드로이드의 버튼 위치와 스타일도 플랫폼에 맞도록 지정했습니다.)


    사진기능과 웹브라우저 기능을 포함한 프레임등의 전체 소스코드는 제 Github 페이지를 참고하세요.


    보강할 기능이나 이런식의 프레임으로 처리할 기술이 있다면 댓글이나 메일로 말씀해 주시면 적극 반영하겠습니다.


    저작자 표시 비영리 동일 조건 변경 허락
    신고

    험프리.김현수 파이어몽키

    "나의 도서관 앱" 개발 따라하기 - (1) 사용자화면 만들기와 기능 구현하기

    2014.10.16 16:25

    "나의 도서관" 앱 개발 따라하기

    ❑ 앱 소개

    • 감명깊게 읽은 도서 정보를 기록하는 앱입니다.
    • 세미나 발표와 샘플소스 제공을 위해 다소 주제와 맞지 않은 기능이 포함되어 있습니다.
    • 해당 앱은 RAD Studio XE7(또는 AppMethod 1.15)로 개발 후 하나의 소스코드로 안드로이드와 iOS 앱을 동시에 개발하였습니다.

    따라하기를 통해 습득할 수 있는 기술

    • 앱 개발의 전반적인 흐름을 따라하며 익혀 볼 수 있습니다.
    • 기본적인 UI 컨트롤 사용법과 속성 사용법
    • 화면 구성에 도움이 되는 샘플데이터 생성(프로토타입 데이터 소스)
    • 화면요소와 데이터를 (소스코드 없이)시각적으로 연결하는 기술(라이브바인딩)
    • 이미 구현된 기능을 재활용할 수 있는 프래임 활용방법(TFrame)
    • 앱에 포함하여 배포할 수 있는 임베디드 데이터베이스 사용법(IBLite)
    • 앱에서 데이터 연결 후 입력/수정/삭제 과정
    총 2번의 따라하기로 "나의 도서관" 앱이 완성됩니다.
    1. 사용자화면 만드기, 기능 구현하기
    2. 실제 데이터베이스 연결, 배포
    이 따라하기는 따라하기 과정 중 나오는 기술에 대한 이해 없이 일단(무조건) 따라하며 완성하는 것을 목적으로 작성되었습니다. 따라하는 도중 잘 이해가 되지 않더라도 끝까지 따라해보시길 권장합니다.

    기술에 대한 설명은 글의 하단에 링크를 통해 제공하고 있습니다. 기타 궁금한 점은 댓글로 남겨주시기 바랍니다.
    ※ 해당 따라하기는 AppMethod를 통해 진행할 수 있습니다. 하단의 AppMethod 설치를 참고해 설치 후 진행하시기 바랍니다.

    따라하기 1 - 사용자 화면 만들기와 기능 구현하기

    1. 빈 멀티-디바이스 앱 하나를 선택합니다. 
    2. 사용자들에게 보여질 화면을 만듭니다. 
    3. 샘플 데이터 추가 후 화면요소와 연결해 화면 표시 후 테스트하기
    4. 사용자의 조작에 동작하는 기능코드를 작성합니다. 
    5. 전화걸기, 사진, 웹페이지 표시 기능 추가 
    6. 사용자화면 완성! 테스트 하기

    1, 빈 멀티-디바이스 앱 하나를 선택합니다.

    1. File > New > Multi-Device Application - Delphi 메뉴를 선택 하고, Blank Application을 선택해 프로젝트를 생성합니다.
    2. File > Save all 메뉴를 선택하고 유닛이름은 "MainForm.pas"로 프로젝트 이름은 'BookLogFMX"로 저장합니다.


    2, 사용자들에게 보여질 화면을 만듭니다.

    모바일 앱 스타일로 화면 구성을 위해 폼디자이너 스타일을 Android(또는 iOS)로 변경합니다.


    총 3개의 화면을 구성해야 합니다. 

    탭컨트롤

    여러화면을 구성하기 위해 탭컨트롤을 아래 표를 참고해 추가합니다.

     상위 오브젝트

    오브젝트 

    속성 

    값(또는 설명) 

     

     Form1

     Width / Height

     380 / 530(폼의 가장자리를 마우스로 적당한 크기로 조정)

     Form1

     TabControl1

     Align

     Client

     TabPosition

     Bottom
     (개발 시 탭이동 편의를 위해, 실행 시 탭은 표시하지 않음)

     TabControl1

     TabItem1(추가방법[각주:1])

     Text

     도서 목록

     Tabitem2

     Text

     도서 상세보기

     TabItem3

     Text

     새로운 도서 추가

    도서 목록

    "도서 목록"탭에서 아래 그림과 표를 참고해 화면 구성합니다.




     상위 오브젝트

    오브젝트 

    속성 

    값(또는 설명) 

     TabItem1

     ToolBar1

     

     

     ToolBar1 Label1  Align Contents
     StyleLookup

     toollabel 

     Text 나의 도서관
     TextSettings.HorzAlign Center

     btnNewItem

     (TButton)

     Name btnNewItem
     Align  Right
     StyleLookup additemButton

     Tabitem1

    ListView1AlignClient
     ItemApperance.ItemAppearance  ImageListItemBottomDetail

     ItemApperance.ItemHeight

     88

     ItemApperance.ItemObjects

    .Image.Width / Height

     60 / 80
      ItemApperance.ItemObjects

    .Text.WordWrap

     True


    도서 상세보기

    "도서 상세보기"탭에서 아래 그림과 표를 참고해 화면 구성합니다.


     상위 오브젝트

    오브젝트 

    속성 

    값(또는 설명) 

     TabItem2

     ToolBar2

     

     

     ToolBar2

     Label2

     Align Contents
     StyleLookup toollabel 
     Text 제목
     TextSettings.HorzAlign Center
     TextSettings.WordWrap False

     btnBackList
     (TButton)

     Name btnBackList
     Align  Left
     StyleLookup arrowlefttoolbutton

     btnDetail

     (TButton)

     Name btnDetail
     Align

     Right

     StyleLookup detailstoolbutton

     TabItem2

     Layout1

     Align

     Client

     Layout1 Panel1 Align Top
     Height 116
     Margins 8, 8, 8, 8
     Panel1

     ShadowEffect1

     Distance 2
     ShadowColor Gray

     Rectangle1

     Image1 Align Left
     Margins 8, 8, 8, 8

     Width

     75
     Rectangle1 Layout2 Align Client
     Layout2

     lblTitle(TLabel)

     Name

     lblTitle

     Align MostTop
     AutoSize

     True

     Margins 0, 8, 3, 16

     StyledSettings.Style

     False
     TextSettings.Font.Size

     16

     TextSettings.Font.Style.fsBold

     True
     lblAuthor(TLabel) Name

     lblAuthor

     Align Top
     Margins 3, 12, 3, 10

     Layout1

     ListBox1 Align Client
     ListBox1 

     ListBoxItem1[각주:2]
     ListBoxItem2
     ListBoxItem3
     ListBoxItem4

     StyleLookup
     Text
     listboxitemnodetail
     출판사, 연락처, 사이트, 감상평

     ListBoxitem4

     Height 150
     ListBoxItem1 lblPublisher(TLabel) Align
    Margins.Left
    (4개 공통)

     Client
    80
    (4개 공통)

     ListBoxItem2 lblPhone(TLabel)
     ListBoxItem3 lblWebSite(TLabel)
     ListBoxItem4 lblComment(TLabel)
     ListBoxItem2 lblPhone HitTest Ture
     ListBoxItem3 lblWebSite

     HitTest

     True
     ListBoxItem4 lblComment TextSettings.VertAlign Leading
     Tabitem2 OverflowMenu(TListBox) Name OverflowMenu
     Position.X / Position.Y

     Button3 아래로 이동

     Width / Height 88 / 96
     OverflowMenu

     lstItemModify,

     lstItemDelete

     (TListBoxItem)

     Name

     lstItemModify /  lstItemDelete

     StyleLookup listboxitemstyle
     Text

     수정 / 삭제

     TextSettings.HorzAlign Center
     ShadowEffect2  

    새로운 도서 추가

    "새로운 도서 추가"탭에서 아래 그림과 표를 참고해 화면 구성합니다.



     상위 오브젝트

    오브젝트 

    속성 

    값(또는 설명) 

     TabItem3

     ToolBar3

     

     

     ToolBar3

     Label3 

     Align Contents
     StyleLookup toolbutton 
     Text 도서 추가
     TextSettings.HorzAlign Center

     btnCancel

     (TButton)

     Name btnCancel
     Align  Left
     StyleLookup backtoolbutton
     Text 취소

     btnSaveitem

     (TButton)

     Name btnSaveItem
     Align

     Right

     StyleLookup

     donetoolbutton

     Text 

     저장

     TabItem3

     vsbEditForcus

     (TVertScrollBox)

     Name

     vsbEditFocus

     Align Client
     vsbEditForcus lytContentsNew(TLayout) Name lytContentsNew
     Align Client
     Layout3 Layout4 Align Top
     Height 113
     Layout4 Rectangle2 Align Center

     Fill.Kind

     None

     Width / Height

     100 / 100
     Rectangle2 imgNewItem(TImage) Name imgNewItem
     Align Client
     Margins 2, 2, 2, 2
     Layout3 ListBox2 Align Client
     ListBox2

     ListBoxItem7 ~ 12

     (6개 추가)

     StyleLookUp
     Text


     listboxitemnodetail
     제목, 저자, 출판사, 연락처, 사이트, 감상평

     ListBoxitem12

     Height 100

     ListBoxitem7

     edtTitle(TEdit)

     Align
     Margins
     Client
     7, 80, 5, 7

     ListBoxitem8

     edtAuthor(TEdit)

     ListBoxitem9

     edtPublisher(TEdit)

     ListBoxitem10

     edtPhone(TEdit)

     ListBoxitem11

     edtWebSite(TEdit)

     ListBoxitem12

     mmoComment(TMemo)
     mmoComment

     TextSettings.WordWrap

     True


    3, 샘플 데이터 추가 후 화면요소와 연결해 화면 표시 후 테스트하기

    화면 테스트를 위해 샘플(프로토타입) 데이터를 데이터 모듈에 추가합니다. 뒤에서 샘플 데이터를 실제 데이터베이스로 변경합니다.

    데이터 엑세스 기능을 구현하기 위해 데이터모듈 추가

    1. File > New > Other 메뉴를 선택 해 "New Items" 대화상자를 표시합니다.
    2. 왼쪽 트리메뉴에서 Object Pascal Projects > Object Pascal Files를 선택합니다.
    3. Data Module을 선택 하고 OK 버튼을 누릅니다.
    4. 데이터 모듈이 추가되면 File > Save 메뉴를 누르고 "DataAccessModule.pas"로 저장합니다.
    5. Object Inspect(속성창)에서 Name 속성을 dmDataAccess로 변경합니다.

    테스트용 샘플 데이터 추가

    1. 데이터모듈에 TPrototypeDataSource를 추가합니다.
    2. PrototypeDataSource1의 RecordCount30으로 변경합니다.
    3. PrototypeDataSource1을 더블클릭 후 Add New 버튼으로 위 그림을 참고해 항목 5개를 추가합니다.

    샘플데이터와 화면요소 연결하기

    1. MainForm으로 돌아와 위에서 추가한 데이터 모듈 사용하기 위해 File > Use unit 메뉴를 선택하고 "DataAccessModule.pas" 파일을 선택 후 OK 버튼을 누릅니다.
    2. View > LiveBindings Designer 메뉴를 통해 라이브 바인딩 디자이너를 표시하고, 아래 그림을 참고해 화면요소에 데이터를 연결합니다.(두 항목간 마우스로 드래그해 연결)

    도서 목록

    도서 상세보기

    새로운 도서 추가


    연결을 마치면 Live Bindings Designer를 닫습니다.(창 우측 상단 X 버튼)


    4, 사용자의 조작에 동작하는 기능코드를 작성합니다.

    사용자가 목록을 누르고 버튼을 누를때 동작하는 기능을 구현 합니다.

    화면(탭)이동 기능 구현

    1. 폼에 TActionList(ActionList1) 컴포넌트를 추가합니다.
    2. ActionList1을 더블클릭 후 Add Action > New Standard Action 메뉴를 선택 합니다.
    3. Tab > TChangeTabAction 항목 선택 후 OK 버튼을 눌러 추가합니다.
    4. 코드 에디터를 열고(폼 디자이너에서 F12 버튼) 선언부(코드 상단) private 영역에 아래 코드를 입력합니다.

        private
          { Private declarations }
          procedure GotoList;
          procedure GotoDetail;
          procedure GotoNew;
        public
          { Public declarations }
        end;
    5. 구현부(선언부 입력 후 Ctrl + Shift + C 단축키를 누르면 구현부의 구조가 자동 완성됩니다.)에 아래의 코드를 입력합니다.
      procedure TForm1.GotoDetail;
      begin
        ChangeTabAction1.Tab := TabItem2;
        ChangeTabAction1.ExecuteTarget(nil);
      end;
      
      procedure TForm1.GotoList;
      begin
        ChangeTabAction1.Tab := TabItem1;
        ChangeTabAction1.ExecuteTarget(nil);
      end;
      
      procedure TForm1.GotoNew;
      begin
        ChangeTabAction1.Tab := TabItem3;
        ChangeTabAction1.ExecuteTarget(nil);
      end;
    6. 도서 목록 탭에서 ListView1의 OnItemClick 이벤트에 아래의 코드를 입력[각주:3]합니다.

      procedure TForm1.ListView1ItemClick(const Sender: TObject;
        const AItem: TListViewItem);
      begin
        GotoDetail;
      end;
    7. 위 방식과 같이 아래의 표를 참고해 이벤트 핸들러 코드를 입력합니다.

      오브젝트 

      이벤트 

      소스코드 

       btnNewItem

       OnClick 

       GotoNew;

       btnBackList

       OnClick

       GotoList;
       btnCancel

       OnClick

       GotoList;

       btnSaveItem 

       OnClick

       GotoList;

    8. 폼을 선택하고 OnCreate 이벤트에 아래 코드를 입력합니다.(실행 시 탭을 감추고 첫번째 탭을 표시하는 코드입니다.)

      procedure TForm1.FormCreate(Sender: TObject);
      begin
        TabControl1.TabPosition := TTabPosition.None;
        TabControl1.TabIndex := 0;
      end;


    도서 상세정보 수정/삭제 팝업메뉴 구현

    1. 도서 상세정보 탭의 추가정보 버튼(btnDetail)과, 수정(lstItemModify), 삭제(lstItemDelete) 항목의 OnClick 이벤트에 아래를 참고해 코드를 추가합니다.

      procedure TForm1.btnDetailClick(Sender: TObject);
      begin
        OverflowMenu.Visible := not OverflowMenu.Visible;
        if OverflowMenu.Visible then
        begin
          OverflowMenu.ItemIndex := -1;
          OverflowMenu.BringToFront;
          OverflowMenu.ApplyStyleLookup;
          OverflowMenu.RealignContent;
          OverflowMenu.Position.X := Width - OverflowMenu.Width - 5;
          OverflowMenu.Position.Y := Toolbar2.Height;
        end;
      end;
      
      // 수정
      procedure TForm1.lstItemModifyClick(Sender: TObject);
      begin
        OverflowMenu.Visible := False;
        GotoNew;
      end;
      
      // 삭제
      procedure TForm1.lstItemDeleteClick(Sender: TObject);
      begin
        OverflowMenu.Visible := False;
      
        MessageDlg('해당 정보를 삭제하시겠습니까?', TMsgDlgType.mtWarning,
          [TMsgDlgBtn.mbYes, TMsgDlgBtn.mbNo], 0, procedure(const AResult: TModalResult)
          begin
            if AResult = mrYes then
            begin
              ShowMessage('삭제');
            end;
          end);
      end;
    2. 폼을 선택하고 OnCreate 이벤트에 아래 코드를 추가합니다.

      procedure TForm1.FormCreate(Sender: TObject);
      begin
        TabControl1.TabPosition := TTabPosition.None;
        TabControl1.TabIndex := 0;
      
        OverflowMenu.Visible := False; // 시작 시 팝업메뉴 감추기
      end;

    입력 시 키보드가 가려지지 않도록 입력박스 위치조정 기능 구현

    하단의 입력박스에 입력 시 키보드가 입력박스를 가리는 경우 키보드 위로 입력박스 위치를 조정하는 기능을 구현합니다.

    1. 선언부 private 영역에 아래 코드를 입력합니다.
        private
          { Private declarations }
          FKBBounds: TRectF;
          FNeedOffset: Boolean;
      
          procedure CalcContentBoundsProc(Sender: TObject; var ContentBounds: TRectF);
          procedure RestorePosition;
          procedure UpdateKBBounds;
    2. 구현부에 아래의 코드를 입력합니다.
      procedure TForm1.CalcContentBoundsProc(Sender: TObject;
        var ContentBounds: TRectF);
      begin
        if FNeedOffset and (FKBBounds.Top > 0) then
        begin
          ContentBounds.Bottom := Max(
                ContentBounds.Bottom, 2 * ClientHeight - FKBBounds.Top);
        end;
      end;
      
      procedure TForm1.RestorePosition;
      begin
        vsbEditFocus.ViewportPosition := PointF(vsbEditFocus.ViewportPosition.X, 0);
        lytContentsNew.Align := TAlignLayout.Client;
        vsbEditFocus.RealignContent;
      end;
      
      procedure TForm1.UpdateKBBounds;
      var
        LFocused : TControl;
        LFocusRect: TRectF;
      begin
        FNeedOffset := False;
        if Assigned(Focused) then
        begin
          LFocused := TControl(Focused.GetObject);
      
          LFocusRect := LFocused.AbsoluteRect;
          LFocusRect.Offset(vsbEditFocus.ViewportPosition);
          if (LFocusRect.IntersectsWith(TRectF.Create(FKBBounds))) and
             (LFocusRect.Bottom > FKBBounds.Top) then
          begin
            FNeedOffset := True;
            lytContentsNew.Align := TAlignLayout.Horizontal;
            vsbEditFocus.RealignContent;
            Application.ProcessMessages;
            vsbEditFocus.ViewportPosition := PointF(vsbEditFocus.ViewportPosition.X,
                                                    LFocusRect.Bottom - FKBBounds.Top);
          end;
        end;
        if not FNeedOffset then
          RestorePosition;
      end;
    3. 코드에서 수학함수(Max)를 사용하기 위해 구현부(implementation) uses 절에 System.math 유닛을 추가합니다.

      implementation
      
      {$R *.fmx}
      
      uses DataAccessModule, System.Math;
    4. 폼(Form1)의 OnFocusChanged, OnVirtualKeyboardShown, OnVirtualKeyboardHidden 이벤트에 아래 코드를 참고해 코드를 추가합니다.
      procedure TForm1.FormFocusChanged(Sender: TObject);
      begin
        UpdateKBBounds;
      end;
      
      procedure TForm1.FormVirtualKeyboardHidden(Sender: TObject;
        KeyboardVisible: Boolean; const Bounds: TRect);
      begin
        FKBBounds.Create(0, 0, 0, 0);
        FNeedOffset := False;
        RestorePosition;
      end;
      
      procedure TForm1.FormVirtualKeyboardShown(Sender: TObject;
        KeyboardVisible: Boolean; const Bounds: TRect);
      begin
        FKBBounds := TRectF.Create(Bounds);
        FKBBounds.TopLeft := ScreenToClient(FKBBounds.TopLeft);
        FKBBounds.BottomRight := ScreenToClient(FKBBounds.BottomRight);
        UpdateKBBounds;
      end;
    5. 폼의 OnCreate 이벤트에 아래 코드를 추가합니다.

      procedure TForm1.FormCreate(Sender: TObject);
      begin
        TabControl1.TabPosition := TTabPosition.None;
        TabControl1.TabIndex := 0;
      
        OverflowMenu.Visible := False;
      
        vsbEditFocus.OnCalcContentBounds := CalcContentBoundsProc; // 추가
      end;


    5, 전화걸기, 사진, 웹페이지 표시 기능 추가

    전화걸기, 사진 촬영, 불러오기, 웹페이지 표시 기능을 추가합니다.


    전화걸기 기능 추가하기

    1. 전화걸기 기능 사용을 위해 FMX.Platform과 FMX.PhoneDialer 유닛을 구현부(implementation) 유즈절에 추가합니다.

      implementation
      
      {$R *.fmx}
      
      uses DataAccessModule, System.Math, FMX.Platform, FMX.PhoneDialer;

    2. 도서 상세보기 탭의 lblPhone(연락처 항목)의 OnClick 이벤트 핸들러에 아래의 코드를 입력합니다.

      procedure TForm1.lblPhoneClick(Sender: TObject);
      var
        PhoneDlrSvc: IFMXPhoneDialerService;
      begin
        if TPlatformServices.Current.SupportsPlatformService(IFMXPhoneDialerService, IInterface(PhoneDlrSvc)) then
          PhoneDlrSvc.Call(lblPhone.Text);
      end;


    웹페이지 표시 기능, 사진 기능 추가하기

    웹페이지 기능과 사진 기능은 이미 구현된 소스코드를 다운받아 구현합니다.

    1. 카메라 기능, 웹브라우저 기능이 구현된 프레임 소스코드 를 다운로드 받고 압축 해제 후 프로젝트 파일(BookLogFMX.dpr) 저장경로의 하위에 Frames 폴더를 추가 후 Frames 폴더 안으로 복사합니다.

    2. Project Manager 윈도우에서 프로젝트 이름(BookLogFmx)에 마우스 오른쪽 팝업메뉴를 표시하고 Add... 메뉴를 선택 후 위 1번에서 복사한 "PhotoFrame.pas"를 선택 해 추가합니다.

    3. PhotoFrame 사용을 위해 구현부 uses절에 WebBrowserFrame, PhotoFrame을 추가합니다.

    4. "도서 상세보기" 탭의 lblWebSite(사이트 항목)의 OnClick 이벤트 핸들러에 아래의 코드를 입력합니다.

      procedure TForm1.lblWebSiteClick(Sender: TObject);
      begin
        TfrWebBrowser.CreateAndShow(Self, lblWebSite.Text);
      end;

    5. 선언부 private  영역에 아래의 메소드를 선언하는 코드를 추가합니다.

          procedure ChangeImageEvent(Image: TBitmap);

    6. 구현부에 아래의 코드를 추가합니다.

      procedure TForm1.ChangeImageEvent(Image: TBitmap);
      begin
        imgNewItem.Bitmap.Assign(Image);
      end;

    7. "새로운 도서 추가" 탭의 imgNewItem(사진)의 OnClick 이벤트 핸들러에 아래 코드를 입력합니다.

      procedure TForm1.imgNewItemClick(Sender: TObject);
      begin
        TfrPhoto.CreateAndShow(Self, ChangeImageEvent, nil);
      end;

    8. 안드로이드 백버튼을 누를때 기능이 닫히게 하기위해 폼(Form1)의 OnKeyUp 이벤트에 아래 코드를 입력합니다.
      procedure TForm1.FormKeyUp(Sender: TObject; var Key: Word; var KeyChar: Char;
        Shift: TShiftState);
      begin
        if Key = vkHardwareBack then
        begin
          if Assigned(frPhoto) then
          begin
            frPhoto.CloseFrame;
            Key := 0;
          end;
      
          if Assigned(frWebBrowser) then
          begin
            frWebBrowser.CloseFrame;
            Key := 0;
          end;
        end;
      end;


    6, 사용자화면 완성! 테스트 하기

    1차 사용자화면 개발완료되었습니다. 

    • 배포를 원하는 플랫폼을 선택하고 Run > Run Without Debugging 메뉴를 통해 배포 및 실행합니다.
      (안드로이드 개발환경 설정은 앱메소드 튜토리얼 동영상을 통해 확인할 수 있습니다.)

    2차 따라하기에서는 실제 사용할 데이터베이스를 만들고 앱에서 데이터 연결하는 내용을 진행합니다.

    관련글


    1. TabItem 추가는 TabControl 더블클릭 후 나오는 Items Designer 대화상자에서 TTabItem 선택 후 [Add Item] 버튼을 눌러 추가 가능 [본문으로]
    2. ListBoxItem 추가는 ListBox컴포넌트 더블클릭 후 나타나는 Items Designer 대화상자에서 TListBoxItem을 선택 후 [Add Item] 버튼을 눌러 추가 가능 [본문으로]
    3. Object Inspector 창의 Event 탭으로 이동 후 OnItemClick 글자 옆의 공백을 더블클릭하면 이벤트 핸들러 코드가 자동추가 [본문으로]
    저작자 표시 비영리 동일 조건 변경 허락
    신고

    험프리.김현수 파이어몽키

    [XE7] 안드로이드에서 MessagDlg 사용방법(주의 점)

    2014.10.15 16:52

    사용자 의견을 묻기 위해 MessageDlg 함수를 많이 사용하는데요. 안드로이드에서 MessageDlg 사용 시 아래와 같인 메시지가 표시되어 해결방법 공유합니다.

    Blockin dialogs not implemented on this platform.

    ❑ 원인

    • 안드로이드에서는 블로킹 대화상자를 지원하지 않습니다.
    • 하지만 컴파일 시 오류가 나지 않기 때문에 구현 시 주의가 필요합니다.

    ❑ 해결방안

    • ACloseDialogProc 파라메터가 있는 MessageDlg 함수를 이용해야 합니다.
    • ACloseDialogProc은 MessageDlg에서 버튼을 누른 이후의 동작을 가진 익명메소드 입니다.
    • 아래 예제를 참고하세요.

    MessageDlg('Choose a button:', System.UITypes.TMsgDlgType.mtInformation,
        [
          System.UITypes.TMsgDlgBtn.mbYes,
          System.UITypes.TMsgDlgBtn.mbNo,
          System.UITypes.TMsgDlgBtn.mbCancel
        ], 0,
          procedure(const AResult: TModalResult)
          begin
            case AResult
              of
              { Detect which button was pushed and show a different message }
              mrYES:
                ShowMessage('You chose Yes');
              mrNo:
                ShowMessage('You chose No');
              mrCancel:
                ShowMessage('You chose Cancel');
            end;
    
          end
    
        );

    • 해당 이슈는 블로킹 형태의 대화상자(InputBox, InputQuery, MessageDlg, ShowMessage) 모두가 해당 됩니다.


    참고



    저작자 표시 비영리 동일 조건 변경 허락
    신고

    험프리.김현수 파이어몽키

    1. Blog Icon
      정상언

      MessageDlg 함수의 버튼의 캡션 "Yes", "No", "Cancel" 을
      한글로 "예", "아니오", "취소" 로 나타낼 방법이 있나요?

    엠바카데로 제공 프리미엄 스타일 팩 사용(VCL / FMX)

    2014.10.10 13:09

    프리미엄 스타일 팩 사용방법

    스타일은 어플리케이션 외관을 가장쉽게 유려하게 외관을 바꾸고 외관을 일관되게 유지할 수 있는 기술입니다. 

    RAD Studio에는 기본으로 제공되는 스타일(VCL: 34가지, FMX: 22가지)외에도 더 프리미엄한 스타일을 구성할 수 있는 프리미엄 스타일 팩을 엠바카데로에서 제공합니다.

    RAD Studio 구입 시 2 종류(VCL/파이어몽키)의 프리미엄 스타일 팩을 다운로드 후 사용할 수 있습니다.

    ❑ 다운로드

    프리미엄 스타일 팩은 엠바카데로 EDN(embarcadero developer network) 사이트의 등록된 제품 다운로드 페이지에서 다운로드 가능합니다. (해당 페이지는 스타일 팩 뿐 아니라 프로모션 시 제공받는 다양한 툴들도 다운로드 받을 수 있습니다. ☞ 프로모션 보기)

    ❑ VCL 프리미엄 스타일 팩 사용하기

    VCL 스타일은 어플리케이션의 외관을 일관되게 변경하는 가장 쉽고 유용한 방법입니다.
    50여 종의 스타일을 기본 제공하고 별도의 프리미엄 스타일을 5개 추가 제공합니다.

      스타일 경로에 스타일 파일 복사

      • 다운로드 한 VCL 프리미엄 스타일 팩의 압축을 해제하면 총 5가지의 VSF(*.vsf) 파일이 있습니다.
      • VSF 파일을 VCL 스타일 경로로 복사합니다.
        • XE7기준 - C:\Users\Public\Documents\Embarcadero\Studio\15.0\Styles

        VCL 스타일 사용하기

        • RAD Studio에서 VCL Form Application 프로젝트를 열고 프로젝트 옵션(Project > Options) 호출
        • Application > Appearance 메뉴를 선택합니다.(Custom styles 항목에는 앞에서 추가한 Coral, Emerald 등의 스타일을 확인할 수 있습니다.)
        • 사용할 스타일을 선택 후 [Preview] 버튼으로 미리보기 후, 사용할 스타일의 체크박스를 선택합니다.
        • 아래 Default style에서 기본으로 사용할 스타일을 선택 후 [OK] 버튼을 누릅니다.

        VCL 스타일이 적용된 모습

        기본 데모 중 MastApp으로 스타일을 적용한 모습(C:\Users\Public\Documents\Embarcadero\Studio\15.0\Samples\Object Pascal\Database\IBX\IBMastApp)


        Coral

        Emerald

        Diamond


        ❑ 파이어몽키(FMX) 프리미엄 스타일팩 사용하기

        FMX 스타일

        • 파이어몽키 스타일 파일(*.style)은 별도의 경로에 복사하지 않아도 됩니다.(다운로드 후 편리한 경로에 압축해제 후 사용합니다.)

        • 파이어몽키 스타일은 플랫폼별로 다양하게 제공됩니다.

          FMX 스타일 사용하기

          파이어몽키 스타일은 스타일북(TStyleBook) 컴포넌트를 이용해 스타일을 사용할 수 있습니다. 

          • RAD Studio에서 Multi-Device Application 프로젝트를 열고 폼위에 TStyleBook 컴포넌트 추가
          • 폼이 스타일북을 이용할 수 있도록 StyleBook 속성을 변경 후 StyleBook 컴포넌트를 더블 클릭해 스타일 디자이너 표시
          • 스타일 디자이너에서 [Load] 버튼을 누르고 앞에서 다운로드 한 스타일 파일을 선택하고, [Apply and Close] 선택
          • 플랫폼 별 스타일을 적용하려한다면 플랫폼 뷰를 추가하고 플랫폼에 맞는 스타일 파일 선택

          파이어몽키 스타일이 적용된 모습


          AndroidCoralCrystal.style

          AndroidEmeraldCrystal.style

          AndroidDiamond.style


          저작자 표시 비영리 동일 조건 변경 허락
          신고

          험프리.김현수 파이어몽키 Rad Studio, style

          1. Blog Icon
            김주일

            프리미엄 스타일팩 엠바카데로 사이트 어느 메뉴에 있나요 ?

          2. 정식버전 구입 시 http://cc.embarcadero.com/myreg 으로 접속하면 목록에 나옵니다.

          8단계로 완성하는 "2014년 출시 앨범" 앱 개발 따라하기

          2014.10.06 15:39

          음원정보 제공 웹사이트(DiscoGS)의 정책 상 인증과정(OAuth 2.0)이 추가되어 부득이 아래 글을 따라할 수 없습니다. 

          하지만 아래 과정을 통해 웹서비스 연동하는 방안을 이해하는데 도움될 것입니다.


          이번 글에서는 올해(2014년도)에 출시된 앨범 목록과 앨범 수록곡을 확인할 수 있는 "2014년 출시 앨범" 앱을 8단계를 따라하며 만들어 보겠습니다.

          "2014년 출시 앨범" 앱 개발 따라하기

          ❑ 앱 소개

          • 2014년(올해) 출시된 앨범 목록 정보 제공
          • 앨범 선택 시 앨범정보와 수록곡 정보 제공
          • 앨범정보는 음반정보 제공 사이트 DiscoGS의 공개 API(http://api.dicogs.com) 이용

          따라하기를 통한 습득할 수 있는 기술
          • REST 클라이언트 라이브러리를 이용해 정보 조회
          • REST Debugger 개발도구를 이용해 REST API 분석 후 컴포넌트 재사용
          • Live Binding을 이용해 데이터와 화면 컨트롤 링크(마우스 연결)로 화면 출력
          • 투명도를 이용해 배경화면 설정
          따라하기는 Delphi XE7을 기준으로 작성되었습니다.

          따라하기

          1, 프로젝트 생성

          File > New > Multi-Device Application – Delphi 메뉴선택하여 Blank Application 선택해 프로젝트를 생성합니다.

          File > Save all 메뉴를 선택하고, 유닛이름은 기본(Unit1.pas)로 프로젝트 이름은 "music2014.dproj"로 저장합니다.

          2, 화면 레이아웃 구성

          아래의 그림과 표를 참고해 화면에 컴포넌트를 추가하고 레이아웃을 구성합니다.


           상위 오브젝트

          오브젝트 

          속성 

          값(또는 설명) 

           Form1

           MultiView1

           Visible

           True 

           Form1

           Layout1 

           Align

           Client 

           MultiView1

           MasterToolBar

           Align

           Top 

           MasterToolBar

           MasterLabel

           Align

           Client 

           StyleLookup

           toollabel

           Text

           2014년 출시 앨범

           TextSettings.HorzAlign

           Center

           MultiView1

           ListView1 

           Align 

           Client 

           CanSwipeDelete False
           Layout1

           DetailToolbar 

           Align 

           Top 

           DetailToolbar

           DetailLabel

           Align Contents
           StyleLookup toollabel 

           Text

           앨범정보
           MasterButton Align Left 

           StyleLookup

           detailstoolbutton 
           Layout1 ListBox1  Align  Top 
           Height 153 
           ListBox1

           ListBoxGroupHeader1 

           Text  앨범정보 

           ListBoxItem1

           Text 앨범명
           StyleLookup listboxitemrightdetail

           ListBoxItem2

           Text

           출시년도

           StyleLookup

           listboxitemrightdetail

           ListBoxGroupHeader2

           Text 수록곡
           Layout1 ListView1  Align  Client 
           CanSwipeDelete  False 
           ItemAppearance.ItemAppearance ListItemRightDetail 

           ItemAppearanceObject.

           ItemObject.Accessory.Visible

           False 

          3, 웹서비스 데이터 분석

          웹서비스 API 분석은 RAD Studio에서 제공하는 REST 분석도구인 REST Debugger를 이용합니다.

          Tools > REST Debugger 메뉴로 REST Debugger를 실행하고 다음 순서대로 작업합니다.

          1. Request 탭에서 "http://api.discogs.com"  입력
          2. Parameters 탭에서 Resource 박스에 다음 내용 입력 [Send Request] 버튼 클릭
            • database/search?type=release&per_page=20&country={country}&year={year}
          3. Request Parameters 수정(항목 더블클릭 또는 선택 후 [Edit] 버튼 클릭)
            • country=South Korea
            • year=2014
          4. JSON Root Element 항목에 results 입력 [Apply] 버튼 클릭
          5. 하단 Tabular Data 탭에서 데이터 확인 [Copy Components] 버튼으로 컴포넌트 클립보드에 복사

          4, REST 클라이언트 컴포넌트 추가

          폼디자이너 화면으로 돌아와서 클립보드에 복사된 컴포넌트 붙여넣기(Ctrl-V)로 컴포넌트를 생성합니다.

          수록곡 정보 표시용 컴포넌트 추가를 위해 3번과 같은 방법으로 다음 정보를 참고해 한 세트를 더 생성합니다.

            1. Parameters 탭에서 Resource 박스에 다음 내용 입력  [Send Request] 버튼 클릭
              • releases/{_id}
            2. [Edit] 버튼으로 Request Parameters 수정
              • _id : 5583330
            3. JSON Root Element 항목에 tracklist 입력  [Apply] 버튼클릭
            4. 데이터 로딩 확인  [Copy Components] 버튼으로 Components 클립보드에 복사 후 폼디자이너에서 컴포넌트 붙여넣기


          2개의 RESTRequest 컴포넌트를 더블클릭 하거나 마우스 우클릭 메뉴의 Execute를 이용해 요청을 확인합니다.

          5, Live Binding 데이터 연결

          View > LiveBindings Designer 메뉴를 실행하여 그림과 같이 FDMemTable 항목과 ListView ListBox 항목에 마우스 드래그로 데이터를 연결합니다.

          ListBoxItem의 ItemData.Detail을 표시하기 위해 ListBoxItem 영역의 [...] 버튼을 누르고 detail로 검색 후 멤버를 추가 후 진행할 수 있습니다.

          6, 데이터 요청 구현

          Live Binding 정상적으로 연결 되었으면 그림과 같이 데이터를 불러 있습니다.


          실행 시 데이터를 로드하고 앨범 선택 시 수록곡 정보를 가져오는 코드를 아래와 같이 추가합니다.

          오브젝트 

          이벤트 

          소스코드 

           Form1

          OnShow 

           RESTRequest1.Execute; 

           RESTRequest2.Params.ParameterByName('_id').Value := 

                                                                FDMemTable1.FieldValues['id']; 

           RESTRequest2.Execute; 

           MultiView1.ShowMaster; // 시작 시 메뉴 표시

           ListView1

          OnItemClick 

           MultiView1.HideMaster;

           RESTRequest2.Params.ParameterByName('_id').Value := 

                                                                FDMemTable1.FieldValues['id'];

           RESTRequest2.Execute;

          7, 앱 배경화면 꾸미기

          배경화면을 꾸미기 위해 메인화면(Layout1)에 Rectangle 컴포넌트를 추가하도록 아래의 표를 참고해 구성합니다.



           상위 오브젝트

          오브젝트 

          속성 

          값(또는 설명) 

           Layout1

           Rectangle1

           Align Contents
           Fill.Kind Bitmap 
           Fill.Bitmap.Bitmap

           아래 이미지 파일을 다운로드 후 선택

           


           Fill.Bitmap.WrapMode

           TileStretch 

           Hittest

           False 

           Opacity

           0.3


          8, 배포

          모든 개발이 완료되었습니다. 프로젝트 매니저에서 Target Platform을 선택 후 Run > Run Without Debugging 메뉴를 선택 해 앱을 실행 해 결과 화면을 확인합니다.


          ❑ 프로젝트 소스코드

          관련글



          저작자 표시 비영리 동일 조건 변경 허락
          신고

          험프리.김현수 파이어몽키 Delphi XE7, discogs, Rest Client, RESTful

          REST Debugger 활용 팁(Copy Components)

          2014.10.01 09:46

          이전에 RESTful 웹사이트 분석에 유용한 REST Debugger 소개하는 글을 남겼습니다.

          XE7 버전에 포함된 REST Debugger에 추가된 기능을 추가로 소개합니다.


          이번에 소개할 내용은 [Copy Components] 입니다.

          (RAD Studio XE7에서는 IDE 메인메뉴에서 Tools > REST Debugger 메뉴를 통해 실행할 수 있습니다.)

          ❑ Copy Components 버튼

          이전의 레스트 디버거의 경우 웹 서비스 API 분석에 아주 유용했지만, 분석한 내용을 구현하기 위해서는 개발 시 분석한 내용을 일일히 컴포넌트 추가후 값을 설정하는 작업이 필요했습니다.

          하지만, 이번에 추가된 Copy Components를 이용하면 위의 반복되는 작업 없이 레스트 디버거에서 분석한 내용을 그대로 개발 시 사용할 수 있습니다.


          이제 아래와 같은 프로세스로 웹서비스 연동 앱을 쉽고 빠르게 개발할 수 있습니다.


          1, 레스트 디버거(REST Debugger)로 웹서비스 분석

          저는 이전 글과 같이 api.discogs.com의 rest api를 분석했습니다.


          2, Copy Components로 REST Client 컴포넌트 복사

          컴포넌트 복사 이전에 하단의 Response 영역에서 JSON Root Elements에 사용할 요소를 선택 후 Apply 버튼으로 적용 후 Tabular Data 그리드에 목록이 표시되는 상태에서 복사하시기 바랍니다.


          3, 개발 폼(또는 데이터모듈)에 복 사 후 UI 연결

          델파이(또는 C++빌더)의 폼에 Ctrl + V로 붙여넣기 하면 아래와 같이 5개의 컴포넌트가 복사됩니다.(저는 보기 좋게 정리했습니다.)

          RESTRequest를 더블클릭해 새로운 데이터 요청 후 라이브 바인딩 기술 등을 이용해 UI 컨트롤과 데이터를 연결해 사용하면 손쉽게 웹서비스와 연결할 수 있습니다.



          Tip. 데이터가 없을 경우 RESTful 데이터 요청

          REST Debugger의 Copy Components로 컴포넌트 복사 직후 또는 프로젝트를 연 직후에는 데이터가 없는 상태로 표시됩니다.

          이때에는 RESTRequest 컴포넌트를 통해 웹서비스에 데이터 요청을 하면 수신데이터를 받아 데이터 셋에 표시됩니다.

          요청하는 방식은 

          1, RESTRequest 컴포넌트를 더블클릭 해 요청합니다.

          2, RESTRequest 컴포넌트 우측 마우스 팝업메뉴의  Execute... 버튼을 누릅니다.

          3, RESTRequest 컴포넌트 선택 후 Object Inspector 하단의 Execute 버튼을 누릅니다.


          관련글



          저작자 표시 비영리 동일 조건 변경 허락
          신고

          험프리.김현수 파이어몽키 REST Debugger

          IoT와 RAD Studio(Bluetooth 이용)

          2014.09.23 16:16


          사물인터넷, 세상의 모든 것과 연결하다는 의미입니다. 최근 다양한 스마트 장비와 센서들이 다양하게 나오고 서로 연결하며 모든 것을 연결하는 시대로 가고 있습니다.


          이번 글에서는 RAD Studio에서 세상이 모든 것과 연결 하는 방법에 대해 알아 보겠습니다.


          그전에 몇가지 사례에 대해 알아봅니다.


          <사례 1>

          최근 MIT 대학에서는 화장실에 센서를 달고 화장실 사용 정보를 기숙사의 학생들에게 제공하는 시도가 있었습니다.

          이 시도가 꽤 학생들에게 반응이 좋았습니다. 그 이후 해당 대학에서는 세탁실의 세탁기와 건조기에도 센서를 달아 언제 현재 세탁이 가능한지 언제 세탁기를 사용할 수 있는지에 대한 정보를 학생들에게 제공하는 프로젝트를 추가 진행했다고 합니다.


          <사례 2>

          국내의 스마트 양식장 사례입니다. 민물장어를 키우는 양식장에 수온, 용존산소량등의 센서를 달고 모니터링해 성공한 사례입니다. 민물장어는 환경에 대단히 민감해 그 전까지는 직원들이 2~6시간 간격으로 수십~수백개의 수조를 일일히 점검했습니다.

          이 과정을 센서를 통한 모니터링 시스템을 구축한 결과 PC와 스마트폰으로 손쉽게 모니터링 및 위급시 빠르게 대처할 수 있어 폐사율도 낮추고 직원의 수고도 줄이며 금전적으로 큰 이익을 본 사례로 소개되었습니다.


          위 사례 뿐 아니라 우리 삼과 연결되 사례가 많습니다.

          대표적으로 시계, 안경 등의 웨어러블 디바이스를 통한 방법과 신발, 칫솔, 기저귀, 팔찌, 심장박동기 등을 통해 건강정보를 수집해 더 쾌적한 삶을 살 수 있도록 도움을 주는 다양한 시도가 진행되고 있습니다.


          RAD Studio도 이러한 시대의 흐름에 맞춰 다양한 플랫폼은 물론, 사물인터넷을 위한 기능을 추가하고 있습니다.


          RAD Studio와 IoT(블루투스)

          오늘은 최근 출시된 RAD Studio XE7에 추가된 사물인터넷 기능 중 Bluetooth 기능에 대해 소개합니다.

          ❑ 블루투스

          RAD Studio에서는 아래와 같은 방식으로 블루투스를 지원하고 있습니다.

          • Bluetooth LE 컴포넌트
          • Bluetooth LE 라이브러리
          • Classic bluetooth 라이브러리
          • Bluetooth를 이용한 앱 테더링


          플랫폼 별 기능 지원 버전

          ❑ 블루투스 참고 문서



          ❑ 블루투스 샘플

          RAD Studio XE7 설치 사용자 기준

          [C++ 빌더]
          • C:\Users\Public\Documents\Embarcadero\Studio\15.0\Samples\CPP\Mobile Samples\Device Sensors and Services\Bluetooth 
          • C:\Users\Public\Documents\Embarcadero\Studio\15.0\Samples\CPP\RTL\Tethering 
          [델파이(Object Pascal)]
          • C:\Users\Public\Documents\Embarcadero\Studio\15.0\Samples\Object Pascal\Mobile Samples\Device Sensors and Services\Bluetooth 
          • C:\Users\Public\Documents\Embarcadero\Studio\15.0\Samples\Object Pascal\RTL\Tethering

          온라인


          참고글



          저작자 표시 비영리 동일 조건 변경 허락
          신고

          험프리.김현수 파이어몽키

          XE7으로 연동한 모토로라 모토360

          2014.09.22 10:29

          엠바카데로 에반젤리스트 팀장인 짐 매키트(Jim McKeeth)가 이번에는 모토로라 모토 360과 연동을 시도해 봤습니다.

          모토 360은 아주 멋진 디자인으로 많은 분들의 관심을 받았는데요. 


          아래와 같이 델파이 IDE에 있는 모습이 아주 멋집니다.

          IDE에서 모토360 개발을 위해서는 멀티 디바이스 디자이너커스텀 뷰를 추가하면 가능합니다.


          자세한 내용은 짐 매키트의 글을 통해 확인해 주세요.



          저작자 표시 비영리 동일 조건 변경 허락
          신고

          험프리.김현수 파이어몽키 XE7, 모토 360

          1. https://github.com/jimmckeeth/FireUI-Devices
            위 깃허브 소스를 통해 모토360과 갤럭시 기어 뷰를 추가하는 패키지를 다운로드 받을 수 있습니다.
            설치 방법은 ReadMe.txt파일과 http://delphi.org/2014/09/hello-moto-360-from-delphi-xe7/를 참고하세요.

          병렬(패러럴) 컴퓨팅 라이브러리 소개

          2014.09.22 10:09

          최근들어 PC는 물론이고 스마트폰에서도 멀티코어 CPU를 이용해 성능을 극대화 시키고 있습니다. RAD Studio는 XE7에서 이러한 멀티코어 CPU를 최대한 활용할 수 있는 패러럴 컴퓨팅 라이브러리를 추가해 멀티코어 CPU를 최대한 활용할 수 있도록 지원하고 있습니다.


          패러럴 컴퓨팅 라이브러리에 대해 알아봅니다.

          병렬(패러럴) 컴퓨팅 러이브러리

          패러럴 컴퓨팅 라이브러리(Parallel Computing Library)란?

          • 멀티코어 CPU를 이용해 최적의 성능을 낼 수 있도록 다수의 CPU에서 병렬(패러럴)로 작업
          • 비동기 연산작업에 사용되어 멀티코어 컴퓨터와 장비 최대한 활용 가능 
          • 기존 코드에 손쉽게 통합하도록 라이브러리 형태로 지원 
          • VCL과 FMX, 델파이와 C++빌더에서 모두 사용 가능


          패러럴 라이브러리를 이용해 고성능이 필요한 작업을 병렬로 처리해 최적의 성능을 발휘하는 코드로 변경할 수 있습니다.

          ❑ 참고자료

          동영상

          패러럴 라이브러리 관련 글

          ❑ 샘플코드

          RAD Studio XE7의 샘플경로에 위의 동영상에서 진행된 "Conways Game of Life"샘플코드가 포함되어 있습니다.

          샘플경로

          • Delphi : C:\Users\Public\Documents\Embarcadero\Studio\15.0\Samples\Object Pascal\RTL\Parallel Library
          • C++ : C:\Users\Public\Documents\Embarcadero\Studio\15.0\Samples\CPP\RTL\Parallel Library


          샘플을 테스트 방법
          1. 샘플 프로젝트 컴파일 및 실행
          2. [Load] 버튼으로 "*.LIF" 파일 선택
          3. [Re-center] 버튼으로 중앙으로 이동(변경을 확인할 수 있도록)
          4. [Start] 버튼으로 실행
          5. Parallel 체크박스로 패러럴이 적용된 성능과 적용되지 않은 성능 비교

          인터넷 상에서는 아래의 경로를 통해 샘플코드 확인 할 수 있습니다.


          ❑ 마무리

          패러럴 라이브러리는 델파이(Object Pascal)과 C++ 빌더를 사용해 VCL과 FMX(멀티 디바이스) 모두에서 병렬 프로그램을 지원하고, 윈도우, 맥, 안드로이드, iOS에서 사용할 수 있습니다.

          단, 무분별하게 사용하면 다른 프로세스에 영향을 주거나 배터리 소모가 빠를 수 있으니 필요한 곳에 적절히 사용하시기 바랍니다.

          관련글



          저작자 표시 비영리 동일 조건 변경 허락
          신고

          험프리.김현수 파이어몽키 XE7, 페러럴

          iOS 개발환경에서 OpenSSL 라이브러리 설치 방법

          2014.09.17 14:04

          RAD Studio에서는 BaaS 클라이언트 컴포넌트와 DataSnap에서 HTTPS를 사용할 경우 OpenSSL을 사용하고 있습니다.


          iOS 클라이언트 앱을 컴파일 시 아래와 같은 메시지가 나오는 경우 대처방법입니다.


          E2597 ld: file not found: libcrypto.a


          ❑ 대처방법

          라이브러리 다운로드

          OpenSSL 라이브러리를 다운로드 받습니다.


          제일 하단의 OpenSSLStaticLibs.7z 파일(2014년 9월 현재)


          라이브러리 설치(복사)

          라이브러리를 적당한 곳에 압축해제 후 오류가 난 프로젝트 경로(*.dpr 파일이 있는 경로)에 복사합니다.


          다시 컴파일 및 실행하면 해당 오류가 발생하지 않습니다.


          참고: 

          델파이 라이브러리 경로에 복사하면 프로젝트 마다 복사하지 않아도 됩니다.


          라이브러리 패스를 확인하려면 Tools > Options > Environment Options > Delphi Options > Library에서 확인



          XE7 기준: "C:\Program Files (x86)\Embarcadero\Studio\15.0\lib\iosDevice\release"

          참고로 디버그 모드에서도 Release를 참고합니다.



          참고



          저작자 표시 비영리 동일 조건 변경 허락
          신고

          험프리.김현수 파이어몽키

          멀티 디바이스 디자이너 소개

          2014.09.17 10:23

          최근 다양한 스마트 기기가 속속 등장하고 있습니다.


          안드로이드폰의 다양성은 수많은 제조사의 숫자가 대변하구요. 아이폰의 경우도 전통적인 작은화면(3.5인치, 4인치)의 벗어나 이제 큰화면(4.7인치, 5.5인치) 출시되고 있습니다. 그뿐아니라 다양한 웨어러블 디바이스와 태블릿은 또 스마트폰과 다른 화면과 스타일을 갖습니다.


          이렇듯 다양한 스마트기기의 종류만큼 다양한 화면크기와 스타일도 제각각입니다.

          이런 디바이스의 특성에 맞는 화면과 스타일을 맞추는 것은 멀티 플랫폼 제품을 만드는 개발자와 디자이너에게 매우 큰 고민일 것입니다.


          이러한 고민을 RAD Studio에서 풀어나가기 위해 "멀티 디바이스 디자이너"라는 새로운 컨셉의 개발화면이 추가되었습니다.

          멀티 디바이스 디자이너는 RAD Studio XE7(Delphi XE7, C++Builder XE7)에 추가된 기능입니다.

          멀티 디바이스 디자이너



          멀티 디바이스 디자이너는 디바이스 별로 상이한 화면크기와 스타일을 각각의 디바이스에 맞도록 화면 구성하기 위한 새로운 화면 디자인 기술입니다.


          안드로이드 4인치의 레이아웃과 7인치의 레이아웃을 각각 다르게 구성할 수 있고, 아이폰의 화면도 그와 다르게 구성할 수 있도록 해줍니다.


          멀티 디바이스 디자이너는 "마스터 뷰"와 "디바이스 뷰" 개념이 적용되어, 클래스와 같이 화면을 상속받아 개발하는 컨셉입니다. 마스터 뷰에서 기본적이고 공통적인 화면을 구성하고 각각의 디바이스 뷰를 추가해 디바이스에 최적화된 화면으로 변경할 수 있습니다.

          마스터 뷰의 컨트롤과 레이아웃은 디바이스 뷰에서 상속받기 때문에 다양한 디바이스 뷰는 같은 레이아웃에서 시작하고, 디바이스 뷰에서 레이아웃을 변경하면 변경된 부분만 디바이스 뷰에 적용됩니다.

          ❑ 마스터뷰와 디바이스뷰

          마스터 뷰

          마스터 뷰에 Button과 StyleBook을 올려놓았습니다. 버튼의 텍스트도 변경했습니다.

          컴포넌트와 컴포넌트의 속성은 모두 디바이스뷰에 상속됩니다.

          이후 안드로이드와 iOS에서 버튼의 위치와 스타일을 각각의 디바이스에 맞게 변경합니다.

          안드로이드 4"(디바이스 뷰)

          iPhone 4"(디바이스 뷰)


          ❑ 디바이스 별 화면을 하나의 소스코드로 제어

          위와 같이 디바이스 별로 화면을 구성하면 아래와 같이 마스터 뷰와 디바이스 뷰 별 폼파일(*.fmx)이 생성됩니다.



          그리고 컴파일 및 빌드 시 선택한 플랫폼에 맞는 폼파일을 이용해 앱이 만들어지기 때문에 플랫폼과 디바이스에 맞는 화면의 앱을 제작할 수 있습니다.

          마무리

          이제는 클래스 뿐 아니라 화면디자인까지 상속받아 개발할 수 있습니다.

          새로운 멀티 디바이스 디자이너를 이용해 다양한 디바이스에 맞는 화면을 제공해 보시기 바랍니다.


          RAD Studio(델파이, C++빌더)란?

          Embarcadero® RAD Studio는 윈도우, 맥, iOS, 안드로이드, 웨어러블 앱을 한번에 개발하고 다양한 기기들과 각종 센서를 서로연결하는 애플리케이션을 매우 빠르게 개발할 수 있는 완벽한 소프트웨어 개발 도구입니다. (자세히)

          관련글



          저작자 표시 비영리 동일 조건 변경 허락
          신고

          험프리.김현수 파이어몽키

          다양한 형태로 표시되는 적응형 컴포넌트 TMultiView 소개

          2014.09.17 09:51

          이번 글에서는 XE7에서 새로 추가된 멀티뷰(TMultiView) 컴포넌트에 대해 간단히 살펴봅니다.

          멀티뷰(TMultiView)


          멀티뷰는 하나의 컴포넌트가 4개의 다양한 형태로 표시할 수 있는 적응형 컴포넌트입니다.

          "Mode" 속성을 변경해 원하는 표시방식을 직접 설정할 수 있지만 PlatformBehaviour 속성을 선택하면 플랫폼과 디바이스의 화면 해상도에 따라 적절한 표시방식으로 자동으로 화면에 표시됩니다.



          표시방식은 아래와 같습니다.

          TMultiView.ModeMaster Pane Presentation
          DrawerDrawer (Push/Overlap)
          PanelDocked panel
          PlatformBehaviour(see the following table)
          PopoverPopup menu
          CustomFor details, see the Custom Mode subsection.


          멀티뷰는 RAD Studio XE7(Delphi XE7, C++Builder XE7)에 추가된 기능입니다.

          참고자료




          저작자 표시 비영리 동일 조건 변경 허락
          신고

          험프리.김현수 파이어몽키 TMultiView, XE7

          멀티 디바이스 디자이너에 사용자 정의 View를 추가하기

          2014.09.15 11:16

          RAD Studio XE7에는 플랫폼과 디바이스의 폼팩터 별로 최적화된 화면을 구성할 수 있는 멀티 디바이스 디자이너 기술이 추가되었습니다.


          이제는 스마트폰의 화면구성과 태블릿의 화면구성을 아주 쉽게 차별화해 분리할 수 있게 되었습니다.



          위에는 기본적으로 제공되는 View의 목록 입니다. 최근 출시된 대부분의 스마트폰과 태블릿이 포함되어 있습니다.


          만약, 위 목록에 없는 장치의 화면을 별도록 구성하기 위해서는 여러분들이 직접 폼팩터와 플랫폼을 지정해 사용자 정의 뷰(Cusotom View)를 추가할 수 있습니다.


          패키지를 생성해 추가하는 방식인데요. 아래 링크를 참고하시면 어렵지 않게 추가할 수 있습니다.



          저작자 표시 비영리 동일 조건 변경 허락
          신고

          험프리.김현수 파이어몽키 Rad Studio, XE7, 멀티디바이스디자이너

          1. Blog Icon
            오실장

            이것 문서대로 테스트 해봤는데 마지막단계에서 MobileDevices.xml 파일을 수정하고 델파이 IDE를 재실행하니 MobileDevices.xml 파일이 저절로 다시 원상복구 되어서 사용자 Device View 가 생성되지 않더군요.
            시간될때 확인한번 해주세요.

          "Could not load SSL library." 오류 대응(XE7: BaaS, RESTClient, DataSnap)

          2014.09.12 14:46

          이전 코드 아카데미에서 BaaS 클라이언트 컴포넌트를 이용해 진행했는데요.

          이번 XE7으로 실행 시 아래와 같은 오류가 발생할 경우 대처방안 안내해 드립니다.


          해당 오류는 BaaS 클라이언트 컴포넌트와 DataSnap 사용 시 발생할 수 있습니다.

          해당 오류는 모바일로 배포시에는 발생하지 않으나, 윈도우에서 테스트 시 발생하는 오류입니다.



          Project Project1.exe raised exception class EIdOSSLCouldNotLoadSSLLibrary with message 'Could not load SSL library.'.

          ❑ 해결방안

          Open SSL 설치파일 다운로드


          설치 시 Windows 32bit 어플리케이션을 제작하기 위해 Win32OpenSSL v1.0.1i Light 버전을 다운로드 후 설치합니다.


          DLL 파일을 시스템 경로(C:\WIndows\System32)에 복사 되도록 설정 합니다.


          위 과정을 통해 이슈가 해결됩니다.


          저작자 표시 비영리 동일 조건 변경 허락
          신고

          험프리.김현수 파이어몽키

          [NFC] 안드로이드에서 NFC 연동 방법

          2014.09.12 10:20



          지난 9월 10일 새로운 아이폰(아이폰 6, 아이폰 6 플러스)에 NFC 기능이 포함된 애플페이가 소개되었습니다.


          NFC(근거리 무선 통신: Near Field Communication)

          근거리 무선 통신(近距離無線通信, Near Field Communication, NFC)는 13.56MHz의 대역을 가지며, 아주 가까운 거리의 무선 통신을 하기 위한 기술이다. 현재 지원되는 데이터 통신 속도는 초당 424 킬로비트다. 교통, 티켓, 지불 등 여러 서비스에서 사용할 수 있다.

          위키백과 참고


          델파이에서도 NFC 기능을 이용할 수 있는데요. 안드로이드에서 NFC 기능을 이용하는 방법을 소개합니다.


          Embarcadero의 MVP 이자 다양한 플랫폼 SDK와 API 연동하는 다양한 방법을 소개한 Brian Long의 글입니다.

          아주 상세하게 기본부터 설명을 하기 때문에 곱씹어 보면 다방면에서 도움이 될 자료입니다.


          또다른 엠바카데로의 MVP인 Daniel Magin도 브라이언 롱의 글을 참고해 부연했습니다.

          향후 애플에서 NFC 관련 기술을 공개하면 iOS에서의 NFC 연동에 관한 내용도 소개할 수 있기를 기대합니다.



          저작자 표시 비영리 동일 조건 변경 허락
          신고

          험프리.김현수 파이어몽키 NFC

          공백을 포함한 앱의 이름 설정하는 방법(iOS, 안드로이드)

          2014.08.26 23:18

          모바일 프로젝트를 컴파일 하고 실행하면 프로젝트 이름이 앱의 이름으로 기본 생성됩니다.


          iOS와 안드로이드 앱의 이름에 공백을 포함해 지정하려면 아래의 설정 값을 변경하기 바랍니다.


          저작자 표시 비영리 동일 조건 변경 허락
          신고

          험프리.김현수 파이어몽키

          [REST Client] RESTRequest 비동기 호출방법

          2014.08.26 09:53

          델파이에서 이미 구축된 웹서비스와 연동하기 위해서 REST 클라이언트 컴포넌트를 이용할 수 있습니다.


          그동안 비동기로 전송하는 부분이 궁금했는데 우크라이나(?) 개발자인 Dave Gill이 남긴  글(RestRequest.ExecuteAsync and TaniIndicator)을 보고 반가운 마음에 글을 남깁니다.


          비동기로 웹서비스에 요청하면 아래의 장점이 있습니다.

          • 어플리케이션의 화면이 어는 현상이 없습니다.
          • 데이터 요청 시 TAniIndicator 컴포넌트로 진행여부를 표시할 수 있습니다.(동기로 호출 시 화면이 얼어 움직이지 않습니다.)
          • 백그라운드로 다른 작업을 진행할 수 있습니다.


          글을 참고하니 이미 TRESTRequest 컴포넌트에는 비동기로 호출할 수 있는 ExecuteAsync 메소드가 있었습니다.(저만 몰랐네요.)


          테스트를 진행해 봤습니다.(VCL에서 테스트 해봤습니다.)

          아래와 같이 ExecuteAsync 호출 시 TProc(인자가 없는 프로시저)를 함께 전달하면 요청이 끝나고 호출됩니다.

          호출된 메소드에서 응답데이터를 사용하도록 구현하면 비동기로 웹서비스를 연동할 수 있습니다.


          저작자 표시 비영리 동일 조건 변경 허락
          신고

          험프리.김현수 파이어몽키 Rest Client, TRESTRequest

          RAD Studio 안드로이드 배포 시 INSTALL_PARSE_FAILED_INCONSISTENT_CERTIFICATES

          2014.08.24 11:43



          Unable to create process: Unable to install '<path>'. Failure [INSTALL_PARSE_FAILED_INCONSISTENT_CERTIFICATES]


          ❑ 오류원인

          빈번하게 일어나지 않는 오류이지만, RAD Studio(Delphi, C++빌더) 버전이 바뀔때면 가끔 보는 오류입니다. 하지만 환경오류가 나면 당황합니다. 


          당황하지 않고 오류를 해결하는 방법과 도움말을 통해 오류의 원인을 찾는 방법을 안내합니다.


          먼저 위 오류는 동일한 프로세스에 다른 서명 인증이 되어 있어 발생합니다.

          즉 동일한 프로세스 에를들면 "Project1"의 경우에서 많이 나는데요 이미 기기에 Project1이라는 앱이 들어있는데 새로운 버전의 개발툴에서 Project1으로 빌드하려 할때 발생합니다.


          이런경우 디바이스의 Project1 앱을 삭제하고 다시 시도하거나, 프로젝트 이름을 변경해서 배포하면 해결됩니다.

          ❑ 추가 도움말

          만약, 오류가 발생하면 오류 시 나오는 Troubleshooting 도움말을 참고하면 대부분 해결되지만 더 자세한 내용을 알고 싶으면

          구글등의 검색엔진에서 docwkik "오류명"으로 아래와 같이 검색하면 엠바카데로 도움말을 찾을 수 있습니다.


          ❑ 한글 도움말 확인

          한가지 팁을 더 드리면 영어가 어려우신 분들은 일본어 페이지에 들어가 구글번역을 시도하면 아주 훌륭한 품질의 한글로 내용을 확인할 수 있습니다.





          참고글


          저작자 표시 비영리 동일 조건 변경 허락
          신고

          험프리.김현수 파이어몽키

          REST Client 컴포넌트 - 마블(Marvel) 개발자 API 사용

          2014.08.20 10:50

          최근 개봉된 "갤럭시 오브 가디언즈"를 제작한 마블(Marvel)의 캐릭터와 스토리 등을 가져올 수 있는 API가 있습니다.

          그리고 개발자 API를 통해 델파이 XE6의 REST Client 컴포넌트로 앱을 만들어 공개한 내용이 있어 소개합니다.


          위 글에서는 REST Request 파라메터를 구성하고 이미지를 쓰레드로 받아오는 내용이 포함되어 있어 참고하면 아주 좋습니다.



          저작자 표시 비영리 동일 조건 변경 허락
          신고

          험프리.김현수 파이어몽키