Adding a Customized View to the View Selector

From Appmethod Topics
Jump to: navigation, search

Go Up to Using FireMonkey Views


You can 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.

Display Specifications for the Available Views

View File MinPhysicalSize   MaxPhysicalSize   MinLogicalSize   MaxLogicalSize   PPI

Windows Desktop

System.Win.Devices

Surface Pro

System.Win.Devices

Android 3.5" Phone

System.Android.Devices

(800,500)

(1000,600)

(400,250)

(500,300)

320

Android 4" Phone

System.Android.Devices

(1280,800)

(1360,850)

(640,400)

(680,425)

320

Android 5" Phone

System.Android.Devices

(1708,960)

(1920,1200)

(854,480)

(960,600)

320

Android 7" Tablet

System.Android.Devices

(1708,960)

(1920,1200)

(854,480)

(960,600)

320

Android 10" Tablet

System.Android.Devices

(2400,1500)

(2560,1600)

(1200,750)

(1280,800)

320

Google Glass

System.Android.Devices

(640,360)

(640,360)

(427,240)

(427,240)

30

iPhone 3.5"

System.iOS.Devices

(480,320)

(480,320)

163

iPhone 4"

System.iOS.Devices

(1136,640)

(568,320)

326

iPhone 4.7"

System.iOS.Devices

(1334, 750)

(667, 375)

326

iPhone 5.5"

System.iOS.Devices

(2208, 1242)

(736, 414)

489

iPad

System.iOS.Devices

(2048,1536)

(1024,768)

264

OS X Desktop

System.Mac.Devices

Note: The devices with only the MaxPhysicalSize and MaxLogicalSize are defined with the real exact dimensions.

Adding an Android View for a Specific Device

The following example shows how to create a view for an Android device with the following display specifications:

  • Model = MyPhone
  • Diagonal (in) = 4.5
  • Resolution = 720 x 1280 pixels
  • Pixel density = 326 ppi
  • Css pixel ratio = xhdpi (2.0x)

You can find the specifications for a specific device on the manufacturer's website, on the datasheet.

Create a New Package

  1. Select File > New > Package - Object Pascal or Appmethod C++.
  2. In the Project Manager, right-click the <project_name.bpl>.
  3. Select Add New > Unit.
  4. Add the following code to the unit:
  • Object Pascal:
unit Unit1;

interface

implementation

uses

  system.Devices, system.Types, system.SysUtils;
  
const
  ViewName = 'TestView'; // The name of the view.

initialization

  TDeviceinfo.AddDevice(TDeviceinfo.TDeviceClass.Phone, ViewName, 
    TSize.Create(1216, 684), TSize.Create(1216 div 2, 684 div 2), // MinPhysicalSize(max, min), MinLogicalSize(max, min)
    TSize.Create(1280, 720), TSize.Create(1280 div 2, 720 div 2), // MaxPhysicalSize(max,min), MaxLogicalSize(max,min)
    TOSVersion.TPlatform.pfAndroid, 326); //Select the platform and the pixel density.

finalization

  TDeviceinfo.RemoveDevice(ViewName); // To unregister the view after unistalling the package.

end.
  • C++:

Add this code to the .cpp file:

 
#include "Unit1.h"
#include <System.Devices.hpp>
// ---------------------------------------------------------------------------
#pragma package(smart_init)

void initdevice() {

	TDeviceInfo::AddDevice(TDeviceInfo::TDeviceClass::Phone, "TestView",
		TSize(1216, 684), TSize(1216 / 2, 684 / 2), TSize(1280, 720),
		TSize(1280 / 2, 720 / 2), TOSVersion::TPlatform::pfAndroid, 326);
}

Add this code to the .h file:

 
void initdevice();
#pragma startup initdevice 42
  1. Before installing the package close any open project on the Designer.
  2. In the Project Manager, right-click the <project_name.bpl>.
  3. Click Install.
  4. An Information message appears informing you that the package has been installed.

The customized view offers the same form as the Master view. To create a customized form, you need to edit an xml file. See Customizing the Form for a New View.

Using the New View

After installing the package the view is available on the View Selector. It appears with the name defined on the package.

