Delphi 2006 : Nouveautés de l'IDE

L'éditeur de code est doté d'une "gouttière" où sont affichés les numéros de ligne. Ceux-ci sont accompagnés, et c'est une nouveauté, de la barre de modification du code, qui permet en un coup d'oeil de visualiser quelle partie du code a été modifiée depuis le dernier enregistrement.

Au chargement d'un fichier, la barre n'indique rien. Les parties de code modifiées seront ensuite indiquées en jaune, et les parties modifiées mais déjà sauvegardées lors du dernier enregistrement sont indiquées en vert.

Une copie d'écran vaut mieux qu'un long discours :

Ici, le cas "#0" du case..of a été rajouté après le dernier enregistrement et apparaît donc en jaune, alors que les autres lignes comme "Inc(..." apparaissent en vert.

Comme toutes les autres couleurs, celles de la barre de modification de code peuvent être personnalisées. Pour cela il suffit de se rendre dans "Tools | Options..." et ensuite dans "Editor Options", choisir l'item "Color". Les paramètres à régler sont la couleur d'avant-plan et d'arrière-plan de l'élément "Modified Line". La couleur d'avant-plan est utilisée pour la couleur du code sauvegardé, celle d'arrière-plan pour le code modifié.

I-2-a. Principe▲

I-2-b. Exemples▲

if [True] then

case   of

end;

for [I] := [0] to [List.Count] - 1 do

Les Live Templates, c'est-à-dire les modèles de code, ont été nettement améliorés dans cette nouvelle mouture de Delphi. Ils deviennent un outil à part entière et très puissant pour gagner en vitesse dans l'édition du code. Les modèles de code sont toujours accessibles via le raccourci Ctrl+J, mais ce sont également eux qui servent à la complétion automatique de bloc présentée ci-dessus.

Cela permet donc à tout un chacun de créer ses propres complétions de bloc, puisque les modèles de code sont totalement personnalisables.
D'ailleurs, leur mode d'édition a radicalement changé : chaque modèle de code est maintenant contenu dans un fichier XML décrivant les actions possibles, les champs disponibles, le langage auquel le modèle s'applique et bien d'autres paramètres.
Il n'est pas possible de voir ici toutes les possibilités offertes par les Live Templates, cela fera l'objet d'un autre tutoriel.
Voyons cependant comment créer un modèle de code "basique" :

Commencez par ouvrir la fenêtre des modèles de code, grâce au menu "View | Templates". En fonction du langage de votre projet en cours, vous verrez plus ou moins de noeuds dans l'arborescence. Pour afficher tous les noeuds, effectuez un clic droit et décochez "Filter".
Ouvrez le menu contextuel pour y cliquer sur "New". Delphi crée alors un nouveau fichier, "template1.xml", qui contient le code suivant :

<?xml version="1.0" encoding="utf-8" ?>
<codetemplate	xmlns="http://schemas.borland.com/Delphi/2005/codetemplates" version="1.0.0">
  <template name="" invoke="manual">
    <description>

    </description>
   <author>

    </author>
    <code language=""><![CDATA[]]>
    </code>
  </template>
</codetemplate>

Là encore un fonctionnement par champs tabulables est mis en place. Il vous permet de naviguer entre le paramètre "name", les balises description et author, et enfin le paramètre "language".

• name permet de donner un nom au modèle de code. C'est ce nom qui sera reconnu lors de l'utilisation du raccourci Ctrl+J dans l'éditeur, évitez donc un identifiant compliqué ou long à saisir !
• description : insérez dans ce champ une brève description de votre modèle de code. Elle sera affichée dans la colonne "Description" de la fenêtre Templates.
• author permet de spécifier le nom de l'auteur du modèle de code.
• language doit contenir le nom du langage pour lequel le modèle est destiné. Les valeurs possibles sont entre autres C, CSharp, Delphi... Attention, il est impératif de respecter la casse.

Pour finir, le code du modèle doit être placé entre "<![CDATA[" et "]]>".
Pour l'exemple, nous allons créer un modèle de code qui remplacera "msg" par le code "ShowMessage();", en plaçant le curseur entre les parenthèses.
Nous verrons ensuite comment faire en sorte qu'il soit considéré comme un modèle d'autocomplétion et nous le ferons également apparaître dans le sous-menu "Surround" du menu contextuel de l'éditeur. Ce menu référence les modèles de code qui peuvent englober une partie de code. Cela permet d'entourer par un code prédéfini une portion de code sélectionnée dans l'éditeur, pour par exemple la mettre en commentaire, l'intégrer dans un bloc begin..end; etc.

