RAD Studio 10.4.1 is now available! Learn more. Looking for discounts? Visit our Special Offers page!
C++

FireUI Multi-Device Designer and working with Views

In RAD Studio XE7, we introduced the FireUI Multi-Device Designer. FireUI makes it easy to create user interfaces across multiple devices using a master form to share all user interface code, and then optimize inherited views for each target platform and device. 

Delphi, C++Builder and RAD Studio XE7 provide a set of predefined views, including Windows Desktop, Surface Pro Tablet, Mac Desktop, iPhone, iPad, and several Android Phone, Tablet and Google Glass optimized views.

Views are a mechanism that allows you to define a different layout and components for the forms of your application depending on the device where your application is running.

New forms contain a single view: the Master view. The Master view is the view that your application loads if your application does not contain any other view fit for the device where your application is running. You can add more views to your application if you want to provide a different view on a specific kind of device. These additional views are customized versions of the Master view for a given device or a type of device that inherit all the components and modifications from the Master view. 

In many cases, you will define most of your code on the master view. However, you may want to change an existing event for a specific platform or device. In that case, you can access the existing event handler and change the name of the event. 

You can also create and add new views to the View Selector in the Form Designer if the available views do not cover the specifications of your target device. Usually, that is not necessary, but if you want to fine-tune the layout for a specific device (i.e. your company has standardized on Nexus 5), creating a custom view will allow you to further customize your UI. This is also a great way to add views for new wearable form factors such as various watches that you may want to target, like the Moto 360, which Jim McKeeth recently covered.

https://i0.wp.com/blogs.embarcadero.com/wp-content/uploads/2020/08/HelloMoto360-IDE.png?resize=451%2C309&ssl=1

In this blog post, I am going to cover the steps to add a Nexus 5 specific view with the associated design time and runtime support. You can also find detailed instructions on how to add a custom view by clicking here

Step 1: Create a new package

  • Select File > New > Package – Delphi or C++Builder.
  • In the Project Manager, right-click the <project_name.bpl>.
  • Select Add New > Unit.

Add the following code to the unit: 

b2ap3_thumbnail_dimensions.png

Measurements taken in landscape format

To get the resolution and pixel density for the Nexus 5, I just did a quick Google search online. 

 customview1.jpg

Step 2: Install the new package

  • Before installing the package close any open project on the Designer.
  • In the Project Manager, right-click the <project_name.bpl>
  • Click Install
  • An Information message appears informing you that the package has been installed.

 

Step 3: Update the MobileDevices.xml to add a custom device skin 

b2ap3_thumbnail_topmeasurements.png

 

You can find the MobileDevices.xml file by going to Go to C:Users<username>AppDataRoamingEmbarcaderoBDS15.0.

I created two Nexus 5 device skins. One for portrait orientation and one for landscape orientation. Both of the pngs get referenced in my custom mobile device definition below.

b2ap3_thumbnail_devicesnexus1.png

Portrait:
Left 26
Top 66
Width 362
Height 592

Portrait Upside Down:
Left 26
Top 66
Width 362
Height 592

Landscape left:
Left 66
Top 26
Width 592
Height 365

Landscape right:
Left 66
Top 26
Width 592
Height 365

 

 <MobileDevice>
  <Name>MyNexus5CustomView</Name>
  <Displayname>My Nexus 5</Displayname>
  <DevicePlatform>3</DevicePlatform>
  <FormFactor>2</FormFactor>
  <Portrait Enabled=”True” Width=”362″ Height=”592″ Left=”26″ Top=”66″ StatusbarHeight=”0″ Artwork=”C:mydeviceimagesNexus_Portrait.png” />
  <UpsideDown Enabled=”True” Width=”362″ Height=”592″ Left=”26″ Top=”66″ StatusbarHeight=”0″ Artwork=”C:mydeviceimagesNexus_Portrait.png” />
  <LandscapeLeft Enabled=”True” Width=”592″ Height=”362″ Left=”66″ Top=”26″ StatusbarHeight=”0″ Artwork=”C:mydeviceimagesNexus_Landscape.png” />
  <LandscapeRight Enabled=”True” Width=”592″ Height=”362″ Left=”66″ Top=”26″ StatusbarHeight=”0″ Artwork=”C:mydeviceimagesNexus_Landscape.png” />
  </MobileDevice>

 

For more information, visit: http://docwiki.embarcadero.com/RADStudio/XE7/en/Adding_a_Customized_View_to_the_View_Selector

Twitter @SarinaDuPont


Reduce development time and get to market faster with RAD Studio, Delphi, or C++Builder.
Design. Code. Compile. Deploy.
Start Free Trial   Learn More About Upgrading

About author

Director of Product Management, Developer Tools Idera, Inc.
Related posts
C++Delphi

Ultimate Compression Toolkit For Delphi And C++ Builder Developers

News

RAD Studio November 2020 Roadmap PM Commentary

DelphiNewsRAD Studio

RAD Studio Roadmap November 2020

CodeDelphiRAD Studio

Awesome Pascal Is A Curated List Of Awesome Open Source Delphi Pascal Frameworks, Libraries, Resources, And More

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

IN THE ARTICLES