이 사이트 검색

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)에서 손쉽게 설치할 수 있다. 설치 단계는 다음과 같다. RAD 스튜디오 IDE에서 >Tools > GetIt Package Manager > Categories에서 Sample Projects를 선택 > Card View Wizard 1.0 by Embercadero Technologies 를 찾아서 Install 버튼을 클릭. 라이선스 정책을 읽고 Agree All을 클릭. ‘Requires a restart of RAD studio at the end of the process. Do you want to proceed?' 라는 대화 창이 표시되면 yes and continue를 클릭. 그러면, 해당 플러그인이 다운로드 된다. 설치가 되면 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 데모 이 카드 뷰 마법사 예제는 델파이 코딩을 배우기에도 매우 좋다. 이외에도 좋은 예제 애플리케이션들이 많다. 모두 살펴보는 것도 잊지말자: "예제 프로젝트" 목록 보기

원문 링크: https://blogs.embarcadero.com/get-these-visually-stunning-firemonkey-styles-free-to-enhance-user-experience-in-your-delphi-apps/ 작성자(작성일): Muminjon (2021.1) 지난 몇 년 간, 파이어몽키와 VCL Styles가 시각적으로 더욱 멋지게 발전해오는 것을 눈으로 확인해왔다. 이 스타일들을 적용한 앱은 TStyleBook 컴포넌트를 적용하는 것 만으로도 UX를 한 단계 더 높일 수 있다. TStyleBook 컴포넌트에는 폼에 적용할 수 있는 스타일 컬렉션들이 있다. 스타일과 TStyleBook을 이해하고 있다면, 필요할 때 언제든 템플릿 스타일 파일을 매우 손쉽게 원하는대로 커스터마이징해서 활용할 수 있다. 파이어몽키 스타일들(FMX Styles) FMX Styles에는 아래를 포함한 여러 스타일이 있다. FMX Style - Calypso FMX Style - MaterialOxfordBlue FMX Multi-Device Style - Material Patterns Blue FMX Style - PuertoRico FMX Style - Stellar FMX Multi-Device Style - Ubuntu Clear Fantasy FMX Style - WedgewoodLight 파이어몽키 스타일에 대한 더 많은 자료는 다음 링크들을 활용하면 도움이 될 것이다: FMX Styles로 컨트롤들 자유롭게 커스터마이징하기 스타일을 활용해 전체 UI 뿐만 아니라 개별 컨트롤들을 커스터마이징하는 방법을 직접 보여준다. 이 과정에서 Style Designer를 사용해 맞춤형 스타일을 가장 멋지게 연출하는 방법에 대해 알아볼 수 있다. 네이티브 & 커스터마이징한 파이어몽키 스타일들 파이어몽키 프레임워크에서 네이티브 UI 지원과 커스터마이징한 스타일을 활용해 멀티-디바이스 애플리케이션 프로필 화면을 작성하는 방법을 보여준다. FMX Styles로 작업할 때 유용한 팁들 - CodeRage 2019 RAD스튜디오에서 FMX Styles를 잘 활용할 수 있는 팁들을 소개한다. 엠바카데로 UX Summit 엠바카데로에서 2020년부터 매년 진행하고 있는 UX 집중 온라인 컨퍼런스를 통해 더 많은 유용한 정보들을 확인할 수 있다. RAD스튜디오/델파이/C++빌더를 실행하면, 겟잇을 실행해 다양한 FMX Styles를 다운로드 받아 활용할 수 있다. 다운로드 받을 수 있는 FMX Styles는 이 링크를 통해 확인할 수 있다.