User experience is the key thing to be considered while building a modern Multi-Device application. Lots of layout templates were available in GetIt Package Manager to design responsive, ultra-modern, cross-platform FireMonkey applications. This post helps to understand one of the FireMonkey Layout templates the Card View Wizard.
Card View Layout Template is a Fire Monkey template that incorporates a number of card view pages that can be navigated forward and backward though one would use this as an in-app tutorial.
How to install:
You can easily install this IDE Plugin from GetIt Package Manager. The steps are as follows.
- Navigate In RAD Studio IDE->Tools->GetIt Package Manager->select Sample Projects in Categories-> Card View Wizard 1.0 by Embercadero Technologies and click Install Button.
- Read the license and Click Agree All. An Information dialog saying ‘Requires a restart of RAD studio at the end of the process. Do you want to proceed? Click yes and continue.
- It will download the plugin and installs it. Once installed Click Restart now.
Card View Wizard Sample App Implementation Details:
- Car View Wizard Sample app contains, a TTabControl with a list of TabItems in it. Each TabItem is placed with an instance of TFrameCard defined in uCardFrame.pas. TFrameCard can set CardTitle, CardText, and Configure card with CardLayout Text image.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
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; |
When the WizardTabControlChange event occurs the respective card is displayed with title text and background image.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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; |
Be sure to check out all the available sample applications here!
Design. Code. Compile. Deploy.
Start Free Trial Upgrade Today
Free Delphi Community Edition Free C++Builder Community Edition
