CFGRID : Personnaliser les boutons

Si vous sous utilisez la version anglophone de CFMX7, les boutons d'action liés à CFGRID seront plus que certainements proposés dans la langue de Shakespeare. De plus, il sont positionnés juste en dessous de la grille. Et lorsque votre page fait appel à de multiples composants CFFORMS, ce n'est pas toujours la place idéale. Bref, comment modifier leur libellé et choisir leur position dans la page ?

En supprimant les boutons du CFgrid au profit de deux boutons standards auxquels on associe de l'actionScript :

<cfinput type="button" name="ins" value="Ajouter"
onClick="GridData.insertRow(nomDuCFgrid);">
<cfinput type="button" name="del" value="Supprimer"
onClick="GridData.deleteRow(nomDuCFgrid)">

Flash Forms et CSS

Les flash forms, c'est bien. Mais dans la bonne couleur, c'est mieux. Ceux qui utilisent une couleur de fond particulière sur leur site souhaiteront certainement adapter de leurs CFFORMS. Pour ce faire, utilisez du CSS 1 ou 2 dans l'argument Style, c'est très simple et très bien documenté sur le site de Macromedia (cf. Livedocs).

Voici un exemple avec une fermerture du navigateur (du javaScript exécuté par une commande actionScript) :

<cfform action="index.cfm" method="post" preloader="yes" width="320" height="116" format="flash" skin="haloorange" style="background-color:##F0E0BE;">
<cfinput type="text" name="login" size="20" label="Login : ">
<cfinput type="password" name="password" size="20" label="Password : ">
<cfformgroup type="horizontal">
<cfinput type="submit" name="valider" value="Valider">
<cfinput type="reset" name="Reset" value="Reset">
<cfinput type="button" name="Fermer" value="Fermer" onclick="getURL(""javascript:self.close();"");">
</cfformgroup>

Flash forms : Alerte et apostrophe

Cet exemple affiche une alerte lorsque qu'une case n'est pas cochée. Notez que la répétition des guillemets règle uniquement le problème de l'apostrophe. Sinon, elle est inutile.

<cfform format="flash" onSubmit="if(!charte.selected ){ alert(""Vous DEVEZ être d'accord !""); return false; }">
<cfinput type="checkbox" name="charte" label="Êtes-vous d'accord ?" required="true" value="1">
<cfinput type="submit" name="valider" value="Valider">
</cfform>

A utiliser pour confirmer la lecture d'un règlement par exemple.

CFFORM type="flash" et alertes

Voici une question récurente sur les forums. Créer une alerte sur un bouton issu d'un formulaire de type Flash. Voici deux manières de procéder, la première en utilisant une fonction javaScript, la seconde en utilisant de l'actionScript.

Javascript :

<cfform format="flash">
<cfinput type="Button" name="test" value="Cliquez-moi"
onclick="getURL('JavaScript:alert(\'Bonjour\')');">
</cfform>

ActionScript :

<cfform format="flash">
<cfinput type="Button" name="test" value="Cliquez-moi"
onclick="alert('Bonjour','Message...',OK)" />
</cfform>

Sur le plan esthétique, la deuxième version est bien plus cohérente.

CFFORM, confirmation par alerte

L'utilisateur supprime une ligne d'un CFGRID (flash) et vous souhaitez lui demander une confirmation pour cette suppression ? A votre avis, que faudrait-il rajouter à ceci pour que ce code fonctionne correctement ?

<cfform format="flash">
<cfinput type="Button" name="test" value="Cliquez-moi"
onclick="if (alert('Vous allez bien ?','Entre nous...',YESNO) == NO) {resultat.text = 'Oui, super !'} else {resultat.text = 'Non, désolé...'}" />
<cfinput name="resultat" type="text">
</cfform>

Réponse : Rien. Coldfusion MX7 n'intègre pas de listener. Il est donc impossible de récupérer la valeur du bouton cliqué dans le popup. Inutile de chercher plus loin pour la version FLASH.

Accordéon : Dans les deux sens

Reprenons l'exemple précédent et ajoutons une fonctionnalité pour obtenir un CFFORMGROUP type="accordion" ne pouvant être parcouru qu'en suivant la suite logique des pages (ou niveaux si vous préférez). Mais cette fois avec une navigation possible dans les deux sens.

Cela nous donne...

<cfform name="test" format="Flash">
<cfformgroup type="accordion" visible="yes" enabled="yes" id="a1" onchange="for(var i=a1.selectedIndex+1; i<4 ; i++){a1.getHeaderAt(i).enabled=false;}">

<cfformgroup type="PAGE" label="Etape 1">
<cfformitem type="text"> Texte 1 </cfformitem>
<cfinput type="button" name="suivant0" value="Etape suivante..." onClick="a1.selectedIndex=a1.selectedIndex+1;a1.getHeaderAt(0).enabled=false;a1.getHeaderAt(1).enabled=true">
</cfformgroup>

