FMX.TabletMasterDetailwithSearch Sample

This is a project that shows how to implement a master-detail application for tablets using a TListView and LiveBindings.

Location

You can find the TabletMasterDetailwithSearch Sample sample project at:

• Start | Programs | Embarcadero RAD Studio 10.2 Tokyo | Samples and navigate to:
  • Object Pascal\Multi-Device Samples\User Interface\TabletMasterDetailWithSearch
  • CPP\Multi-Device Samples\User Interface\TabletMasterDetailWithSearch
• Subversion Repository:
  • http://sourceforge.net/p/radstudiodemos/code/HEAD/tree/branches/RADStudio_Tokyo/Object%20Pascal/Multi-Device%20Samples/User%20Interface/TabletMasterDetailWithSearch
  • http://sourceforge.net/p/radstudiodemos/code/HEAD/tree/branches/RADStudio_Tokyo/CPP/Multi-Device%20Samples/User%20Interface/TabletMasterDetailWithSearch

Description

When you run the application, it shows two columns. The column on the left-hand side shows a list of people and includes a search box. The column on the right-hand side shows details (a picture, name, job and "description") about the person currently selected on the list view.

You can tap list view entries to select them and load their information on the right-hand side column. You can also click the Prior and Next button on the top-right corner of the application to navigate the list view items.

You can also enter text in the search box of the list view to filter the list of people.

How to Use the Sample

1. Navigate to the location given above and open:
   • Delphi: TabletMasterDetailwithSearch.dproj.
   • C++: TabletMasterDetailwithSearch.cbproj.
2. Press F9 or choose Run > Run.

Implementation

This application uses a list view populated using LiveBindings, specifically a TPrototypeBindSource.

This application handles the OnItemClick event of the list view with a procedure that takes the TPrototypeBindSource to the clicked entry, so that the right-hand side column of the application shows that information.

This application contains a TActionList with two actions that are associated with the Prior and Next buttons. These actions are the standard TFMXBindNavigatePrior and TFMXBindNavigateNext actions and they are linked with the TPrototypeBindSource through their DataSource property and have event handlers for their OnExecute and OnUpdate events. The Execute event handler takes the TPrototypeBindSource to the next entry and the Update event handler disables when there is no prior or following item, respectively.

The SearchVisible property of the list view is True, so that the list view shows a search box to filter the list view items. The Update event handler of the Prior and Next actions disables these actions when the list view is filtered.

Uses

• FMX.ListView.TListView
• Data.Bind.ObjectScope.TPrototypeBindSource
• FMX.ListView.TListView.OnItemClick
• FMX.ActnList.TActionList
• Fmx.Bind.Navigator.TFMXBindNavigatePrior
• Fmx.Bind.Navigator.TFMXBindNavigateNext
• Fmx.Bind.Navigator.TFMXBindNavigateAction.DataSource
• FMX.ActnList.TAction.OnExecute
• FMX.ActnList.TAction.OnUpdate
• FMX.ListView.TListView.SearchVisible

See Also

• Tutorial: Using LiveBindings to Create an Application Without Code
• All the LiveBindings Tutorials
• LiveBindings in RAD Studio