Author: ısık

During our recent RAD Server webinar, we showed you how to develop and deploy a real world customer retail application. The client app shown is designed to run on smartphones and the server side will execute on IIS production servers on premises and on Amazon EC2 (you can also host a RAD Server application on Microsoft Azure and other cloud servers).

The client app allows customers to look up price and descriptions of products in the store using product barcodes and by keying in product SKUs. The app also enhances the customer experience and facilitates marketing programs by lighting up an end-cap product display as the customer nears a target product. The app can also send sale prices to the customer via push notifications when the customer enters the store or is near a relevant sale item.

In today's blog post, I wanted to describe the steps for creating the Home Screen design seen on the first tab of the application. Home screens are a popular design paradigm as they display the key app functionality on the first screen, making it easily accessible to the application user. Home Screen navigation usually consists of glyph buttons arranged in a grid like layout and may span over multiple screens.

Step 1:  Set up the UI

This application consists of 6 tabs, with TTabControl's TabPosition property set to None. To set up the Home Screen design, add a toolbar and a label to Tab 1 (HomeScreenTab). Set TToolbar's Align property to Top, and TLabel's Align property to Contents, and the Text Settings HorzAlign property to Center. Next, add a TGridPanelLayout control to Tab1 and align it to Client.

Step 2: Adjust the TGridPanelLayout settings

With GridPanelLayout1 selected in the Object Inspector, drag and drop a TLayout control onto your form. Repeat these steps 3 times.  Align each TLayout control to the client. This ensures even spacing and alignment for each of the 4 icons. Select the ColumnCollection property for GridPanelLayout1 in the Object Inspector. Set the % for each column to 50% to ensure the columns are evenly spaced. Repeat this step for the RowCollection property.

grid1_5f00_zpsc4bj6mzy-2502980

Step 3: Add images and text

Select each Layout control in the Object Inspector, and parent a TImage control and TLabel to it. Align each TImage to the client. Align each TLabel to the bottom.

Step 4: Set margins, adjust font settings and more
Select each layout control in the Object Inspector and set your margins. In my example, I set bottom, top, left and right to 30. I then created views for each of my target devices (iPhone 4.7 inch, Android 5 inch etc.) and adjusted the margins and font size to ensure the text and images were displayed properly on each of my target devices. By selecting the ControlCollection property in the Object Inspector, you can also adjust the placement and order of each of your layouts.

grid9_5f00_zpsblnzmt0h-8989052

Here is an example of the application running on an iPhone 6s:

homescreen1_zpslyhhljrq-9966750

[DownloadButton Product='RAD' Caption='Download a RAD Studio Trial today!']

DelphiCon 2021