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)

Formulaires, zones d'entrée de données, étiquettes, etc.

Depuis l'opus "3.5.0017"

L'objet de cet article est de vous montrer comment utiliser les toutes nouvelles classes de la version 3.5.0017 de Vae Soli!, classes destinées à la création de formulaires et toutes choses y afférantes.

Comme vous pourrez le constater dans cet article, la création de formulaires s'est considérablement simplifiée grâce à ces nouvelles classes. Leur disponibilité aura d'ailleurs pour conséquence de modifier pas mal de classes existantes pour les simplifier en utilisant ces nouveaux services. Ce sera le travail des versions futures de Vae Soli! en respectant néanmoins une stricte compatibilité.

LSForm: créer un formulaire

La création d'un formulaire est l'histoire d'une seule ligne de code :

$oForm = new LSForm();

On ne peut plus simple !!! Après, c'est question de créer les étiquettes (label) et les zones d'entrées de données, les input, select, textarea, submit, file, et autres … toutes zones qu'il faudra ajouter au formulaire dans l'ordre de leur apparition à l'écran.

Petit détour par LSFieldset

Lors de la construction d'un formulaire, vous ne pouvez pas inclure directement vos zones de saisie dans le formulaire du moins sans provoquer d'erreur de validation du code (X)HTML généré : il faudra que les zones de saisie soient incluses dans un élément de type 'block' comme une division (div) ou un paragraphe (p). Dès lors pourquoi ne pas les inclure dans un bloc fieldset dont c'est justement l'objectif principal. C'est la philosophie que nous avons choisie :

$oFieldset = new LSFieldset();

On peut être un peu plus prolixe et donner au fieldset une petite légende. Voyons comment :

$oFieldset = new LSFieldset();
$oFieldset->szCaption = 'Mes données';

ou carrément…

$oFieldset = new LSFieldset( null,null,'Mes données' );

Lorsque le fieldset a été construit, vous devez l'ajouter au formulaire grâce à la méthode AddObject() du formulaire :

$oForm->AddObject( $oFieldset );

Sans plus attendre voyons ce que le code suivant génère :

Line 001: <?php
Line 002: $oForm      = new LSForm();
Line 003: $oFieldset  = new LSFieldset( null,null,'Mes données' );
Line 004: $oForm->AddObject( $oFieldset );
Line 005: echo $oForm;
Line 006: ?>
Mes données

Ouais … ce n'est pas mal mais ce serait mieux encore avec des zones de saisie. La suite du code va vous montrer comment réaliser cela, point par point.

LSInput et consorts

Depuis l'opus 3.0.0011, Vae Soli! propose une série impressionnante de nouvelles classes dont toutes les classes nécessaires à créer des formulaires. Ces nouvelles classes seront publiées prochainement dans la version 3.5.0017 qui est en préparation.

Ainsi, notre équipe s'est attachée à créer des classes permettant de "mimer" les contrôles habituels nécessaires : les textbox, combobox, button, commandbutton, radio button, checkbox etc. mais aussi des contrôles un peu plus exotiques comme des color, country, currency et autres.

Outre la facilité de codage qui est vraiment l'atout le plus évident de ces nouvelles classes, on notera que les avancées les plus significatives ont été obtenues sur les différentes classes de type combobox. En effet, nous avons codé toutes les méthodes de base pour loader des combobox au départ de fichiers XML. Au-delà, il sera particulièrement aisé d'adapter le code produit pour supporter les bases de données.

Voyons cela petit à petit en commençant par les contrôles les plus usités

LSInput : textbox

Le type textbox permet la saisie de champs texte. C'est l'équivalent d'une zone input type="text". Reprenons dès lors notre exemple de base et affinons-le avec deux nouvelles zones.

Line 001: <?php
Line 002: $oForm      = new LSForm( 'frmPerson' );                    // Créons un formulaire appelé 'frmPerson'
Line 003: $oFieldset  = new LSFieldset( null,null,'Données générales' ); // Créons un ensemble de champs
Line 004:
Line 005: $txtFName   = new LSInput( 'textbox',null,'txtFName' );     // Créons une zone de saisie pour le prénom
Line 006: $txtLName   = new LSInput( 'textbox',null,'txtLName' );     // Créons une zone de saisie pour le nom
Line 007:
Line 008: $oFieldset->AddObject( $txtFName );                         // Ajoutons le prénom au fieldset
Line 009: $oFieldset->AddObject( $txtLName );                         // Ajoutons le nom au fieldset
Line 010:
Line 011: $oForm->AddObject( $oFieldset );                            // Ajoutons le fieldset au formulaire
Line 012:
Line 013: echo $oForm;                                                // Affichons le formulaire
Line 014: ?>

Et voici le résultat…

Données générales

Pas mal, pas mal … mais peut mieux faire ! Ajoutons des libellés :

LSLabel : les étiquettes

Line 001: <?php
Line 002: $oForm      = new LSForm( 'frmPerson' );                    // Créons un formulaire appelé 'frmPerson'
Line 003: $oFieldset  = new LSFieldset( null,null,'Données générales' ); // Créons un ensemble de champs
Line 004:
Line 005: $txtFName   = new LSInput( 'textbox',null,'txtFName' );     // Créons une zone de saisie pour le prénom
Line 006: $lblFName   = new LSLabel( 'Prénom:' );                     // Créons une étiquette (label) pour le prénom
Line 007: $txtLName   = new LSInput( 'textbox',null,'txtLName' );     // Créons une zone de saisie pour le nom
Line 008: $lblLName   = new LSLabel( 'Nom:' );                        // Créons une étiquette (label) pour le nom
Line 009:
Line 010: $oFieldset->AddObject( $lblFName );                         // Ajoutons le libellé au fieldset
Line 011: $oFieldset->AddObject( $txtFName );                         // Ajoutons le prénom au fieldset
Line 012: $oFieldset->AddObject( $lblLName );                         // Ajoutons le libellé au fieldset
Line 013: $oFieldset->AddObject( $txtLName );                         // Ajoutons le nom au fieldset
Line 014:
Line 015: $oForm->AddObject( $oFieldset );                            // Ajoutons le fieldset au formulaire
Line 016:
Line 017: echo $oForm;                                                // Affichons le formulaire
Line 018: ?>

Aux lignes 006 et 008, nous avons créer des étiquettes pour le prénom et pour le nom.

Aux lignes 010 et 012, nous avons ajouté les étiquettes (label) au fieldset. Remarquez en outre que l'ordre de création des objets et leur ordre d'ajout dans le fieldset ne sont pas les mêmes. L'affichage, quant à lui, respecte l'ordre d'ajout des zones dans le fieldset et/ou dans le formulaire.

Données générales

LSInput : submit

