Search results for '파이어몽키'

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

재사용 가능한 프레임으로 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 파라메터를 구성하고 이미지를 쓰레드로 받아오는 내용이 포함되어 있어 참고하면 아주 좋습니다.



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

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

        시스템정보 확인, 캔버스 벤치마킹 용 앱 소개(Win, OSX, iOS, Android)(소스공개)

        2014.08.13 09:54

        델파이 RTL과 파이어몽키의 속성값과 캔버스의 벤치마킹 등을 확인하는 앱이 구글 플레이어에 등록되었습니다.


        대표적인 기능은

        • 델파이(RTL)의 시스템, 수학함수 등의 정보
        • 파이어몽키를 이용한 시스템 정보(터치 지원 정보, 폼팩터 등)
        • 캔버스에 도형을 그리는 작업의 벤치마킹(TChart 이용)
        • 윈도우 32, 64 bit, OSX, iOS, Android 지원


        아래 원문에서 추가 설명 및 소스코드를 확인하세요. 소스코드를 보시면 많은 정보를 얻을 수 있습니다.


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

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