Créer un fichier HTML avec l’éditeur d’états

Le nouveau générateur d’états est muni d’un ensemble de nouvelles commandes et fonctionnalités, telles la possibilité de créer un fichier HTML à partir d’un état. Avec le générateur d’états, c’est très facile. Cependant, il peut être difficile de comprendre le modèle HTML utilisé pour créer le fichier. C’est le sujet que nous traiterons dans les pages suivantes.

Note : Dans l’exemple fourni, les modèles HTML sont codés en dur. Nous ne recommandons pas un tel codage en dur dans la pratique, nous l’utilisons ici uniquement pour démontrer les possibilités du générateur d’états.

Un état peut être créé de toutes pièces dans l’éditeur - avec l’assistant, par exemple - en utilisant les commandes du langage 4D. Les deux méthodes nécessitent un modèle HTML pour créer un fichier HTML. Cette étape peut être transparente car 4D fournit un modèle HTML par défaut qui devrait répondre à vos besoins. Néanmoins, vous pouvez tomber sur un cas particulier pour lequel vous préférez utiliser votre propre modèle. Voyons comment on utilise un modèle pour créer un état.

D’abord, affichons le dialogue d’édition d’état et ajoutons quelques colonnes. Ensuite, nous sélectionnons le type de sortie dans le menu Fichier et nous créons l’état. Pour cet exemple, nous allons utiliser le modèle HTML par défaut fourni avec 4D. Un état HTML simple est créé et 4D vous demande où enregistrer le fichier. Vous n’avez pas à vous soucier du modèle HTML.

Nous pouvons aussi utiliser l’assistant d’états pour définir nos colonnes et demander une destination fichier HTML. Dans l’étape 6, Destination, vous voyez le modèle HTML par défaut que nous allons utiliser pour notre exemple. Si ce modèle ne correspond pas à vos besoins, vous pouvez cliquer sur Parcourir … et choisir le fichier qui contient le modèle que vous voulez utiliser. Ensuite, vous créez le document HTML. Enfin, nous pouvons aussi utiliser les commandes pour créer l’état de toutes pièces. Une fois l’état construit, vous pouvez choisir la destination. Pour cela, vous allez utiliser la commande QR FIXER DESTINATION avec la constante qr fichier HTML.

https://4d.developpez.com/documentation/4DDoc2004/CMF/CMF00745.HTM

Notre code ressemblera à ceci :

$ID:=QR Creer zone hors ecran

QR FIXER TYPE ETAT($ID;QR ETAT en liste )
QR FIXER DESTINATION($ID;qr fichier HTML ;$path)
QR FIXER TABLE ETAT($ID;1)
QR INSERER COLONNE($ID;1;"[Inventory]Product")
QR EXECUTER($ID)

En exécutant cette méthode, nous créons le fichier HTML basé sur le modèle par défaut fourni par 4D. Si vous voulez utiliser votre propre modèle HTML, vous devrez faire appel à la commande QR FIXER MODELE HTML.

https://4d.developpez.com/documentation/4DDoc2004/CMF/CMF00750.HTM

Cette commande utilise deux paramètres, la référence de la zone d’état et une variable texte qui est le modèle à utiliser. Le modèle utilisé par la zone hors écran sera remplacé. Cela fait, vous ne pouvez plus récupérer le modèle par défaut, sauf si vous essayez de fouiller dans les ressources de 4D. C’est pourquoi vous pourriez avoir besoin d’utiliser la fonction QR Lire modele HTML avant d’en changer, si vous pensez avoir besoin de restaurer le modèle par défaut. Vous pouvez stocker la valeur par défaut dans une variable temporaire et la remettre plus tard, si besoin.

Note : Le modèle par défaut de 4D est stocké dans la ressource texte n° 14900, dans le fichier de ressource du générateur d’états. Ce fichier s’appelle 4DQR et est situé dans le dossier 4D Extensions. Il est déconseillé de modifier cette ressource. 4D ne chargera le modèle qu’à partir de ce fichier.

