Niouzes

< Avril 2021 >
Lu Ma Me Je Ve Sa Di
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30    

Citation

Attention

Certains des exemples que nous fournissons ci-dessous ne sont pas complets. D'emblée, nous nous en excusons, bien sûr. Mais pourquoi diable sont-ils incomplets ?

Ils sont incomplets parce que nous y travaillons en ce moment et que plutôt que de vous faire patienter jusqu'à ce qu'ils soient tous terminés, nous avons préféré vous les livrer dans l'état où ils se trouvent pour que vous puissiez vous faire une idée de ce qu'ils illustrent.

Au fur et à mesure de notre avancement, nous ferons les mises à jour idoines. Nous espérons résorber notre retard au plus vite.

2014-08-06 à 17:05:56 par Patrick Boens

Table Of Contents

  1. Template with patterns, Swipe Simply, cahing pages for bots, … (06/08/2014)
  2. Gestion de redirections, Accept-Language, extrapolation de la langue et du pays, LSContainer et le génome, LSInput et les gènes, utilisation de LSCacheDir, création de propriétés dynamiques de LSPage dans le géorama, … (11/10/2013)
  3. Statistiques d'accès, Site Manager, prefetch, prerender, File Explorer, interactions Ajax … (17/06/2013)
  4. LSTag, LSContentsDatetime, LSContentsCountdown, LSContentsStopwatch, threshold et score, configuration vhosts Apache, génération automatique, LSVStrings.js, LSVDates.js, tracing sur XML des îles, Free User Input Zones, multiple credentials, cookie de dernière visite, LSInput et datalist (10/04/2013)
  5. Tour d'horizon des filtres (23/09/2013)
  6. Messages de service (07/01/2014)
  7. Accès aux propriétés des îles, halt.sem, cookies positionnés dans les îles, filtre 'browsertype', contenus alternatifs, expressions PHP sur les href, gestion de l'expiration, filtre de visite, ... (22/09/2013)
  8. Messages de service, ... (30/10/2012)
  9. Config Apache, LSInput, LSForm, ... (13/03/2013)
  10. LSContentsBooking, Browser Danger Rating, User Agent vides (non spécifiés), filtres sur les paramètres, LSBrowser, ... (11/06/2013)
  11. LSTag('img'), auto pages, nouveaux filtres, audio/video, ... (02/11/2013)
  12. LSGeo, LSFootnotes, LSSourceFile, LSPublication, onfail avec codes de retour HTTP (301, 302, ...), ... (27/06/2013)
  13. LSCache, microformat (lupdate), multicontent, LSContentsTagCloud, LSContentsImageGallery, HTML5 (input zones), ... (15/09/2013)
  14. Check Spamhaus, vos settings dans le géorama, LSContentsMicronews, Switch dans le géorama, LSCursor: des records dans les records, ... (04/12/2012)
  15. Campagnes de pub, TODO list (04/12/2012)
  16. Debugging de page, LSTimeline, le fichier de géorama, LSTag, Glossaire IT, Named colors, Codes langue, ... (23/03/2013)
  17. LSCursor: une revue complète de la classe (12/03/2013)
  18. LSForm, LSInput, … (28/01/2013)
  19. LSContentsBusinessCoordinates, redirection de pages, LSTwitterPost, LSContentsTwitterFollowers, LSContentsShare, calendrier, LSContentsContactForm, LSContentsReview et LSReview, droits sur une page, URLs canoniques, LSPaymentOptions et LSContentsPaymentOptions, Offres d'emploi, LSContentsImageTransition, ... (20/09/2013)
  20. Galerie avec vignettes, RSS, partage d'offres d'emploi, partage de citations, diaporama dewslider, horloge flash, footnotes, ... (01/10/2012)
  21. îles préfixées de texte standard, le paramètre title, le paramètre heading, le paramètre text, le paramètre xsl, LSRegionSubtag, Language Switchers, LSFormEnroll, LSContentsLegal, sitemap, substitution de propriétés, LSSourceFile et LSContentsSourceFile, LSContentsComments, LSContentsCharter, ... (05/11/2013)
  22. LSContentsLoginLogoff, Utilisation de && dans les conditions des îles, LSWidgetOpeningHours et LSContentsBusinessOpeningHours, inclusion de snippets, image bouton de login/logoff, LSContentsBusinessCoordinates, commentaires dans les îles, doctypes, LSImageTrans, calcul de dates, LSWidgetEmailForm, LSContentsMedia, LSContentsIFrame, onload et onunload d'une page, Page settings, ... (22/09/2013)
  23. Dates et heures de publication et/ou d'expiration, PHP expressions, Blocs XHTML avant et après une île, suite de pages, îles valables par domaine, substitutions, envoyer des fichiers au serveur, templates dynamiques, contenus distants, contenus générés en Java, LSCalculator, Gérer des signets (bookmarks), Pages conditionnelles, îles conditionnelles, désactivations, LSContentsMedia, taille du géorama, partager une page entre sites, LSXHtmlImg, île dans la section …, textes latins, Dublin Core, Utilisation de caches, corrections automatiques, In-Place Editing, LSContentsCitation (03/11/2013)

Débugguer une page 2011-03-08

Grâce à la propriété IsDebug d'une page il est possible d'entrer dans un mode de debugging concernant ladite page. Voici comment procéder…

Editez la définition de la page dans le géorama. Par exemple :

<Land id="/reservation.php"
      active="yes"
      editable="yes"
      group="{rooms}"
      inherit="inside">
    <Description title="Réservation de salles" h1="Salles" lang="fr">
        <ExtendedDesc><![CDATA[Réservation de salle - Mon Restaurant]]></ExtendedDesc>
    </Description>

    <Defaults>
        <Settings>
            <!-- Overwrites the default settings of a page -->
            <LSGuid><![CDATA[CJ-5fdca453-895e-4881-9552-64eecf36323e]]></LSGuid>
            <LSDebug><![CDATA[true]]></LSDebug>
        </Settings>
    </Defaults>

    <Contents id="contents">
        <Archipelago id="contents" active="yes" category="body">
            <Island id="contents" active="yes" class="LSContents">
                <param name="storage"><![CDATA[/islands/reservation-body-{page->lang}.php]]></param>
            </Island>
        </Archipelago>
    </Contents>
    <Sitemap priority="0.8" frequency="weekly" />