Pour aller vraiment le plus vite à l'essentiel, voyons à présent comment ajouter un bouton 'Submit' au formulaire, et ensuite nous nous intéresserons à l'affichage proprement dit pour donner une présentation plus acceptable au tout.

Line 001: <?php
Line 002: $oForm      = new LSForm( 'frmPerson' );                    // Créons un formulaire appelé 'frmPerson'
Line 003: $oFieldset  = new LSFieldset( null,null,'Données générales' ); // Créons un ensemble de champs
Line 004:
Line 005: $txtFName   = new LSInput( 'textbox',null,'txtFName' );     // Créons une zone de saisie pour le prénom
Line 006: $lblFName   = new LSLabel( 'Prénom:' );                     // Créons une étiquette (label) pour le prénom
Line 007: $txtLName   = new LSInput( 'textbox',null,'txtLName' );     // Créons une zone de saisie pour le nom
Line 008: $lblLName   = new LSLabel( 'Nom:' );                        // Créons une étiquette (label) pour le nom
Line 009:
Line 010: $cmdSubmit  = new LSInput( 'submit',null,'cmdSubmit' );     // Créons un bouton 'submit'
Line 011:
Line 012: $oFieldset->AddObject( $lblFName );                         // Ajoutons le libellé au fieldset
Line 013: $oFieldset->AddObject( $txtFName );                         // Ajoutons le prénom au fieldset
Line 014: $oFieldset->AddObject( $lblLName );                         // Ajoutons le libellé au fieldset
Line 015: $oFieldset->AddObject( $txtLName );                         // Ajoutons le nom au fieldset
Line 016:
Line 017: $oFieldset->AddObject( $cmdSubmit );                        // Ajoutons le bouton 'submit' au fieldset
Line 018:
Line 019: $oForm->AddObject( $oFieldset );                            // Ajoutons le fieldset au formulaire
Line 020:
Line 021: echo $oForm;                                                // Affichons le formulaire
Line 022: ?>

Le résultat est conforme à nos attentes :

Données générales

Un peu de présentation à présent :

Line 001: <?php
Line 002: $szStyle    = 'display:inline-block;width:75px;';           // Style des étiquettes (label)
Line 003:
Line 004: $oForm      = new LSForm( 'frmPerson' );                    // Créons un formulaire appelé 'frmPerson'
Line 005: $oFieldset  = new LSFieldset( null,null,'Données générales' ); // Créons un ensemble de champs
Line 006:
Line 007: $txtFName   = new LSInput( 'textbox',null,'txtFName' );     // Créons une zone de saisie pour le prénom
Line 008: $txtFName->szTrailer = '<br />';                            // Après le prénom, aller à la ligne
Line 009: $lblFName   = new LSLabel( 'Prénom:' );                     // Créons une étiquette (label) pour le prénom
Line 010: $lblFName->szStyle = $szStyle;                              // Donnons un style à l'étiquette
Line 011: $txtLName   = new LSInput( 'textbox',null,'txtLName' );     // Créons une zone de saisie pour le nom
Line 012: $txtLName->szTrailer = '<br />';                            // Après le nom, aller à la ligne
Line 013: $lblLName   = new LSLabel( 'Nom:' );                        // Créons une étiquette (label) pour le nom
Line 014: $lblLName->szStyle = $szStyle;                              // Donnons un style à l'étiquette
Line 015:
Line 016: $cmdSubmit  = new LSInput( 'submit',null,'cmdSubmit' );     // Créons un bouton 'submit'
Line 017:
Line 018: $oFieldset->AddObject( $lblFName );                         // Ajoutons le libellé au fieldset
Line 019: $oFieldset->AddObject( $txtFName );                         // Ajoutons le prénom au fieldset
Line 020: $oFieldset->AddObject( $lblLName );                         // Ajoutons le libellé au fieldset
Line 021: $oFieldset->AddObject( $txtLName );                         // Ajoutons le nom au fieldset
Line 022:
Line 023: $oFieldset->AddObject( $cmdSubmit );                        // Ajoutons le bouton 'submit' au fieldset
Line 024:
Line 025: $oForm->AddObject( $oFieldset );                            // Ajoutons le fieldset au formulaire
Line 026:
Line 027: echo $oForm;                                                // Affichons le formulaire
Line 028: ?>

À la ligne 002, nous créons un style CSS pour les étiquettes. À la ligne 008, nous informons l'objet txtFName qu'après son affichage, nous souhaitons aller à la ligne (nous faisons de même à la ligne 012). À la ligne 010, nous affublons l'étiquette lblFName du style que nous avons créé à la ligne 002. Nous faisons pareil pour l'étiquette lblLName à la ligne 014 … ce qui donne :

Données générales

Nous pouvons générer exactement le même résultat en faisant appel à la méthode SetAll() du fieldset. Cette méthode est capable de modifier en une seule passe tous les objets d'un certain type :

Line 001: <?php
Line 002: $oForm      = new LSForm( 'frmPerson' );                        // Créons un formulaire appelé 'frmPerson'
Line 003: $oFieldset  = new LSFieldset( null,null,'Données générales' ); // Créons un ensemble de champs
Line 004:
Line 005: $txtFName   = new LSInput( 'textbox',null,'txtFName' );         // Créons une zone de saisie pour le prénom
Line 006: $lblFName   = new LSLabel( 'Prénom:' );                     // Créons une étiquette (label) pour le prénom
Line 007: $txtLName   = new LSInput( 'textbox',null,'txtLName' );        // Créons une zone de saisie pour le nom
Line 008: $lblLName   = new LSLabel( 'Nom:' );                          // Créons une étiquette (label) pour le nom
Line 009:
Line 010: $cmdSubmit  = new LSInput( 'submit',null,'cmdSubmit' );     // Créons un bouton 'submit'
Line 011:
Line 012: $oFieldset->AddObject( $lblFName );                            // Ajoutons le libellé au fieldset
Line 013: $oFieldset->AddObject( $txtFName );                            // Ajoutons le prénom au fieldset
Line 014: $oFieldset->AddObject( $lblLName );                            // Ajoutons le libellé au fieldset
Line 015: $oFieldset->AddObject( $txtLName );                            // Ajoutons le nom au fieldset
Line 016:
Line 017: $oFieldset->AddObject( $cmdSubmit );                           // Ajoutons le bouton 'submit' au fieldset
Line 018:
Line 019: $oFieldset->SetAll( 'label'  ,'szStyle'  ,'display:inline-block;width:75px;' );
Line 020: $oFieldset->SetAll( 'textbox','szTrailer','<br />' );
Line 021:
Line 022: $oForm->AddObject( $oFieldset );                               // Ajoutons le fieldset au formulaire
Line 023:
Line 024: echo $oForm;                                                   // Affichons le formulaire
Line 025: ?>

Avec un résultat identique à celui obtenu précédemment…

Données générales

LSInput : date et editbox