Notre code ressemble à ceci :

$ID:=QR Creer zone hors ecran

QR FIXER TYPE ETAT($ID;QR ETAT en liste )
QR FIXER DESTINATION($ID;qr fichier HTML ;$path)
QR FIXER MODELE HTML($ID ;$HTML_Template)
QR FIXER TABLE ETAT($ID;1)
QR INSERER COLONNE($ID;1;"[Inventory]Product")
QR EXECUTER($ID)

Vous pouvez remarquer que la commande QR FIXER DESTINATION est exécutée avant la commande QR FIXER MODELE HTML. Cet ordre d’exécution est nécessaire ; autrement, le modèle n’est pas remplacé. Et maintenant, qu’y a-t-il dans la variable $HTML_Template ?

Comme indiqué dans la documentation, le modèle utilise des balises que 4D remplace par la valeur qui convient. C’est similaire à une connexion Web dans laquelle les balises 4D sont remplacées par les valeurs HTML appropriées.

Toutes les balises sont fournies avec l’exemple de la documentation pour QR FIXER MODELE HTML. Cela sera expliqué dans notre exemple suivant. Toutes les balises sont uniques. 4D va analyser le fichier comme si l’impression était en cours et remplacer ces balises une seule fois. Par exemple, nous allons voir que vous pouvez définir une colonne particulière par son numéro (par exemple : <!--#QRCol ;4-->). Vous ne pouvez pas dupliquer la même valeur dans votre état avec ces balises. Si vous voulez dupliquer vos colonnes dans votre document HTML, vous devrez les dupliquer dans votre état.

Une fois l’impression terminée, toutes les balises d’état auront été remplacées et le document sera écrit dans le fichier spécifié.

À l’ouverture de la base exemple, la méthode GenerateFile (Créer fichier NDT) est exécutée. Un dialogue indique l’emplacement auquel vous pouvez consulter les fichiers créés. En refermant le dialogue et en retournant en menus créés, vous pouvez réexécuter cette méthode en choisissant la ligne « Démarrage » du menu « Démonstration ».

Trois documents différents vont être créés par trois méthodes différentes. Ces documents vont être créés dans le dossier de la base. Depuis le dialogue, vous pouvez cliquer sur un des boutons qui ouvre le document à l’aide de la commande LANCER PROCESS EXTERNE (en 4D 2004).

Si vous reprenez les méthodes utilisées avec une version 4D 2003, vous utiliserez la commande OUVRIR URL WEB : un navigateur par défaut doit avoir été défini sur votre machine.

Avant d’afficher le dialogue, la méthode GenerateFile exécute trois méthodes : Create CrossTab report (Créer état tableau croisé), Create list report (Créer état liste) et CreateXML (Créer XML). Chacune de ces trois méthodes va créer un état à partir de commandes 4D et construire leur modèle HTML à la volée.

Ensuite, nous verrons pourquoi le modèle HTML a été construit de cette manière.

Voici une vue partielle de l’état liste créé par notre base exemple. La méthode qui a créé cet état est Create list report.

Notre état a trois colonnes, avec des couleurs, un style, une police, des arrière-plans, un en-tête et un pied de page, et deux zones de sous-total.

Regardons maintenant le code qui a créé cet état pour voir comment nous allons créer le modèle.

Ce code montre que nous commençons par définir le type de sortie et le modèle, puis créons l’état. Au début, le modèle peut sembler difficile à comprendre. Ne vous inquiétez pas… Ce n’est pas le cas. Nous avons deux sortes de balises, celles qui extraient les données et celles qui améliorent l’apparence de notre page HTML.

Commençons par l’extraction des données. Pour mieux comprendre, revenons à notre état. En quoi consiste un état ?

Un état commence en haut de chaque page, par un en-tête que vous pouvez définir et aligner à gauche, au centre ou à droite. L’état continue avec les titres de colonnes. Puis viennent les données, les lignes de sous-total et la ligne de total. Ensuite, vient le pied, aligné à gauche, au centre ou à droite.

Voici à quoi ça ressemble :

Notre objectif est maintenant de voir comment créer cela. Comment pouvons-nous afficher cette information ?

Pour l’en-tête, c’est simple. Nous allons utiliser le QR FIXER ENTETE ET PIED DE PAGE. Nous avons trois variables pour l’en-tête, et sept balises pour les extraire.

La balise qui renvoie la valeur est <!--#4DQRData-->.

Nous n’avons qu’à définir la donnée que cette balise doit renvoyer. C’est pourquoi nous allons insérer cette balise entre deux autres balises.

Entre les balises <!--#4DQRIHeader--> et <!--/#4DQRIHeader-->, nous pouvons extraire notre en-tête de gauche.

Entre les balises <!--#4DQRcHeader--> et <!--/#4DQRcHeader-->, notre en-tête du centre.

Enfin, entre les balises <!--#4DQRrHeader--> et <!--/#4DQRrHeader-->, notre en-tête de droite.

Par exemple, pour obtenir les trois en-têtes, nous pouvons utiliser la définition suivante :

<TR>
            <TD>
                     <!--#4DQRIHeader--> <!--#4DQRData--><!--/#4DQRIHeader-->
            </TD>
            <TD>
                     <!--#4DQRcHeader--> <!--#4DQRData--><!--/#4DQRcHeader-->
            </TD>
            <TD>
                     <!--#4DQRrHeader--> <!--#4DQRData--><!--/#4DQRrHeader-->
            </TD>
   </TR>

Ensuite, nous devons extraire les titres. Mais comme vous ne connaissez pas forcément à l’avance le nombre de colonnes de votre état, il peut s’avérer difficile d’élaborer un modèle générique.

C’est pourquoi vous disposez d’une balise générique qui va analyser toutes vos colonnes. Elle est similaire à la balise 4DLoop pour boucler sur une sélection dans un process Web. Dans le cas du générateur d’états, vous utiliserez la balise <!--#4DQRCol--> et son pendant, <!--/#4DQRCol-->.

Vous pouvez maintenant utiliser la balise <!--#4DQRHeader--> et son pendant, <!--/#4DQRHeader--> pour créer les titres de colonne. Ces deux balises vont encadrer les balises <!--#4DQRCol--> et <!--/#4DQRCol-->, qui vont encadrer la balise <!--#4DQRData-->.

Les balises suivantes vont extraire tous les titres de colonnes :

<!--#4DQRHeader-->
      <!--#4DQRCol-->
         <!--#4DQRData-->
      <!--/#4DQRCol-->
<!--/#4DQRHeader-->

Nous devons maintenant créer les lignes de données, les sous-totaux et le total. Ces trois lignes vont utiliser les mêmes balises. Nous avons le même problème qu’avec les titres. Nous ne connaissons pas le nombre de colonnes et nous voulons le traiter avec du code générique. C’est pourquoi nous avons les balises <!--#4DQRRow--> et <!--/#4DQRRow-->. Elles sont similaires aux balises <!--#4DQRHeader--> et <!--/#4DQRHeader-->, sauf qu’elles s’appliquent aux données, aux sous-totaux et au total.

Les balises suivantes vont extraire nos lignes de données, les sous-totaux et le total :

<!--#4DQRRow-->
      <!--#4DQRCol-->
         <!--#4DQRData-->
      <!--/#4DQRCol-->
<!--/#4DQRRow-->

Dans d’autres cas, si nous connaissons le nombre de colonnes, nous pouvons construire notre modèle en désignant la colonne voulue. Pour cela, nous pouvons passer un paramètre supplémentaire aux balises <!--#4DQRCol--> et <!--/#4DQRCol-->.

Dans ce cas, 4D remplacera les balises par l’information appropriée. Vous ne pouvez pas mélanger les deux systèmes et utiliser le <!--#4DQRCol--> avec et sans le numéro de colonne dans votre modèle.

Cela ne fonctionne que dans la boucle <!--#4DQRRow--> et c’est utile pour créer un fichier XML. Par exemple :

<!--#4DQRRow-->
   <personne>
   <prenom>
      <!--#4DQRCol ;1-->
         <!--#4DQRData-->
      <!--/#4DQRCol ;1-->
   </prenom>
   <nom>
      <!--#4DQRCol ;2-->
         <!--#4DQRData-->
      <!--/#4DQRCol ;2-->
   </nom>
   </personne>
<!--/#4DQRRow-->

(Cela sera expliqué ci-dessous.)

La dernière information à extraire est le pied de page. C’est semblable à la partie sur l’en-tête. Nous avons aussi six autres balises à utiliser avec notre balise <!--#4DQRData--> pour extraire cette information.

Le <!--#4DQRIFooter--> retourne le pied de gauche.
Le <!--#4DQRcFooter--> retourne le pied du centre.
Le <!--#4DQRrFooter--> retourne le pied de droite.

La combinaison de tous ces codes dans la génération d’un état HTML peut donner un résultat plutôt inesthétique. C’est parce qu’il n’y a pas de style, pas de tableau, etc. Pour le rendre plus présentable, nous pouvons reprendre les mêmes attributs que ceux définis dans l’état et les traduire en HTML. Par exemple, nous pouvons définir nos cellules en gras ou en couleur. La traduction en HTML est facile. Nous disposons d’un deuxième ensemble de six balises qui vont nous aider à construire une page HTML plus attrayante. La première est la balise <!--#4DQRCharset-->. Cette balise retourne le jeu de caractères défini dans votre base. Une page HTML doit avoir un jeu de caractères pour pouvoir afficher les caractères altérés ou les chaînes de pays étrangers. Nous pourrions avoir besoin de le préciser pour afficher correctement cette page. Cette valeur peut être définie dans la section Web des préférences de la base.

Nous avons déjà vu que nous pouvions affecter des couleurs de fond dans notre état. C’est là que nous pouvons utiliser la balise <!--#4DQRBgcolor-->, incluse dans une balise <TD>, par exemple. Elle va renvoyer la couleur de fond courante que nous pourrons affecter dans une balise <TD>. Nous pouvons remplacer la définition <TD> par <TD bgcolor= ’’<!--#4DQRBgcolor-->’’>.

Les balises <!--#4DQRFont--> et <!--/#4DQRFont--> combinées avec <!--#4DQRData--> vont nous permettre de lire le nom de la police et la couleur de la cellule courante. Cette balise ne permet pas de récupérer la taille de la police. La taille que vous pouvez définir dans l’état est en points, alors que la taille en HTML est très spécifique et dépend de votre navigateur. Les balises <!--#4DQRFace--> et <!--#4DQRFace--> vont retourner les balises HTML qui définissent les attributs Gras, Italique ou Souligné de votre texte.

Avec toutes ces balises, la définition de vos titres ressemble à ceci :

<!--#4DQRHeader-->
   <TR>
      <!--#4DQRCol-->
      <TD bgcolor= "<!--#4DQRBgcolor-->">
         <!--#4DQRFont-->
         <!--#4DQRFace-->
            <!--#4DQRData-->
         <!--/#4DQRFace-->
         <!--/#4DQRFont-->
      </TD>
      <!--/#4DQRCol-->
   </TR>
<!--/#4DQRHeader-->

Nous avons désormais vu toutes les balises d’états qui nous permettent de créer un état HTML. Certaines doivent être utilisées dans une balise <TD>. Il est temps de toutes les insérer dans un modèle HTML. C’est ce que nous allons faire dans nos trois méthodes avec la variable $model_html.

En jetant un coup d’oeil à la définition de notre variable locale, nous pouvons voir que nous définissons le jeu de caractères dans l’en-tête HTML.

Dans le corps, nous pouvons définir un tableau HTML. La première donnée de votre fichier HTML sera les entêtes de gauche, du centre et de droite.

Voici le code que nous avons vu ci-dessus et qui permet d’extraire ces valeurs :

<TR>
   <TD>
      <!--#4DQRlHeader--> <!--#4DQRData--><!--/#4DQRlHeader-->
   </TD>
   <TD>
      <!--#4DQRcHeader--> <!--#4DQRData--><!--/#4DQRcHeader-->
   </TD>
   <TD>
      <!--#4DQRrHeader--> <!--#4DQRData--><!--/#4DQRrHeader-->
   </TD>
</TR>

Inséré entre les balises <TR> et <TD>, le code suivant va renvoyer nos titres de colonnes.

<TR>
<!--#4DQRRow-->
   <!--#4DQRCol-->
   <TD>
      <!--#4DQRData-->
   </TD>

   <!--/#4DQRCol-->
<!--/#4DQRRow-->
</TR>

Notez bien que la définition de <TD> est à l’intérieur de la boucle <!--#4DQRCol-->. Autrement, nous aurions un unique <TD> pour contenir nos trois titres de colonne.

La suite du modèle nous permet de récupérer toutes les lignes de l'état, des lignes de données aux lignes de sous-total et au total.

Notre ensemble de balises va devenir :

<!--#4DQRRow-->
<TR>
   <!--#4DQRCol-->
      <TD bgcolor= "<!--#4DQRBgcolor-->">
         <!--#4DQRFont-->
         <!--#4DQRFace-->
            <!--#4DQRData-->
         <!--/#4DQRFace-->
         <!--/#4DQRFont-->
      </TD>
   <!--/#4DQRCol-->
</TR>
<!--/#4DQRRow-->

Après la ligne de total, nous pouvons finir par la ligne de pied avec le code suivant :

<TR>
  <!--#4DQRRow-->
    <!--#4DQRCol-->
      <TD>
        <!--#4DQRlFooter--> <!--#4DQRData--><!--/#4DQRlFooter-->
      </TD>
      <TD>
        <!--#4DQRcFooter--> <!--#4DQRData--><!--/#4DQRcFooter-->
      </TD>
      <TD>
        <!--#4DQRrFooter--> <!--#4DQRData--><!--/#4DQRrFooter-->
      </TD>
    <!--/#4DQRCol-->
  <!--/#4DQRRow-->
</TR>

Nous pouvons maintenant terminer notre modèle avec les balises </body> et </html>. Notre variable locale contient maintenant un joli modèle qui peut nous permettre de créer des pages HTML plaisantes.

Et maintenant, qu’en est-il des tableaux croisés ?

Voici l’exemple de tableau croisé en HTML :

La méthode utilisée pour créer cet état est Create crosstab report (Créer état tableau croisé). Comme vous pouvez le voir, nous utilisons le même modèle générique. Nous pouvons utiliser la même définition de jeu de caractères, les mêmes balises... La première ligne du tableau croisé contient nos titres de colonnes. La balise <!--#4DQRHeader--> les affichera. Toutes les autres lignes seront créées par la balise <!-- #4DQRRow-->.

A quoi sert cette balise ? Si nous regardons la méthode CreateXML, nous pouvons voir que le modèle courant n’a rien à voir avec un modèle habituel. Il n’y a aucun titre. Nous commençons par une description XML et bouclons directement sur nos lignes. Comme vous l’avez vu, dans nos modèles précédents, toute l’information mise entre les balises <!--#4DQRCol--> et <!--#4DQRRow--> sera répétée. Il n’y a aucun moyen d’ajouter d’autres balises propres à nos colonnes. Entre nos balises, nous pouvons seulement insérer des balises <TR> et <TD>. Elles seront toutes répétées pour chaque colonne, ce qui est parfait ; nous avons ce qu’il faut pour construire nos tableaux. En XML, nous devons donner à chaque balise un nom tel que <nom> valeur </nom>. Nous ne pouvons pas utiliser cela tel quel. C’est pourquoi nous avons implémenté la possibilité d’obtenir la valeur de chaque colonne. Nous savons quelles colonnes nous voulons construire. C’est pourquoi nous pouvons coder en dur notre modèle sous forme de fichier XML et insérer nos colonnes telles quelles. Nous n’utiliserons pas la boucle automatique sur toutes les colonnes, puisque nous allons extraire leur propre valeur.

Notre code aura cette apparence :

<!--#4DQRRow-->
   <record>
      <Colonne1>
         <!--#4DQRCol;1--><!--#4DQRData--><!--/#4DQRCol;1-->
      </Colonne1>
      <Colonne2>
         <!--#4DQRCol;2--><!--#4DQRData--><!--/#4DQRCol;2-->
      </Colonne2>
      <Colonne3>
         <!--#4DQRCol;3--><!--#4DQRData--><!--/#4DQRCol;3-->
      </Colonne3>
   </record>
<!--/#4DQRRow-->

Cette utilisation n’est pas propre au XML. Vous pouvez aussi l’utiliser pour des pages HTML ordinaires. Par exemple, le code suivant va engendrer le même code HTML que notre code générique :

<!--#4DQRRow-->
   <TR>
      <TD>
         <!--#4DQRCol;1--><!--#4DQRData--><!--/#4DQRCol;1-->
      </TD>
      <TD>
         <!--#4DQRCol;2--><!--#4DQRData--><!--/#4DQRCol;2-->
      </TD>
      <TD>
         <!--#4DQRCol;3--><!--#4DQRData--><!--/#4DQRCol;3-->
      </TD>
   </TR>
<!--/#4DQRRow-->

Le pour et le contre :

• Le code précédent est générique, mais limité. Vous ne pouvez pas y insérer du code HTML spécifique.
• Le nouveau code vous oblige à tout définir, mais vous permet d’ajouter du code. C’est important, non seulement pour générer du XML, mais aussi parce que vous pouvez ainsi insérer du code HTML supplémentaire. Par exemple, votre état doit créer trois colonnes ; votre modèle contient cinq colonnes, une colonne entre deux colonnes de l’état servant à afficher un texte statique, une image ou autre.
• Vous ne pouvez pas mélanger les deux techniques (utiliser la boucle et les colonnes désignées en même temps).
• Le n° de colonne est celui de la colonne à imprimer et non celui de l’état. Certaines colonnes de l’état peuvent être cachées et non imprimées. Cette balise ne vous permettra pas d’utiliser des valeurs de colonnes cachées.
• Pouvez-vous utiliser cette balise pour des tableaux croisés ? Cet usage spécifique n’est pas compatible avec les tableaux croisés. Le résultat serait malencontreux.

Tous les types de balises ont une balise de début et une balise de fin (la même balise, mais commençant par le caractère /), à l’exception de <!--#4DQRCharSet--> qui renvoie le jeu de caractères courant et <!--#4DQRData--> qui renvoie la valeur de la balise choisie. Les balises qui ont un début et une fin ne peuvent retourner de valeur qu’en utilisant <!--#4DQRData-->. Cette balise ne peut s’utiliser qu’entre une balise de début et une balise de fin. Les balises <!--/#4DQRHeader--> et <!--/#4DQRRow--> bouclent sur le nombre de colonnes à imprimer et non sur les colonnes de l’état, dont certaines peuvent être cachées. Toutes les balises incluses dans cette boucle sont répétées pour chaque colonne.

A noter :

• L'utilisation de la ligne :
  <TD bgcolor= "<!--#4DQRBgcolor-->">
  dans une chaîne oblige à utiliser les caractères d'échappement pour obtenir les guillemets. La ligne devient donc :
  " <TD bgcolor= \"<!--#4DQRBgcolor-->\">"
• Pour les utilisateurs de la base Démo sous Windows :
  Si vous n'arrivez pas à lancer le navigateur, vérifiez la méthode projet PathWin et modifiez le chemin d'accès à votre navigateur en fonction de votre configuration.

Téléchargez la base exemple :

Base exemple