FMX.MetropolisUIFlyoutDemo Sample

From RAD Studio XE3 Code Examples
Jump to: navigation, search

Language:

Versions:

A flyout is a panel that slides in from the right. This sample illustrates how to create and use flyouts using FireMonkey.

Contents

Location

You can find the FireMonkey ImageSpin sample project at:

  • Start | Programs | Embarcadero RAD Studio XE3 | Samples, and then navigate to FireMonkey \ MetropolisUIFlyoutDemo.

Or you can go to C:\Users\Public\Documents\RAD Studio\n.n\Samples.

Description

This application uses TPanel, TPopup, and TFloatAnimation in order to create two flyouts:

  • One flyout for displaying a calendar
  • One flyout for exiting the form

How to Use the Sample

  1. Navigate to the location of the MetropolisUIFlyoutDemo sample and open MTT.dproj.
  2. Press F9 or choose Run > Run.
  3. Observe how the flyouts are displayed when either of the two buttons is pressed:
    • The CheckCalendarButton button (in the middle of the form) displays the Calendar, sliding in from the right.
      Clicking the Close button on the Calendar closes the Calendar.
    • The CloseAppButton button in the lower-right corner of the form displays a verification dialog:
      "Really close?"
      Clicking Sure closes the application.

Classes

Flyouts represents the main window unit of the sample. It contains the FlyoutDemoForm class, which defines the main form and contains:

  • Two TPopup objects (CalendarFlyout and ExitFlyout)
  • Two TFloatAnimation objects (CalendarFlyoutAnimation and ExitFlyoutAnimation)
  • Four TButton objects (CalendarCloseButton, CheckCalendarButton, ReallyCloseButton, and CloseAppButton)
  • A TCalendar object (Calendar1)
  • Three TLabel objects (CalendarTitleLabel, ExitFlyoutLabel, and TitleLabel)
  • Four TLayout objects (DummyLayout, Layout1, Layout2, and FooterLayout)
  • Two TPanel objects (Panel1 and SampleFlyoutPanel)
  • A TStyleBook object

Implementation

  • When running the application, the main window of the sample is displayed.
  • The two flyouts are designed using TPanel and TPopup.
  • This sample application:
    • Attaches the two animations to the created flyouts, to slide them from the right side of the form.
    • Implements the proper methods to display the two flyouts: 'ShowExitFlyout' and 'ShowCalendarFlyout'.
    • Adds OnClick events to the buttons that trigger the displaying of the two flyouts.

Uses

See Also

Retrieved from "http://docwiki.embarcadero.com/CodeExamples/XE3/e/index.php?title=FMX.MetropolisUIFlyoutDemo_Sample&oldid=24909"
Personal tools