Commençons par donner son nom au modèle. Comme précisé ci-dessus, il sera identifié sous le nom de "msg", c'est donc la valeur à entrer dans le paramètre "name" de la balise template.
Vous pouvez remplir comme bon vous semble les balises description et author.
Le paramètre "langage" reçoit pour notre exemple la valeur "Delphi".
Pour le code, contentons-nous d'entrer "ShowMessage();" et voyons ce que cela donne en situation.

Votre XML doit ressembler à ceci :

<?xml version="1.0" encoding="utf-8" ?>
<codetemplate	xmlns="http://schemas.borland.com/Delphi/2005/codetemplates" version="1.0.0">
  <template name="msg" invoke="manual">
    <description>
      Affichage d'un message (ShowMessage)
    </description>
    <author>
      Olivier Lance
    </author>
    <code language="Delphi"><![CDATA[ShowMessage();]]>
    </code>
  </template>
</codetemplate>

Enregistrez votre modèle de code. Normalement, Delphi vous place immédiatement dans le bon répertoire d'enregistrement. Si ce n'est pas le cas, rendez vous dans le répertoire "%DELPHI%\Objrepos\code_templates\%langage%" (où vous remplacerez %langage% par "c", "csharp", "delphi" etc.).
Enregistrez votre fichier sous le nom "message.xml", par exemple.

Ouvrez maintenant un projet Delphi et tapez "msg" dans une unité, puis effectuez le raccourci Ctrl+J. "msg" est aussitôt remplacé par "ShowMessage();". Toutefois, le résultat n'est pas exactement celui escompté : le curseur ne se trouve pas à l'intérieur des parenthèses.
Dans les anciennes versions, le positionnement du curseur se faisait avec le caractère "|". Dorénavant, ce caractère est utilisé comme séparateur dans le code pour y insérer des mots-clefs que Delphi reconnaîtra.

Le mot-clef utilisé pour positionner le curseur dans le code est "end". Un mot-clef doit être entouré du délimiteur, et ce dernier doit être déclaré dans la balise code pour être reconnu.
Cela se fait au moyen du paramètre "delimiter", et la balise code devient donc :

<code language="Delphi" delimiter="|"><![CDATA[ShowMessage(|end|);]]></code>

"|end|" a été ajouté entre les parenthèses pour que Delphi y place le curseur après application du modèle.
Effectuez les modifications nécessaires dans votre XML. Il se trouve donc en cet état :

<?xml version="1.0" encoding="utf-8" ?>
<codetemplate	xmlns="http://schemas.borland.com/Delphi/2005/codetemplates" version="1.0.0">
  <template name="msg" invoke="manual">
    <description>
      Affichage d'un message (ShowMessage)
    </description>
    <author>
      Olivier Lance
    </author>
    <code language="Delphi" delimiter="|"><![CDATA[ShowMessage(|end|);]]>
    </code>
  </template>
</codetemplate>

Enregistrez les modifications, et retournez à votre unité. Réitérez l'appel du modèle dans votre code. Cette fois, le curseur est placé entre les parenthèses. La première étape pour notre modèle de code est donc terminée.

Notre deuxième étape consiste à rendre le modèle compatible avec l'autocomplétion. Rien de plus simple !
Vous avez peut-être déjà remarqué l'attribut "invoke" dans la balise template. Il a par défaut la valeur "manual". Passez cette valeur à "auto", enregistrez le XML et revenez à votre unité. Tapez "msg" suivi d'un espace, et la transformation en "ShowMessage();" se fait automatiquement, en plaçant bien évidemment le curseur entre les parenthèses.

Reste l'ajout au menu "Surround". Cette opération est en soi très simple, il suffit d'ajouter l'attribut "surround" à la balise template et de lui donner la valeur "true".
Cependant, si vous testez le modèle tel quel en sélectionnant du code et en cliquant sur "msg" dans le menu "Surround", le code sélectionné sera remplacé par "ShowMessage();" plutôt qu'inséré dans les parenthèses.
Pour que Delphi conserve le code sélectionné et le place où vous le souhaitez, il faut, à l'instar du curseur, lui donner une position où placer ce code. Cela se fait au moyen du mot-clef "selected".

