RAD Studio Rapidly Create Modern Looking Responsive Master-Detail User Interfaces

[FireWind]

Rapidly Create Modern Looking Responsive Master-Detail User Interfaces
By Muminjon March 10, 2021

RAD Studio comes with hundreds of visual and non-visual components to make developers’ life easier. But not knowing how to use them is the problem most of the time. I have seen many new VCL and FMX developers try to do something within a hard way. So, we are here for you to help on making things easy for you.

Most of the time problems occur when a developer does not know what he has in his development environment. For instance, creating visually-stunning cross-platform user interfaces with FireMonkey sometimes can be intimidating. But, knowing where and when to utilize the exact component is a good sign of a RAD developer.

Here, I would like to discuss the TMultiView component. TMultiView component allows you to create a master-detail interface quickly. So, you can implement a master-detail interface that can be used for any available platform available in the RAD Studio.

How can I create a cross-platform master detail interface?​

The Multiview Navigation demo shows you how to implement a master-detail interface and display the Multiview control as a slide-in drawer, popover menu, docked panel, and several modes.

procedure TForm1.ListBox1ItemClick(const Sender: TCustomListBox; const Item: TListBoxItem);
begin
  Item.IsSelected := False;
  MultiView1.HideMaster;
end;

procedure TForm1.MultiView1PresenterChanging(Sender: TObject; var PresenterClass: TMultiViewPresentationClass);
begin
  if PresenterClass = TMultiViewNavigationPanePresentation then
  begin
    MasterButton.Visible := False;
    MultiView1.MasterButton := MasterButton2;
  end
  else
  begin
    MasterButton2.Visible := False;
    MultiView1.MasterButton := MasterButton;
  end;
end;

procedure TForm1.nbDurationSlidingChange(Sender: TObject);
begin
  MultiView1.DrawerOptions.DurationSliding := nbDurationSliding.Value;
end;

Be sure to head over and check out the Multiview Navigation demo on the GetIt portal and download it from the IDE using the GetIt Package Manager