</Land>

Ensuite, dans le code de votre page (dans notre cas ce qui est contenu dans le fichier /islands/reservation-body-{page->lang}.php) insérez un code similaire à :

<?php
    if ( $this->IsDebug )
    {
        echo "<p>Debug set at the page level!</p>";
        echo "<p>POST contains " . count( $_POST ) . " items</p>";
        var_dump( $_POST );
    }

    if ( count( $_POST ) > 0 )
    {
        $iQty           = (int) $_POST['txtQty'      ];
        $szResource     =       $_POST['cboRes'      ];
        $szDate         =       $_POST['txtDate'     ];
        $iStartHour     = (int) $_POST['txtStartHour'];
        $iStartMin      = (int) $_POST['txtStartMin' ];
        $iEndHour       = (int) $_POST['txtEndHour'  ];
        $iEndMin        = (int) $_POST['txtEndMin'   ];
        $szFirstName    =       $_POST['txtFirstName'];
        $szLastName     =       $_POST['txtLastName' ];
        $szEmail        =       $_POST['txtEmail'    ];
        $szAddress      =       $_POST['edtAddress'  ];
        $szZIP          =       $_POST['txtZIP'      ];
        $szCity         =       $_POST['txtCity'     ];
        $szCountry      =       $_POST['cboCountry'  ];
        $szTel          =       $_POST['txtTel'      ];
        $szComment      =       $_POST['edtComment'  ];
        $szSubmit       =       $_POST['cmdSubmit'   ];
    }
…
?>

Connaître le fichier Géorama du site 2011-02-24

Pour des raisons qui vous sont personnelles vous pourriez éprouver le besoin de savoir le nom exact du fichier georama de votre site. Rien n'est plus simple car il suffit effectivement d'interroger la propriété szGeoramaFile de l'objet Application (lui-même contenu dans la page - $this) comme vous le démontre le code ci-dessous :

echo FIL_Normalize( $this->oApp->szGeoramaFile );
C:\vaesoli.org\httpdocs\public-config\config-site.xml

Création de tags : <p>…</p>,<div>…</div>,<img />, <ol>…</ol>, <ul>…</ul>, et autres 2010-11-15

Depuis l'opus "3.5.0017"

Comment utiliser les toutes nouvelles classes destinées aux tags. C'est l'objet des exemples qui suivent.

Bien entendu, dans la plupart des cas, vous n'avez absolument pas besoin de créer du code PHP pour générer le code HTML de vos pages. C'est d'ailleurs parfaitement overkill. Cependant, à certaines occasions, cela peut s'avérer très utile notamment lorsqu'il s'agit de pouvoir ajouter des constructions complexes à des formulaires. Mais cela n'est qu'un exemple.

Division: <div>…</div>

Commençons donc par le commencement. Nous allons tenter de créer une division, soit le tag <div>…</div>, un paragraphe soit le tag <p>…</p> et allons inclure le paragraphe dans la division. Nous commencerons ainsi par les choses les plus simples à réaliser.

Line 001: <?php
Line 002: $oDiv   = new LSTag( "div" );
Line 003: $oPara  = new LSTag( "p" );
Line 004: $oPara->szText = "Bonjour tout le monde";
Line 005:
Line 006: $oDiv->AddObject( $oPara );
Line 007: echo $oDiv;
Line 008: ?>

Ce qui produit le code suivant :

<div><p>Bonjour tout le monde</p></div>

Soyons un peu plus ambitieux et affublons la division d'un ID, tandis que nous donnerons une classe au paragraphe : nous ne faisons qu'ajouter un peu de code PHP au code déjà créé…

Line 001: <?php
Line 002: $oDiv->szID     = "MyID";
Line 003: $oPara->szClass = "important";
Line 004: echo $oDiv;
Line 005: ?>

Ce qui produit le code suivant :

<div id="MyID"><p class="important">Bonjour tout le monde</p></div>

Pour le plaisir, nous allons maintenant ajouter un deuxième paragraphe auquel nous allons donner tout de suite un ID et une classe :

Line 001: <?php
Line 002: $oPara2 = new LSTag( 'p','Para2','normal' );
Line 003: $oPara2->szText = "Piso, inquam, si est quisquam, qui acute
Line 004: in causis videre soleat quae res agatur. Is es profecto tu. Quare
Line 005: attende, quaeso. nam adhuc, meo fortasse vitio, quid ego quaeram
Line 006: non perspicis.";
Line 007: $oDiv->AddObject( $oPara2 );
Line 008: echo $oDiv;
Line 009: ?>
<div id="MyID"><p class="important">Bonjour tout le monde</p><p id="Para2" class="normal">Piso, inquam, si est quisquam, qui acute
in causis videre soleat quae res agatur. Is es profecto tu. Quare
attende, quaeso. nam adhuc, meo fortasse vitio, quid ego quaeram
non perspicis.</p></div>

Titres: <h1>…</h1> à <h6>…</h6>

Permettons-nous des titres et formatons davantage la sortie de code (output) ce qui nous permettra de faire la connaissance de nouvelles propriétés et méthodes :

