Utiliser Delphi 2005 comme éditeur HTML
Date de publication : 01/10/2005 , Date de mise à jour : 01/10/2005
Par
Bruno Guérangé ( Nono40 ) (nono40.developpez.com)
Présentation de l'utilisation de l'EDI Delphi 2005 comme éditeur de pages HTML.
I. Introduction
II. Fonctionnalités de l'éditeur HTML
II-A. Un nouveau concepteur
II-B. Modifier la page.
II-B-1. Se déplacer dans la page
II-B-2. Insérer du texte ou un objet
II-B-3. Modifier les propriétés d'un objet
II-B-4. Insérer et modifier une liste
II-C. Assistants à la saisie du code
III. Validation d'un document HTML en fonction du schéma actif
IV. HTML Tidy
IV-A. Validation des documents
IV-B. Mise en forme des documents.
V. Téléchargement et liens
I. Introduction
Là, où Delphi 7 ne faisait que mettre en valeur la syntaxe HTML et n'offrait qu'une prévisualisation de la page ( Via IE sous forme d'ActiveX ), Delphi 2005 permet de modifier le code HTML facilement.
Un nouveau concepteur a été ajouté dans l'EDI pour l'édition de pages HTML.
Le concepteur sera aussi apte à valider l'utilisation correcte des balises et attributs. Autrement dit, il permet de réaliser une validation XHTML des pages.
Cet article suppose que vous ayez des connaissance de base en HTML.
II. Fonctionnalités de l'éditeur HTML
Le but de cet article n'est pas d'être exhaustif quant aux possibilités de l'éditeur, mais de présenter uniquement les points importants.
II-A. Un nouveau concepteur
Commençons par créer un nouveau document HTML, pour ce faire aller dans le menu Nouveau->Autres.., puis aller dans Documents Webs -> Page HTML. Delphi va alors présenter une page HTML vide :
Le concepteur est composé de trois parties :
- En haut: L'onglet visualisation dans lequel est dessiné la page au fur et à mesure des modifications.
- En bas: L'onglet zone de code , dans lequel apparait le code de la zone sélectionnée.
- Sur la gauche: L'éditeur de propriétés permet de changer les attributs d'une balise facilement.
Notez aussi l'apparition de nouveaux menu dédiés à la saisie d'éléments HTML.
 |
Par défaut le concepteur fonctionne en mode GridLayout, c'est à dire que tous les éléments vont diposer de coordonnées absolues. C'est rarement utilisé, il vaut mieux donc tout de suite basculer en mode FlowLayout en modifiant la proprité PageLayout du document dans l'inspecteur d'objet.
|
Pour que la page ne soit pas vide et pour mieux voir le fonctionnement de l'éditeur, ajoutons un tableau dans la page. Pour ce faire aller dans le menu insérer -> tableau. Un assistant de saisie des propriétés du tableau permet de le créer immédiatement avec les bons paramètres :
Notez qu'avant même la validation des modifications le nouveau tableau est dessiné à sa place dans l'onglet de visualisation. De même le code correspondant et l'inspecteur d'objet sont mis à jour en fonction des valeurs saisies.
II-B. Modifier la page.
II-B-1. Se déplacer dans la page
Pour se déplacer dans la page tout en examinant le code il faut sélectionner l'élément voulu dans la zone de prévisualisation.
Notez l'apparition des carrés de sélections (1 sur l'image) identiques à ceux présent dans l'édition de fiches Delphi.
Le code affiché dans le bas (2 sur l'image) est celui de l'élément sélectionné.
Le code de définition de la balise et de ses attributs restent affichés entre les deux onglets (3 sur l'image). Le code peut être affiché en rouge ou en noir suivant que la balise en question est modifiable ou non. Par exemple si vous vous trouvez sur la balise <tbody> celle-ci sera en rouge.
A droite du code de définition de la balise vous disposez de deux boutons de navigation Zoom Arrière balise et zoom avant balise (En 4 sur l'image). Ces deux boutons permettent de passer à la balise 'parent' ou 'enfant'. Ceci est très pratique dans des tableaux imbriqués pour passer au niveau supérieur ou inferieur. Dans le cas d'une cellule de tableau par exemple, le zoom arrière arrive au niveau <tr>.
II-B-2. Insérer du texte ou un objet
Pour insérer du texte ou un autre objet il faut se positionner dans un élément permettant de le recevoir, comme une cellule de tableau ou un élément de liste.
Si vous cliquez dans la prévisualisation à l'endroit où vous voulez ajouter le texte ou l'objet, le caret clignotant sera affiché (en 1 sur l'image suivante). Il est alors possible de saisir directement les modifications dans la prévisualisation.
Il est bien sûr possible aussi de saisir les modifications directement dans le code.
II-B-3. Modifier les propriétés d'un objet
Pour modifier les propriétés et attributs d'un objet il est possible de le faire dans l'inspecteur d'objet sur la gauche ou en dessous directement dans le code. Dans le cas des propriétés de taille, il est aussi possible de les modifier à l'aide d'un glisser de souris en se positionnant sur une des bordures de l'objet à modifier.
Pour la mise en forme du texte ou de son alignement il suffit d'insérer les balises HTML correspondantes.
|
Pour mettre du texte en gras, italique ou souligné les boutons de la barre d'outils ne fonctionnent que dans l'onglet de prévisualisation et non pas dans le code. D'autre part, la gras est effectué par la balise <strong> et l'italique par la balise <em>.
|
II-B-4. Insérer et modifier une liste
La saisie et l'édition d'une liste sont aussi facilitées. Dans l'onglet de prévisualisation, Delphi se comporte, pendant la saisie d'une liste, comme un traitement de texte.
Pour créer une nouvelle liste cliquer sur le bouton Liste triée, celui-ci restera enfoncé tant que la saisie de liste est en cours.
La saisie des éléments de la liste est tout simplement effectuée au clavier. Un appui sur la touche Enter passe à l'élément suivant de la liste. Pour insérer un élément dans la liste il faut se mettre à la fin de l'élément précédent ou au début du suivant et ensuite d'appuyer sur Enter.
II-C. Assistants à la saisie du code
Lors de la saisie directe de balises dans le code, il est possible d'avoir la liste des balises possibles. Pour ce faire tapper le "<" initial et attendez l'ouverture de la liste des balises. Cette liste est filtrée en cours de frappe comme dans le code Pascal :
Une fois l'id de la balise sélectionné ou saisi, il suffit d'ajouter un espace pour séparer les attributs et appuyer sur CTRL-Espace pour afficher la liste des attributs possibles de cette balise :
Dans le cas où la balise requiert une balise fermante, celle-ci est ajoutée automatiquement dès la saisie du > fermant la balise ouvrante.
Un autre assistant que je trouve très utile (pour ceux comme moi qui n'arrivent pas à retenir les caractères spéciaux) est celui d'aide à la saisie d'un code d'échappement. Il faut saisir le & initial et la liste s'affiche :
III. Validation d'un document HTML en fonction du schéma actif
Cette validation est effectuée dans la page code seule (sélectionnable tout en bas de la fenêtre). Delphi va alors souligner toutes les balises et attributs qui ne sont pas valides en fonction du schéma en question.
Après plusieurs essais, il semble que la validation ne soit pas complète. Ainsi toutes les erreurs XHTML ne sont pas retournées. Cependant cela permet de corriger une partie des erreurs de validation avant la mise en ligne des pages.
Il vaudra mieux utiliser la validation ajoutée par Tidy, elle est beaucoup plus fine et précise dans les erreurs retournées.
IV. HTML Tidy
HTML Tidy est un utilitaire de validation et de mise en forme du code HTML. Il n'est qu'en version beta dans Delphi 2005.
Tidy est une bibliothèque indépendante intégrée par Borland. Le source de cette bibliothèque est disponible ici : http://tidy.sourceforge.net/
IV-A. Validation des documents
L'utilitaire Tidy permet de valider les documents HTML en fonction du modèle actif. Pour lancer la validation il faut aller dans Edition->Html Tidy->Rechercher les erreurs dans le document.
cette validation va retourner la liste de toutes les erreurs et oublis dans l'onglet "erreurs de visualisation HTML" dans le bas de la fenêtre.
En l'appliquant au petit fichier créé un peu plus haut en exemple :
[Avertissement] index.html(8): <body> proprietary attribute "ms_positioning"
[Avertissement] index.html(9): <table> attribute "bordercolor" has invalid value "darkblue"
[Avertissement] index.html(9): <table> proprietary attribute "bordercolor"
[Avertissement] index.html(9): <table> attribute "bgcolor" has invalid value "lightblue"
[Avertissement] index.html(9): <table> lacks "summary" attribute
[Avertissement] index.html(13): <td> attribute "bordercolor" has invalid value "darkviolet"
[Avertissement] index.html(13): <td> proprietary attribute "bordercolor"
[Avertissement] index.html(13): <td> attribute "bgcolor" has invalid value "lightpink"
[Avertissement] index.html(22): <td> attribute "bordercolor" has invalid value "darkviolet"
[Avertissement] index.html(22): <td> proprietary attribute "bordercolor"
[Avertissement] index.html(22): <td> attribute "bgcolor" has invalid value "lightpink"
[Avertissement] index.html(26): <td> attribute "bordercolor" has invalid value "darkviolet"
[Avertissement] index.html(26): <td> proprietary attribute "bordercolor"
[Avertissement] index.html(26): <td> attribute "bgcolor" has invalid value "lightpink"
[Avertissement] index.html(26): <img> lacks "alt" attribute
[Avertissement] index.html(29): <img> lacks "alt" attribute
[Avertissement] index.html(30): <td> attribute "bordercolor" has invalid value "darkviolet"
[Avertissement] index.html(30): <td> proprietary attribute "bordercolor"
[Avertissement] index.html(30): <td> attribute "bgcolor" has invalid value "lightpink"
[Avertissement] index.html(31): <table> proprietary attribute "bordercolor"
[Avertissement] index.html(31): <table> lacks "summary" attribute |
Notez que les erreurs sont données en Anglais même dans la version Française de Delphi.
IV-B. Mise en forme des documents.
L'un des outils est le filtrage des documents Html. Cet outil permet de simplifier le code des pages HTML en regroupant les styles identiques. Il permet aussi de réindenter complèment le code Html pour une lecture plus facile.
Après application du formatage, notre exemple devient :
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head>
<body ms_positioning="FlowLayout">
<table bordercolor="darkblue" cellspacing="3" cellpadding="1" width="30%"
bgcolor="lightblue" border="3">
<tbody>
<tr>
<td style="WIDTH: 65px; HEIGHT: 30px" bordercolor="darkviolet"
bgcolor="lightpink">
<ol>
<li>Un
</li>
<li>Deux
</li>
<li>YY
</li>
<li>Trois
</li>
</ol>wxc
</td>
<td style="HEIGHT: 30px" bordercolor="darkviolet" bgcolor=
"lightpink">
<u>B</u><strong>B</strong><em>B</em>
</td>
</tr>
<tr>
<td style="WIDTH: 65px" bordercolor="darkviolet" bgcolor=
"lightpink">
CCC<img height="42" hspace="0" src="file:///d:/temp/nono.jpg"
width="40" border="0"> <img src="file:///d:/temp/nono.jpg">É
</td>
<td bordercolor="darkviolet" bgcolor="lightpink">
<table bordercolor="red" cellspacing="0" cellpadding="1" width=
"100%" align="left" bgcolor="yellow" border="1">
<tbody>
<tr>
<td>
Delphi
</td>
<td>
2005
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html> |
Notez que l'indentation n'est pas stricte au niveau XML. Les balises de mise en forme du texte (gras, italique, etc) ne sont pas prises en compte.
Une simple visite dans les options de HTML-Tidy permet d'apercevoir l'étendue des filtres disponibles.
Dans les options "nouvelles balises" il est possible de définir des comportements pour des balises inconnues. Ce comportement affectera le traitement lors de la mise en forme.
Ici, la balise "toto" sera considérée comme la balise "pre", c'est à dire que la mise en forme et la suppression des espaces ne sera pas effectuée dans le contenu.
V. Téléchargement et liens
Version PDF de cet article :
Miroir 1 : Version PDF
Dans le cas où le miroir 1 ne fonctionne pas :
Miroir 2 : Version PDF
 
|
