API_formulaire

14.1 Personnalisation des formulaires : API Formulaires

14.1.1 Structure du code des formulaires

Le code est écrit en langage php, et contient les balises d’ouverture et fermeture < ?php et ?> en début et fin de fichier.

La ligne require_once("vmlib/VirtualFormV2.class.inc"); permet d’importer le fichier contenant la classe pour générer le formulaire.

Ensuite la classe subform est déclarée. Cette classe doit toujours porter le même nom afin d’être utilisée par GTF. Cette classe hérite de la classe VirtualFormafin de faire appel à ces fonctions.

Elle contient la fonction getHtmlForm qui permet de générer le formulaire. Elle nécessite deux paramètres, un tableau avec les valeurs permettant de remplir le formulaire et un objet de la classe BD permettant de faire une connexion à la base.

 

La fonction getHtmlForm permet de générer le formulaire.

Cette fonction récupère tout d’abord les valeurs envoyées au formulaire. Ensuite elle définit les valeurs par défaut des champs. Pour finir elle crée le formulaire. Pour créer le formulaire, elle l’initialise, puis définit chaque champ et enfin ferme le formulaire.

 

14.1.2 Fonctions disponibles

La classe HtmlForm permet de créer des formulaires html à partir de fonctions, détaillées ci-dessous :

 

  • Ajout de bouton : buttonField

Champ permettant d'ajouter un bouton.

$oForm->buttonField ("Rechercher","btn_search","parent.searchTable('".$this->sTable."')");