Line 001: <?php
Line 002: $oDiv                   = new LSTag( 'div','cartouche' );
Line 003:
Line 004: $oH                     = new LSTag( 'h1' );
Line 005: $iLevel                 = 1;
Line 006: $iSpaces                = 4;
Line 007: $oH->iIndentSpaces      = $iSpaces;
Line 008: $oH->iIndentLevel       = $iLevel;
Line 009: $oH->LeadTrail( "\n",null,null,"\n" );
Line 010: $oH->szText             = "Les nouveaux tags de Vae Soli!: la classe <code>LSTag</code>";
Line 011:
Line 012: $oPara1                 = new LSTag( 'p','Para1','normal' );
Line 013: $oPara1->iIndentSpaces  = $iSpaces;
Line 014: $oPara1->iIndentLevel   = $iLevel;
Line 015: $oPara2->szLeader       = "\n";
Line 016: $oPara1->szInnerLeader  = "\n";
Line 017: $oPara1->szTrailer      = "\n";
Line 018: $oPara1->szText         = "La classe LSTag permet de créer des tags (X)HTML. Cette classe permet
Line 019: d'inclure des sous-tags. Au demeurant, Vae Soli! vérifie que vous
Line 020: n'ajoutiez pas de sous-tag d'une mauvaise catégorie.";
Line 021:
Line 022: $oPara2                 = new LSTag( 'p','Para2','latin' );
Line 023: $oPara2->iIndentSpaces  = $iSpaces;
Line 024: $oPara2->iIndentLevel   = $iLevel;
Line 025: $oPara2->szLeader       = "\n";
Line 026: $oPara2->szInnerLeader  = "\n";
Line 027: $oPara2->szTrailer      = "\n";
Line 028: $oPara2->szText         = "Piso, inquam, si est quisquam, qui acute
Line 029: in causis videre soleat quae res agatur. Is es profecto tu. Quare
Line 030: attende, quaeso. nam adhuc, meo fortasse vitio, quid ego quaeram
Line 031: non perspicis.";
Line 032:
Line 033: $oDiv->AddObject( $oH );
Line 034: $oDiv->AddObject( $oPara1 );
Line 035: $oDiv->AddObject( $oPara2 );
Line 036:
Line 037: echo $oDiv;
Line 038: ?>

Et cela donne :

Ajouter des images

Il est naturellement possible d'ajouter des images, une fonctionnalité essentielle pour qui crée un site web. Considérez alors le code suivant :

Line 001: <div style="height:250px;">
Line 002: <?php
Line 003:     $o1 = new LSTag( 'div','div-1' );           // On crée la division div-1
Line 004:     $o1->szInnerLeader= "\n";                   // Aller à la ligne
Line 005:     $oP  = new LSTag( 'p' );                    // On crée une citation
Line 006:     $oI  = new LSTag( 'img' );                  // On creé une image
Line 007:     $oI->szSrc = 'boule-de-poil.jpg';           // On donne la source de l'image
Line 008:     $oI->szAlt = 'Une boule de poil végétale';  // On donne un texte 'alternate'
Line 009:     $oI->szTrailer = '<br />';                  // Aller à la ligne après l'image
Line 010:     $oI->szStyle = "float:left;width:37%;height:37%;padding:10px;
Line 011: border:2px solid saddlebrown;margin-right:15px;background:burlywood;";
Line 012:     $oP->szText = 'Voilà une photo prise dans le
Line 013: hall d\'entrée de la maison: ' . $oI->Render() .
Line 014: 'Ne la trouvez-vous pas belle ?';
Line 015:     $oP->szText .= ' Nec vero id satis est, neminem esse, qui ipse
Line 016: se oderit, sed illud quoque intellegendum est, neminem esse, qui,quo modo se
Line 017: habeat, nihil sua censeat inte resse. tolletur enim appetitus animi, si, ut in
Line 018: lis rebus, inter quas nihil interest, neutram in partem propensiores sumus, item
Line 019: in nobismet ipsis quem ad modum affecti simus nihil nostra arbitrabimur
Line 020: interesse.<br />';
Line 021:     $oP->szText .= ' Utrum igitur tibi non placet, inquit, virtutisne
Line 022: tantam esse vim, ut ad beate vivendum se ipsa contenta sit? an, si id probas,
Line 023: fieri ita posse negas, ut ii, qui virtutis compotes sint, etiam malis quibusdam
Line 024: affecti beati sint?';
Line 025:
Line 026:     $o1->AddObject( $oP );
Line 027:     echo $o1->Render();
Line 028: ?>
Line 029: </div>

Et voilà ce qu'il produit :

Voilà une photo prise dans le hall d'entrée de la maison: Une boule de poil végétale
Ne la trouvez-vous pas belle ? Nec vero id satis est, neminem esse, qui ipse se oderit, sed illud quoque intellegendum est, neminem esse, qui,quo modo se habeat, nihil sua censeat inte resse. tolletur enim appetitus animi, si, ut in lis rebus, inter quas nihil interest, neutram in partem propensiores sumus, item in nobismet ipsis quem ad modum affecti simus nihil nostra arbitrabimur interesse.
Utrum igitur tibi non placet, inquit, virtutisne tantam esse vim, ut ad beate vivendum se ipsa contenta sit? an, si id probas, fieri ita posse negas, ut ii, qui virtutis compotes sint, etiam malis quibusdam affecti beati sint?

Ajouter des listes

Il est possible d'ajouter des listes, ordonnées ou non, aux divisions comme vous le suggère l'exemple suivant :

Line 001: <?php
Line 002: $oDiv = new LSTag( 'div' );
Line 003: $oDiv->szInnerLeader = "\n";
Line 004: $oOl  = new LSTag( 'ol' );
Line 005: for ( $i=1;$i<11;$i++ )
Line 006: {
Line 007:     $oLi = new LSTag( 'li' );
Line 008:     $oLi->szText    = "Option #{$i}";
Line 009:     $oLi->szTrailer = "\n";
Line 010:     $oOl( $oLi );
Line 011: }
Line 012: $oDiv->AddObject( $oOl );
Line 013: echo "<pre>" . htmlentities( $oDiv ) . "</pre>";
Line 014: ?>
<div>
<ol><li>Option #1</li>
<li>Option #2</li>
<li>Option #3</li>
<li>Option #4</li>
<li>Option #5</li>
<li>Option #6</li>
<li>Option #7</li>
<li>Option #8</li>
<li>Option #9</li>
<li>Option #10</li>
</ol></div>

Des listes imbriquées

À chaque option (li) que vous ajoutez à une liste vous pouvez ajouter une nouvelle liste. C'est de cette manière qu'on imbrique des listes dans des listes. Dans l'exemple qui suit, nous créons une liste ordonnée (ol) à laquelle nous allons ajouter 5 options (li). Pour chaque option, nous allons créer une sous-liste non ordonnée (ul) ayant chacune 2 sous-options. Voici le code nécessaire :

