멀티-디바이스 파이어몽키 앱을 현대화하기 - 사용하기 쉬운 카드 뷰 마법사 템플릿

[Kori]

Anbarasan가 2020년 12월 7일에 기고한 Modernize Your Multi-Device Fire Monkey App Easy To Use Card View Wizard Layout Template을 번역한 글

사용자 경험 (UX, User Experience)는 현대식 멀티-디바이스 애플리케이션을 구축할 때 중요하게 고려해야 한다. 겟잇 패키지 매니저 (GetIt Package Manager) 안에는 많은 레이아웃 템플릿들이 들어 있어서 디자인이 무척 현대적이고, 반응형인 디자인을 크로스 플랫폼 파이어몽키 애플리케이션에 적용할 수 있다. 이 글은 파이어몽키 레이아웃 템플릿 중에서 카드 뷰 마법사 (Card View Wizard)를 설명한다.

카드 뷰 레이아웃 템플릿은 파이어몽키 템플릿 중 하나이다. 이것은 카드 뷰 페이지를 여러개 넣고 각 페이지 간에 앞뒤로 이동할 수 있도록 하는 화면 템플릿이다. 이 템플릿은 튜토리얼 화면을 구현할 때 활용되기도 있다.

설치 방법:

이 템플릿은 "IDE 플러그인"이므로 겟잇 패키지 매니저 (GetIt Package Manager)에서 손쉽게 설치할 수 있다. 설치 단계는 다음과 같다.

1. RAD 스튜디오 IDE에서 >Tools > GetIt Package Manager > Categories에서 Sample Projects를 선택 > Card View Wizard 1.0 by Embercadero Technologies 를 찾아서 Install 버튼을 클릭.
2. 라이선스 정책을 읽고 Agree All을 클릭. ‘Requires a restart of RAD studio at the end of the process. Do you want to proceed?' 라는 대화 창이 표시되면 yes and continue를 클릭.
3. 그러면, 해당 플러그인이 다운로드 된다. 설치가 되면 Restart now를 클릭.

겟잇 - 카드 뷰 마법사 1.0

카드 뷰 마법사 예제 앱에 구현되어있는 핵심 코드 설명:

카드 뷰 마법사 예제 앱에는 TTabControl이 하나가 들어있고, TabItem들의 목록이 들어있다. 각 TabItem 안에는 TFrameCard의 인스턴스가 들어있다. TFrameCard는 uCardFrame.pas 파일에 정의되어 있으며, 자신의 CardTitle과 CardText를 설정할 수 있고, 카드 레이아웃을 구성할 수 있다.

procedure TMainForm.FormCreate(Sender: TObject);
begin
 
{$IFDEF FIRSTSET}
  // first set
  FrameCard1.SetCardTitle(WIZARD_TITLE_1);
  FrameCard1.SetCardText(WIZARD_TEXT_1);
  FrameCard1.ConfigureCard(TCardButton.Inner, TCardBGImage.Inner, TCardLayout.TextImage);
 
  FrameCard2.SetCardTitle(WIZARD_TITLE_2);
  FrameCard2.SetCardText(WIZARD_TEXT_2);
  FrameCard2.ConfigureCard(TCardButton.Inner, TCardBGImage.Inner, TCardLayout.TextImage);
 
  FrameCard3.SetCardTitle(WIZARD_TITLE_3);
  FrameCard3.SetCardText(WIZARD_TEXT_3);
  FrameCard3.ConfigureCard(TCardButton.Inner, TCardBGImage.Inner, TCardLayout.TextImage);
 
  FrameCard4.SetCardTitle(WIZARD_TITLE_4);
  FrameCard4.SetCardText(WIZARD_TEXT_4);
  FrameCard4.SetNextButtonText(WIZARD_NEXT_BUTTON_4);
  FrameCard4.ConfigureCard(TCardButton.Inner, TCardBGImage.Inner, TCardLayout.TextImage);
{$ENDIF}
 
  WizardTabControlChange(Sender);
end;

 

WizardTabControlChange 이벤트가 발생하면, 해당되는 카드의 제목과 배경 이미지가 화면에 표시된다.

procedure TMainForm.WizardTabControlChange(Sender: TObject);
var
I: Integer;
begin
  for I := 0 to WizardTabControl.TabCount-1 do
    begin
      if TTabItem(WizardTabControl.Tabs[I]).TagObject is TRectangle then
        begin
          TButton(TTabItem(WizardTabControl.Tabs[I]).TagObject).Visible := False;
        end;
    end;
  if WizardTabControl.TabIndex>-1 then
    if WizardTabControl.ActiveTab.TagObject is TRectangle then
      begin
        TButton(WizardTabControl.ActiveTab.TagObject).Visible := True;
      end;
end;

카드 뷰 마법사 1.0 데모

이 카드 뷰 마법사 예제는 델파이 코딩을 배우기에도 매우 좋다.

이외에도 좋은 예제 애플리케이션들이 많다. 모두 살펴보는 것도 잊지말자: "예제 프로젝트" 목록 보기