FireUI Multi-Device Application Development - HR Manager Example

In today's #DelphiWeek post, I thought I would highlight the HR Manager demo that I built for a previous webinar. I have gotten many requests for this sample, and am including a Code Central download link at the bottom of this post.

You can access my CodeRage webinar recording here and my Skill Sprint session here.

This demo is designed to better highlight how to customize your UI using the FireUI Designer.

It uses the TMultiView component to show the list of employees as a docked panel on a tablet in landscape mode, or a slide-in drawer on a phone form factor.

It also shows/hides an additional HR admin panel when deployed to a tablet form factor. This is done simply by changing the visibility of the listbox component. When working with many tabs and several listboxes, I would recommend selecting a name for the listbox component that reflects its intended use. In my case, I named this listbox 'TabletHRList' to easily identify it as a UI element that I only wanted to show it on a tablet form factor.

Next, I created two views for each mobile target platform (iOS and Android). One for a tablet, and one for a phone.

On the tablet views, I set the TabletHRList Visible property to True. On the phone views, I set the TabletHRList Visible property to False.

This ensures that the admin panel will be shown on a tablet form factor and hidden on a phone form factor on both iOS and Android.

This demo uses the FDMemTable component to store some sample data that I created for this demo. The sample data is bound into the UI controls using the LiveBindings Designer.

Here is an example of the app running on an iPhone:

Here is an example of the app running on an iPad.

To download the project files, visit: http://cc.embarcadero.com/item/30133