Line 001: <?php
Line 002: $oDiv = new LSTag( 'div' );
Line 003: $oDiv->szInnerLeader = "\n";
Line 004: $oOl  = new LSTag( 'ol' );
Line 005: for ( $i=1;$i<6;$i++ )
Line 006: {
Line 007:     $oLi = new LSTag( 'li' );
Line 008:     $oLi->szText    = "Option #{$i}";
Line 009:     $oLi->szTrailer = "\n";
Line 010:
Line 011:     $oUl = new LSTag( 'ul' );
Line 012:
Line 013:     for ( $j=1;$j<3;$j++ )
Line 014:     {
Line 015:         $oLi2 = new LSTag( 'li' );
Line 016:         $oLi2->szText = "Sous-option {$j}";
Line 017:         $oUl( $oLi2 );
Line 018:     }
Line 019:
Line 020:     $oLi( $oUl );
Line 021:     $oOl( $oLi );
Line 022: }
Line 023: $oDiv( $oOl );
Line 024: echo $oDiv;
Line 025: ?>

…ce qui nous donne effectivement des listes imbriquées comme vous pouvez le constater ci-dessous.

  1. Option #1
    • Sous-option 1
    • Sous-option 2
  2. Option #2
    • Sous-option 1
    • Sous-option 2
  3. Option #3
    • Sous-option 1
    • Sous-option 2
  4. Option #4
    • Sous-option 1
    • Sous-option 2
  5. Option #5
    • Sous-option 1
    • Sous-option 2

Vous pouvez imbriquer des listes ad libitum.

Populer des listes grâce à du XML

Lorsque vous souhaitez créer des listes dont les données sont stockées dans des fichiers XML, Vae Soli! vient à votre secours avec les fameuses propriétés szRecordSource, szRowSource et iRowSourceType.

Line 001: <?php
Line 002: require_once( 'LSInput.class.inc' );
Line 003: $oOL  = new LSTag( 'ul' );                                               // On crée la liste non ordonnée
Line 004: $oOL->szRecordSource    = 'vaesoli/resources/XML/colors.xml';            // On spécifie le fichier XML à charger
Line 005: $oOL->szRowSource       = "//Color[@active='yes' and position()<=10]";   // On fait le query sur le fichier XML
Line 006: $oOL->szControlSource   = '@id';                                         // On dit quel tag ou quel attribut on veut extraire
Line 007: $oOL->iRowSourceType    = ROW_SOURCE_TYPE_XML;                           // On spécifie qu'on veut charger du XML
Line 008: echo $oOL;                                                               // On affiche la liste
Line 009: ?>

Le fichier XML auquel on fait référence dans notre exemple est celui qui est fourni dans les ressources standards de Vae Soli!, le fameux fichier de couleurs nommées dont voici un court extrait :

Line 001: <?xml version="1.0" encoding="iso-8859-1"?>
Line 002: <Colors xmlns:xi="http://www.w3.org/2001/XInclude"
Line 003:         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
Line 004:     <Color id="aliceblue" active="yes">
Line 005:         <RGB><![CDATA[rgb(240,248,255)]]></RGB>
Line 006:         <Hex><![CDATA[f0f8ff]]></Hex>
Line 007:     </Color>
Line 008:     <Color id="antiquewhite" active="yes">
Line 009:         <RGB><![CDATA[rgb(250,235,215)]]></RGB>
Line 010:         <Hex><![CDATA[faebd7]]></Hex>
Line 011:     </Color>
Line 012:     <Color id="aqua" active="yes">
Line 013:         <RGB><![CDATA[rgb(0,255,255)]]></RGB>
Line 014:         <Hex><![CDATA[00ffff]]></Hex>
Line 015:     </Color>
Line 016:     <Color id="aquamarine" active="yes">
Line 017:         <RGB><![CDATA[rgb(127,255,212)]]></RGB>
Line 018:         <Hex><![CDATA[7fffd4]]></Hex>
Line 019:     </Color>
Line 020:     <...>
Line 021: </Colors>

L'exemple en question fourni l'output que voici :

  • aliceblue
  • antiquewhite
  • aqua
  • aquamarine
  • azure
  • beige
  • bisque
  • black
  • blanchedalmond
  • blue

Populer des listes grâce à des arrays (tableaux)

Qui peut le plus peut le moins, dit-on. Dès lors il paraît assez normal de pouvoir créer des listes sur base de tableaux (arrays). Pour vous en convaincre, voyez l'exemple qui suit :

<?php
$oOL  = new LSTag( 'ol' );
$oOL->szRecordSource    = array( "Banane","Poire","Pomme","Framboise","Fraise","Raisin" );
$oOL->iRowSourceType    = ROW_SOURCE_TYPE_ARRAY;
echo $oOL;
?>
  1. Banane
  2. Poire
  3. Pomme
  4. Framboise
  5. Fraise
  6. Raisin

Ce qui est vrai avec les listes ordonnées est également vrai pour les listes non ordonnées !

Populer des listes grâce à des listes de valeurs

On peut encore faire plus simple avec des listes de valeurs.

Line 001: <?php
Line 002: require_once( 'LSInput.class.inc' );
Line 003: $oOL  = new LSTag( 'ol' );
Line 004: $oOL->szRecordSource    = "Banane;Poire;Pomme;Framboise;Fraise;Raisin";
Line 005: $oOL->iRowSourceType    = ROW_SOURCE_TYPE_VALUES;
Line 006: echo $oOL;
Line 007: ?>
  1. Banane
  2. Poire
  3. Pomme
  4. Framboise
  5. Fraise
  6. Raisin

Le séparateur interne par défaut est le ';'. Cependant, vous pouvez décider d'utiliser votre propre liste de séparateurs comme vous le montre l'exemple suivant :

Line 001: <?php
Line 002: $oOL  = new LSTag( 'ol' );
Line 003: $oOL->szRecordSource    = 'Banane,Poire-Pomme/Framboise:Fraise;Raisin';
Line 004: $oOL->szSeparator       = ',-/:;';
Line 005: $oOL->iRowSourceType    = ROW_SOURCE_TYPE_VALUES;
Line 006: echo $oOL;
Line 007: ?>
  1. Banane
  2. Poire
  3. Pomme
  4. Framboise
  5. Fraise
  6. Raisin

