Afficher : Object Pascal C++
Préférences d'affichage

Ajout d'une vue personnalisée au sélecteur de vue

De Appmethod Topics

Remonter à Utilisation des vues FireMonkey


Vous pouvez créer et ajouter de nouvelles vues au sélecteur de vue dans le Concepteur de fiches si les vues disponibles ne couvrent pas les spécifications de votre périphérique cible.

Spécifications d'affichage pour les vues disponibles

Vue Fichier MinPhysicalSize   MaxPhysicalSize   MinLogicalSize   MaxLogicalSize   PPI

Bureau Windows

System.Win.Devices

Surface Pro

System.Win.Devices

Téléphone Android 3,5 pouces

System.Android.Devices

(800,500)

(1000,600)

(400,250)

(500,300)

320

Téléphone Android 4 pouces

System.Android.Devices

(1280,800)

(1360,850)

(640,400)

(680,425)

320

Téléphone Android 5 pouces

System.Android.Devices

(1708,960)

(1920,1200)

(854,480)

(960,600)

320

Tablette Android 7 pouces

System.Android.Devices

(1708,960)

(1920,1200)

(854,480)

(960,600)

320

Tablette Android 10 pouces

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 pouces

System.iOS.Devices

(480,320)

(480,320)

163

iPhone 4 pouces

System.iOS.Devices

(1136,640)

(568,320)

326

iPhone 4,7 pouces

System.iOS.Devices

(1334, 750)

(667, 375)

326

iPhone 5,5 pouces

System.iOS.Devices

(2208, 1242)

(736, 414)

489

iPad

System.iOS.Devices

(2048,1536)

(1024,768)

264

Bureau OS X

System.Mac.Devices

Remarque : Les périphériques ayant seulement les paramètres MaxPhysicalSize et MaxLogicalSize sont définis avec les dimensions exactes réelles.

Ajout d'une vue Android pour un périphérique spécifique

L'exemple suivant montre comment créer une vue pour un périphérique Android avec les spécifications d'affichage suivantes :

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

Vous trouverez les spécifications d'un périphérique spécifique sur le site web du fabricant, sur la fiche de spécifications.

Créer un nouveau package

  1. Sélectionnez Fichier > Nouveau > Package - Object Pascal ou Appmethod C++.
  2. Dans le Gestionnaire de projets, cliquez avec le bouton droit sur <nom_projet.bpl>.
  3. Sélectionnez Ajouter nouveau > Unité.
  4. Ajoutez le code suivant à l'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++ :

Ajoutez ce code au fichier .cpp :

 
#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);
}

Ajoutez ce code au fichier .h :

 
void initdevice();
#pragma startup initdevice 42
  1. Avant d'installer le package, fermez tous les projets ouverts sur le Concepteur.
  2. Dans le Gestionnaire de projets, cliquez avec le bouton droit sur <nom_projet.bpl>.
  3. Cliquez sur Installer.
  4. Un message d'information vous indique que le package a été installé.

La vue personnalisée offre la même fiche que la vue maître. Pour créer une fiche personnalisée, vous devez modifier un fichier xml. Voir Personnalisation de la fiche pour une nouvelle vue.

Utilisation de la nouvelle vue

Après l'installation du package, la vue est disponible sur le sélecteur de vue. Elle apparaît avec le nom défini sur le package.

Remarque : Si la vue n'apparaît pas dans le sélecteur de vue, ajoutez-la dans MobileDevices.xml comme indiqué dans Personnalisation de la fiche pour une nouvelle vue.

CustomizedView.png

Afin d'exécuter la vue personnalisée du projet multi-périphérique dans le périphérique correspondant, vous devez ajouter le package Unit à votre projet :

  1. Ajoutez le package Unit à la section Uses du projet multi-périphérique.
  2. Lorsque vous exécutez le projet, un algorithme sélectionne la vue la plus appropriée pour le périphérique sélectionné. Si la vue personnalisée est la vue la plus appropriée pour le périphérique cible, celle-ci est lancée.