Nous allons continuer l'exemple précédent pour cette fois ajouter une zone de type 'date' et un commentaire (textarea). Nous allons également peaufiner la présentation.

Line 001: <?php
Line 002: $oForm        = new LSForm( 'frmPerson' );                    // Créons un formulaire appelé 'frmPerson'
Line 003: $oFieldset    = new LSFieldset( null,null,'Données générales' ); // Créons un ensemble de champs
Line 004:
Line 005: $txtFName     = new LSInput( 'textbox',null,'txtFName' );     // Créons une zone de saisie pour le prénom
Line 006: $lblFName     = new LSLabel( 'Prénom:' );                     // Créons une étiquette (label) pour le prénom
Line 007: $txtLName     = new LSInput( 'textbox',null,'txtLName' );     // Créons une zone de saisie pour le nom
Line 008: $lblLName     = new LSLabel( 'Nom:' );                        // Créons une étiquette (label) pour le nom
Line 009: $lblBirthdate = new LSLabel( 'Date de naissance:' );          // Créons une étiquette (label) pour la date de naissance
Line 010: $txtBirthdate = new LSInput( 'date',null,'txtBirthdate' );    // Créons une zone de saisie pour la date de naissance
Line 011: $lblComment   = new LSLabel( 'Commentaire:' );                // Créons une étiquette (label) pour le commentaire
Line 012: $edtComment   = new LSInput( 'editbox',null,'edtComment' );   // Créons une zone de saisie pour le commentaire
Line 013:
Line 014: $cmdSubmit    = new LSInput( 'submit',null,'cmdSubmit' );     // Créons un bouton 'submit'
Line 015: $cmdSubmit->szCaption = 'Envoyer les données';
Line 016: $cmdSubmit->szStyle   = 'margin-left:125px;margin-top:15px;';
Line 017:
Line 018: $oFieldset->AddObject( $lblFName );                           // Ajoutons le libellé au fieldset
Line 019: $oFieldset->AddObject( $txtFName );                           // Ajoutons le prénom au fieldset
Line 020: $oFieldset->AddObject( $lblLName );                           // Ajoutons le libellé au fieldset
Line 021: $oFieldset->AddObject( $txtLName );                           // Ajoutons le nom au fieldset
Line 022: $oFieldset->AddObject( $lblBirthdate );                       // Ajoutons le libellé au fieldset
Line 023: $oFieldset->AddObject( $txtBirthdate);                        // Ajoutons la date de naissance au fieldset
Line 024: $oFieldset->AddObject( $lblComment );                         // Ajoutons le libellé au fieldset
Line 025: $oFieldset->AddObject( $edtComment );                         // Ajoutons la zone de commentaire au fieldset
Line 026:
Line 027: $oFieldset->AddObject( $cmdSubmit );                          // Ajoutons le bouton 'submit' au fieldset
Line 028:
Line 029: $oFieldset->SetAll( 'label'               ,'szStyle'  ,'display:inline-block;width:125px;' );
Line 030: $oFieldset->SetAll( 'textbox;date;editbox','szTrailer','<br />' );
Line 031: $oFieldset->SetAll( 'textbox;date;editbox','szStyle'  ,'width:250px;margin-top:5px;' );
Line 032:
Line 033: $oFieldset->szStyle = 'border:1px solid #800;padding:10px;';  // Modifions un peu le style du fieldset
Line 034:
Line 035: $oForm->szStyle = 'width:420px;';                             // Modifions un peu le style du formulaire
Line 036: $oForm->AddObject( $oFieldset );                              // Ajoutons le fieldset au formulaire
Line 037:
Line 038: echo $oForm;                                                  // Affichons le formulaire
Line 039: ?>

En rouge, vous voyez comment on a ajouté les zones 'date' et 'commentaire'; en bleu comment nous avons modifié le style de l'ensemble. Cela donne :

Données générales



LSFieldset: ajouter de multiples contrôles en une passe

Pour l'exercice, voyez maintenant comment nous pouvons réduire (considérablement) le code requis pour créer le formulaire en ajoutant tous les contrôles en une seule passe :

Line 001: <?php
Line 002: $oForm        = new LSForm( 'frmPerson' );                  // Créons un formulaire appelé 'frmPerson'
Line 003: $oFieldset    = new LSFieldset( null,null,'Données générales' ); // Créons un ensemble de champs
Line 004:
Line 005: $txtFName     = new LSInput( 'textbox',null,'txtFName' );   // Créons une zone de saisie pour le prénom
Line 006: $lblFName     = new LSLabel( 'Prénom:' );                   // Créons une étiquette (label) pour le prénom
Line 007: $txtLName     = new LSInput( 'textbox',null,'txtLName' );   // Créons une zone de saisie pour le nom
Line 008: $lblLName     = new LSLabel( 'Nom:' );                      // Créons une étiquette (label) pour le nom
Line 009: $lblBirthdate = new LSLabel( 'Date de naissance:' );        // Créons une étiquette (label) pour la date de naissance
Line 010: $txtBirthdate = new LSInput( 'date',null,'txtBirthdate' );  // Créons une zone de saisie pour la date de naissance
Line 011: $lblComment   = new LSLabel( 'Commentaire:' );              // Créons une étiquette (label) pour le commentaire
Line 012: $edtComment   = new LSInput( 'editbox',null,'edtComment' ); // Créons une zone de saisie pour le commentaire
Line 013:
Line 014: $cmdSubmit    = new LSInput( 'submit',null,'cmdSubmit',array('submit','Envoyer les données') );
Line 015: $cmdSubmit->szStyle   = 'margin-left:125px;margin-top:15px;';
Line 016:
Line 017: $oFieldset->AddObject( array( $lblFName     ,               // Ajoutons tous les contrôles
Line 018:                               $txtFName     ,
Line 019:                               $lblLName     ,
Line 020:                               $txtLName     ,
Line 021:                               $lblBirthdate ,
Line 022:                               $txtBirthdate ,
Line 023:                               $lblComment   ,
Line 024:                               $edtComment   ,
Line 025:                               $cmdSubmit )  );
Line 026:
Line 027: $oFieldset->SetAll( 'label'               ,'szTrailer',"\n" );
Line 028: $oFieldset->SetAll( 'label'               ,'szStyle'  ,'display:inline-block;width:125px;' );
Line 029: $oFieldset->SetAll( 'textbox;date;editbox','szTrailer',"<br />\n" );
Line 030: $oFieldset->SetAll( 'textbox;date;editbox','szStyle'  ,'width:250px;margin-top:5px;' );
Line 031:
Line 032: $oFieldset->szStyle = 'border:1px solid #800;padding:10px;';// Modifions un peu le style du fieldset
Line 033:
Line 034: $oForm->szStyle = 'width:420px;';                           // Modifions un peu le style du formulaire
Line 035: $oForm->AddObject( $oFieldset );                            // Ajoutons le fieldset au formulaire
Line 036:
Line 037: echo ( $szHTML = $oForm );                                  // Affichons le formulaire
Line 038: ?>
Données générales



