Sunday, April 25, 2021

Delphi Form/Code Separation (CodeRage 9 2014)

I just re-watched an excellent video by David Schwartz on form/code separation. Schwartz gave this presentation during a 2014 Code Rage 9 session. 

Schwartz says the majority of Delphi Form-to-Form code he has seen uses what he calls "Back-Door" injection. Where all the data movement to and from controls is handled at the form level. This is in contrast with the “normal” use of properties to enforce encapsulation in the movement of data into and out of objects. He discusses "Constructor" injection and "Property" injection pointing out the pros and cons of both. 

I'm one of these "back-door" injection coders. I've never used properties. I'm learning how to use them. Here are my main reasons for not using them in the past:

  • Short how-two Delphi videos... "You can do all of this with no code".
  • They seem overly complicated to type.
  • Ignorance on the benefits provided.
Perhaps the IDE's Code Completion ( Ctrl + Shift + C ) would make creating properties and all the getters and setters a lot easier. I'll look into this. 

Help Wanted: If you know of any tutorials or videos specifically aimed at creating and using Properties please add them in the comments. Thank you.

Demo Code: The link to the demo code at the end of this video is broken. I have a copy of the demo code, Schwartz emailed it to me. I'm waiting for his permission to make it available as a download on this post. It does require the Konopka Signature Controls (formerly Raize components). 

I found this very interesting.

Have You Embraced Your Inner Software Plumber Yet?
David Schwartz

Here are time jumps to specific sections:

00:41 Overview:
14:35 Summary

External References:

Saturday, April 24, 2021

Delphi Tip of the Day - Toggle Visibility On/Off

I'm porting over one of my Delphi 5 VCL, desktop applications to FMX. The target audience are Windows and macOS users. I'm not focused on mobile at this juncture. I'm spending quite a bit of time on the User Experience (UX). I guess you would call this approach "Desktop UX First".

I want to give the user the option of showing or hiding panels. I've decided to place this functionality in two places:

  1. On the main menu as an option.
  2. On the bottom tool bar as a button.
The first thing that came to mind was testing the "IsChecked" state of the main menu option. I slept on it and came back to the drawing board the next day. Instead of thinking about trapping clicks, I thought about what the intent of the click really was. And the answer is to show or hide the panel.

If the user clicks either the main menu option or the toolbar button I want the panel to show or hide. Both of these options need to work together behind the scenes. The intent of either click focuses on the "visibility" of the panel. And wouldn't you know, TPanel has a Visible property.

Visible is a boolean value, meaning it has only two states. True/False. And in Delphi there is a very cleaver way to toggle the state of a boolean value. This can be a little tricky to wrap your had around at first. However, once you understand it, you'll love it.

Boolean Value becomes not Boolean Value;
Boolean Value (True) becomes not Boolean Value (True);
Boolean Value (False) becomes not Boolean Value (False);
Boolean Value := not Boolean Value;

Panel.Visibile becomes not Panel.Visibile;
Panel.Visibile (True) becomes not Panel.Visibile (True);
Panel.Visibile (False) becomes not Panel.Visibile (False);
Panel.Visibile := not Panel.Visibile;

The statement Panel.Visibile := not Panel.Visibile; 
toggles the value, back and forth between True and False.

Let's see how to put this to use in the real world. In Delphi create a new FMX application. 
Click File > New > Multi-Device Application - Delphi and choose Blank Application.

Add the following components:
TPanel x2

Structure the components so they are parented like this:

Your form should look similar to this:

The goal is to toggle the Left Panel visibility. When you first run the application the form opens with the default settings. We want both the MenuItem (Show Left Panel) and the ToolBar Button to work together.

Hiding the Left Panel the form changes accordingly.

Regardless of which method was used to Show/Hide the left panel both items stay in synch by calling on procedure ToggleLeftPanelOnOff.

I'm testing the Sender to make sure it was invoked by either a TMenuItem or a TButton control before I toggle the panel visibility. Although it's not displayed here this allows for calling ToggleLeftPanelOnOff from inside the form's OnShow method in essence setting the correct values without toggling the panels visibility.

Here is the program code:

unit Unit1;


  System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants,
  FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, FMX.Dialogs, FMX.StdCtrls,
  FMX.Controls.Presentation, FMX.Menus;

  TForm1 = class(TForm)
    MainMenu1: TMainMenu;
    StatusBar1: TStatusBar;
    pnlLeft: TPanel;
    pnlMain: TPanel;
    splLeft: TSplitter;
    tbarMain: TToolBar;
    btnTBarLeft: TButton;
    mnuFile: TMenuItem;
    menuOptions: TMenuItem;
    mnuShowLeftPanel: TMenuItem;
    mnuClose: TMenuItem;
    procedure mnuCloseClick(Sender: TObject);
    procedure mnuShowLeftPanelClick(Sender: TObject);
    procedure btnTBarLeftClick(Sender: TObject);
    { Private declarations }
    { Public declarations }
   procedure ToggleLeftPanelOnOff(Sender: TObject);

  Form1: TForm1;


{$R *.fmx}

procedure TForm1.btnTBarLeftClick(Sender: TObject);

procedure TForm1.mnuCloseClick(Sender: TObject);

procedure TForm1.mnuShowLeftPanelClick(Sender: TObject);

procedure TForm1.ToggleLeftPanelOnOff(Sender: TObject);
  // ==================================================================
  // Only toggle visibility if invoked by a menuitem or button click.
  // ==================================================================
  if (Sender is TMenuItem) or (Sender is TButton) then
    pnlLeft.Visible := not pnlLeft.visible;

  // ==================================================================
  // Set menuitem and button properties
  // ==================================================================
  if pnlLeft.Visible then
    mnuShowLeftPanel.IsChecked := True;
    btnTBarLeft.StyleLookup := 'arrowlefttoolbutton';
    mnuShowLeftPanel.IsChecked := False;
    btnTBarLeft.StyleLookup := 'arrowrighttoolbutton';



Here is the text version of the Form:

object Form1: TForm1
  Left = 0
  Top = 0
  Caption = 'Toggle Demo'
  ClientHeight = 480
  ClientWidth = 640
  FormFactor.Width = 320
  FormFactor.Height = 480
  FormFactor.Devices = [Desktop]
  DesignerMasterStyle = 0
  object StatusBar1: TStatusBar
    Position.Y = 458.000000000000000000
    ShowSizeGrip = True
    Size.Width = 640.000000000000000000
    Size.Height = 22.000000000000000000
    Size.PlatformDefault = False
    TabOrder = 1
  object pnlLeft: TPanel
    Align = Left
    Size.Width = 161.000000000000000000
    Size.Height = 458.000000000000000000
    Size.PlatformDefault = False
    TabOrder = 2
  object pnlMain: TPanel
    Align = Client
    Size.Width = 475.000000000000000000
    Size.Height = 458.000000000000000000
    Size.PlatformDefault = False
    TabOrder = 3
    object tbarMain: TToolBar
      Align = Bottom
      Position.Y = 418.000000000000000000
      Size.Width = 475.000000000000000000
      Size.Height = 40.000000000000000000
      Size.PlatformDefault = False
      TabOrder = 0
      object btnTBarLeft: TButton
        Align = Left
        Size.Width = 40.000000000000000000
        Size.Height = 40.000000000000000000
        Size.PlatformDefault = False
        StyleLookup = 'arrowlefttoolbutton'
        TabOrder = 0
        Text = 'btnTBarLeft'
        OnClick = btnTBarLeftClick
  object splLeft: TSplitter
    Align = Left
    Cursor = crHSplit
    MinSize = 20.000000000000000000
    Position.X = 161.000000000000000000
    Size.Width = 4.000000000000000000
    Size.Height = 458.000000000000000000
    Size.PlatformDefault = False
  object MainMenu1: TMainMenu
    Left = 304
    Top = 224
    object mnuFile: TMenuItem
      Text = 'File'
      object mnuClose: TMenuItem
        Locked = True
        Text = 'Close'
        OnClick = mnuCloseClick
    object menuOptions: TMenuItem
      Text = 'Options'
      object mnuShowLeftPanel: TMenuItem
        Locked = True
        IsChecked = True
        Text = 'Show Left Panel'
        OnClick = mnuShowLeftPanelClick

Gunny Mike

Thursday, April 8, 2021

Turbo Boost Your Delphi Knowledge - Become a Docwiki Ninja Warrior

I've made a commitment to learn FireMonkey. My flagship software product, Zilch Standard, turned 30 years old in 2021 and I still don't have a macOS version. I've got macOS consumers who buy my Windows® software and then email asking if there's a version that runs on their mac computer. This inevitably leads to me issuing a refund. So, I have a pretty strong incentive to learn FireMonkey.