Insérez dans votre code, avant "|end|", le mot-clef "selected" entouré du délimiteur. Sauvegardez votre modèle de code et réessayez de l'appeler par l'intermédiaire du menu "Surround". Cette fois, le code sélectionné est bien encadré par les parenthèses de "ShowMessage();".
On découvre toutefois une limitation à l'utilisation de "selected" dans notre cas : sa présence provoque une indentation de deux espaces qui s'insèrent dans les parenthèses avant le code sélectionné, ce qui n'est pas très pratique...

Voici le code final du XML :

<?xml version="1.0" encoding="utf-8" ?>
<codetemplate	xmlns="http://schemas.borland.com/Delphi/2005/codetemplates" version="1.0.0">
  <template name="msg" surround="true" invoke="auto">
    <description>
      Affichage d'un message (ShowMessage)
    </description>
    <author>
      Olivier Lance
    </author>
    <code language="Delphi" delimiter="|"><![CDATA[ShowMessage(|selected||end|);]]>
    </code>
  </template>
</codetemplate>

II-1-a. Position initiale de la fenêtre▲

Depuis Delphi 8, l'interface par défaut de l'IDE ne permettait plus de placer la fenêtre en cours d'édition à une position arbitraire dans l'écran.

Cette lacune est maintenant comblée avec la nouvelle version, qui inclut un panneau en bas à droite de la fenêtre de conception de fiche. Sur celui-ci apparaît un rectangle blanc représentant la fiche en cours d'édition. Ce rectangle peut être déplacé librement, pour ainsi choisir la position initiale de la fenêtre lors de sa création.

Voici le panneau en question :

Sur cette copie d'écran il apparaît de petite taille, mais il peut être agrandi par un clic à l'extérieur du rectangle blanc, ce qui permet de positionner la fenêtre plus précisément.

Vous pouvez choisir de masquer ce panneau dans les options. Pour cela ouvrez grâce au menu "Tools | Options" la page "VCL Designer", et décochez la case "Show virtual screen position".

II-1-b. Les guides▲

