FAQ LazarusConsultez toutes les FAQ

Tous les composants visuels destinés à développer des applications pour Android sont répartis sur quatre palettes :

• Android Bridges, qui contient la plupart des composants de base ;
• Android Bridges Extra, qui complète la première palette avec une série de composants plus spécialisés ;
• Android Bridges AppCompat, avec des composants spécialement conçus pour les thèmes "AppCompat" ;
• Android Bridges jCenter.

La réponse est non : il faut obligatoirement utiliser les composants des palettes Android Bridges.

La plupart des composants classiques de Lazarus ont un pendant pour Android, par exemple :

• TMenu -> jMenu ;
• TLabel -> jTextView ;
• TButton -> jButton ;
• TEdit -> jEditText ;
• TPanel -> jPanel ;
• TTimer -> jTimer ;
• ... etc.

Pour positionner correctement des composants et, surtout, s'assurer qu'ils restent correctement placés si, par exemple, l'application passe du mode portrait au mode paysage sur le smartphone, voici quelques propriétés essentielles communes à à peu près tous les composants visuels :

• Anchor : il s'agit du composant par rapport auquel s'effectue le positionnement ;
• LayoutParamHeight et LayoutParamWidth : il s'agit de la taille du composant exprimée relativement à la taille de l'écran ;
• MarginBottom, MarginLeft, MarginRight et MarginTop : ce sont les marges autour du composant ;
• PosRelativeToAnchor : c'est la position par rapport au composant défini dans la propriété Anchor ;
• PosRelativeToParent : c'est la position relative au parent, qui peut être la fenêtre de l'application ou, par exemple, un jPanel.

• Anchor : rien, il n'y a pas de composant de référence ;
• PosRelativeToParent : c'est la fenêtre principale qui est le parent, et le panneau est accroché au haut, à gauche et à droite de l'écran. Donc les sous-propriétés rpTop, rpLeft et rpRight sont cochées.

• Anchor : rien ;
• PosRelativeToParent : il est centré verticalement et aligné à gauche dans le jPanel et donc seront cochées les sous-propriétés rpCenterVertical et rpLeft.

• Anchor : le jPanel ;
• PosRelativeToAnchor : raBelow sera cochée, pour indiquer qu'il est sous le composant de référence ;
• PosRelativeToParent : rpCenterHorizontal, pour indiquer qu'il est centré à l'écran.

• Anchor : le jTextView ;
• PosRelativeToAnchor : raBelow (en dessous) ;
• PosRelativeToParent : rpCenterHorizontal (centré horizontalement).

• Anchor : le bouton-image ;
• PosRelativeToAnchor : raToLeftOf (situé à sa gauche) et raAlignTop (aligné avec le dessus).

Pour ajouter une nouvelle fiche de travail, et donc une nouvelle activité (une fenêtre), il ne faut surtout pas recourir au bouton Nouvelle fiche de la barre d'outils de Lazarus ! Car cela crée une fiche de travail de type TForm qui est totalement inutilisable sous Android.

Il faut donc utiliser le menu "Fichier / Nouveau" et choisir "LAMW GUI Android jForm".

Pour créer un menu dans votre application, déposez tout d'abord un composant jMenu (de la palette Android Bridges) sur la fiche de travail.

Si vous souhaitez ajouter des icônes à vos éléments de menu, copiez les images au format png dans le dossier jni/res/drawable de votre projet. Il est conseillé de faire précéder les noms de fichier du préfixe ic_ (par exemple, ic_fileopen.png). La taille des images conditionnera logiquement la hauteur des éléments du menu.

Réglez les propriétés du composant jMenu :

• dans Options, indiquez les éléments du menu dans l'ordre désiré (un par ligne) ;
• dans Iconidentifiers, indiquez les noms de fichier des images sans extension, dans l'ordre désiré (également un par ligne) (par exemple, ic_fileopen).

• ClickOptionMenuItem
• CreateOptionMenu

1
2
3
4
procedure AndroidModule1.AndroidModule1CreateOptionMenu(Sender: TObject; jObjMenu: jObject);
begin
  Menu1.ShowOptions(jObjMenu);   (* Sans icônes *)
end;

1
2
3
4
procedure AndroidModule1.AndroidModule1CreateOptionMenu(Sender: TObject; jObjMenu: jObject);
begin
  Menu1.ShowOptions(jObjMenu, misNever);   (* Avec icônes *)
end;

1
2
3
4
procedure AndroidModule1.AndroidModule1ClickOptionMenuItem(Sender: TObject; jObjMenuItem: jObject; itemID: integer; itemCaption: string; checked: boolean);
begin
  ShowMessage(itemCaption);
end;

Il n'y a pas de composant TMemo disponible dans les palettes Android Bridges mais ce composant peut être remplacé par un jEditText dont les propriétés sont adaptées :