… et regardez tout le code généré, notamment le code nécessaire à la vérification de l'input de la zone de date (nous reviendrons plus tard sur cet élément) :





LSInput : number

Le type number permet la saisie de zones numériques. Si l'utilisateur introduit autre chose qu'un chiffre, un '.' ou une virgule (','), un message standard est affiché.

$txtQty                     = new LSInput( 'number' );
$txtQty->szName             = 'txtQty';
$txtQty->szID               = $txtQty->szName;
$txtQty->szValue            = isset( $_POST['txtQty'] ) ? $_POST['txtQty'] : "1";
$txtQty->szTooltip          = "Entrez la quantité à réserver";
$txtQty->iWidth             = $iInputWidth;
$txtQty->szTrailer          = '<br />';

LSInput : date

Le type date permet la saisie de champs date. Si l'utilisateur introduit autre chose qu'un chiffre, ou un '/', un message standard est affiché.

$txtDate                    = new LSInput( 'date' );
$txtDate->szName            = 'txtDate';
$txtDate->szID              = $txtDate->szName;
$txtDate->szTooltip         = "Entrez la date à laquelle vous souhaitez réserver";
$txtDate->szErrorMsg        = "Vous n'êtes autorisé qu'à entrer des chiffres ou le séparateur '/'!";
$txtDate->iWidth            = 75;
$txtDate->szValue           = isset( $_POST['txtDate'] ) ? $_POST['txtDate'] : null;
$txtDate->IsMandatory       = true;
$txtDate->szTrailer         = '&#160;dd/mm/yyyy<br />';

LSInput : country

Le type country permet la saisie d'un pays. La zone est automatiquement modifiée en une combobox (ou selectbox) et tous les pays du monde sont proposés.

$cboCountry                 = new LSInput( 'country' );
$cboCountry->szName         = 'cboCountry';
$cboCountry->szID           = $cboCountry->szName;
$cboCountry->szValue        = "BE";
$cboCountry->szTooltip      = "Entrez votre pays";
$cboCountry->iWidth         = $iInputWidth;
$cboCountry->szValue        = isset( $_POST['cboCountry'] ) ? $_POST['cboCountry'] : '';
$cboCountry->szTrailer      = '<br />';

LSInput : hour

Le type hour permet la saisie d'une heure. La zone est automatiquement modifiée en une combobox (ou selectbox) et les choix proposés s'étendent de '00' à '23'.

Voici comment créer ce genre de contrôle :

$txtStartHour               = new LSInput( 'hour','txtStartHour','txtStartHour' );
$txtStartHour->szTrailer    = '&#160;h&#160;';

LSInput : min

Le type min permet la saisie des minutes. La zone est automatiquement modifiée en une combobox (ou selectbox) et les choix proposés sont les suivants:

  1. '00'
  2. '15'
  3. '30'
  4. '45'

Voici comment créer ce genre de contrôle :

$txtStartMin                = new LSInput( 'min','txtStartMin','txtStartMin' );
$txtStartMin->szTrailer     = '&#160;min&#160;&#160;';

LSInput : gender

Le type gender permet de présenter des boutons radio pour choisir le genre (sexe) d'une personne. C'est un type particulier de donnée qu'il semblait facile à implémenter pour éviter de devoir recourir à des options (optgroup ou optiongroup). Voilà comment construire ce type de contrôle dans un formulaire :

$optGender                          = new LSInput( 'gender','optGender','optGender' );
$optGender->szValue                 = 'M';
$optGender->IsCaptionBefore         = false;

Vous pouvez aussi décider de la langue dans laquelle vous souhaitez afficher les libellés :

$optGender                          = new LSInput( 'gender','optGender','optGender' );
$optGender->szValue                 = 'M';
$optGender->szLang                  = 'en';

… ou carrément décider vous-même des libellés qu'il faut utiliser :

$optGender                          = new LSInput( 'gender','optGender','optGender' );
$optGender->szValue                 = 'M';
$optGender->IsCaptionBefore         = false;
$optGender->szMaleCaption           = 'Homme';
$optGender->szFemaleCaption         = 'Femme';

Et vous pouvez encore décider du style de chacun des libellés. Voici par exemple comment indenter le premier libellé :

$optGender                          = new LSInput( 'gender','optGender','optGender' );
$optGender->szValue                 = 'M';
$optGender->IsCaptionBefore         = false;
$optGender->szMaleCaption           = 'Homme';
$optGender->szFemaleCaption         = 'Femme';
$optGender->szMaleStyle             = 'margin-left:150px;';

Le type gender renvoie la valeur 'M' pour 'Homme' (Male) et 'F' pour 'Femme' (Female).

LSInput : optiongroup et radio

Le type optiongroup permet de présenter des options exclusives, vulgairement appelées boutons radio. L'exemple qui suit permet d'afficher deux options :

  1. Un type facture
  2. Un type devis

On crée d'abord le groupe d'options (ligne 001); ensuite on crée les boutons radio (lignes 003 à 005 et lignes 006 à 008) qu'on ajoute au groupe d'options (lignes 009 et 010) :

Line 001: $optType                            = new LSInput( "optiongroup","optType","optType" );
Line 002: $optType->szValue                   = 'I';
Line 003: $optType1                           = new LSInput( 'radio' );
Line 004: $optType1->szValue                  = 'I'; /* For "Invoice" */
Line 005: $optType1->szCaption                = 'Facture';
Line 006: $optType2                           = new LSInput( 'radio' );
Line 007: $optType2->szValue                  = 'E'; /* For "Estimate" */
Line 008: $optType2->szCaption                = 'Devis';
Line 009: $optType->AddObject( $optType1 );
Line 010: $optType->AddObject( $optType2 );

Dans le cas évoqué ci-dessus, on assigna automatiquement la valeur 'I' aux options (ligne 002). Cela revient à dire que par défaut, le type sera "Facture" (Invoice). Mais il se pourrait que vous ne souhaitiez pas assigner de valeur par défaut. Dans ce cas, il suffit d'omettre la ligne 002 pour qu'aucun des deux boutons radio ne soit sélectionné. Attention, dans ce cas, à la soumission du formulaire, vous devrez aussi vérifier que la variable POST ( $_POST en PHP) est bel et bien positionnée, car si aucune option n'est sélectionnée, la variable est simplement non définie.

$szInvoiceType  = isset( $_POST['optType'] ) ? $_POST['optType'] : 'I';

LSInput : email

Le type email permet de construire une zone de saisie pour adresse courriel. La validité de la zone est automatiquement vérifiée au sortir de la zone.