"I feel like I'm sitting in the cockpit of an airplane."

I tried going down the FireMonkey learning path before but unfortunately I didn't get very far. Learning FireMonkey makes me feel like I'm sitting in the cockpit of an airplane. There's so many things that are unfamiliar. The scope of it all is overwhelming. There's so much to learn. I don't know where to look first. What about the help? It's just an [F1] key press away!

I don't know about you but I get frustrated at the built-in help that comes with Delphi? Does this sound familiar? You're frantically trying to figure something out... pressing [F1] all over the place, and hopelessly rummaging around through Delphi's built-in help. Sometimes it's great and gives you what you exactly what are looking for. Often times you are left feeling like you just read a bunch of cryptic tea leaves. 

Where do you turn at this point? The Facebook Delphi groups? Stackoverflow?  Your stash of Delphi books? Delphi's dockwiki?

In the past I've rarely thought to use Delphi's docwiki. In my mind I felt like it was the same rehashed [F1], cryptic leaves stuff. Well, that changed last night. 

It turns out, I wasn't using the dockwiki in a meaningful way. I figured out how to exploit the value of the docwiki. I'm going to show you how to become a docwiki ninja warrior.

"I'll show you how to become a Delphi Docwiki Ninja"

It all started last night when I wanted to learn more about FormFactor. I wrote a simple FMX application that displays the ClientHeight, ClientWidth, FormFactor.Width, and FormFactor.Height in the OnResize event handler. I was curious why the FormFactor values never changed as the form was resized, so I wanted to learn more. That's when I highlighted FormFactor in the Object Inspector and pushed [F1] .

This brought up the built-in help for FormFactor. This is one of those cryptic tea leaves help reference.

This wasn't very helpful. I may have done some googling to learn more but couldn't find anything that talked about FormFactor. What it is? How it's used? Why it's used? So I posted my question to StackOverflow

Someone commented and said "Please look at the documentation. It seems to concern iOS only, and changes according target device selection."

How did he find that docwiki page? That's not the docwiki page I found. In fact I couldn't find the dockwiki page referenced in StackOverflow comment. Turns out I didn't understand how to use the dockwiki. I was stuck in the API library and couldn't got out!

I was stuck in the API library and couldn't get out!

That's when I discovered how to become a Docwiki Ninja Warrior. This takes less than a minute to setup and I believe it will save you hours looking for information about Delphi that is relevant to what you are looking for. For illustrative purposes I'm sticking with my original pursuit of FormFactor.

Step 1: From inside the IDE click Help > RAD Studio Docwiki

Step 2: This opens the RAD Studio docwiki page in your default browser.
Step 3: Right-click on Library Reference > Open link in new tab 

Step 4: This opens the Library docwiki page in a new browser tab.
Step 5: Right-click on Code Example > Open link in a new tab.

At this point you should have three tabs in your browser each dedicated to separate docwiki sections. And now the fun begins.

Step 6: Enter FormFactor in the search box for tab 1 RAD Studio and press [Enter]. I'm horrible at spelling so I usually just copy and paste the value I need. I just highlighted FormFactor in the IDE code editor and pasted it in the search box. 

Step 7: Switch to tab 2 Library docwiki page and paste or enter FormFactor in the search box and press [Enter].

Step 8: Switch to tab 3 Code Examples docwiki and paste or enter FormFactor in the search box and press [Enter].

"So, what did I learn about FormFactor?"

FormFactor is only used used when you are creating an iOS application. This is awesome. I learned enough about FormFactor to satisfy my current need. Because I'm focused right now on learning how to use FireMonkey to create desktop applications for Windows and macOS, FormFactor is not relevant to my current situation. This lets me know I can skip a thorough investigation about FormFactor for the time being. It also lets me know that ignoring FormFactor at this time is okay since it does not apply to desktop applications for Windows or macOS. I don't need to be concearned about FOMO (fear of missing out).

However, if FormFactor was something I was interested in, the three different docwikis provide ample links to related, relevant, information in one convenient location. 

Oh yeah, make sure to play around with the "Advanced" link on the special search results pages.

There you have it. I am so glad I stumbled upon this. It will surely be very helpful in my quest to learn FireMonkey. 

Semper Fi,
Gunny Mike