WEBDEV - Afficher une image dans un champ de saisie

Je viens de visiter une site sympa ou le formulaire de contact m'a plu. J'ai donc décidé de le refaire en WEBDEV.

Objectif réaliser ceci :

Dans WEBDEV on commence par créer deux cellules. La première avec un fond blan uni et la seconde avec les paramètres suivants :

Ensuite il faut définir la couleur de CEL_Form et mettre l'image à droite :

Puis ajout des champs de saisie et pour chaque champ de saisie on créer un style au projet

et on place le code CSS :

dans chaque champ de saisie on aura le code css suivant :

background-image: url(c-icons.png);

background-repeat: no-repeat;

padding-left: 20px;

border: 1px solid #BFBFBF;

puis pour chaque champ on ajoutera un code css spécifique :

Nom : background-position: 3px 4px;

Email : background-position: 3px -15px;

Site web : background-position: 3px -37px;

sujet : background-position: 3px -57px;

cette ligne idique quelle partie de l'image il faut afficher dans le champ, car on fait référence qu'a une seule image c-icons.png :

C'est presque fini. Il reste le champ de saisie pour le messge. Pour celui-ci on aura qu'une ligne CSS à mettre :
border: 1px solid #BFBFBF;

Et pour le bouton le style CSS sera le suivant :

color: white;

background: #2E6DA3;

border: none;

On pourrait presque se passer du code CSS et mettre le tout dans les ongles texte et fond su style.

ATTENTION : les modifications de style CSS ne seront visible qu'en exécution...

comment géolocaliser une adresse et la centrer avec WEBDEV (Google Maps v3) ?

Voici une petit code javascript qui s'utilise avec le code déjà publier dans le billet suivant "WEBDEV 15 - Google maps v3" .

Dans la collection de procédure : pGestionCartes ajouté la procédure suivante :

function RechercheCoordonneesDepuisAdresse(sAdresse, sNomFonction)

{

// On a récupéré le nom de la fonction sous forme de chaîne, donc on récupère maintenant le pointeur sur cette fonction

var objFonction = eval(sNomFonction);

//alert(objFonction);

var geo = new google.maps.Geocoder();

geo.geocode({'address': sAdresse},objFonction);

}

sNomfonction est une fonction WLangage navigateur local à la page par exemple. Voici un exemple de fonction :

function LocalRetourRecherche(res,stat) /

{

var coordonnee = null;

if (stat == google.maps.GeocoderStatus.OK){

gObjCarte.setCenter(res[0].geometry.location);

var coordonnee = res[0].geometry.location;

//Pour le debuguage de lappli

var marke = new google.maps.Marker({position: coordonnee, map: gObjCarte, title: "adress" });

}else {

alert("Geocode was not successful for the following reason: " + stat);

}

}

Les deux paramètres (res et stat) sont passés automatiquement par la méthode geo.geocode.

WEBDEV 15 - Google maps V3

Pour afficher une carte Google maps v3 dans un site WEBDEV, je me suis inspiré de l'exemple WW_Cartes de la LST 72.

Pour passer en v3 des APIs google maps, il faut bien évidement consulter la doc :

http://code.google.com/intl/fr-FR/apis/maps/documentation/javascript/introduction.html

A partir de cette introduction et de la doc des API (http://code.google.com/intl/fr-FR/apis/maps/documentation/javascript/reference.html) on peut commencer dans WEBDEV.

Dans l'onglet avancé de la description de la page mettre :

Dans cette page, mettre un champ libellé HTML et dans le code d'initialisation de ce dernier mettre le code suivant :

Ce code permet d'afficher la carte sur tous les navigateurs. Sans ce code sous chrome la carte prends tout le navigateur.

Ensuite dans le code Onload de la page mettre le code :

gObjCarte est un entier

CreerCarte("CARTE", 0,180)

La variable gObjCarte est utilisée dans plusieurs fonction de manipulation de la carte elle est donc déclarer en global navigateur.

Pour une facilité d’utilisation et de réutilisation création d’une collection de procédure dans les procédures globales navigateur

Nom de la collection : pGestionCartes

La procédure est écrite en javascript. Il faut donc cliquer sur WL après création de la procédure

Création de la carte :

// Résumé : Création de la carte google map

// Syntaxe :

//CreeCarte ()

//

// Paramètres :

// sNomChampCarte : Nom du champ HTML (..alias ou id défini dans DIV)

// nlat : latitude du centre de la carte

// nlong : longitude du centre de la carte

// Valeur de retour :

// Aucune

//

function CreerCarte(sNomChampCarte,nlat,nlong)

{

if (nlat==0){

nlat = 48.856558;

};

if (nlong==0){

nlong = 2.350966;

};

// Création de la carte

var latlng = new google.maps.LatLng(nlat, nlong);

var myOptions = {

mapTypeControl: true,zoom: 5, center: latlng, mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},navigationControl: true,mapTypeId: google.maps.MapTypeId.ROADMAP

}

// création de la carte

gObjCarte = new google.maps.Map(document.getElementById(sNomChampCarte),myOptions);

}