$txtEmail                   = new LSInput( 'email','txtEmail','txtEmail' );
$txtEmail->szTooltip        = "Entrez votre adresse email";
$txtEmail->szErrorMsg       = $txtEmail->szTooltip;
$txtEmail->iWidth           = $iInputWidth;
$txtEmail->szTrailer        = '<br />';
$txtEmail->szValue          = isset( $_POST['txtEmail'] ) ? $_POST['txtEmail'] : '';

LSInput : combobox

Le type combobox permet la saisie parmi une liste de choix possibles. Les choix possibles sont indiqués grâce à la méthode AddItem() qui prend 1 ou 2 arguments selon que vous souhaitez associer une valeur à chaque choix possible ou non.

$cboFruit                   = new LSInput( 'combobox' );
$cboFruit->szName           = 'cboFruit';
$cboFruit->szID             = $cboFruit->szName;
$cboFruit->szValue          = isset( $_POST['cboFruit'] ) ? $_POST['cboFruit'] : "Pomme";
$cboFruit->szTooltip        = "Choisissez un fruit";
$cboFruit->iWidth           = $iInputWidth;
$cboFruit->szTrailer        = '<br />';
$cboFruit->AddItem( "Poire"   ,"PO" );
$cboFruit->AddItem( "Banane"  ,"BA" );
$cboFruit->AddItem( "Orange"  ,"OR" );
$cboFruit->AddItem( "Pomme"   ,"AP" );
LSInput : combobox ... type XML

Si vous positionnez la propriété iRowSourceType du contrôle à ROW_SOURCE_TYPE_XML (11), alors le remplissage des choix possibles se fait au départ d'un fichier XML. Dans ce cas, la propriété szRecordSource permet de spécifier le fichier XML qui doit être chargé tandis que la propriété szRowSource indique quel est le filtre XPath à appliquer sur le XML (query). Enfin, szControlSource, dans ce cas, indique (1) l'expression qui sert à créer l'option (<option>(1)</option>) (2) la valeur de l'option (<option value="(2)">(1)</option>). Dans l'exemple qui suit on voit clairement que la valeur du tag Name servira à créer l'option d'affichage tandis que la valeur de l'attribut id est la valeur associée à l'option.

$cboRes                     = new LSInput( 'combobox' );
$cboRes->szName             = 'cboRes';
$cboRes->szID               = $cboRes->szName;
$cboRes->szValue            = isset( $_POST['cboRes'] ) ? $_POST['cboRes'] : "";
$cboRes->szTooltip          = "Choisissez la salle à réserver";
$cboRes->iWidth             = $iInputWidth;
$cboRes->iRowSourceType     = ROW_SOURCE_TYPE_XML;
$cboRes->szRecordSource     = 'rooms/rooms.xml';
$cboRes->szRowSource        = "//Resource[@type='room']";
$cboRes->szControlSource    = "Name;@id";
$cboRes->szTrailer          = '<br />';
LSInput : combobox ... options héritées d'une autre combobox

Si plusieurs combobox sont à créer avec les mêmes options, vous pouvez définir lesdites options dans une seule combobox et indiquer que toutes les autres héritent de la première combo pour ce qui concerne leurs options. Voyez l'exemple suivant :

Illustration de plusieurs combobox

Dans cet exemple, 6 combobox partagent exactement les mêmes options. Le code ne définit qu'une seule fois les options en question, pour la première combobox, tandis que les autres combo en héritent :