Populer des listes grâce à la méthode AddItem()

Comme vous vous en êtes rendus compte, il est possible d'utiliser de nombreuses méthodes alternatives pour populer des listes. Les tags <ul>...</ul> et <ol>...</ol> n'échappent pas à la règle!

À l'instar de ce que vous pouvez faire avec des combobox, il vous est également loisible d'ajouter des options de liste grâce à la méthode AddItem() comme vous le montre l'exemple suivant :

Line 001: <?php
Line 002: $oDiv       = new LSTag( 'div'          );
Line 003: $oOList     = new LSTag( 'ol','fruits'  );
Line 004:
Line 005: $oOList->AddItem( 'Banane'      );
Line 006: $oOList->AddItem( 'Poire'       );
Line 007: $oOList->AddItem( 'Pomme'       );
Line 008: $oOList->AddItem( 'Framboise'   );
Line 009: $oOList->AddItem( 'Fraise'      );
Line 010: $oOList->AddItem( 'Raisin'      );
Line 011:
Line 012: $oDiv->AddObject( $oOList );
Line 013: echo "<div class=\"result\"><pre>" . htmlentities( $oDiv ) . "</pre></div>";
Line 014: ?>
  1. Banane
  2. Poire
  3. Pomme
  4. Framboise
  5. Fraise
  6. Raisin

… dont le code HTML généré est :

<div><ol id="fruits"><li>Banane</li><li>Poire</li><li>Pomme</li><li>Framboise</li><li>Fraise</li><li>Raisin</li></ol></div>

Ajouter des listes de définition: dl, dt et dd

L'ajout de listes de définitions est possible grâce aux tags dl, dt et dd.

dl permet l'établissement de la liste de définitions un peu à l'instar de ol ou ul. Ensuite il faut indiquer les termes faisant l'objet des définitions (dt) ainsi que la définition elle-même (dl).

Line 001: <?php
Line 002: $oDL = new LSTag( 'dl' );
Line 003: $oDL->AddObject( array( new LSTag(' dt',null,null,null,'3GL'                                                ),
Line 004:                         new LSTag( 'dd',null,null,null,'Third Generation Language (programming language)'   ),
Line 005:                         new LSTag( 'dt',null,null,null,'4GL'                                                ),
Line 006:                         new LSTag( 'dd',null,null,null,'Fourth Generation Language (descriptive language)'  ),
Line 007:                         new LSTag( 'dt',null,null,null, 'AA'                                                ),
Line 008:                         new LSTag( 'dd',null,null,null,'Auto Answer'                                        ),
Line 009:                         new LSTag( 'dt',null,null,null, 'AAA'                                               ),
Line 010:                         new LSTag( 'dd',null,null,null,'Anywhere, Anything, Anytime'                        ),
Line 011:                         new LSTag( 'dt',null,null,null, 'AAA'                                               ),
Line 012:                         new LSTag( 'dd',null,null,null,'Authentication, Authorization and Accounting'       ),
Line 013:                         new LSTag( 'dt',null,null,null, 'AAB'                                               ),
Line 014:                         new LSTag( 'dd',null,null,null,'All-to-All Broadcast'                               ),
Line 015:                         new LSTag( 'dt',null,null,null, 'AAC'                                               ),
Line 016:                         new LSTag( 'dd',null,null,null,'Advanced Audio Coding'                              )
Line 017:                       ) );
Line 018: echo $oDL->Render();
Line 019: ?>

Cet exemple produira la liste ci-dessous :

3GL
Third Generation Language (programming language)
4GL
Fourth Generation Language (descriptive language)
AA
Auto Answer
AAA
Anywhere, Anything, Anytime
AAA
Authentication, Authorization and Accounting
AAB
All-to-All Broadcast
AAC
Advanced Audio Coding

Listes de définitions populées depuis des fichiers XML

L'exemple qui suit charge un glossaire et affiche les données du glossaire sous forme de liste de définitions. Le fichier XML choisi est celui qui est livré en standard dans Vae Soli!, dans le répertoire resources/xml.

Line 001: <?php
Line 002: require_once( 'LSInput.class.inc' );
Line 003: $oDL  = new LSTag( 'dl' );                                      // On crée la liste de définitions
Line 004: $oDL->szRecordSource    = 'vaesoli/resources/XML/glossary.xml'; // On spécifie le fichier XML à charger
Line 005: $oDL->szRowSource       = "//Term[position()<=10]";             // On fait le query sur le fichier XML (10 premières définitions)
Line 006: $oDL->szControlSource   = '@key;Value';                         // On dit quel tag ou quel attribut on veut extraire
Line 007: $oDL->iRowSourceType    = ROW_SOURCE_TYPE_XML;                  // On spécifie qu'on veut charger du XML
Line 008: echo $oDL;                                                      // On affiche la liste
?>

L'exemple est à peine différent de celui qui permet de charge le fichier XML de couleurs nommées dans une liste non ordonnée. Voici un court extrait du fichier XML de telle sorte que vous vous rendiez compte de sa structure et que vous puissiez vous rendre compte de ce que nous extrayons :

Line 001: <?xml version="1.0" encoding="utf-8"?>
Line 002: <Glossary xmlns:xi="http://www.w3.org/2001/XInclude"
Line 003:           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
Line 004:           lupdate="20080630 - 16:07:54" version="2">
Line 005:     <Term key="3GL"                      class="IT"          keywords=""         date="20061229">
Line 006:         <Value lang="en"><![CDATA[Third Generation Language (programming language)]]></Value>
Line 007:     </Term>
Line 008:     <Term key="4GL"                      class="IT"          keywords=""         date="20061229">
Line 009:         <Value lang="en"><![CDATA[Fourth Generation Language (descriptive language)]]></Value>
Line 010:     </Term>
Line 011:     <Term key="AA"                       class="IT"          keywords=""         date="20061229">
Line 012:         <Value lang="en"><![CDATA[Auto Answer]]></Value>
Line 013:     </Term>
Line 014:     <Term key="AAA"                      class="IT"          keywords=""         date="20080229">
Line 015:         <Value lang="en"><![CDATA[Anywhere, Anything, Anytime]]></Value>
Line 016:     </Term>
Line 017:     <Term key="AAA"                      class="IT"          keywords=""         date="20061229">
Line 018:         <Value lang="en"><![CDATA[Authentication, Authorization and Accounting]]></Value>
Line 019:     </Term>
Line 020:     <Term key="AAB"                      class="IT"          keywords=""         date="20061229">
Line 021:         <Value lang="en"><![CDATA[All-to-All Broadcast]]></Value>
Line 022:     </Term>
Line 023:     <...>
Line 024: </Glossary>

