Nono40.developpez.com
Le petit coin du web de Nono40
SOURCES TESTS DELPHI WIN32 AUTOMATISMES DELPHI .NET QUICK-REPORT

Utiliser Delphi 2005 comme éditeur HTML

Présentation de l'utilisation de l'EDI Delphi 2005 comme éditeur de pages HTML.

Article lu   fois.

L'auteur

Site personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

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 :

Image non disponible

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 :

Image non disponible

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.

Image non disponible

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.

Image non disponible

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 :

Image non disponible

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 :

Image non disponible

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 :

Image non disponible

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.

Image non disponible

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.

Image non disponible

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 :

 
Sélectionnez

[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 :

 
Sélectionnez

<!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.

Image non disponible

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.

Image non disponible

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. Remerciements

Merci à neguib, Laurent Dardenne et Giovanny Temgoua pour leurs remarques et la correction orthographique.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Copyright © 2005 Bruno Guérangé. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.