Le compilateur et le lieur n'ajoutent à l'application finale que les vues nécessaires à l'application. Par exemple, les vues Windows ne sont pas incluses sur une application Android.

Suppression des vues personnalisées

Voici le code nécessaire pour dé-recenser une vue personnalisée du sélecteur de vue.

const
    ViewName = 'TestView';

finalization
    TDeviceinfo.RemoveDevice(TestView);

Pour retirer une vue personnalisée du sélecteur de vue :

  1. Fermez toutes les fiches avant de désinstaller un package contenant des vues personnalisées.
  2. Choisissez Composant > Installer des packages....
  3. Sélectionnez le package que vous voulez retirer.
  4. Cliquez sur Retirer.
Remarque : Il arrive que vous deviez redémarrer l'EDI pour que les changements prennent effet.

Personnalisation de la fiche pour une nouvelle vue

Lorsque vous créez une nouvelle vue, elle apparaît sans les dimensions réelles (hauteur et largeur). Pour personnaliser la fiche, vous devez modifier le fichier MobileDevices.xml.

Avertissement : Vérifiez soigneusement les modifications sur le fichier MobileDevices.xml. Vérifiez que la casse des balises xml est correcte, sinon le concepteur pourrait ne pas les comprendre et se comporter de façon inattendue.

Le fichier MobileDevices.xml définit les informations des périphériques à la conception. Ce fichier vous permet de modifier des éléments tels que :

  • Un nom convivial pour votre vue.
  • Les orientations disponibles.
  • La taille de l'affichage pour chaque orientation.
  • La position et la taille de la barre d'état.
  • Un cadre agréable pour votre fiche.

Pour ajouter une nouvelle vue au fichier MobileDevices.xml :

  1. Allez sur C:\Users\<nom_utilisateur>\AppData\Roaming\Embarcadero\BDS\15.0.
    Remarque : C'est un dossier masqué. Si vous ne le voyez pas, activez l'option Afficher les fichiers, dossiers et lecteurs cachés sur la boîte de dialogue Options des dossiers du Panneau de configuration Windows.
  2. Ouvrez le fichier avec un éditeur de texte.
  3. Dans la balise <MobileDevices RepositoryVersion="3">, ajoutez un nouvel élément <MobileDevice> comme suit :
      <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. Redémarrez l'EDI pour que les modifications prennent effet.

Eléments de MobileDevices.xml

  • Balises<Displayname></Displayname> :
Le nom à afficher dans le sélecteur de vue.
Remarque : Non supporté pour Appmethod 1.15.
  • Balises<Name></Name> :
L'ID utilisé pour créer le package à ajouter dans une nouvelle vue.
  • Balises<DevicePlatform></DevicePlatform> :
La plate-forme du périphérique.
Nombre Définition

0

Windows

1

OS X

2

iOS

3

Android

  • Balises<FormFactor></FormFactor> :
La fiche du périphérique.
Nombre Définition

0

Bureau

1

Inutilisé

2

Téléphone

3

Tablette

  • Définition de l'orientation : balises <Portrait />, <UpsideDown />, <LandscapeLeft />, <LandscapeRight /> :
Propriété Définition

Enabled

Définissez cette propriété sur True si vous voulez utiliser cette orientation.

Width / Height

Mesures (en pixels) de la fiche. Représente la zone disponible.

Top / Left

Représente le coin supérieur gauche de la zone disponible. C'est le décalage à partir de l'origine de l'écran.

StatusbarHeight

La hauteur de la barre d'état.

StatusBarPos

La position de la barre d'état, 0 signifiant "en haut".

Artwork

Le chemin complet du fichier. Lorsque le champ est vide, un petit cadre noir apparaît par défaut.

Voir aussi

Outils personnels
Autres langues