Et voilà le résultat :

1NF
First Normal Form
3GL
Third Generation Language (programming language)
4GL
Fourth Generation Language (descriptive language)
4V
Volume, Variety, Velocity, Veracity
AA
Auto Answer
AAA
Anywhere, Anything, Anytime
AAA
Authentication, Authorization and Accounting
AAA
Autopsies And Analysis
AAB
All-to-All Broadcast
AAC
Advanced Audio Coding

L'exemple qui suit permet d'extraire toutes les définitions commençant par une lettre donnée :

Line 001: $oDL  = new LSTag( 'dl' );                                      // On crée la liste de définitions
Line 002: $oDL->szRecordSource    = 'vaesoli/resources/XML/glossary.xml'; // On spécifie le fichier XML à charger
Line 003: $oDL->szRowSource       = "//Term[starts-with(@key,'B')]";      // On fait le query sur le fichier XML (termes commençant par 'B')
Line 004: $oDL->szControlSource   = '@key;Value';                         // On dit quel tag ou quel attribut on veut extraire
Line 005: $oDL->iRowSourceType    = ROW_SOURCE_TYPE_XML;                  // On spécifie qu'on veut charger du XML
Line 006: echo $oDL;                                                      // On affiche la liste
BA
Business Analyst
BAC
Business Alignment Committee
BAC
Behavioral Advertising Cookies
BATNA
Best Alternative To a Negociated Agreement
BBC
Better Business Case
BBA
British Banker's Association
BBAN
Basic Bank Account Number
BC
Business Case
BCA
Business Control Assessment
BDM
Business Development Management
BCP
Business Continuity Plan
BHO
Browser Helper Object
BIA
Business Impact Analysis
BIA
Business Impact Assessment
BIC
Bank Identifying Code
BIS
Bring Into Service
BLE
Bluetooth Low Energy
BLOG
Abbreviation for WeB LOg
BM
Business Manager
BNF
Backus-Naur Form
BOFH
Bastard Operator from Hell
BOM
Bill Of Material
BOM
Byte-Order Marks: Unicode data can use a BOM as a signature to specify the encoding that is being used.
BOSS
Baryon Oscillation Spectroscopic Survey
BPM
Business Process Management
BPO
Business Process Outsourcing
BPR
Business Process Re-engineering
BRR
Big Red Button
BS
British Standard
BSI
British Standards Institute
BSN
Bibliothèque Scientifique Nationale
BTR
Balance, Transactions & Reporting
BTR
Business Test Requirements
BTS
Behind the scene
BTW
By The Way
BU
Business Unit
BVA
Business Value
BVT
Build Verification testing
BYOD
Bring You Own Device
BaU
Business as Usual
BDD
Behavior driven development : software development process based on test-driven development
BRM
Business Relationship Management
BCM
Business Continuity Management
BAU
Business As Usual
BSA
Business Software Alliance
BSA
Bank Secrecy Act
BIM
Business Information Management
BHAG
Big Hairy Audacious Goal (Good to Great - Jim Collins)
BAC
Bank Of America
BC
Business Continuity
BVIR
Big Visible Information Radiator
BI
Business Intelligence
BTL
Below The Line
BDUF
Big Design Up Front
BRP
Big Room Planning

Populer des listes de définitions grâce à des arrays (tableaux)

Similaire à ce que nous pouvons faire avec des listes ordonnées ou non ordonnées, il est également possible de spécifier les éléments d'une liste de définitions grâce à une tableau (array).

Line 001: <?php
Line 002: require_once( 'LSInput.class.inc' );
Line 003: $oDL  = new LSTag( 'dl' );
Line 004: $oDL->szRecordSource    = array( array( "3GL"    ,"Third Generation Language (programming language)" ),
Line 005:                                  array( "4GL"    ,"Fourth Generation Language (descriptive language)" ),
Line 006:                                  array( "AA"     ,"Auto Answer" ),
Line 007:                                  array( "AAA"    ,"Anywhere, Anything, Anytime" ),
Line 008:                                  array( "AAA"    ,"Authentication, Authorization and Accounting" ),
Line 009:                                  array( "AAB"    ,"All-to-All Broadcast" ),
Line 010:                                  array( "AAC"    ,"Advanced Audio Coding" ),
Line 011:                                );
Line 012: $oDL->iRowSourceType    = ROW_SOURCE_TYPE_ARRAY;
Line 013: echo $oDL;
Line 014: ?>
3GL
Third Generation Language (programming language)
4GL
Fourth Generation Language (descriptive language)
AA
Auto Answer
AAA
Anywhere, Anything, Anytime
AAA
Authentication, Authorization and Accounting
AAB
All-to-All Broadcast
AAC
Advanced Audio Coding

Désormais, il vous est possible de proposer un glossaire sur votre site web en quelques lignes de code. Vous pouvez même faire référence au glossaire informatique standard de Vae Soli!.

Populer une liste de définitions grâce à un curseur

Vous pouvez également utiliser directement un curseur (LSCursor) pour populer les données d'une liste de définitions. Du moins voilà une possibilité qui devrait vous être donnée dans la version 4.2.xxxx de Vae Soli! … car pour l'instant cela ne marche pas encore.

Ici, continuer à extraire le code de tags.php

Ajouter des datalist

Depuis l'opus "5.0.0001"