Line 001: $oForm                                  = new LSForm( "frmPortSR" );
Line 002: $oForm->szStyle                         = 'margin:15px 0;';
Line 003: $oFieldset                              = new LSFieldset( "Salut" );
Line 004: $oFieldset->szCaption                   = " [ Port SR Data ] ";
Line 005: $oFieldset->szStyle                     = 'border:1px solid #800';
Line 006:
Line 007: $txtDate                                = new LSInput( 'date','txtDate','txtDate');
Line 008: $lblDate                                = new LSLabel( "Date:" );
Line 009: $lblDate->szFor                         = $txtDate;
Line 010:
Line 011: /* ==================================================================== */
Line 012:
Line 013: $cboFinanceReliability                  = new LSInput( 'combobox','cboFinanceReliability','cboFinanceReliability');
Line 014: $lblFinanceReliability                  = new LSLabel( "Finance reliability:" );
Line 015: $lblFinanceReliability->szFor           = $cboFinanceReliability;
Line 016:
Line 017: $cboFinanceStatus                       = new LSInput( 'combobox','cboFinanceStatus','cboFinanceStatus');
Line 018: $lblFinanceStatus                       = new LSLabel( "Finance status:" );
Line 019: $lblFinanceStatus->szFor                = $cboFinanceStatus;
Line 020:
Line 021: /* ==================================================================== */
Line 022:
Line 023: $cboPlanningReliability                 = new LSInput( 'combobox','cboPlanningReliability','cboPlanningReliability');
Line 024: $lblPlanningReliability                 = new LSLabel( "Planning reliability:" );
Line 025: $lblPlanningReliability->szFor          = $cboPlanningReliability;
Line 026:
Line 027: $cboPlanningStatus                      = new LSInput( 'combobox','cboPlanningStatus','cboPlanningStatus');
Line 028: $lblPlanningStatus                      = new LSLabel( "Planning status:" );
Line 029: $lblPlanningStatus->szFor               = $cboPlanningStatus;
Line 030:
Line 031: /* ==================================================================== */
Line 032:
Line 033: $cboRisksReliability                    = new LSInput( 'combobox','cboRisksReliability','cboRisksReliability');
Line 034: $lblRisksReliability                    = new LSLabel( "Risks reliability:" );
Line 035: $lblRisksReliability->szFor             = $cboRisksReliability;
Line 036:
Line 037: $cboRisksStatus                         = new LSInput( 'combobox','cboRisksStatus','cboRisksStatus');
Line 038: $lblRisksStatus                         = new LSLabel( "Risks status:" );
Line 039: $lblRisksStatus->szFor                  = $cboRisksStatus;
Line 040:
Line 041: /* ==================================================================== */
Line 042:
Line 043: $cboFinanceReliability->AddOption( ''       ,'unknown'  );
Line 044: $cboFinanceReliability->AddOption( 'Red'    ,'red'      );
Line 045: $cboFinanceReliability->AddOption( 'Amber'  ,'amber'    );
Line 046: $cboFinanceReliability->AddOption( 'Green'  ,'green'    );
Line 047:
Line 048: $cboFinanceStatus->szRowSource          =
Line 049: $cboPlanningReliability->szRowSource    =
Line 050: $cboPlanningStatus->szRowSource         =
Line 051: $cboRisksReliability->szRowSource       =
Line 052: $cboRisksStatus->szRowSource            = $cboFinanceReliability;
Line 053:
Line 054: $cboFinanceReliability->IsSorted        =
Line 055: $cboFinanceStatus->IsSorted             =
Line 056: $cboPlanningReliability->IsSorted       =
Line 057: $cboPlanningStatus->IsSorted            =
Line 058: $cboRisksReliability->IsSorted          =
Line 059: $cboRisksStatus->IsSorted               = true;
Line 060:
Line 061: /* ==================================================================== */
Line 062:
Line 063: $txtMilestonesRed                       = new LSInput( 'number','txtMilestonesRed','txtMilestonesRed');
Line 064: $lblMilestonesRed                       = new LSLabel( "Milestones red:" );
Line 065: $lblMilestonesRed->szFor                = $txtMilestonesRed;
Line 066:
Line 067: $txtMilestonesAmber                     = new LSInput( 'number','txtMilestonesAmber','txtMilestonesAmber');
Line 068: $lblMilestonesAmber                     = new LSLabel( "Milestones amber:" );
Line 069: $lblMilestonesAmber->szFor              = $txtMilestonesAmber;
Line 070:
Line 071: $txtMilestonesGreen1                    = new LSInput( 'number','txtMilestonesGreen1','txtMilestonesGreen1');
Line 072: $lblMilestonesGreen1                    = new LSLabel( "Milestones green 1:" );
Line 073: $lblMilestonesGreen1->szFor             = $txtMilestonesGreen1;
Line 074:
Line 075: $txtMilestonesGreen2                    = new LSInput( 'number','txtMilestonesGreen2','txtMilestonesGreen2');
Line 076: $lblMilestonesGreen2                    = new LSLabel( "Milestones green 2:" );
Line 077: $lblMilestonesGreen2->szFor             = $txtMilestonesGreen2;
Line 078:
Line 079: $cmdSubmit                              = new LSInput( 'submit','cmdSubmit','cmdSubmit' );
Line 080: $cmdSubmit->szCaption                   = 'Save';
Line 081:
Line 082: /* ==================================================================== */
Line 083:
Line 084: $oFieldset->AddObject( array( $lblDate,$txtDate ) );
Line 085: $oFieldset->AddObject( array( $lblFinanceReliability ,$cboFinanceReliability ,$lblFinanceStatus ,$cboFinanceStatus  ) );
Line 086: $oFieldset->AddObject( array( $lblPlanningReliability,$cboPlanningReliability,$lblPlanningStatus,$cboPlanningStatus ) );
Line 087: $oFieldset->AddObject( array( $lblRisksReliability   ,$cboRisksReliability   ,$lblRisksStatus   ,$cboRisksStatus    ) );
Line 088:
Line 089: $oFieldset->AddObject( array( $lblMilestonesRed      ,$txtMilestonesRed    ) );
Line 090: $oFieldset->AddObject( array( $lblMilestonesAmber    ,$txtMilestonesAmber  ) );
Line 091: $oFieldset->AddObject( array( $lblMilestonesGreen1   ,$txtMilestonesGreen1 ) );
Line 092: $oFieldset->AddObject( array( $lblMilestonesGreen2   ,$txtMilestonesGreen2 ) );
Line 093:
Line 094: $oFieldset->AddObject( $cmdSubmit );
Line 095:
Line 096: /* ==================================================================== */
Line 097:
Line 098: $oFieldset->SetAll( 'number;date;combobox'  ,'szTrailer'  ,'<br />'                            );
Line 099: $oFieldset->SetAll( 'number;date'           ,'IsMandatory',true                                );
Line 100: $oFieldset->SetAll( 'number;date'           ,'iWidth'     ,'200'                               );
Line 101: $oFieldset->SetAll( 'combobox'              ,'iWidth'     ,'206'                               );
Line 102: $oFieldset->SetAll( 'combobox'              ,'szStyle'    ,'border:1px solid #aaa;'            );
Line 103: $oFieldset->SetAll( 'label'                 ,'szStyle'    ,'display:inline-block;width:135px;' );
Line 104:
Line 105: $oForm->AddObject( $oFieldset );
Line 106:
Line 107: echo $oForm;
LSInput : combobox ... type XML string

Encore gérer le type XML string (LoadXML au lieu de Load)

LSInput : combobox ... type curseur

Encore gérer CURSEUR

LSInput : combobox ... type column de grid

Encore gérer la colonne d'une grid

LSInput : password

Le type password est le type qui permet la saisie de mots de passe :

$txtPwd                     = new LSInput( 'password' );
$txtPwd->szName             = 'txtPwd';
$txtPwd->szID               = $txtPwd->szName;
$txtPwd->szValue            = isset( $_POST['txtPwd'] ) ? $_POST['txtPwd'] : "";
$txtPwd->iMinLength         = 6;
$txtPwd->iSize              = 15;
$txtPwd->iMaxLength         = 15;
$txtPwd->szTooltip          = "Entrez un mot de passe de minimum {$txtPwd->iMinLength} caractères et de maximum {$txtGuid->iMaxLength} caractères";
$txtPwd->szErrorMsg         = $txtPwd->szTooltip;
$txtPwd->iWidth             = $iInputWidth;
$txtPwd->IsMandatory        = true;
$txtPwd->szTrailer          = '<br />';

LSInput : guid

Le type guid permet de générer une zone qui proposera une valeur unique : un Globally Unique IDentifier. C'est la manière la plus simple de proposer une clef réputée unique. Voici comment procéder :

$txtGuid                     = new LSInput( 'guid' );
$txtGuid->szName             = 'txtGuid';
$txtGuid->szID               = $txtGuid->szName;
$txtGuid->szValue            = isset( $_POST['txtGuid'] ) ? $_POST['txtGuid'] : "";
$txtGuid->iMinLength         = 6;
$txtGuid->szTooltip          = "Entrez une clef unique de minimum {$txtGuid->iMinLength} caractères";
$txtGuid->szErrorMsg         = $txtGuid->szTooltip;
$txtGuid->iWidth             = $iInputWidth;
$txtGuid->IsMandatory        = true;
$txtGuid->szTrailer          = '<br />';

LSInput : color

Le type color liste toutes les couleurs nommées du HTML et permet d'en choisir une :

$cboColor                   = new LSInput( 'color' );
$cboColor->szName           = 'cboColor';
$cboColor->szID             = $cboColor->szName;
$cboColor->szTooltip        = "Choisissez une couleur";
$cboColor->iWidth           = $iInputWidth;
$cboColor->szValue          = isset( $_POST['cboColor'] ) ? $_POST['cboColor'] : 'plum';
$cboColor->szTrailer        = '<br />';
[ Un exemple de combo avec les couleurs ]

LSInput : file

Le type file permet de saisir le nom d'un fichier et de l'envoyer vers le serveur. Dans le cas où le formulaire contient un contrôle de type file, le formulaire est automatiquement adapté pour inclure un encoding type.