<cfformgroup type="PAGE" label="Etape 2">
<cfformitem type="text"> Texte 2 </cfformitem>
<cfinput type="button" name="retour1" value="Retour" onClick="a1.selectedIndex=a1.selectedIndex-1;a1.getHeaderAt(0).enabled=true">
<cfinput type="button" name="suivant1" value="Etape suivante..." onClick="a1.selectedIndex=a1.selectedIndex+1;a1.getHeaderAt(1).enabled=false;a1.getHeaderAt(2).enabled=true">
</cfformgroup>

<cfformgroup type="PAGE" label="Etape 3">
<cfformitem type="text"> Texte 3 </cfformitem>
<cfinput type="button" name="retour2" value="Retour" onClick="a1.selectedIndex=a1.selectedIndex-1;a1.getHeaderAt(1).enabled=true">
<cfinput type="button" name="suivant2" value="Etape suivante..." onClick="a1.selectedIndex=a1.selectedIndex+1;a1.getHeaderAt(2).enabled=false;a1.getHeaderAt(3).enabled=true">
</cfformgroup>

<cfformgroup type="PAGE" label="Etape 4">
<cfformitem type="text"> Texte 4 </cfformitem>
<cfinput type="button" name="retour3" value="Retour" onClick="a1.selectedIndex=a1.selectedIndex-1;a1.getHeaderAt(2).enabled=true">
</cfformgroup>
</cfformgroup>
</cfform>

N'oubliez pas la boucle qui se trouve dans l'attribut "onChange" du CFFORM.

Accordéon : Dans un seul sens !

Cette nouveauté de CFMX7 est fort intéressante mais ne permet pas, de prime abord, de désactiver les niveaux inférieurs et supérieurs de la section visualisée. Pour ce faire, vous devez vous fendre de quelques précisions en ActionScript.

Voici la syntaxe :

<cfform name="test" format="Flash">
<cfformgroup type="accordion" visible="yes" enabled="yes" id="a1" onchange="for(var i=a1.selectedIndex+1; i<4 ; i++){a1.getHeaderAt(i).enabled=false;}">

<cfformgroup type="PAGE" label="Etape 1">
<cfformitem type="text"> Texte 1 </cfformitem>
<cfinput type="Button" name="bouton1" value="Etape suivante..." onclick="a1.getHeaderAt(1).enabled=true;a1.selectedIndex=1;a1.getHeaderAt(0).enabled=false">
</cfformgroup>

<cfformgroup type="PAGE" label="Etape 2">
<cfformitem type="text"> Texte 2 </cfformitem>
<cfinput type="Button" name="bouton2" value="Etape suivante..." onclick="a1.getHeaderAt(2).enabled=true;a1.selectedIndex=2;a1.getHeaderAt(1).enabled=false">
</cfformgroup>

<cfformgroup type="PAGE" label="Etape 3">
<cfformitem type="text"> Texte 3 </cfformitem>
<cfinput type="Button" name="bouton3" value="Etape suivante..." onclick="a1.getHeaderAt(3).enabled=true;a1.selectedIndex=3;a1.getHeaderAt(2).enabled=false">
</cfformgroup>

<cfformgroup type="PAGE" label="Etape 4">
<cfformitem type="text"> Texte 4 </cfformitem>
</cfformgroup>
</cfformgroup>
</cfform>

Et voilà ! Malheureusement, cette méthode ne peut pas être utilisée pour une présentation sous forme d'onglets.

Rapports dynamiques

La création de rapports ou de listes dynamiques devient un jeu d'enfant ! Cette dernière version offrant tous les outils nécessaires à leur conception. Deux formats de sortie cohabitent en toute simplicité, Flash Paper et PDF. L'appel de ces fonctions est simplissime et Report Builder (qui s'apparente à un Crystal Report Light) est offert avec le produit. Globalement, voici à quoi cela ressemble :

Si vous avez créé un rapport à l'aide du Report Builder...

<cfreport template="[path relatif vers le fichier .cfr]"
format="pdf" query="[requete]"></cfreport>

Si vous voulez imprimer une page web (dynamique ou non)...

<cfhttp url="[Votre url]" charset="iso-8859-1"> </cfhttp>
<cfdocument format="PDF" backgroundvisible="yes"
overwrite="no" fontembed="yes">#cfhttp.filecontent#</cfdocument>

Facile non ?

Pour mémoire, j'ai remarqué que CFDOCUMENT dans un iFrame génère une erreur Javascript lorsque l'on retourne vers une page complexe de type CFGRID + toute une série de CFINPUT.
Cas de figure assez rare il en convient.

Pour terminer, notons que l'association de CFHTTP et de CFDOCUMENT ne vous offrira pas la possibilité de créer une module d'impression de sites Web. Pour autant que cela serve à quelque chose bien entendu. Car bien qu'il comprenne l'HTML4.1 , le XHTML 1.0, le CSS1.0 et le CSS2.0, on se retrouve dans la plupart des cas avec un document offrant le texte sans mise en forme.