• InputTypeEx = itxMultiLine ;
• LayoutParamHeight et LayoutParamWidth = lpMatchParent (mais d'autres valeurs peuvent convenir) ;
• ScrollBarStyle = scrlinsideInset ;
• MaxTextLength = -1 ;
• WrappingLine = True ;
• MaxLines = un nombre suffisamment grand.

Le composant jDialogYN présent sur la palette Android Bridges Extra est très simple à utiliser. Il apparaîtra par défaut au bas de votre application.

Une fois le composant déposé sur la fiche de travail, vous pouvez définir quelques propriétés dans l'inspecteur d'objets :

• Title : le titre du dialogue ;
• TitleAlign : l'alignement du titre - par défaut aligné à gauche ;
• Msg : le texte affiché dans le dialogue ;
• Yes : le texte affiché dans le bouton d'acceptation - par défaut "Yes" ;
• No : le texte affiché dans le bouton de refus - par défaut "No".

1
2
3
4
dlgConfirm.SetColorBackgroundTitle(colbrNavy);   // Fond du titre
dlgConfirm.SetColorTitle(colbrWhite);   // Couleur de texte du titre
dlgConfirm.SetColorBackground(colbrNavy);   // Fond du message
dlgConfirm.SetColorText(colbrBeige);   // Couleur de texte du message

1
2
3
4
5
6
procedure TfrmMain.dlgConfirmClickYN(Sender : TObject; YN : TClickYN);
begin
  if YN = ClickYes   // Pour l'autre bouton la valeur est ClickNo
     then
       { . . . }
end;

1
2
3
dlgConfirm.Show;
// autre exemple :
dlgConfirm.Show('Confirmation', 'Le fichier a été modifié', 'Enregistrer', 'Annuler');

Il est possible de créer un dialogue personnalisé, contenant des contrôles d'édition, des boîtes combo, des boutons radio, des cases à cocher, etc. à partir du composant jCustomDialog, disponible dans la palette Android Bridges.

Déposez tout d'abord ce composant sur la fiche de travail, puis déposez ensuite les contrôles de votre choix directement sur la surface du jCustomDialog. Celui-ci sera le parent de tous ces contrôles, et d'ailleurs ils apparaîtront en tant que contrôles enfants dans l'inspecteur d'objets, sous le dialogue et en retrait.

Commencez par régler les différentes propriétés du dialogue (couleurs, dimensions, etc.). Positionnez les contrôles à l'aide des propriétés PosRelativeToParent, pour définir la position de certains d'entre eux dans le dialogue, et/ou PosRelativeToAnchor pour en positionner d'autres par rapport à ceux que vous avez déjà positionnés, en sélectionnant ces derniers dans la propriété Anchor. Cela fonctionne exactement comme le positionnement des composants sur la fiche de travail (voir le lien ci-dessous). Jouez également avec les propriétés LayoutParamWidth et LayoutParamHeight pour dimensionner les contrôles à l'intérieur du dialogue (par exemple, la valeur lpOneThirdOfParent pour LayoutParamWidth dimensionnera le contrôle au tiers de la largeur du dialogue).

Le dialogue jCustomDialog est affiché grâce à sa méthode Show, dont il existe plusieurs variantes pour éventuellement en définir certaines propriétés à la volée. Les contrôles peuvent être initialisés dans le gestionnaire répondant à l'événement OnShow du dialogue. Vous devez créer des gestionnaires d'événements individuellement pour chacun des contrôles contenus dans le dialogue (par exemple, pour l'événement OnClick d'un bouton jButton, OnLostFocus d'un jEditText, etc.).

Pour créer une collection d'images utilisables par certains composants de votre application, il faut déposer n'importe où sur la fiche de travail un composant jImageList (disponible dans la palette Android Bridges). Les images de la collection doivent être disponibles dans le répertoire assets du projet ; une bonne méthode pour les y placer est d'utiliser l'utilitaire d'importation (lien ci-dessous). Les images sont idéalement au format png, ce format supportant la transparence et offrant un bon compromis entre la qualité et la compression.

Dans l'inspecteur d'objets, cliquez sur les trois points en regard de la propriété Images et ajoutez les images que vous souhaitez en utilisant le bouton Add. Les images ajoutées s'affichent en noir tandis que les autres s'affichent en gris. Il suffit ensuite de cliquer sur OK.

Remarque : le composant jImageList peut recevoir des images lors de la phase de conception du projet, mais pas au cours de l'exécution de l'application.

Un bouton-image est un bouton comportant un pictogramme au lieu d'un texte. Il existe sur internet des tas de pictogrammes destinés aux applications pour mobiles (attention cependant à leur licence d'utilisation) mais vous pouvez aussi les créer vous-mêmes, avec un simple éditeur d'images, au format png - qui supporte la transparence, idéal pour par exemple faire un pictogramme rond.

L'image (ou les images, vous comprendrez pourquoi plus bas) de votre bouton doit être disponible dans un composant jImageList (voyez le lien ci-dessous).

Déposez sur la fiche de travail un jImageBtn, disponible dans la palette Android Bridges. Il est inutile d'en définir la taille car celle-ci sera fixée par la taille de l'image.
Dans l'inspecteur d'objets, affectez l'identificateur du jImageList à la propriété Images. Il s'agit à présent de choisir une image pour le bouton dans son état normal et une lorsqu'il est pressé. Par exemple, une image claire pour le bouton dans son état normal et une version plus sombre pour quand il sera pressé. La même image peut évidemment être utilisée pour les deux états (mais il serait dommage de vous priver d'un petit effet sympa, non ?). Sélectionnez les deux images dans la liste déroulante de ces deux propriétés :

• IndexImageUp pour le bouton dans son état normal ;
  
• IndexImageDown pour le bouton pressé.

• OnClick, lorsqu'il est actionné ;
  
• OnDown, lorsqu'il entre dans son état "pressé" ;
  
• OnUp lorsqu'il est relâché.