$txtFile                    = new LSInput( 'file','txtFile','txtFile' );
$txtFile->szTooltip         = "Choisissez un fichier à envoyer vers le serveur";
$txtFile->iWidth            = $iInputWidth;
$txtFile->szValue           = isset( $_POST['txtFile'] ) ? $_POST['txtFile'] : '';
$txtFile->szTrailer         = '<br />';

$lblFile                    = new LSLabel( 'Fichier:'  );
$lblFile->szFor             = $txtFile;
$lblFile->szStyle           = $szLblStyle;
$lblFile->iWidth            = $iLblWidth;

LSInput/LSTag : grid

S'assurer que le LSTag de type grid fonctionne aussi. Ce type diffère du type 'table' mais est très proche!!!

Voilà un des types les plus ambitieux : le type grid. Bien que puissant, il vient cependant avec une limitation importante temporaire mais réelle, à savoir l'impossibilité d'effectuer des mises à jour des valeurs présentées dans la grille. Une grille est donc par défaut READ-ONLY.

Une grille n'est rien d'autre qu'une table et la table en question est composée de colonnes et de lignes. Les données de la table proviennent d'un fichier ( la propriété szRecordSource) et par défaut Vae Soli! vous propose de travailler avec des fichiers XML. Ainsi, les colonnes de la grille sont associées à des champs du fichier de données (utilisation de la méthode AddColumn() à laquelle on passe un argument LSColumn) tandis que les lignes sont les enregistrements stockés dans la table.

$grdStaff                 = new LSInput( "grid","grdStaff","grdStaff" );
$grdStaff->szCaption      = "Staff";
$grdStaff->szRecordSource = 'staff.xml';

$grdStaff->AddColumn( new LSColumn( 'Name/Lastname'   ,'Nom de famille' ) );
$grdStaff->AddColumn( new LSColumn( 'Name/Firstname'  ,'Prénom'         ) );
$grdStaff->AddColumn( new LSColumn( 'Email'           ,'Email'          ) );
$grdStaff->AddColumn( new LSColumn( 'Phones/Tel'      ,'Téléphone'      ) );
$grdStaff->AddColumn( new LSColumn( 'Phones/Mobile'   ,'GSM'            ) );
Concaténer des champs

Vous pouvez également travailler avec des concaténations de champs … mais vous devrez faire une partie du boulot vous-même en fournissant une fonction de callback. Voyons comment faire via un autre exemple :

$grdStaff                 = new LSInput( "grid","grdStaff","grdStaff" );
$grdStaff->szCaption      = "Staff";
$grdStaff->szRecordSource = 'staff.xml';

$grdStaff->AddColumn( new LSColumn( array( 'Name/Firstname','Name/Lastname','Email' ),'Nom de famille','MyFunc' ) );
$grdStaff->AddColumn( new LSColumn( 'Phones/Tel'                                     ,'Téléphone'               ) );
$grdStaff->AddColumn( new LSColumn( 'Phones/Mobile'                                  ,'GSM'                     ) );

...

function MyFunc( $xValue )
/*----------------------*/
{

    $szValue = trim( $xValue[0] . ' ' . $xValue[1] );

    if ( count( $xValue ) == 3 && strlen( trim( $xValue[2] ) ) )
    {
        $szValue = "<a href=\"mailto:{$xValue[2]}\">{$szValue}</a>";
    }
    return ( $szValue );
}

Comme vous le constatez, il suffit de passer un tableau de valeurs à extraire et la fonction de callback, MyFunc dans notre exemple. Celle-ci reçoit un tableau de valeurs correspondant aux champs à extraire. Sa valeur de retour indique à Vae Soli! ce que vous avez décidé d'afficher.

Paginer la grille

Vous pouvez encore paginer vos résultats en spécifiant le n° de l'enregistrement de départ et le n° de l'enregistrement de fin :

$grdStaff                 = new LSInput( "grid","grdStaff","grdStaff" );
$grdStaff->szCaption      = "Staff";
$grdStaff->szRecordSource = 'staff.xml';
$grdStaff->iFrom          = 1;
$grdStaff->iTo            = 9;

$grdStaff->AddColumn( new LSColumn( array( 'Name/Firstname','Name/Lastname','Email' ),'Nom de famille','MyFunc' ) );
$grdStaff->AddColumn( new LSColumn( 'Phones/Tel'                                     ,'Téléphone'               ) );
$grdStaff->AddColumn( new LSColumn( 'Phones/Mobile'                                  ,'GSM'                     ) );

...

function MyFunc( $xValue )
/*----------------------*/
{

    $szValue = trim( $xValue[0] . ' ' . $xValue[1] );

    if ( count( $xValue ) == 3 && strlen( trim( $xValue[2] ) ) )
    {
        $szValue = "<a href=\"mailto:{$xValue[2]}\">{$szValue}</a>";
    }
    return ( $szValue );
}
Trier une grille

Vous pouvez également spécifier dans quel ordre les données seront affichées grâce à la propriété szOrderBy. Voyez dans l'exemple ci-dessous comment nous avons trié le curseur sur base du nom de famille :

$grdStaff                 = new LSInput( "grid","grdStaff","grdStaff" );
$grdStaff->szCaption      = "Staff";
$grdStaff->szRecordSource = 'staff.xml';
$grdStaff->iFrom          = 1;
$grdStaff->iTo            = 9;
$grdStaff->szOrderBy      = 'Name/Lastname';

$grdStaff->AddColumn( new LSColumn( array( 'Name/Firstname','Name/Lastname','Email' ),'Nom de famille','MyFunc' ) );
$grdStaff->AddColumn( new LSColumn( 'Phones/Tel'                                     ,'Téléphone'               ) );
$grdStaff->AddColumn( new LSColumn( 'Phones/Mobile'                                  ,'GSM'                     ) );

...

function MyFunc( $xValue )
/*----------------------*/
{

    $szValue = trim( $xValue[0] . ' ' . $xValue[1] );

    if ( count( $xValue ) == 3 && strlen( trim( $xValue[2] ) ) )
    {
        $szValue = "<a href=\"mailto:{$xValue[2]}\">{$szValue}</a>";
    }
    return ( $szValue );
}

Une fois que la zone a été préparée, elle peut être ajoutée au formulaire ou au fieldset comme pour les autres types.

LSInput avec multiples paramètres

Afin d'écourter les notations nécessaires, la classe LSInput accepte de multiples paramètres. Vous pouvez ainsi spécifier en une seule passe l'ID du contrôle, son nom et sa valeur de la manière suivante :

$txtQty                     = new LSInput( 'number','txtQty','txtQty',isset( $_POST['txtQty'] ) ? $_POST['txtQty'] : "1" );
$txtQty->szDesc             = 'Quantité à réserver';
$txtQty->szTooltip          = "Entrez la quantité à réserver";
$txtQty->szErrorMsg         = "QTY: Vous n'êtes autorisé qu'à mentionner des chiffres ! Cette zone est obligatoire.";
$txtQty->iWidth             = 200;
$txtQty->IsMandatory        = true;
$txtQty->szTrailer          = '<br />';