Avec l'arrivée de HTML 5, un certain nombre de nouvelles balises ont fait leur apparition. Parmi elles, la balise <datalist>...</datalist>. Le code qui suit par exemple crée une datalist, l'ajoute à une division, en fait usage dans une zone d'input, laquelle est ajoutée au formulaire ainsi que la division.

L'output HTML suivant est généré :

<script type="text/javascript"> // <![CDATA[ //]]> </script> <form action="/samples.php" method="post" id="frmWithDataList"> <input type="text" value="" name="txtInput" style="width:400px;" tabindex="1" list="urls" /><div><datalist id="urls"><option value="http://www.fastwrite.com" label="FastWrite" /><option value="http://www.latosensu.be" label="Lato Sensu Management" /><option value="http://www.uikey.org" label="UIKey" /><option value="http://www.quitus.be" label="Quitus" /></datalist></div></form>

Le formulaire suivant est produit (un clic sur la zone devrait vous donner la liste des options) :


Intégrer des sections

Un de ces nouveaux tags très attendus est le tag <section></section>. Il n'entre pas nos objectifs de débattre du contenu de ce nouveau tag. Bien des sites proposent des explications très détaillées du quand et dans quelles conditions ce nouveau tag doit être utilisé. Par contre, il nous paraissait important de supporter ces nouveaux tags HTML5. Le code suivant devrait vous aider à concevoir des sections :

$oSection   = new LSTag( 'section' );       /* Create a section */
$oP         = new LSTag( 'p' );             /* Create a paragraph */
$oP->szText = 'Bonjour tout le monde';      /* Assign some text to the paragraph */
$oSection->AddObject( $oP );                /* Add the paragraph to the section */
$szHTML     = $oSection->Render();          /* Render the section */

Ce qui génère le code HTML suivant :

<section><p>Bonjour tout le monde</p></section>

Intégrer des articles

$oArticle   = new LSTag( 'article' );       /* Create an article */
$oP         = new LSTag( 'p' );             /* Create a paragraph */
$oP->szText = 'Bonjour tout le monde';      /* Assign some text to the paragraph */
$oArticle->AddObject( $oP );                /* Add the paragraph to the article */
$szHTML     = $oArticle->Render();          /* Render the article */

Ce qui génère le code HTML suivant :

<article><p>Bonjour tout le monde</p></article>

Intégrer des headers

$oHeader    = new LSTag( 'header' );        /* Create a header */
$oP         = new LSTag( 'p' );             /* Create a paragraph */
$oP->szText = 'Bonjour tout le monde';      /* Assign some text to the paragraph */
$oHeader->AddObject( $oP );                 /* Add the paragraph to the header */
$szHTML     = $oHeader->Render();           /* Render the header */

Ce qui génère le code HTML suivant :

<header><p>Bonjour tout le monde</p></header>

Intégrer des footers

$oFooter    = new LSTag( 'footer' );        /* Create a Footer */
$oP         = new LSTag( 'p' );             /* Create a paragraph */
$oP->szText = 'Bonjour tout le monde';      /* Assign some text to the paragraph */
$oFooter->AddObject( $oP );                 /* Add the paragraph to the footer */
$szHTML     = $oFooter->Render();           /* Render the footer */

Ce qui génère le code HTML suivant :

<footer><p>Bonjour tout le monde</p></footer>

Intégrer des figures et des figcaptions

Depuis l'opus "5.0.0002"

Pour une sémantique plus riche, vous pouvez maintenant créer des illustrations clairement identifiées comme telles. Vous pouvez également leur attacher des légendes. C'est l'objet des tags <figure></figure> et <figcaption></figcaption>.

$oFigure        = new LSTag( 'figure' );     /* On crée une illustration */
$oImg           = new LSTag( 'img' );        /* On crée une image */
$oImg->szSrc    = '/boule-de-poil.jpg';      /* On indique la source de l'image
$oCaption       = new LSTag( 'figcaption' ); /* On crée une légende */
$oText          = new LSTag( 'p' );          /* On crée un paragraphe */

// On assigne du texte au paragraphe
$oText->szText  = 'Une petite boule de poil prise en photo en un matin ensoleillé '   .
                  'alors que toute la maisonnée dormait encore. Le soleil, lui,  '    .
                  'avait décidé que cette journée serait sienne.';

$oCaption->AddObject( $oText );              /* On ajoute le paragraphe à la légende */
$oFigure->AddObject( $oImg );                /* On ajoute l'image à l'illustration (figure) */
$oFigure->AddObject( $oCaption );            /* On ajoute la légende à l'illustration */
$szHTML = $oFigure->Render();                /* On demande le rendu HTML de tout cela */

Ce qui génère le code HTML suivant :

<figure><img src="/boule-de-poil.jpg" /><figcaption></figcaption></figure>

... et ce qui donne …

Avec un peu d'astuces CSS 3, on peut grandement améliorer le visuel. Changeons effectivement tout légèrement le code :

$oFigure->szClass = 'sliding';               /* On ajoute une classe 'sliding' sur l'illustration */
$szHTML = $oFigure->Render();                /* On demande le rendu HTML de tout cela */
echo $szHTML;                                /* On affiche le rendu */
<figure class="sliding"><img src="/boule-de-poil.jpg" /><figcaption></figcaption></figure>

