One of the single most important concepts to understand in RAD Studio, Delphi and/or C++ Builder cross-platform development is the concept of styles. Styling is the cornerstone of the cross-platform FireMonkey architecture. ​

Styles are used at different levels. There are platform-specific, built-in styles that you use when you create a multi-device project and switch between styles in the form designer. FireMonkey controls on a form have a StyleLookup property, which can use a specific style for a given component. You can also apply a custom style using the TStylebook component. Finally, with the built-in style editor you can visually customize a given style item in the stylebook as easily as you would customize a component on the form. The key point with FireMonkey styles is you can build stunning graphical user interfaces!

With the RAD Studio, Delphi and/or C++ BUilder IDE, in the Designer, there is a Style combo-box where you can change the style that is used to preview the form you are working with.

With FMX, you can Stop Duplicating UI Work!​
With other tools, an app developer might create an iOS user interface using the default vendor tools in Xcode and Swift, and an Android user interface in Android Studio and Java or Kotlin. 

Despite being very similar, these efforts are entirely duplicated with no shared work. Even with other cross-platform solutions, the amount of shared work is limited. For example, Xamarin.Forms focuses on cross-platform development, but a lot of effort is duplicated since you need to interface in Swift (iOS) or Java (Android) to create anything non-standard. 

With FireMonkey, a developer creates an interface once. Developers can easily make per application or per platform level application tweaks. For example: in the iOS version ensuring one control is presented using the native implementation; then in Android, adjusting spacing and colors for material design. The only language you need to use is Delphi or C++: all controls and UI interaction is in Delphi or C++, and you don’t need to mix languages or create translation layers. Just bring your existing Delphi or C++ code right into a native Delphi or C++ application.

Here we see Native UI styling on Android and iOS with the ability to easily tweak button styles and much more.

Compared to other development tool vendors that only offer a small amount of controls, RAD Studio, Delphi and/or C++Builder include hundreds of controls that can be used in multi-device applications, and has a rich 3rd party ecosystem.

To help get us started with our FMX cross-platform UIs, you can use the included FMX GUI Templates; For example, the Home Screen and the Login Screen, as we see here:

     ​

The FMX GUI Templates are a set of UI template projects for FireMonkey in Embarcadero RAD Studio available via Embarcadero GetIt Package Manager.

You can access these Templates using Tools | Getit Package Manager, select Sample Projects Category.​

For our sample FieldLogger mobile application we shown in the webinar, we installed the Home Screen and the Login Screen applications, that look like what we see on the images above.​

The FMX GUI Templates serve as a great starting point for developers looking to build stunning cross-platform UIs, and can easily be customized by changing the images, iconography, styles and more. ​

​The FireMonkey framework is the app development and run-time platform behind RAD Studio, Delphi and C++Builder.

FireMonkey is designed for teams building multi-device, true native apps for Windows, macOS, Android and iOS, and getting them​ to app stores and enterprises fast. ​

The different FMX GUI templates demonstrate responsive design in a variety of layout styles which makes it easy to design and customize your applications visually at design time.​

The templates also use a variety of technologies like Frames, Styles, LiveBindings, and FireMonkey Effects which make it simple to build stunning UIs with RAD Studio, that provide an intuitive User Experience (UX).

​There are six sets of FMX GUI templates, each set demonstrating a different type of UI, and three examples in each set for a total of eighteen. The templates are built using components like Frames, a container component, allowing you quickly create a reusable set of prebuilt UI components, which will let​ you easily incorporate the designs into your own projects.

Application security isn’t a feature or a benefit – it is a bare necessity. One breach in security could cost your company not just millions of dollars but a lifetime of trust. That is why security needs to be a priority from the moment you start writing the first line of code.​

​For our application security for Login authentication, we can use the strong password protection provided by our embedded InterBase database.  InterBase’s password protection supports a password length of 32 bytes, and a password algorithm using a modern cryptographic hash function. This all means we have additional functionality using the embedded InterBase database for supporting a longer effective password length, that results in stronger password protection.!

​Using our FMX GUI UI template for Login Screen, we need to enter the Username and Password of our IBlite database to login (authenticate) our Application.​
​

In our InterBase IBlite database, we created two new users for our IBlite database; staff and manager.​  This allows role based Authorization to the applications features, and database access permissions!
​

To authenticate against the Username and Password for the InterBase IBLite database, we can use this code for the OnClick Event of the Sign In button:

procedure TForm2Login.LoginFrame21SignInRectBTNClick(Sender: TObject)​
begin​
  dmIBLite.DataModule1.FDConnectionIBLite.Params.Values['USER_NAME'] :=​
    LoginFrame21.UsernameEdit.Text​
  dmIBLite.DataModule1.FDConnectionIBLite.Params.Values['Password'] :=​
    LoginFrame21.PasswordEdit.Text​
  try​
    Begin​
      dmIBLite.DataModule1.FDConnectionIBLite.Connected := True​
      uLoginForm2.Form2Login.Hide //Hide the Login Screen.​
      uCamera.Form1.Show   //Show the next Form, the Camera Form.​
    End

unit uProjectsTypes​
interface​
uses​
  System.Generics.Collections​
type​
  TProject = record​
    Proj_Id: integer​
    Proj_Title: string​
    Proj_Desc: string​
  end​
​
TProjects = TList<TProject>;​

implementation​
end.

IProjectsData = interface​
  function ProjectsCreate(aValue: TProject): integer​
  function ProjectsRead(id: integer ​
   out aValue: TProject): boolean​
  function ProjectsUpdate(id: integer aValue: TProject): boolean​
  function ProjectsDelete(id: integer): boolean​
  procedure ProjectsList(aList: TProjects)​
end