On en entend parler pour les autres IDE, mais ils sont aussi dans Delphi !
Les guides sont des repères dynamiques qui s'affichent selon certaines conditions lorsque vous déplacez un composant aux abords d'un ou de plusieurs autres, ou que vous le redimensionnez. Les guides permettent, avec une efficacité étonnante, d'aligner les composants entre eux, de les espacer selon des marges définies, voire d'aligner non pas leurs bordures mais leurs textes (cela ne fonctionne qu'entre quelques composants).

Ces trois cas se distinguent par trois couleurs différentes de guides. Lorsque le composant que vous déplacez ou redimensionnez possède une ou plusieurs bordures alignées avec celles d'autres composants, un guide apparaît, simple ligne de couleur bleue tirée entre les deux composants pour matérialiser l'alignement. Un effet "d'aimantation" à ce guide permet des déplacements ou des redimensionnements précis de vos composants, tout en les manipulant rapidement.

La copie d'écran suivante montre l'alignement des bordures gauche de deux boutons :

Le deuxième type de guide aide à positionner vos composants selon des marges définies. La classe TControl a reçu une nouvelle propriété publiée, "Margins", qui permet de paramétrer dans l'inspecteur d'objets les marges haut, bas, gauche et droite de chaque composant. Elles reçoivent par défaut la valeur de 3 pixels.
Lorsque vous déplacez un composant à proximité d'un second, un guide bleu s'affiche dès qu'une des bordures du composant déplacé se trouve à X pixels d'une bordure du composant voisin, où X est la valeur définie dans la propriété Margins.
Par défaut, un guide apparaît donc dès que le composant que vous déplacez est à 3 pixels d'un autre composant.

La copie d'écran ci-après donne l'exemple pour une marge haut d'une vingtaine de pixels :

Les marges fonctionnent également avec les bords de la fiche, mais sont automatiquement augmentées de 5 pixels. Le guide affiché est alors noir :

Enfin, le dernier type de guide permet d'aligner entre eux les textes de différents composants, plutôt que leurs bordures.
Ces guides, de couleur fuchsia, ne s'affichent que pour quelques composants comme les boutons ou les champs de texte lorsque les bases de leurs captions/textes sont alignées, comme le montre la copie d'écran suivante :

Avec ces trois appuis qu'ils fournissent, les guides constituent presque une révolution dans le domaine de l'édition de fiches avec Delphi, rendant la palette d'alignement et d'espacement obsolète. Le développement des interfaces s'en trouve bien plus rapide, et par là même d'autant plus agréable qu'il ne l'était auparavant.

Les couleurs des guides mentionnées dans les paragraphes ci-dessus sont données à titre indicatif. En réalité, ces couleurs dépendent de vos propriétés système et varient donc d'une installation à l'autre.

Avec Delphi 2006, la VCL se trouve agrandie de deux nouveaux composants : le TFlowPanel et le TGridPanel, présents dans la palette "Suppléments". D'un fonctionnement calqué sur les layouts du JDK (Java Development Kit), ils permettent une organisation instantanée et automatique des composants que vous y placez, à la manière d'une page HTML (TFlowPanel) ou sous forme d'un tableau (TGridPanel).

II-2-a. TFlowPanel▲

Ce panel permet d'organiser les composants en imitant une page HTML : les composants sont placés les uns à la suite des autres, plutôt que d'être placés à une position arbitraire.
La méthode de positionnement peut toutefois être contrôlée grâce à la propriété FlowStyle qui permet de définir la position du prochain composant par rapport au dernier ajouté.
FlowStyle accepte 8 valeurs :

Valeur	Signification
fsBottomTopLeftRight	Les composants sont ajoutés du bas vers le haut, puis de la gauche vers la droite.
fsBottomTopRightLeft	Les composants sont ajoutés du bas vers le haut, puis de la droite vers la gauche.
fsLeftRightBottomTop	Les composants sont ajoutés de la gauche vers la droite, puis du bas vers le haut.
fsLeftRightTopBottom	Les composants sont ajoutés de la gauche vers la droite, puis du haut vers le bas.
fsRightLeftBottomTop	Les composants sont ajoutés de la droite vers la gauche, puis du bas vers le haut.
fsRightLeftTopBottom	Les composants sont ajoutés de la droite vers la gauche, puis du haut vers le bas.
fsTopBottomLeftRight	Les composants sont ajoutés du haut vers le bas, puis de la gauche vers la droite.
fsTopBottomRightLeft	Les composants sont ajoutés du haut vers le bas, puis de la droite vers la gauche.

Voici des copies d'écran illustrant quelques-unes de ces valeurs :

Comme vous l'aurez remarqué dans ces copies d'écran, si un composant est trop grand pour tenir sur une ligne/colonne, il est automatiquement passé à la ligne/colonne suivante. Ce comportement peut être modifié en mettant la propriété "AutoWrap" à False.

Lorsque vous supprimez, déplacez ou redimensionnez un composant, l'ensemble des composants présents dans le TFlowPanel est réorganisé.

II-2-b. TGridPanel▲

Le TGridPanel permet d'organiser très simplement ses composants sous la forme d'un tableau. Cela peut s'avérer très utile pour n'importe quelle fiche d'entrée de données pour des formulaires, des bases de données etc.
La création de lignes ou de colonnes est automatique, les composants sont automatiquement centrés dans les cellules et dimensionnés à la taille de celle qu'ils occupent.

Le TGridPanel propose principalement quatre propriétés permettant de le personnaliser :

• La propriété "Padding" fonctionne de manière similaire à la propriété "Margin" : elle permet de spécifier des marges haut, bas, gauche et droite qui seront appliquées à l'intérieur des cellules.
  
  
• La propriété "ExpandStyle" permet de définir la manière dont le tableau est agrandi, au besoin, lorsqu'on ajoute un nouveau composant. emAddRows et emAddColumns spécifient respectivement d'incrémenter le nombre de lignes ou de colonnes, alors que emFixedSize indique le tableau comme fixe et aucune ligne ou colonne ne sera donc ajoutée.
  
  
• Les deux propriétés "ColumnCollection" et "RowCollection" permettent d'accéder à chaque colonne ou ligne du tableau. La taille de celles-ci est paramétrable : vous pouvez opter pour une taille choisie automatiquement ou bien donner vous-même une valeur relative (en pourcentages de la taille du tableau) ou absolue (en pixels). On peut, à partir de ces propriétés, créer des lignes ou des colonnes vides à taille fixe servant de séparateurs.
  
  

Dans l'exemple ci-dessous, les deux premières lignes ont une taille automatique, la troisième a un taille à 100% pour occuper toute la place disponible.
La première colonne possède une taille fixe de 50 pixels, la seconde colonne une taille automatique qui la dimensionne donc à la largeur des champs de texte, et la troisième colonne occupe la place restante grâce à une taille de 100%.

Ces deux composants sont logiques et aisés d'utilisation. Il vous reste donc à les manipuler un minimum pour vous familiariser avec eux et les employer comme il se doit au sein de vos applications, qui gagneront en organisation visuelle sans effort superflu.