Note: If the view does not appear in the View Selector add the new view to the MobileDevices.xml as described here Customizing the Form for a New View.

CustomizedView.png

In order to run the customized view of the multi-device project in the corresponding device, you need to add the package Unit to your project:

  1. Add the package Unit to the Uses section of the multi-device project.
  2. When you run the project, an algorithm selects the most appropriate view for the selected device. If the customized view is the most appropriate view for the target device, it launches this view.

The compiler and the linker only add to the final application the necessary views for the application. For example, Windows views are not included on an Android application.

Removing Customized Views

This is the code you need to unregister a customized view from the View Selector.

const
    ViewName = 'TestView';

finalization
    TDeviceinfo.RemoveDevice(TestView);

To remove a customized view from the View selector:

  1. Close all the forms before unistalling a package containing customized views.
  2. Go to Component > Install Packages....
  3. Select the package you want to remove.
  4. Click Remove.
Note: You might need to restart the IDE for the changes to take effect.

Customizing the Form for a New View

When you create a new view, it appears without the real dimensions (height and width). To customize the form, you need to edit the MobileDevices.xml file.

Warning: We recommend to carefully check the modifications on the MobileDevices.xml file. Please revise the xml tags to ensure that they are properly cased, otherwise the designer could not understand them and behave unexpectedly.

The MobileDevices.xml file defines the device information at design time. This file allows you to edit things such as:

  • A friendly name for your view.
  • Available orientations.
  • Display size for each orientation.
  • Status bar position and size.
  • Nice frame for your form.

To add a new view to the MobileDevices.xml file:

  1. Go to C:\Users\<username>\AppData\Roaming\Embarcadero\BDS\15.0.
    Note: This is a hidden folder. If you are not able to see it, active the Show hidden files, folders, and drivers on the Folder Options dialog box on the Windows Control Panel.
  2. Open the file with a text editor.
  3. Inside the <MobileDevices RepositoryVersion="3"> tag, add a new <MobileDevice> element as follows:
      <MobileDevice>
        <Displayname>MyPhone</Displayname> //Name to show on the '''View Selector'''.
        <Name>TestView</Name> //ID used in the creation package.
        <DevicePlatform>3</DevicePlatform>
        <FormFactor>2</FormFactor> Form of the device.
        <Portrait Enabled="True" Width="360" Height="640" Top="61" Left="44" StatusbarHeight="25" StatusBarPos="0" Artwork="<artwork_path>"/>
        <UpsideDown Enabled="True" Width="360" Height="640" Top="68" Left="47" StatusbarHeight="25" StatusBarPos="0" Artwork="<artwork_path>"/>
        <LandscapeLeft Enabled="True" Width="640" Height="360" Top="44" Left="68" StatusbarHeight="25" StatusBarPos="0" Artwork="<artwork_path>"/>
        <LandscapeRight Enabled="True" Width="640" Height="360" Top="47" Left="61" StatusbarHeight="25" StatusBarPos="0" Artwork="<artwork_path>"/>
      </MobileDevice>
  1. Restart the IDE for the changes to take effect.

MobileDevices.xml Elements

  • <Displayname></Displayname> tags:
The name that you want to display in the View Selector.
Note: Not supported for Appmethod 1.15.
  • <Name></Name> Tags:
The ID used to create the package to add a new view.
  • <DevicePlatform></DevicePlatform> tags:
The platform of the device.
Number Definition

0

Windows

1

OS X

2

iOS

3

Android

  • <FormFactor></FormFactor> tags:
The form of the device.
Number Definition

0

Desktop

1

Unused

2

Phone

3

Tablet

  • Orientation definition: <Portrait/>, <UpsideDown/>, <LandscapeLeft/>, <LandscapeRight/> tags:
Property Definition

Enabled

Set this property to True if you want to use this orientation.

Width / Height

Measures (in pixels) of the form. Represents the available area.

Top / Left

Represents the most top left corner of the available area. It is the offset from the origin of the screen.

StatusbarHeight

The height of the status bar.

StatusBarPos

The position of the status bar, 0 meaning on top.

Artwork

The fully qualified path to the file. When the field is empty a slim black frame appears by default.

See Also