buttonField (libellé, identifiant du lien, javascript sur l'évènement onclick)

 

  • Ajout de champs caché : hiddenField

Champ permettant d'intégrer une valeur dans le formulaire sans l'afficher à l'utilisateur.

$oForm-> hiddenField ("ID", "object_id", $aValues['object_id']);

hiddenField (nom du champ, valeur du champ)

 

  • Ajout de champ Texte : textField

Champ permettant la saisie d'un texte court (une ligne).

$oForm-> textField ("Type", "type", $aValues['type'],30);

textField (libellé, nom du champ, valeur du champ, taille)

 

  • Ajout de champ texte cascade : cascadeTextField

Le champ cascadeTextField est un champ texte classique qui permet de mettre à jour un deuxième champ par rapport à la valeur saisie par l'utilisateur.

Dans l’exemple, ci-dessous, le champ texte permet de modifier la valeur d’un champ caché (hiddenField).
1 - Créer dans le formulaire (classe PHP) un champ caché et un champ texte.
Exemple :

$oForm->hiddenField ("name",$aValues['name']);

$oForm->textField ("Name","name_cascade",$aValues['name'],50);

 

2 - Transformer le premier champ texte en champ texte cascade. Pour cela vous devez ajouter un paramètre en plus :
cascadeTextField (libellé, identifiant, valeur, taille, code JavaScript);
Le code JavaScript est exécuté à chaque changement de valeur par un utilisateur.
Dans notre exemple ce code JavaScript doit remplir le champ caché.

Exemple :

Document.getElementByld(‘name’.value = document.getElementByld(‘name_cascade’).value ;

Ce qui donne :

$oForm->cascadeTextField(« Name », »name_cascade »,$aValues[‘name’],50, « document.getElementById(‘name’).value=document.getElementId(‘name_cascade’).value ») ;

 

  • Ajout de champ numérique : numberFiled

Champs permettant la saisie d’une valeur numérique

$oForm-> numberField ("Size", "size", 169,30);

numberField (libellé, nom du champ, valeur du champ, taille)

  • Ajout de champ entier : integerField

Champs permettant la saisie d’une valeur numérique

$oForm-> integerField ("Size", "size", 169,30);

integerField (libellé, nom du champ, valeur du champ, taille)

 

  • Ajout d’un champ de type liste : listField

Champ permettant la saisie d’une valeur numérique.

$oForm-> listField ("Type","type",$aValues['type'],1,$aType);

listField (libellé, nom du champ, valeur du champ, taille, tableau de valeurs)

Afin de valoriser le tableau de valeurs pour la lpiste, il faut utiliser la fonction « Array » :

$aType=Array("chemin"=>"Chemin", "route"=>"Route", "rue"=>"Rue");

 

  • Ajout d’un champ d’affichage de valeur : labelField

Champ permettant d’afficher une valeur.

$oForm-> labelField ("ID", "object_id", $aValues['object_id']);

labelField (libellé du champ, nom du champ, valeur du champ)

 

  • Ajout d’un bouton radio: radioField

Champ permettant la saisie d'une réponse par oui ou non (correspond généralement à un champ de type booléen).

$oForm-> radioField ("Circulation","circulation",$aValues['circulation'],$this->aListBool, true);

radioField (libellé, nom du champ, valeur, étiquettes (oui/non), valeur par défaut)

 

  • Ajout de plusieurs lignes de texte : areaField

Champ permettant la saisie de plusieurs lignes de texte.

$oForm-> areaField ("Description","description",$aValues['description'],10,100);

areaField (libellé, nom du champ, valeur du champ, hauteur, largueur)

 

  • Ajout d’une liste à plusieurs choix possibles : doubleListField

Le doubleListField permet à l'utilisateur de choisir plusieurs valeurs dans une liste.
Le doubleListField doit être accompagné d'un hiddenField qui va déclencher l'insertion des données dans la seconde table :

$oForm->hiddenField ("EXTERNAL_COMMUNE","insert2|pdesi|commune_esi|id_esi|id_com|".$sIdCommune);

hiddenField ("EXTERNAL_XXXXXX", "insert2|nom du schéma|nom de la premiere table d'insertion|nom de l'identifiant la table d'insertion|listes des identifiants de la table d'insertion séparés par une @")

 

$oForm-> doubleListField ("Liste des communes","commune", "commune2", "",10, Array($aCommunes, $aCommuneEsi), "", 200,"document.getElementById('commune')", "document.getElementById('commune2')","document.getElementById('EXTERNAL_COMMUNE')","''");

doubleListField (Libellé,nom de la premiere liste, nom de la deuxième liste, "",hauteur des listes, Array(Tableau PHP des valeurs de la première liste, Tableau PHP des valeurs de la deuxième liste), "", largeur des listes,"document.getElementById('nom de la premiere liste')", "document.getElementById('nom de la deuxième liste')","document.getElementById('EXTERNAL_XXXXXXX')","''")

 

 

  • Ajout de bouton submit : submitField

Permet d'ajouter un bouton submit.

$oForm-> submitField ("Créer","submit ");

submitField (libellé, identifiant du lien)

 

  • Ajout d’un champ liste en cascade : cascadeListField

Le champ cascadeListField est un champ liste classique qui permet de mettre à jour un deuxième champ par rapport à la valeur saisie par l'utilisateur.
Dans cet exemple le champ liste permet de modifier la valeur d’un champ caché (hiddenField).
1 - Créer dans le formulaire (classe PHP) un champ caché et un champ liste.
Exemple :

$oForm->hiddenField ("type",$aValues[type]);

$aType=Array("chemin"=>"Chemin", "route"=>"Route", "rue"=>"Rue");

$oForm->listField ("Type","type_cascade",$aValues[type],1, $aType);

2 - Transformer le premier champ liste en champ liste cascade. Pour cela vous devez ajouter un paramètre en plus :
cascadeListField (libellé, identifiant, valeur, taille, tableau de valeurs, code JavaScript);
Le code JavaScript est exécuté à chaque changement de valeur par un utilisateur.
Dans notre exemple ce code JavaScript doit remplir le champ caché.

Exemple :

document.getElementById(‘name’).value= document.getElementById(‘name_cascade’).value ;

 

Ce qui donne :

$oForm-> cascadeListField ("Type","type_cascade",$aValues[type],50,"document.getElementById(‘type).value = document.getElementById(‘type_cascade’).value") ;

 

  • Chargement de fichiers  : uploadField

Dans votre formulaire, ajouter un hiddenField et un uploadField permettant d'uploader des fichiers sur le serveur.

$oForm->champCache("EXTERNAL_UPLOAD","upload|document|sPathFile|arrete|upload_dir");
$oForm->champUpload ("Arrêté", "arrete", 50, $aValues['arrete'], "", "sPathFile");

hiddenField (nom du champ (EXTERNAL_UPLOADXXXX), "upload|document, zip ou image (restreint le type d'image)|identifiant du champ|nom de la table|nom de la properties")
uploadField (libellé, nom du champ, taille du champ, valeur par défaut, javascript sur l'évènement "onchange", identifiant du champ)

 

  • Saisie d’une date à partir d’un calendrier : CalendarField

Champ permettant de sélectionner une date à partir d'un calendrier.

$oForm-> calendarField ("Date  de renouv.(JJ/MM/AAAA)","date_renouv",$aValues['date_renouv'], 50);

champCalendrier(libellé, nom du champ, valeur, "value", taille);

 

Un quatrième paramètre peut être ajouté, il s'agit du format de la date.

 

  • Fonction permettant de retourner le formulaire : subFormEnd

Cette fonction permet de retourner le formulaire et doit être saisie à chaque fin de formulaire.

$oForm-> subFormEnd ();

 

  • Fonction Ajout d’un mot de passe : PasswordField

Champ permettant la saisie d'un mot de passe.

$oForm-> PasswordField ("Mot de passe", "password", $aValues['password'],30);

PasswordField (libellé, nom du champ, valeur du champ, taille)

 

 

  • Fonction Ajout d’un composant cartographique : OpenLayers2Field

Champ permettant d’afficher une carte Openlayers et de définir un périmètre d’extraction.

Les  géo services sont disponibles librement mais certains obligent l'obtention d'une clé pour pouvoir exploiter leurs services d'affichage de cartes.

 

 

API

Carte

Clé

documentation

IGN

WTS

nécessaire

http://api.ign.fr/tutoriel

OSM

OSM

Pas nécessaire

http://wiki.openstreetmap.org/wiki/Main_Page

Google

Google Maps

Pas nécessaire

 

Microsoft

Bing Maps

Nécessaire

http://www.microsoft.com/maps/create-a-bing-maps-key.aspx

 

 

$oForm-> Openlayers2Field($sTitle, $sName, $iWidth, $iHeight, $sProjection, $aLayers, $aExtent, $aTools, $aFeature);

OpenlayersField (libellé, nom du champ, largeur de la carte, hauteur de la carte, type de projection cartographique, tableau de paramètres des couches, tableau de paramètres de centrage, tableau de paramètres d’outils, tableau d’insertion de géométries).

 

Avec :

$sTitle = "Zone d'extraction personnalisée : ";

$sName = <"wktPolygon">

$iWidth = 600;

$iHeight = 400;

$sProjection = "EPSG:4326";

$sTitle : libellé.

$sName : nom du champ à remplir = nom du paramètre publié dans FME

$iWidth : largeur de la carte.

$iHeight : hauteur de la carte.

$sProjection : type de projection voulue (si l’api le supporte), ce champ est rempli automatiquement si il est vide ( $sProjection= "").Le code EPSG 4326 est le code du  système de coordonnées WGS84 utilisé par Google Maps. Le code EPSG 3857 équivalent au code 900913 utilisé par OpensStreetMap correspond à la projection sphéirque Mercator.

 

$aLayers = array (

"api"=> "wms",

"layers"=>"",

"bing-key"=>"",

"google-key"=>"",

"WmsName"=>"OpenLayers WMS",

"WmsService"=>" http://www.geosignal.org/cgi-bin/wmsmap?",

"WmsLayers"=>"Departements,RASTER1000K,RASTER500K,RASTER250K,RASTER100K,RASTER50K,RASTER25K,RASTER5K",

"IgnWmtsName"=>"Cartes IGN",

"IgnWmtsService"=>"http://gpp3-wxs.ign.fr/0hpyzqnax0fjrsej4ss266c7/wmts",

"IgnWmtsLayers"=>"ORTHOIMAGERY.ORTHOPHOTOS, GEOGRAPHICALGRIDSYSTEMS.CASSINI"

);

api : source de la carte (google, bing, wms, osm ou  ign-wmts), il est possible d’ajouter plusieurs api à la fois en les séparant par une virgule (exemple : "api"=>"google, bing, osm " ). Attention avec les  projections utilisées en cas de multiple api.

layers : couches à intégrer pour google osm et bing (Google Physical: gphy, Google Streets: gmap, Google Hybrid: ghyb, Google Satellite: gsat, Bing Road: broad, Bing Hybrid: bhyb, Bing Aerial: baer) ; il est possible d’ajouter plusieurs cartes à la fois en les séparant par une virgule (exemple : "layers"=>"gphy, gmap, ghyb, gsat" )

bing-key : clé d’utilisation bing (n’est utile que lorsqu’on utilise l’api bing).

google-key : clé d’utilisation google (n’est utile que lorsqu’on utilise l’api google).

WmsName : nom que l’utilisateur donne à la carte wms (n’est utile que lorsqu’on utilise l’api wms).

WmsService : Flux WMS (n’est utile que lorsqu’on utilise l’api wms).

WmsLayers : liste des couches (n’est utile que lorsqu’on utilise l’api wms).

IgnWmtsName : nom que l’utilisateur donne à la carte (n’est utile que lorsqu’on utilise l’api ign-wmts).

IgnWmtsService : Flux WMTS d’ign (n’est utile que lorsqu’on utilise l’api ign-wmts).

IgnWmtsLayers : liste des couches ign (n’est utile que lorsqu’on utilise l’api ign-wmts).

 

$aExtent = array (

"lon"=>3,

"lat"=>43,

"zoom"=>8,

"xminMaxExtent"=>50,

"yminMaxExtent"=>0,

"xmaxMaxExtent"=>50,

"ymaxMaxExtent"=>0

);

lon : longitude de centrage.

lat : latitude de centrage.

zoom : zoom de centrage (de 0 à 15 selon les cartes).

xminMaxExtent, yminMaxExtent, xmaxMaxExtent, ymaxMaxExtent : ces valeursdoivent être renseignées pour définir le niveau de zoom maximale de la carte.

 

Peut aussi être écrit sous la forme

$aExtent = array (

"xmin"=>3,

"xmax"=>43,

"ymin"=>28,

"ymax"=>57,

"xminMaxExtent"=>50,

"yminMaxExtent"=>0,

"xmaxMaxExtent"=>50,

"ymaxMaxExtent"=>0

 

);

 

 

 

 

$aTools = array (

"mc",

"ls",

"pt",

"ov",

"sb",

"sc",

"point",

"line",

"poly",

"multi",

"modify" ,

"del",

"delall"

);

$aTools : tableau d’outils : pour ne pas afficher certains outils, il suffit de ne pas les ajouter au tableau.

mc : (Mouse Coordonates), affiche les coordonnées en bas à droite de l’écran.

ls : (Layer Switcher), outil pour changer de couche à tout moment.

pt : (Projection type), affiche le système de projection utilisé en bas de l’écran.

ov : (Over view), outil pour afficher la fenêtre d’aperçu.

sb : (Scale bar), affiche l’outil de zoom à gauche de l’écran.

sc : (Scale), affiche l’échelle en bas à gauche de la carte.

point : permet de dessiner des points.

line : permet de dessiner des lignes.

poly : permet de dessiner des polygones.

multi : permet de dessiner plusieurs géométries.

modify : outil permettant de modifier certaines géométries.

del : outil permettant de supprimer certaines géométries.

delall : outil permettant de supprimer toutes les géométries.

 

$aFeature = array(

"type"=>"WKT",

"content"=>'GEOMETRYCOLLECTION(POLYGON((0.7031250000002 42.813720703125,3.1420898437502 42.462158203125,3.2080078125002 41.912841796875,0.5493164062502 40.5615234375,0.1757812500002 40.78125,0.7031250000002 42.813720703125)))'

);

$aFeature : tableau d’insertion de géométries, pour ne pas charger de géométries, laisser le tableau vide (attention de ne pas mélanger les systèmes de projection).

type : « WKT » ou « JSON ».

content : contenu à charger.

 

 

 

 

  • Ajout de palette graphique : graphicsPaletteField

Champ permettant de créer une palette graphique pour sélectionner une couleur.

$oForm-> graphicsPaletteField ("Couleur", "couleur", $aValues['password']);

graphicsPaletteField (libellé, nom du champ, valeur du champ)

 

  • Ajout de curseur : SliderField

Champ permettant de créer un slider pour sélectionner une valeur.

$oForm-> SliderField ("Zoom", "zoom", $aValues['password'],30, 0, 100);

SliderField (libellé, nom du champ, valeur du champ, taille, valeur min, valeur max)

  • Ajout de code html : FormContent

Permet de rajouter du code html dans le formulaire sous forme de texte.

$oForm->formContent.= "<div id='content'>Titre</div>";

 

  • Ajout de sélecteur de fichiers : treeviewField

Champ permettant de créer une arborescence de fichiers et dossiers.

$oForm-> SliderField ("Sélection de fichiers", "fileSelector", ‘C:/projets/gtf_files’,600, 300);

SliderField (libellé, nom du champ, Chemin racine, largeur, hauteur)