Categories
Funny Source Code

3D Credits Scroll with Delphi

A little fun with Delphi for today’s Star Wars day!

3D Credits Scroll with Delphi - May The Fourth

This is a pretty simple 3D form with a 3D layout at an angle, and then a 2D layout with text and images is animated up the 3D layout. The only code is populating the labels as the animation kicks off automatically.

3D Scroll - MayTheFourth-StructureDownload the code and run the full credit scroll, or change the message to share with your friends. It is FireMonkey, and while I only tested it on Windows, it should work on Android, iOS, macOS, and even Linux if you are running FMX Linux.

CreditScroll3D Source for 10.2.3 Delphi

May the Fourth be with You!

Categories
News

The Year of the FireMonkey

Year of the FireMonkey

Today is the Lunar New Year starting the Chinese year of the Fire Monkey. The first day of the New Year falls on the new moon between 21 January and 20 February, which in 2016 is Monday, February 8th. The animal associated with the year is cyclical, as is the elemental sign. The last year of the monkey was 2004, and that year it was the Wood Monkey. The Fire elemental sign is considered the prosperity stage.

How are you using FireMonkey this year? How will the Monkey help you prosper?

Even Google is in on the Fire Monkey action with their Google Doodle of the day:

Google Doodle for the Lunar New Year 2016

Year of the FireMonkey Octagon is by Jim McKeeth and licensed under Creative Commons Attribution-Share Alike 3.0 Unported (derived from Monkey-2 by Angelus). Google Doodle is by Google.
Categories
webinar

Skill Sprint: Using FireMonkey Layouts

FireMonkey has many layout controls to choose from. Come learn the differences and how to use them to create dynamic, multi-platform user interfaces.

FireMonkey Layouts with Delphi

FireMonkey Layouts with C++Builder

 

Understanding and using FireMonkey Layouts

FireMonkey and the FireUI makes it easy to build one form to rule all the platforms. Combining layout controls and making use of Anchors, Alignment, Padding and Margins it is easy to make one form that looks and works great on all platforms.

Anchors

  • Position relative to one or more edge(s) of parent:Anchor
    • Top
    • Bottom
    • Left
    • Right
  • Default is Top, Left
  • Moves with parent resize
  • Each control has 0 to 4 anchors

Alignment

  • Aligns control within parent, setting anchors, size and position.
  • Default is None.
  • Anchor and fill along edge:
    • Top, Bottom, Left, Right
  • Fill parent, but preserve aspect ratio:
    • Fit, FitLeft, FitRight
  • Fill along one side of the parent (priority over other edge alignments):
    • MostBottom, MostTop, MostLeft, MostRight
  • Resize only on one axis (width or height)
    • Vertical, VertCenter, Horizontal, HorzCenter
  • Miscellaneous
    • Client – Fills client area, less other children
    • Center – No resize, just centered
    • Contents – Fills client area, ignoring other children
    • Scale – resizes and moves to maintain the relative position and size

Spacing – Margins and Padding

  • MarginsMarginsAndPadding
    • Spacing for siblings (and parent edges)
  • Padding
    • Spacing for children

TFlowLayout

  • Arrange child controls like words in a paragraph
  • Controls arranged in order added to layout
    • Use “Move to Front” or “Send to Back” to reorder
  • Use TFlowLayoutBreak for forced line break

FlowLayout1 FlowLayout2

TGridLayout

  • Arranges child controls in a grid of equal sizes
  • Controls flow through grid as parent resizes
  • Use ItemWidth and ItemHeight properties
  • Customize margins of individual controls

GridLayout2 GridLayout1

TGridPanelLayout

  • Creates a grid of specified rows and columns
  • Does not change the anchor or size of child
  • Each cell can contain 1 child control
  • You set the Height, Width, Align, and Anchors of children
  • Controls can span multiple cells

GridPanelLayout2 GridPanelLayout1

TScaledLayout

  • Stretches child controls as it is resized at runtime
  • Doesn’t respect aspect ratios of controls
  • Set the Align of the TScaledLayout to Fit to maintain aspect ratio
  • Some styles look better zoomed than others. The font grows – it is not a bitmap scale.
  • Has properties for OriginalWidth and OriginalHeight – Compare to Width and Height to determine scaling.

ScaledLayout-Stretch

TScrollBox

TTabControl

  • Control to group child controls into tabs
  • Tabs are in a stack with one visible at a time
  • TabPosition := PlatformDefault to use platform default behavior
  • TabPosition := None to hide navigation
  • Use TTabChangeAction to animate transitions

Frames

  • Reusable pieces of User Interface
    • Includes
      • The layout
      • All the event handlers
      • All the code in the unit
  • Create 1 or more Frames, then reposition based on current layout
    • Examples:
      • In TTabControl for phone
      • Side-by-side for Tablet

TMultiView

  • One super panel with multiple modesMultiView
  • Supported modes
    • PlatformDefault
    • Drawer
    • NavigationPane
    • Panel
    • Popover
    • Custom
  • Point to MasterPane, DetailPane and definable MasterButton
  • PlatformDefault adapts to platform and orientation
  • Custom supports user defined layout and behavior

Learning Resources

ScaledLayout Helper

The AbsoluteToLocal and LocalToAbsolute for TScaledLayout don’t handle the scaling. I’ve created a class helper that adds new methods for dealing with scaling.


{ TScaledLayoutHelper - interface } 

type 
  TScaledLayoutHelper = class helper for TScaledLayout 
    function LocalToAbsoluteScaled(const Point: TPointF): TPointF;
    function AbsoluteToLocalScaled(const Point: TPointF): TPointF; 
  end; 

{ TScaledLayoutHelper - implementation } 

function TScaledLayoutHelper.AbsoluteToLocalScaled( const Point: TPointF): TPointF; 
begin 
  Result.X := Self.Position.X 
              + Point.X 
              * Self.Width 
              / Self.OriginalWidth; 
  Result.Y := Self.Position.Y 
              + Point.Y 
              * Self.Height 
              / Self.OriginalHeight; 
end; 

function TScaledLayoutHelper.LocalToAbsoluteScaled( const Point: TPointF): TPointF; 
begin 
  Result.X := Point.X 
              / Self.Width 
              / Self.OriginalWidth 
              - Self.Position.X; 
  Result.Y := Point.Y 
              / Self.Height 
              / Self.OriginalHeight
              - Self.Position.Y; 
end; 

If you look at the original implementations of AbsoluteToLocal and LocalToAbsolute you will see they have different execution paths and calculations based on private members, so there may be some circumstances where my new ones don’t work as expected. They did work in my tests, and I am open to feedback.