et cela donne cette fois (passez la souris sur l'image) …

Le secret ? Juste un peu de CSS3 :

figure.sliding      {   display             :   block;
                        border              :   1px solid silver;
                        box-shadow          :   0 0 20px 10px rgba(60,60,60,0.15);
                        padding             :   20px;
                        position            :   relative;
                        overflow            :   hidden;
                        margin-top          :   30px;
                    }
figure.sliding img  {   max-width           :   100%;
                        width               :   100%;
                    }
.sliding figcaption {   display             :   none;
                        background          :   #000;
                        color               :   #fff;
                        opacity             :   0;
                        -webkit-transition  :   all 0.4s ease;
                        -moz-transition     :   all 0.4s ease;
                        -o-transition       :   all 0.4s ease;
                        position            :   absolute;
                        bottom              :   -30%;
                    }
.sliding figcaption p
                    {   padding             :   10px;
                    }
figure.sliding:hover figcaption
                    {   display             :   block;
                        bottom              :   0;
                        left                :   0;
                        opacity             :   0.8;
                    }

Script: <script>…</div>

Depuis l'opus "5.1.0001"

Ce n'est qu'avec la version 5.1.0001 que nous complété la classe LSTag avec le type script.

Line 001: $oJS = new LSTag( "script" );
Line 002: $oJS->szText = "alert( 'Hello World' );\n";
Line 003: $szHTML = $oDiv->Render();

Ce qui produit le code suivant :

<script type="text/javascript">
// <![CDATA[
alert( 'Hello World' );

//]]>
</script>

Glossaire IT : utilisez le glossaire IT de Vae Soli! 2010-11-15

Depuis l'opus "3.5.0017"

Ici, expliquer qu'un glossaire standard est en ligne.

Couleurs nommées : utilisez les couleurs nommées de Vae Soli! 2010-11-15

Depuis l'opus "3.5.0017"

Ici, expliquer qu'un fichier de couleurs est fourni

Codes langue : utilisez les codes langue fournis par Vae Soli! 2010-11-15

Depuis l'opus "3.5.0017"

Ici, expliquer qu'un fichier de codes est fourni

Codes pays : utilisez les codes pays fournis par Vae Soli! 2010-11-15

Depuis l'opus "3.5.0017"

Une ressource libre et gratuite de Vae Soli! est le fichier de pays.

Ce fichier a fait l'objet d'une révision complète entamée et terminée en mars 2013. En l'occurrence, tous les pays sont maintenant affublés d'une traduction française et le drapeau du pays est également indiqué (la plupart du temps en pointant vers le site de Wikipedia / Wikimedia).

Pour illustrer l'utilisation de ce fichier, notre entreprise-mère, Lato Sensu Management, a établi un service RESTful qui distille cette liste de pays. Cliquez sur le lien pour en voir le résultat. Voici le code de ce service :

if ( FIL_Exists( $szFile = FIL_ResolveRoot( '/vaesoli/resources/xml/countries.xml' ) ) )
{
    $szLang  = $aParts['lang'];

    switch ( $szLang )
    {
        case 'fr'   :
        case 'en'   :   break;
        default     :   $szLang = 'fr';
    }

    $oCursor = new LSCursor( 'countries',$szFile );
    if ( $oCursor->Open() )
    {
        $oCursor->GoTop();

        if ( ! isset( $_GET['xml'] ) )
        {
            echo "<p>Pays en langue '{$szLang}':</p>";
            echo "<ul>";
            while( ! $oCursor->EOF() )
            {
                $szID       = $oCursor->Field( '@id' );
                $szCountry  = $oCursor->Field( "Value[@lang='{$szLang}']" );
                $szFlag     = $oCursor->Field( "Flag" );

                echo "<li>{$szCountry} : <code>{$szID}</code>";

                if ( ! STR_Empty( $szFlag ) )
                {
                    echo "<br />" . $szFlag;
                }
                else
                {
                    echo " &hellip; <span style=\"color:#f00;\">NO FLAG FOUND</span>";
                }
                echo "</li>";
                $oCursor->Skip();
            }
            echo "</ul>";
        }
        else
        {
            $szXML  = '';
            $szXML .= "<Request language=\"{$szLang}\"><![CDATA[countries]]></Request>\n";
            $szXML .= "<Response>\n";

            while( ! $oCursor->EOF() )
            {
                $szID       = $oCursor->Field( '@id' );
                $szCountry  = utf8_decode( $oCursor->Field( "Value[@lang='{$szLang}']" ) );

                $szXML     .= "<Country id=\"{$szID}\">{$szCountry}</Country>\n";
                $oCursor->Skip();
            }

            $szXML .= "</Response>\n";

            echo SendXML( 'countries',$szXML );
            exit();
        }

        $oCursor->Close();
    }
}

LSTimeline créer une ligne de temps empilée 2010-11-15

Depuis l'opus "3.5.0017"

Nous vous proposons un exemple simple et efficace :

<style>
    ol.vs { list-style-type : none;
        margin: 0;
        padding:2em;
        background: rgba( 255,144,0,0.4);
        max-height: 300px;
        overflow:auto;
    }
    ol.vs li { border: 3px solid #fff;
        border-radius: 1.5em;
        box-shadow: 0 0 0.6em 0.4em rgba(100,100,100,0.5);
        background: #08a;
        color:#fff;
        height: 1.5em;
        min-height:1.5em;
        max-height:1.5em;
        line-height:1.5em;
        vertical-align:middle;
        overflow:hidden;
        margin-top: 0.6em;
        margin-bottom: 0.3em;
        padding: 0.3em;
        position:relative;
        text-align:center;
        font: 0.7em/1.1em arial,verdana,sans-serif;
    }
</style>

<?php
$oTL = new LSTimeline( -625,2015,'93%','vs' );

$oTL->Add( -325,-265,'Euclide' );
$oTL->Add( -570,-495,'Pythagore' );
$oTL->Add( -310,-230,'Aristarque de Samos' );
$oTL->Add( -276,-194,'Ératosthène' );
$oTL->Add(   90, 168,'Ptolémée' );
$oTL->Add( -384,-322,'Aristote' );
$oTL->Add( -470,-399,'Socrate' );
$oTL->Add( -541,-480,'Héraclite' );
$oTL->Add( -435,-356,'Aristippe de Cyrène' );
$oTL->Add( -428,-347,'Platon' );
$oTL->Add( -342,-270,'Épicure' );
$oTL->Add( -500,-428,'Anaxagore' );
$oTL->Add( -287,-212,'Archimède' );
$oTL->Add( -624,-543,'Thalès' );

echo $oTL;
?>

Ce code nous donne le résultat suivant:

  1. Thalès
  2. Pythagore
  3. Héraclite
  4. Anaxagore
  5. Socrate
  6. Aristippe de Cyrène
  7. Platon
  8. Aristote
  9. Épicure
  10. Euclide
  11. Aristarque de Samos
  12. Archimède
  13. Ératosthène
  14. Ptolémée

Précédent Suivant