Les étiquettes : LSLabel

La classe LSLabel permet de gérer des étiquettes. Un label peut être lié à n'importe quelle zone grâce à la propriété szFor :

$txtQty                     = new LSInput( 'number','txtQty','txtQty',isset( $_POST['txtQty'] ) ? $_POST['txtQty'] : "1" );
$txtQty->szDesc             = 'Quantité à réserver';
$txtQty->szTooltip          = "Entrez la quantité à réserver";
$txtQty->szErrorMsg         = "QTY: Vous n'êtes autorisé qu'à mentionner des chiffres ! Cette zone est obligatoire.";
$txtQty->iWidth             = 200;
$txtQty->IsMandatory        = true;
$txtQty->szTrailer          = '<br />';

$lblQty                     = new LSLabel( 'Quan\tité:'  );
$lblQty->szFor              = $txtQty;
$lblQty->iWidth             = 130;

Vous pouvez même gérer les accesskey grâce au caractère d'échappement comme vous le montre l'exemple suivant :

$lblAddress                 = new LSLabel( 'Adre\sse:'  );
$lblAddress->szStyle        = $szLblStyle;
$lblAddress->iWidth         = $iLblWidth;

Dans ce cas précis, vous pouvez contrôler aisément comment les touches accélératrices sont présentées grâce à un petit CSS. Pour l'exemple, nous faisons en sorte que cette touche soit ici affichée avec un surlignement, en caractère gras et en rouge :

label span.LSLabelAccelerator
{   text-decoration :   underline;
    font-weight     :   bold;
    color           :   #f00;
}

LSFieldset et LSForm

Lorsque tous les contrôles ont été créés, il faut les ajouter au formulaire (LSForm) ou à l'ensemble de champs (LSFieldset).

Ajouter des contrôles à un objet LSFieldset

Rien n'est plus facile que d'ajouter des contôles à un LSFieldset. Il suffit en effet de se servir de la méthode AddObject() du fieldset. En voici un exemple parfait :

$oForm                      = new LSForm( 'frmBooking' );
$oForm->szComment           = "Formulaire de test";
$oForm->szClass             = 'Test';

$oFieldset                  = new LSFieldset();
$oFieldset->szComment       = "Frame";
$oFieldset->szCaption       = " [ Infos de réservation ] ";

/* ================================================================================ */

$txtQty                     = new LSInput( 'number','txtQty','txtQty',isset( $_POST['txtQty'] ) ? $_POST['txtQty'] : "1" );
$txtQty->szDesc             = 'Quantité à réserver';
$txtQty->szTooltip          = "Entrez la quantité à réserver";
$txtQty->szErrorMsg         = "QTY: Vous n'êtes autorisé qu'à mentionner des chiffres ! Cette zone est obligatoire.";
$txtQty->iWidth             = 200;
$txtQty->IsMandatory        = true;
$txtQty->szTrailer          = '<br />';

$lblQty                     = new LSLabel( 'Quan\tité:'  );
$lblQty->szName             = 'lblQty';
$lblQty->szFor              = $txtQty;
$lblQty->iWidth             = 130;

/* ================================================================================ */

$oFieldset->AddObject( $lblQty );
$oFieldset->AddObject( $txtQty );

… et puis d'ajouter le fieldset à l'objet LSForm :

$oForm->AddObject( $oFieldset );

Modifier une liste de contrôles en une seule passe : la méthode SetAll()

Si de multiples contrôles de votre formulaire sont souvent affublés de la même valeur pour certaines de leurs propriétés, nous avons conçu la méthode SetAll(). Un bref exemple vaut mieux qu'un long discours :

$oFieldset->SetAll( "label","szStyle","display:inline-block;width:125px;"  );

Voilà qui aura pour effet d'assigner la propriété szStyle avec la même valeur, en l'occurrence "display:inline-block;width:125px;" pour tous les contrôles de type label. C'est un gain de temps appréciable si vous ne souhaitez pas répéter et répeter encore le même code pour chaque étiquette.

LSForm et les données

Un formulaire peut être associé à des données provenant d'une base de données ou d'un fichier XML. Pour ce faire, il faut populer le dataenvironment. Les contrôles, quant à eux, doivent préciser de quel champ leurs données doivent être extraites.

Pour faire simple, vous devez spécifier de quelle source de données le formulaire est composé (c'est le dataenvironment) et chaque contrôle doit indiquer de quel champ retirer les données (controlsource).

ATTENTION: Ici, il faut plus d'explications concernant le dataenvironment et la notion de curseur ... une fois que le code devient plus stable.

EXEMPLE NON FINAL
$oCursor = new LSCursor( "bookings","data/bookings.xml",XML_TYPE );
$oForm->AddCursor( $oCursor );

Comme vous le constatez, on ajoute un curseur (ce sont des données) au formulaire grâce à la méthode AddCursor(). Auparavant, on aura pris soin de créer le curseur de données avec la classe LSCursor. Le constructeur de la classe LSCursor accepte 3 paramètres :

  1. Le nom du curseur
  2. Le nom du fichier de données
  3. Le type de curseur

AddCursor() a pour effet d'ajouter le curseur au dataenvironment du formulaire. On aurait tout aussi bien pu ajouter le curseur directement au dataenvironment avec le code suivant : $oForm->oDataEnvironment->AddCursor( $oCursor ). Cela aurait eu exactement le même effet (c'est d'ailleurs ce qui se passe en interne).

ATTENTION: Ici, il faut continuer le texte.

Encore plus simple

Bien que le code PHP généré ne soit pas complet, il représente quand même une grande partie des instructions à 'pondre'. Après, il vous appartient d'ajouter ce qui vous convient : c'est ce que propose la méthode CreateForm du formulaire (LSForm).

Line 001: <?php
Line 002: $o = new LSForm();
Line 003: $aControls = array( array( 'FName'   ,'Prénom:'                      ),
Line 004:                     array( 'LName'   ,'Nom:'                         ),
Line 005:                     array( 'Birth'   ,'Date de naissance:','date'    ),
Line 006:                     array( 'Comment' ,'Commentaire:'      ,'editbox' ),
Line 007:                     array( 'Email'   ,'Email:'            ,'email'   )
Line 008:                   );
Line 009:
Line 010: $szCode = $o->CreateForm( 'frmTest',$aControls );
Line 011: echo "<pre>" . htmlentities( $szCode ) . "</pre>";
Line 012: ?>

Et cela génère un code PHP brut de coffrage :


Après, vous pouvez recopier ce code tel quel dans le vôtre pour qu'il donne le résultat suivant :

Data




Précédent Suivant