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.
day
, month
, week
et/ou year
2012-08-24pubdate
et expiry
revus pour s'appliquer à des heures sans prise en compte de date 2012-08-25get
,
post
, cookie
et server
2012-08-24device
et le filtre model
, voici le filtre browser
! 2012-08-22port
permet de "tamiser" votre output 2012-08-22LSInput
: de nouvelles additions en masse 2012-07-31LSForm
: new additions ! 2012-07-28title
, 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)onload
et onunload
d'une page, Page settings, ... (22/09/2013)Ce petit extrait des exemples n'est en rien lié à Vae Soli! mais nous avons trouvé utile de le renseigner ici pour documentation.
Règle #1 : activation des entêtes d'expiration !
Rendre un site web rapide dépend pour beaucoup de la gestion du cache des navigateurs. La technique présentée ici vise donc à faire en sorte qu'un maximum de fichiers soient cachés par le navigateur du client ce qui évitera ainsi une requête visant à obtenir lesdits fichiers.
Par exemple, il est utile de mettre en cache les fichiers dont vous savez qu'ils n'évoluent pas souvent (voire jamais) : des fichiers javascripts, des fichiers image, des feuilles de style, des documents, des fichiers audio, etc.
Nous conseillons donc de mettre les directives suivantes dans le fichier de
configuration httpd.conf
d'Apache :
<FilesMatch "\.(?i:ico|gif|bmp|png|jpe?g|js|css|swf|wmv|wav|mov|webm|ogg|mp3|mp4|pptx?|xlsx?|docx?|pdf|zip)$"> ExpiresActive On ExpiresDefault "access plus 5 years" </FilesMatch>
Ceci aura pour effet d'ajouter un header HTTP d'expiration pour toutes les ressources (fichiers) dont les extensions sont indiquées dans la directive (nous avons inclus une liste assez standard d'extensions qui dénotent des ressources statiques; il vous appartient de compléter cette liste avec les autres types de fichier que vous utilisez).
Bien que vous puissiez traiter les fichiers différemment en fonction de leur
casse (majuscules/minuscules), nous avons inclus le traitement insensitif
dans l'expression régulière qui a été mentionnée [1] : ?i:
[2] .
Ainsi, les fichiers .jpg
our les fichiers .JPG
(voire .JpEg
) seront traités de la même manière.
Le header qui sera positionné fera état d'une invalidité de la ressource
(expiration) 5 ans plus tard que son accès, de quoi être largement dans le
futur (ExpiresDefault "access plus 5
years"
) et donc d'activer le cache des
navigateurs pour une longue période.
Voici les headers HTTP typiques qui sont positionnés en renvoi à une requête correspondant à une ressource bénéficiant de cette technique d'expiration (exemple pris de notre serveur Apache) :
HTTP/1.1 304 Not Modified Date: Mon, 27 Aug 2012 09:00:52 GMT Server: Apache/2.2.11 (Win32) PHP/5.3.5 Connection: Keep-Alive Keep-Alive: timeout=5, max=100 ETag: "1b000000019eaf-1363-4c321e748faf4" Expires: Sat, 26 Aug 2017 09:00:52 GMT Cache-Control: max-age=157680000
Attention, pour qu'Apache puisse se livrer à cet exercice, n'oubliez pas
d'activer le module expires_module
.
Règle #2 : compressez vos ressources !
Le temps qui est nécessaire à transférer les ressources du serveur au navigateur du client est pour large part dépendant de la taille de la ressource en question : plus la ressource est grosse, plus de temps sera nécessaire à l'envoyer vers l'internaute parce qu'il faudra plus de paquets pour la lui faire parvenir.
Il est donc utile de compresser les données en question. En Apache 2.x cela
se fait grâce au module mod_deflate
et par l'utilisation de la
directive AddOutputFilterByType
.
Steve Souders, dans son excellent bouquin "High Performance Web Sites", préconise la compression des scripts (*.js) et des feuilles de style (.css). De notre côté, nous préconisons l'utilisation de la compression sur base de types MIME. Voici les directives de compression telles que nous les avons extraites de notre propre configuration Apache, et ce pour tous les sites dont nous nous occupons :
<Directory "d:/allsites/*/www/http/"> ... other instructions AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/atom_xml AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/x-httpd-php </Directory>
Attention, pour qu'Apache puisse se livrer à cet exercice, n'oubliez pas
d'activer le module deflate_module
.
day
, month
, week
et/ou year
2012-08-24Depuis l'opus "5.0.0006"
Voilà encore une série de filtres sur les contenus. Ici il s'agit de
s'intéresser à des contenus qui ne sont à afficher qu'à certaines dates,
mais de manière un peu plus complexe qu'entre deux dates (ce à quoi servent
d'ailleurs les filtres pubdate
et expiry
).
Imaginons par exemple que vous souhaitiez qu'une île ne soit affichée que les lundis, mercredis et vendredis. Voici comment réaliser la chose :
<Contents> <Archipelago id="body" active="yes" category="body"> <Island id="test" active="yes" class="LSContents" xhtml="yes" day="1;3;5"> <p style="font-size:5em;color:red;font-weight:bold;">JOUR IMPAIR</p> </Island> <Island id="pm" active="yes" class="LSContents"> <param name="storage"><![CDATA[pm-{page->lang}.php]]></param> </Island> </Archipelago> </Contents>
Nous avons utilisé le filtre day
et avons donné les jours
de la semaine qui nous conviennent : 1
pour les lundis,
3
pour les mercredis et 5
pour les vendredis.
Le même raisonnement s'applique aux mois, aux semaines et aux années. Voici des exemples de chaque cas :
<Contents> <Archipelago id="body" active="yes" category="body"> <Island id="test" active="yes" class="LSContents" xhtml="yes" month="1;3;5;7;9;11"> <p style="font-size:5em;color:red;font-weight:bold;">MOIS IMPAIR</p> </Island> <Island id="pm" active="yes" class="LSContents"> <param name="storage"><![CDATA[pm-{page->lang}.php]]></param> </Island> </Archipelago> </Contents>
<Contents> <Archipelago id="body" active="yes" category="body"> <Island id="test" active="yes" class="LSContents" xhtml="yes" week="30-50"> <p style="font-size:5em;color:red;font-weight:bold;">BONNE SEMAINE</p> </Island> <Island id="pm" active="yes" class="LSContents"> <param name="storage"><![CDATA[pm-{page->lang}.php]]></param> </Island> </Archipelago> </Contents>
Avec une petite particularité liée à notre exemple qui spécifie une fourchette de semaines : de la 30ème à la 50ème semaine !
<Contents> <Archipelago id="body" active="yes" category="body"> <Island id="test" active="yes" class="LSContents" xhtml="yes" year="2000-2010;2012"> <p style="font-size:5em;color:red;font-weight:bold;">C'EST LA BONNE ANNEE</p> </Island> <Island id="pm" active="yes" class="LSContents"> <param name="storage"><![CDATA[pm-{page->lang}.php]]></param> </Island> </Archipelago> </Contents>
Et avec une nouvelle particularité liée à notre exemple qui spécifie une fourchette d'années et l'année 2012 en sus : de 2000 à 2010, ou 2012 !
Comme les exemples le laissent supposer, les fouchettes ET les dates
précises sont possibles dans le même filtre MAIS si vous utilisez les deux
en même temps, les fourchettes DOIVENT TOUJOURS PRÉCÉDER
les dates. Par exemple day="1-3;5;7"
est valable mais pas
day="5;7;1-3"
!
NOTA BENE : ces quatre filtres sont évidemment cumulables (comme le sont d'ailleurs tous les filtres) ! Ainsi, l'île suivante est affichée les lundis et jeudis de septembre à décembre :
<Contents> <Archipelago id="body" active="yes" category="body"> <Island id="test" active="yes" class="LSContents" xhtml="yes" day="1;4" month="9-12"> <p style="font-size:5em;color:red;font-weight:bold;">SALUT TOI</p> </Island> <Island id="pm" active="yes" class="LSContents"> <param name="storage"><![CDATA[pm-{page->lang}.php]]></param> </Island> </Archipelago> </Contents>
pubdate
et expiry
revus pour s'appliquer à des heures sans prise en compte de date 2012-08-25Depuis l'opus "5.0.0006"
Jusqu'à la version 5.0.0005
de Vae Soli! les filtres
pubdate
et expiry
acceptaient le seul format
YYYYMMDD[HH[mm[SS]]] (date et heure jusqu'à la seconde).
Depuis l'opus 5.0.0006
de Vae Soli! le format HH:mm[:SS]
est également permis. L'exemple suivant vous sera parfaitement
compréhensible :
<Contents> <Archipelago id="body" active="yes" category="body"> <Island id="test" active="yes" class="LSContents" xhtml="yes" pubdate="20:00" expiry="23:59"> <p style="font-size:5em;color:red;font-weight:bold;">SALUT TOI</p> </Island> <Island id="pm" active="yes" class="LSContents"> <param name="storage"><![CDATA[pm-{page->lang}.php]]></param> </Island> </Archipelago> </Contents>
Cet exemple démontre simplement comment mentionner une île qui ne sera
affichée que de 20:00 à 23:59 (heure du serveur!). Une fois de plus,
ces filtres sont cumulables avec les autres et voici dès lors comment
conjuguer des heures de publication et d'expiration avec les filtres
day
, month
, week
et/ou
year
:
<Contents> <Archipelago id="body" active="yes" category="body"> <Island id="test" active="yes" class="LSContents" xhtml="yes" day="1;4" month="9-12" pubdate="20:00" expiry="23:59"> <p style="font-size:5em;color:red;font-weight:bold;">SALUT TOI</p> </Island> <Island id="pm" active="yes" class="LSContents"> <param name="storage"><![CDATA[pm-{page->lang}.php]]></param> </Island> </Archipelago> </Contents>
get
,
post
, cookie
et server
2012-08-24Depuis l'opus "5.0.0006"
Souhaitez-vous n'activer une île QUE si un paramètre de l'URL vaut une
certaine valeur ? Rien de plus simple : il vous suffit de définir
le filtre get
(par analogie à $_GET
). Exemple :
<Island id="warning" xhtml="yes" get="warning=on"> <h2 style="color:#600;">Attention</h2> <p style="color:#900;"> Certains des exemples que nous fournissons ci-dessous ne sont pas complets. D'emblée, nous nous en excusons, bien sûr. </p> </Island>
Il est possible de mentionner plusieurs filtres get
avec
la syntaxe suivante : get="var1=value;var2=value;var3..."
. Voici
un exemple où $_GET['warning']
doit être égal à on
et
$_GET['id']
doit être égal à 18
:
<Island id="warning" xhtml="yes" get="warning=on;id=18"> <h2 style="color:#600;">Attention</h2> <p style="color:#900;"> Certains des exemples que nous fournissons ci-dessous ne sont pas complets. D'emblée, nous nous en excusons, bien sûr. </p> </Island>
Si vous souhaitez tout simplement tester l'existence de la variable
$_GET
, utilisez la syntaxe suivante :
get="var"
. Voici par exemple comment tester la présence de la
variable $_GET['warning']
:
<Island id="warning" xhtml="yes" get="warning"> <h2 style="color:#600;">Attention</h2> <p style="color:#900;"> Certains des exemples que nous fournissons ci-dessous ne sont pas complets. D'emblée, nous nous en excusons, bien sûr. </p> </Island>
Si vous avez compris comment fonctionne le filtre get
, alors
vous saurez comment gérer les filtres post
, cookie
et server
: ils sont similaires en tous points,
sauf qu'ils butinent du côté du $_POST
, du $_COOKIE
,
ou $_SERVER
! Exemple :
<Island id="warning" xhtml="yes" post="warning=true"> <h2 style="color:#600;">Attention</h2> <p style="color:#900;"> Certains des exemples que nous fournissons ci-dessous ne sont pas complets. D'emblée, nous nous en excusons, bien sûr. </p> </Island>
filtre="var=value"
(e.g. get="warning=on"
)filtre="var!=value"
(e.g. get="warning!=on"
)filtre="var>value"
(e.g. get="warning>4"
) (le caractère '>' n'est pas acceptable !)filtre="var>=value"
(e.g. get="warning>=on"
) (le caractère '>' n'est pas acceptable !)filtre="var<value"
(e.g. get="warning<4"
) (le caractère '<' n'est pas acceptable !)filtre="var<=value"
(e.g. get="warning<=on"
) (le caractère '<' n'est pas acceptable !)filtre="var$value1,value2[,...]"
(e.g. get="warning$on,true,yes"
)filtre="var"
(e.g. get="warning"
)filtre="!var"
(e.g. get="!warning"
)<Island id="warning" xhtml="yes" post="warning$true,on,yes"> <h2 style="color:#600;">Attention</h2> <p style="color:#900;"> Certains des exemples que nous fournissons ci-dessous ne sont pas complets. D'emblée, nous nous en excusons, bien sûr. </p> </Island>
<Island id="warning" xhtml="yes" cookie="last-visit<20120501"> <p style="color:#900;"> Nous sommes heureux de vous revoir ! </p> </Island>
<Island id="warning" xhtml="yes" cookie="last-visit"> <p style="color:#900;"> Welcome back ! </p> </Island>
<Island id="warning" xhtml="yes" post="!txtDate"> <p style="color:#900;"> Nous rencontrons un problème avec votre formulaire car nous ne trouvons pas la zone Date. </p> </Island>
device
et le filtre model
, voici le filtre browser
! 2012-08-22Depuis l'opus "5.0.0006"
Il est possible de positionner des paramètres particuliers pour les îles en
utilisant les filtres device
et model
. Nous avons
pensé que le filtre browser
pourrait aussi être intéressant,
aussi l'avons-nous intégré directement dans la version 5.0.0006
de Vae Soli!, une version qui est planifiée pour le 31/08/2012.
Exemple :
<Island id="booking" active="yes" class="LSContentsBooking"> … <param name="start-hour" browser="opera">9</param> <param name="start-hour" browser="chrome">10</param> <param name="start-hour" >11</param> <param name="end-hour" >22</param> <param name="minutes-per-slot" >30</param> … </Island>
port
permet de "tamiser" votre output 2012-08-22Depuis l'opus "5.0.0006"
Beaucoup de nouveaux filtres d'affichage ont fait leur apparition ces derniers temps dans Vae Soli! – ou plutôt, quelques nouveaux filtres ont été développés et beaucoup ont enfin été documentés.
Au rang de ces filtres, le filtre port
qui permet de n'afficher
les éléments que si le bon numéro de port est mentionné. Ce filtre s'applique
tant aux pages, qu'aux archipels et aux îles.
Voilà qui est éminemment pratique, par exemple, pour permettre de tester une partie de votre site car en effet il suffit de mentionner dans l'URL le port à utiliser et le contenu ne se montrera QUE si le port en question est utilisé (bien entendu, il faudra aussi vous arranger pour que votre serveur web, Apache par exemple, écoute sur le port en question et que votre virtual host soit correctement configuré).
Exemple :
<Contents> <Archipelago id="body" active="yes" category="body"> <Island id="test" active="yes" class="LSContents" xhtml="yes" port="8000"> <p style="font-size:5em;color:red;font-weight:bold;">SALUT</p> </Island> <Island id="pm" active="yes" class="LSContents"> <param name="storage"><![CDATA[pm-{page->lang}.php]]></param> </Island> </Archipelago> </Contents>
Dans l'exemple ci-dessus, le petit mot "SALUT" n'apparaîtra QUE si le port utilisé est "8000". Vous pouvez donc déduire de ceci que vous pouvez créer des contenus qui ne seront visibles qu'à condition de mentionner le bon port. Il vous suffira dès lors de mentionner – mais cela ne reste qu'un exemple d'utilisation – le port à utiliser dans les requêtes pour que votre équipe de test puisse tester la nouvelle version de votre page.
Pour que l'exemple soit complet, voici la configuration Apache nécessaire :
Dans httpd.conf Listen 80 Listen 8000
Dans httpd-vhosts.conf (fichier de définition des vhosts) <VirtualHost *:80 *:8000> DocumentRoot c:/websites/mydomain/www/httpdocs ServerName mydomain.com ServerAlias www.mydomain.com </VirtualHost>
port="value"
(e.g. port="8000"
)port="!value"
ou port="!=value"
(e.g. port="!8000"
)port=">value"
(e.g. port=">80"
) (le caractère '>' n'est pas acceptable !)port=">=value"
(e.g. port=">=80"
) (le caractère '>' n'est pas acceptable !)port="<value"
(e.g. port="<80"
) (le caractère '>' n'est pas acceptable !)port="<=value"
(e.g. port="<=80"
) (le caractère '>' n'est pas acceptable !)port="$value[,...]"
(e.g. port="$80,8000"
)
Il est important de préciser que le filtre port
, comme la quasi
totalité des filtres, s'applique tant aux pages, aux archipels et aux îles.
LSInput
: de nouvelles additions en masse 2012-07-31Depuis l'opus "5.0.0005"
LSInput('date')
On n'y coupe pas… c'est l'assignation de la valeur de la zone qui est touffue, un peu spéciale. Pour donner une valeur au contrôle, il faut que cette valeur soit formatée conformément aux spécifications : il faut une chaîne de temps valide. C'est quoi une chaîne de temps valide ? Réponse : c'est une chaîne qui représente le mois de manière valide + '-' (un tiret) + le jour du mois en deux chiffres. Merci les specs ! Prochaine question : c'est quoi une chaîne de mois valide. Réponse : c'est quatre chiffres réprésentant l'année + '-' (un tiret) + 2 chiffres représentant le mois.
Allons-y ! Mettons-le tout ensemble : YYYY-MM-DD
. C'est
pas plus simple de le dire comme cela ? Voilà qui est dit !
Vae Soli! n'a pas attendu que HTML5 définisse une zone de type
date
pour fournir ce type de contrôle. A vrai dire, si vous ne
spécifiez rien d'autre vous risquez d'être un peu surpris car Vae Soli! vous
présentera une simple zone text
affublée néanmoins de
javascript dont la tâche sera de s'assurer que vous entrez bien une date.
Pour que Vae Soli! vous présente la zone date comme un contrôle HTML5,
il faut dire que le formulaire suit les règles des Web Forms
2.0 C'est ce que nous avons mis en évidence dans le code qui
vous est présenté ci-dessous.
Revenons dès lors un instant à la manière de positionner la valeur du contrôle. Finalement Vae Soli! vous permet de montionner la valeur avec les formats suivants :
$txtDate->szValue = '29-02-2012'
$txtDate->szValue = '29/02/2012'
$txtDate->szValue = '2012-02-29'
$txtDate->szValue = '2012/02/29'
Tous les cas sont supportés, ce qui devrait vous simplifier la tâche, du moins le pensons-nous.
Code HTML :
<script type="text/javascript"> // <![CDATA[ function __chkDate( evt,oControl,szErrMsg ) { evt = (evt) ? evt : event; if ( evt.which ) { var keyCode = '' + evt.which; } else { var keyCode = '' + evt.keyCode; } if ( evt.which != 0 ) { if ( evt.ctrlKey ) { keyCode = '^' + keyCode; return ( true ); } if ( keyCode != '13' && /* Enter */ keyCode != '47' && /* / */ keyCode != '48' && /* 0 */ keyCode != '49' && /* 1 */ keyCode != '50' && /* 2 */ keyCode != '51' && /* 3 */ keyCode != '52' && /* 4 */ keyCode != '53' && /* 5 */ keyCode != '54' && /* 6 */ keyCode != '55' && /* 7 */ keyCode != '56' && /* 8 */ keyCode != '57' && /* 9 */ keyCode != '8' && /* Backspace */ keyCode != '9' && /* Tab */ keyCode != '144' && /* NumLock */ keyCode != '63497' && /* Up arr */ keyCode != '63498' /* Down arr */ ) { alert( szErrMsg.length > 0 ? szErrMsg : "Digits or '/' only! (" + keyCode + ")" ); return ( false ); } else { if ( keyCode == '13' ) /* Enter */ { oControl.blur(); } } } return ( true ); } function DAT_IsValid( iYear,iMonth,iDay,szErrMsg ) /*----------------------------------------------*/ { /* First, let's adjust the year */ if ( iYear < 100 ) { if ( iYear < 50 ) { iYear += 2000; /* e.g. 0 to 49 will yield 2000 to 2049 */ } else { iYear += 1900; /* e.g. 50 to 99 will yield 1950 to 1999 */ } } /* Is month correct? */ if ( iMonth < 1 || iMonth > 12 ) { if ( szErrMsg && szErrMsg.length > 0 ) { szMsg = szErrMsg; } else { szMsg = 'Incorrect month!'; } alert( szMsg ); return ( false ); } /* Find out is we are dealing with a leap year or not */ if ( iYear % 4 == 0 && iYear % 100 != 0 || iYear % 400 == 0 ) { iFebDays = 29; } else { iFebDays = 28; } /* Preparing number of days per month */ aDays = new Array( 31,iFebDays,31,30,31,30,31,31,30,31,30,31 ); if ( iDay < 1 || iDay > aDays[iMonth-1] ) { if ( szErrMsg && szErrMsg.length > 0 ) { szMsg = szErrMsg; } else { szMsg = 'Date is invalid!'; } alert( szMsg ); return ( false ); } return ( true ); } function __chkForm_3fe0a1e2c11c537b653a2a986a1ed25a( oForm ) /*----------------------------*/ { bRetVal = true; if ( ( oObj = document.getElementById( 'txtDate' ) ) ) { var szDate = oObj.value; szDay = szDate.substr( 0,2 ); szMonth = szDate.substr( 3,2 ); if ( szDay.charAt(0) == '0' ) { szDay = szDay.charAt(1); } if ( szMonth.charAt(0) == '0' ) { szMonth = szMonth.charAt(1); } iDay = parseInt( szDay ); iMonth = parseInt( szMonth ); iYear = parseInt( szDate.substr( 6,4 ) ); if ( ! DAT_IsValid( iYear,iMonth,iDay,'' ) ) { oObj.focus(); return ( false ); } } return ( bRetVal ); } //]]> </script> <form action="/samples.php" method="post" id="frmDateSample" onsubmit="return __chkForm_3fe0a1e2c11c537b653a2a986a1ed25a(this);"> <label id="lblDate">Date: </label><input type="text" value="22/04/2021" id="txtDate" tabindex="1" maxlength="10" onkeypress="return __chkDate(event,this,'');" /></form>
<?php $oForm = new LSForm( 'frmDateSample' ); // Création du formulaire $oForm->szVersion = 'Web 2.0'; // Utilisation des Web forms 2.0 $txtDate = new LSInput( 'date','txtDate' ); // Création de la zone 'date' $txtDate->szValue = date( 'Y-m-d' ); // Positionnement de la valeur (YYYY-MM-DD) $lblDate = new LSLabel( 'lblDate',null,'Date: ' ); // Création d'un label $oForm->AddObject( array( $lblDate,$txtDate ) ); // Ajout du label et de la zone 'date' au formulaire $szHTML = $oForm->Render(); // Rendu HTML du formulaire echo $szHTML; // echo ?>
Attention : Les propriétés Min
, Max
et
Step
ne sont supportées que dans les Web forms 2.0. Voici
un exemple conçu pour montrer ces propriétés en action :
<?php $oForm = new LSForm( 'frmDateSample2' ); // Création du formulaire $oForm->szVersion = 'Web 2.0'; // Utilisation des Web forms 2.0 $txtDate = new LSInput( 'date','txtDate' ); // Création de la zone 'date' $txtDate->szValue = date( 'Y-m-d' ); // Positionnement de la valeur (YYYY-MM-DD) $txtDate->Min = sprintf( '%04d-%s',( (int) date('Y') - 1 ), date( 'm-d' ) );// Minimum (doit être une date valable) $txtDate->Max = sprintf( '%04d-%s',( (int) date('Y') + 1 ), date( 'm-d' ) );// Maximum (doit être une date valable) $txtDate->Step = 10; // Incrément de 10 jours $lblDate = new LSLabel( 'lblDate',null,'Date: ' ); // Création d'un label $oForm->AddObject( array( $lblDate,$txtDate ) ); // Ajout du label et de la zone 'date' au formulaire $szHTML = $oForm->Render(); // Rendu HTML du formulaire echo $szHTML; // echo ?>
<script type="text/javascript"> // <![CDATA[ function __chkDate( evt,oControl,szErrMsg ) { evt = (evt) ? evt : event; if ( evt.which ) { var keyCode = '' + evt.which; } else { var keyCode = '' + evt.keyCode; } if ( evt.which != 0 ) { if ( evt.ctrlKey ) { keyCode = '^' + keyCode; return ( true ); } if ( keyCode != '13' && /* Enter */ keyCode != '47' && /* / */ keyCode != '48' && /* 0 */ keyCode != '49' && /* 1 */ keyCode != '50' && /* 2 */ keyCode != '51' && /* 3 */ keyCode != '52' && /* 4 */ keyCode != '53' && /* 5 */ keyCode != '54' && /* 6 */ keyCode != '55' && /* 7 */ keyCode != '56' && /* 8 */ keyCode != '57' && /* 9 */ keyCode != '8' && /* Backspace */ keyCode != '9' && /* Tab */ keyCode != '144' && /* NumLock */ keyCode != '63497' && /* Up arr */ keyCode != '63498' /* Down arr */ ) { alert( szErrMsg.length > 0 ? szErrMsg : "Digits or '/' only! (" + keyCode + ")" ); return ( false ); } else { if ( keyCode == '13' ) /* Enter */ { oControl.blur(); } } } return ( true ); } function DAT_IsValid( iYear,iMonth,iDay,szErrMsg ) /*----------------------------------------------*/ { /* First, let's adjust the year */ if ( iYear < 100 ) { if ( iYear < 50 ) { iYear += 2000; /* e.g. 0 to 49 will yield 2000 to 2049 */ } else { iYear += 1900; /* e.g. 50 to 99 will yield 1950 to 1999 */ } } /* Is month correct? */ if ( iMonth < 1 || iMonth > 12 ) { if ( szErrMsg && szErrMsg.length > 0 ) { szMsg = szErrMsg; } else { szMsg = 'Incorrect month!'; } alert( szMsg ); return ( false ); } /* Find out is we are dealing with a leap year or not */ if ( iYear % 4 == 0 && iYear % 100 != 0 || iYear % 400 == 0 ) { iFebDays = 29; } else { iFebDays = 28; } /* Preparing number of days per month */ aDays = new Array( 31,iFebDays,31,30,31,30,31,31,30,31,30,31 ); if ( iDay < 1 || iDay > aDays[iMonth-1] ) { if ( szErrMsg && szErrMsg.length > 0 ) { szMsg = szErrMsg; } else { szMsg = 'Date is invalid!'; } alert( szMsg ); return ( false ); } return ( true ); } function __chkForm_bb0075bfeeaeb7f9247de74b8ce22749( oForm ) /*----------------------------*/ { bRetVal = true; if ( ( oObj = document.getElementById( 'txtDate' ) ) ) { var szDate = oObj.value; szDay = szDate.substr( 0,2 ); szMonth = szDate.substr( 3,2 ); if ( szDay.charAt(0) == '0' ) { szDay = szDay.charAt(1); } if ( szMonth.charAt(0) == '0' ) { szMonth = szMonth.charAt(1); } iDay = parseInt( szDay ); iMonth = parseInt( szMonth ); iYear = parseInt( szDate.substr( 6,4 ) ); if ( ! DAT_IsValid( iYear,iMonth,iDay,'' ) ) { oObj.focus(); return ( false ); } } return ( bRetVal ); } //]]> </script> <form action="/samples.php" method="post" id="frmDateSample2" onsubmit="return __chkForm_bb0075bfeeaeb7f9247de74b8ce22749(this);"> <label id="lblDate">Date: </label><input type="text" value="22/04/2021" id="txtDate" tabindex="1" maxlength="10" onkeypress="return __chkDate(event,this,'');" /></form>
Input | Opera | Chrome | Firefox | Safari | IE 9 |
---|---|---|---|---|---|
date |
Yes | Yes | No[3] | Yes | No[4] |
LSInput('time')
<?php $oForm = new LSForm( 'frmTimeSample' ); // Création du formulaire $txtTime = new LSInput( 'time','txtTime' ); // Création de la zone 'time' $txtTime->szValue = date( 'H:i' ); // Positionnement de la valeur (hh:mm) $txtTime->Min = date( 'H:00' ); // Minimum (doit être une heure valable) $txtTime->Max = sprintf( "%2d:00",(int) date( 'H' ) + 1 ); // Maximum (doit être une heure valable) $txtTime->Step = 300; // Incrément de 5 minutes (300 sec) $lblTime = new LSLabel( 'lblTime',null,'Time: ' ); // Création d'un label $oForm->AddObject( array( $lblTime,$txtTime ) ); // Ajout du label et de la zone 'time' au formulaire $szHTML = $oForm->Render(); // Rendu HTML du formulaire echo $szHTML; // echo ?>
Le rendu du formulaire donne :
<script type="text/javascript"> // <![CDATA[ //]]> </script> <form action="/samples.php" method="post" id="frmTimeSample"> <label id="lblTime">Time: </label><input type="time" value="18:46" max="19:00" min="18:00" step="300" id="txtTime" tabindex="1" /></form>
Input | Opera | Chrome | Firefox | Safari | IE 9 |
---|---|---|---|---|---|
time |
Yes | No | No | Yes | No |
LSInput('datetime')
Pour ne rien changer aux bonnes habitudes, c'est le positionnement de la
valeur du contrôle qui est la partie la plus compliquée. Voici ce que dit la
norme HTML5 : il faut que la valeur soit représentée par une chaîne de
global date and time, soit une chaîne date
valable + un 'T' ou un espace ' ' + une chaîne temps valide +.
une indication de zone de temps.La question est donc de savoir ce qu'est une
chaîne date valide et ce qu'est une chaîne temps valide. Mais justement,
nous venons de voir ce qu'on entend par là dans les contrôles
LSInput('date')
et LSInput('time')
. Il s'agit
alors de joindre les deux en y insérant un 'T' ou un espace (' ') et d'y
ajouter la zone de temps. Très bien. Pour la zone de temps, un 'Z' indique
qu'on fait référence à une valeur UTC.
De cette spec, on déduit que 2012-08-01T18:00Z
indique la date
du 1 août 2012, 18h00 en valeur UTC. La partie qui serait dédiée aux
secondes n'est PAS prise ne compte par Vae Soli! sauf si vous
spécifiez vous-même le format valide (notez que le support de secondes peut
s'avérer différent de navigateur à navigateur).
<?php $oForm = new LSForm( 'frmDateTimeSample' ); // Création du formulaire $txtDateTime = new LSInput( 'datetime','txtDateTime' ); // Zone semaine ('datetime') $txtDateTime->szTooltip = "Choisissez la date et heure"; // Tooltip $txtDateTime->szValue = '2012-08-02T18:03Z'; // Positionnement de la valeur $lblDateTime = new LSLabel( 'lblDateTime',null,'Date et heure: ' );// Création d'un label $lblDateTime->szFor = $txtDateTime; // Le label est destiné à la zone txtWeek $oForm->AddObject( array( $lblDateTime,$txtDateTime ) ); // Ajout du label et de la zone 'file' au formulaire $szHTML = $oForm->Render(); // Rendu HTML du formulaire echo $szHTML; // echo ?>
Là également nous avons tenté de simplifier votre travail au cas où vous ne
souhaiteriez PAS vous charger de la zone de temps (time zone). Par exemple,
le format suivant est tout à fait permis :
YYYYMMDDHHmm[SS]
… où tout ce qui suit mm
est ignoré. Les formats possibles sont :
$txtDateTime->szValue = '2012-08-02T18:03Z'
$txtDateTime->szValue = '20120802'
$txtDateTime->szValue = '2012080218'
$txtDateTime->szValue = '201208021803'
$txtDateTime->szValue = '20120802180315'
$txtDateTime->szValue = '2012 08 02 18 03 15'
$txtDateTime->szValue = '2012-08-02 18:03:15'
Input | Opera | Chrome | Firefox | Safari | IE 9 |
---|---|---|---|---|---|
datetime |
Yes | No | No | Yes | No |
LSInput('week')
La partie la plus tricky du contrôle week
est le formatage approprié de sa valeur. La norme dit qu'une semaine est
formatée avec l'année en quatre chiffres, un tiret de séparation, le
caractère 'W' et le numéro de la semaine en deux chiffres. Par exemple, la
semaine du 30 juillet au 5 août 2012, soit la semaine 31 de l'année, sera
formatée comme suit : 2012-W31
.
Le contrôle LSInput('week')
est plus souple et il se chargera
de formater la valeur de la date de la bonne manière selon un ensemble
de possibilités plus naturelles. Les valeurs reconnues sont :
$txtWeek->szValue = 31;
$txtWeek->szValue = '31';
$txtWeek->szValue = 'W31';
$txtWeek->szValue = '2012-W31';
$txtWeek->szValue = '2012W31';
$txtWeek->szValue = '2012-31';
$txtWeek->szValue = '2012/31';
$txtWeek->szValue = '2012-W31';
<?php $oForm = new LSForm( 'frmWeekSample' ); // Création du formulaire $txtWeek = new LSInput( 'week','txtWeek','txtWeek' );// Zone semaine ('week') $txtWeek->szTooltip = "Choisissez la semaine"; // Tooltip $txtWeek->szValue = isset( $_POST['txtWeek'] ) ? // Positionnement de la valeur $_POST['txtWeek'] : date( 'Y' ) . '-W' . date( 'W' ); $lblWeek = new LSLabel( 'lblWeek',null,'Week: ' ); // Création d'un label $lblWeek->szFor = $txtWeek; // Le label est destiné à la zone txtWeek $oForm->AddObject( array( $lblWeek,$txtWeek) ); // Ajout du label et de la zone 'week' au formulaire $szHTML = $oForm->Render(); // Rendu HTML du formulaire echo $szHTML; // echo ?>
Ce qui donne :
<script type="text/javascript"> // <![CDATA[ //]]> </script> <form action="/samples.php" method="post" id="frmWeekSample"> <label id="lblWeek" for="txtWeek">Week: </label></form>
Input | Opera | Chrome | Firefox | Safari | IE 9 |
---|---|---|---|---|---|
week |
Yes | No | No | Yes | No |
LSInput('day')
<?php $oForm = new LSForm( 'frmDaySample' ); // Création du formulaire $txtDay = new LSInput( 'day','txtDay','txtDay' ); // Zone jour $txtDay->szTooltip = "Choisissez le jour"; // Tooltip $txtDay->szValue = isset( $_POST['txtDay'] ) ? // Positionnement de la valeur $_POST['txtDay'] : date( 'd' ); $lblDay = new LSLabel( 'lblDay',null,'Day: ' ); // Création d'un label $lblDay->szFor = $txtDay; // Le label est destiné à la zone txtDay $oForm->AddObject( array( $lblDay,$txtDay ) ); // Ajout du label et de la zone 'day' au formulaire $szHTML = $oForm->Render(); // Rendu HTML du formulaire echo $szHTML; // echo ?>
Ce qui génère le code suivant :
<script type="text/javascript"> // <![CDATA[ //]]> </script> <form action="/samples.php" method="post" id="frmDaySample"> <label id="lblDay" for="txtDay">Day: </label><select id="txtDay" name="txtDay" title="Choisissez le jour" tabindex="1"><option value="mo">Lundi</option> <option value="tu">Mardi</option> <option value="we">Mercredi</option> <option value="th">Jeudi</option> <option value="fr">Vendredi</option> <option value="sa">Samedi</option> <option value="su">Dimanche</option></select></form>
LSInput('month')
<?php $oForm = new LSForm( 'frmMonthSample' ); // Création du formulaire $txtMonth = new LSInput( 'Month','txtMonth','txtMonth' ); // Zone mois $txtMonth->szTooltip = "Choisissez le mois"; // Tooltip $txtMonth->szValue = isset( $_POST['txtMonth'] ) ? // Positionnement de la valeur $_POST['txtMonth'] : date( 'd' ); $lblMonth = new LSLabel( 'lblMonth',null,'Month: ' ); // Création d'un label $lblMonth->szFor = $txtMonth; // Le label est destiné à la zone txtMonth $oForm->AddObject( array( $lblMonth,$txtMonth ) ); // Ajout du label et de la zone 'Month' au formulaire $szHTML = $oForm->Render(); // Rendu HTML du formulaire echo $szHTML; // echo ?>
Ce qui génère le code suivant :
LSInput('file')
: nouveaux paramètres
accept
, et multiselect
sont les deux additions
les plus remarquables du contrôle :
<?php $oForm = new LSForm( 'frmFileSample' ); // Création du formulaire $txtFile = new LSInput( 'file','txtFile','txtFile' );// Zone fichier $txtFile->szTooltip = "Choisissez un ou des fichiers"; // Tooltip $txtFile->szValue = isset( $_POST['txtFile'] ) ? // Positionnement de la valeur $_POST['txtFile'] : ''; $txtFile->szAccept = "audio/*"; // Types de fichiers à accepter $txtFile->IsMultiSelect = true; // Acceptation de plusieurs fichiers $lblFile = new LSLabel( 'lblFile',null,'File: ' ); // Création d'un label $lblFile->szFor = $txtFile; // Le label est destiné à la zone txtFile $oForm->AddObject( array( $lblFile,$txtFile) ); // Ajout du label et de la zone 'file' au formulaire $szHTML = $oForm->Render(); // Rendu HTML du formulaire echo $szHTML; // echo ?>
Le rendu du formulaire donne :
<script type="text/javascript"> // <![CDATA[ //]]> </script> <form action="/samples.php" method="post" id="frmFileSample" enctype="multipart/form-data"> <label id="lblFile" for="txtFile">File: </label><input type="file" id="txtFile" name="txtFile" title="Choisissez un ou des fichiers" tabindex="1" accept="audio/*" /></form>
Input | Opera | Chrome | Firefox | Safari | IE 9 |
---|---|---|---|---|---|
file (multiple) |
Yes | Yes | Yes | Yes | No[6] |
LSInput
: de nouvelles additions en masse … un petit bémolLe support dans les navigateurs est encore très inégal (du moins à la date où nous écrivons ces lignes, cad le 02/08/2012 à 07:12:09). Il est donc important d'être prudent dans l'utilisation de ces nouveaux contrôles propres au HTML5. Sans surprise, c'est IE9 qui est le plus en retard. C'est dramatique parce que cela ralentit considérablement l'adoption des améliorations apportées par HTML5 à l'expérience utilisateur. Gageons qu'en changeant de navigateur (passage à Opera ou Chrome par exemple) de plus en plus d'internautes bénéficieront ainsi des bénéfices inédits de la dernière norme HTML.
LSForm
: new additions ! 2012-07-28Depuis l'opus "5.0.0005"
name
L'arrivée de HTML5 bouscule les habitudes que nous, développeurs, avions
prises, puis parfois abandonnées, au cours des années. Ainsi, nous
avions rénoncé à l'attribut name
sur un formulaire. Et bien,
nous avons dû le réintroduire. C'est chose faite avec la version 5.0.0005
de Vae Soli!
$oForm = new LSForm( 'frmMyForm' ); $oForm->szName = $oForm->szID;
autocomplete
L'attribut autocomplete
est un attribut énuméré du HTML5. Il
peut prendre deux valeurs :
on
off
D'après la spéc, cet attribut
peut très bien être complètement omis. Si indiqué et si off
, cet
attribut indique que toutes les zones includes dans le formulaire ont
leur propre attribut autocomplete
mis à off
.
$oForm = new LSForm( 'frmMyForm' ); $oForm->szName = $oForm->szID; $oForm->szAutocomplete = 'off';
novalidate
Si cet attribut est méntionné, alors le formulaire n'est pas validé.
$oForm = new LSForm( 'frmMyForm' ); $oForm->szName = $oForm->szID; $oForm->NoValidate = true;
target
Si cet attribut est méntionné et qu'il dispose d'une bonne valeur, soit
_blank
, _self
, _parent
, ou
_top
, alors il est positionné dans le formulaire.
$oForm = new LSForm( 'frmMyForm' ); $oForm->szName = $oForm->szID; $oForm->szTarget = '_self';
<?php $oForm = new LSForm( 'frmTimeSample' ); // Création du formulaire $txtTime = new LSInput( 'time','txtTime' ); // Création de la zone 'time' $txtTime->szValue = date( 'H:i' ); // Positionnement de la valeur (hh:mm) $txtTime->Min = date( 'H:00' ); // Minimum (doit être une heure valable) $txtTime->Max = sprintf( "%2d:00",(int) date( 'H' ) + 1 ); // Maximum (doit être une heure valable) $txtTime->Step = 300; // Incrément de 5 minutes (300 sec) $lblTime = new LSLabel( 'lblTime',null,'Time: ' ); // Création d'un label $oForm->AddObject( array( $lblTime,$txtTime ) ); // Ajout du label et de la zone 'time' au formulaire $szHTML = $oForm->Render(); // Rendu HTML du formulaire echo $szHTML; // echo ?>
[1] … La directive <FilesMatch> d'Apache tient compte des majuscules/minuscules par défaut.
[2] … Cette expression régulière n'est valable que pour des configurations Apache 2.x.
[3] … Supporté par émulation du contrôle dans Vae Soli! (pas de support natif en HTML5)
[4] … ... of course NOT! They're so behind!
[5] … Universal Time Coordinated
[6] … ... of course NOT! They're so behind!