webleads-tracker

Création d'un champ sous Drupal 7

Création des widgets

Un widget est un ensemble de composants (champ de formulaire, image, javascript) permettant de donner une valeur à notre champ.
Dans notre cas nous allons créer deux widgets :

Déclaration des widgets à Drupal

Il est nécessaire de déclarer les différents widgets disponibles à Drupal.
Pour cela nous allons utiliser le hook hook_field_widget_info.
Ajouter ce code à votre fichier fieldmap.module :

                                         


Les clefs du tableau sont les noms des widgets.
Le paramètre label Permet de définir le texte qui apparaîtra dans l"interface de gestion des champs.
Le paramètre field types permet de définir le champ auquel s'attache ce widget.


Écriture des widgets

Ecrire des widgets revient à créer les render arrays englobant les éléments de formulaire du champ.
Pour cela Drupal met à notre disposition le hook hook_field_widget_form

Ajoutez ce code à votre fichier fieldmap.module :


/**
 * Implements hook_field_widget_form().
 */
function fieldmap_field_widget_form(&$form, &$form_state, $field, $instance, $langcode, $items, $delta, $element) {

  // Récupération des valeurs des champs dans le cas ou l'on édite.
  $latitude_value = isset($items[$delta]["latitude"]) ? $items[$delta]["latitude"] : "";
  $longitude_value = isset($items[$delta]["longitude"]) ? $items[$delta]["longitude"] : "";
  
  $widget=array();

  // Gestion des deux differents type de widgets
  switch ($instance["widget"]["type"]) {
    // Création du render array du widget Map
    case "map_widget_map":
      // Création des champs textes
      $widget+=array("#type"=>"fieldset","#title"=>t("Coordonnées"));
      $widget["longitude"]=array("#type"=>"textfield","#title"=>"Longitude","#attributes"=>array("id"=>"longitude"),"#default_value"=>$longitude_value); 
      $widget["latitude"]=array("#type"=>"textfield","#title"=>"Latitude","#attributes"=>array("id"=>"latitude"),"#default_value"=>$latitude_value);      
      // Ajout d'un champ caché permettant de centrer la map sur la ville choisie
      $widget["ville"]=array("#type"=>"hidden","#attributes"=>array("id"=>"ville"),"#default_value"=>$field["settings"]["ville"]);      
      // Creation de la div contenant la map et ajout du Javascript permettant de l'afficher
      $widget["map"]= array(
        "#markup" => "<div id='carte' style='width:400px;height:400px;border:1px solid black'></div>",
        "#attached" => array(         
          // Ajout du javascript google map et de notre javascript d'initialisation de la carte
          "js" => array("http://maps.google.com/maps/api/js?sensor=false",
                         drupal_get_path("module", "fieldmap") . "/mapedit.js"),
        ),
      );
      break;

    // Création du render array widget text
    case "map_widget_text":
      $widget["longitude"]= array(
        "#type" => "textfield",
        "#default_value" => $longitude_value ,
        "#size" => 7,
        "#maxlength" => 7,
      );
      $widget["latitude"]= array(
        "#type" => "textfield",
        "#default_value" => $latitude_value,
        "#size" => 7,
        "#maxlength" => 7,
      );      
      break;   
  }

  $element += $widget;
  return $element;  
}

Création du fichier Javascript

Créez le fichier mapedit.js dans le répertoire /sites/all/modules/fieldmap et copiez/collez ce code :


jQuery(document).ready(function($) {
     
    // On centre la carte par rapport a la ville sectionnée par defaut
    if(jQuery("#ville").val()=="Lyon") {
      var latlng = new google.maps.LatLng(45.75985868785574, 4.84222412109375);
    } else {  
      var latlng = new google.maps.LatLng(48.85929404028656, 2.3486709594726562);
    }
    //objet contenant des propriétés avec des identificateurs prédéfinis dans Google Maps permettant
    //de définir des options d'affichage de notre carte
    var options = {
            center: latlng,
            zoom: 19,
            mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    //constructeur de la carte qui prend en paramètre le conteneur HTML
    //dans lequel la carte doit s'afficher et les options
    var carte = new google.maps.Map(document.getElementById("carte"), options);	
    
    google.maps.event.addListener(carte, "click", function (event) {
        jQuery("#latitude").val(event.latLng.lat());
        jQuery("#longitude").val(event.latLng.lng());
    });		
});