fond page
Logo blog
Rech

Ico  ACCUEIL
Ico  A PROPOS DE L'AUTEUR
Ico  CONTACT
Ico 
JavaScript

Ico 
mooTools

Ico 
PHP

Ico  DERNIERS PARUS
Ico
Ico
Ico
Ico
Ico
Ico  DERNIERS COMMENTÉS
Ico  LES PLUS APPRÉCIÉS
Ico
Ico
Ico

Dernières parutions

> Intégration Google Map
Date  02/05/2011   Comms  Aucun commentaire   J'aime  7 visiteurs aiment  
Le but de cet article est d'expliquer comment intégrer un plan GoogleMap© dans une page web et manipuler le plan, changer dynamiquement le positionnement, le zoom, les marqueurs, ajouter des bulles d'informations, etc...Intégrer un plan dans une page web est relativement aisé, le code fourni par le site maps.google.fr via le bouton « Lien » permet d'intégrer un iframe contenant le plan positionné comme souhaité. Manipuler ce plan via JavaScript et l'API de GoogleMap n'est pas plus compliquée pour quelqu'un qui maîtrise un peu le langage de script. La méthode par contre diffère, dans ce cas, on ne passe pas par un iframe mais par un div qui va contenir à terme le plan.Pour commencer, il faut intégrer l'API à la page web dans la section head de la page :<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>Ensuite, dans la section body de la page, il faut définir le div qui recevra le plan :<div id="divMap" style="width: 800px; height: 400px;"></div>Enfin, dans la section head de la page, il faut coder l'implémentation dans le div de l'objet GoogleMap, à déclencher une fois la page entièrement chargée, pour être sûr que le div cible soit bien présent au moment de l'exécution du script. Pour ceci, 2 possibilités, plus simplement pour les utilisateurs de la bibliothèque mooTools dans l'évênement domready de l'objet windows, ou en JS pur, en codant la fonction d'implémentation et en l'appelant dans l'évênement onload du body comme ceci :<head><script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script><script type="text/javascript">function initMap() { var mapLatlng =new google.maps.LatLng(-34.397,150.644); var mapOptions = { zoom:8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("divMap"), mapOptions); }</script></head><bodyonload="initMap()">function initMap() {    var mapLatlng =new google.maps.LatLng(-34.397,150.644);    var mapOptions = { zoom:8, center: latlng, mapTypeId:                                  google.maps.MapTypeId.ROADMAP };    var map = new google.maps.Map(document.getElementById("divMap"),                                                    mapOptions); }Voilà qui est fait, notre div contient le plan GoogleMap et l'utilisateur peut le manipuler.Une possibilité simple et intéressante si l'on veut mémoriser le plan dans une base de données par exemple, c'est de récupérer les propriétés de l'objet map, tel que les coordonnées de la position, le niveau du zoom ou encore le type d'affichage :alert("Zoom = " map.getZoom());alert("Latitude = " map.getCenter().lat());alert("Longitude = " map.getCenter().lng());alert("Type d'affichage = " map.getMapTypeId());Pour ajouter au plan des marqueurs, il faut utiliser l'objet Marker fournit par l'API GoogleMap :var marker = new google.maps.Marker({ position: map.getCenter(), // Position du marqueur via l'objet LatLng draggable: true, // Marqueur déplaçable par l'utilisateur map: map, // Objet map recevant le marqueur title: "Mon marqueur"});On peut ajouter autant de marqueurs que l'on souhaite sur le plan, on peut aussi utiliser sa propre ressource graphique pour le marqueur (propriétés "icon" et "shadow" de l'objet Marker.On peut aussi tout simplement coder des évênements au sein du plan, en utilisant la méthode addListener de cette manière :google.maps.event.addListener(map, 'click', function(event) { marker.setPosition(event.latLng);});Dans l'exemple ci-dessus, on code l'évenement click rattaché à l'objet map (click sur la map) et on demande au marker de se positionner à la latitude / longitude correspondant à la position de la souris, via l'objet event.Dernier point développé dans cet article, l'ajout d'une fenêtre d'information. L'API met à disposition un objet InfoWindow qui permet l'affichage de bulles d'information sur le plan. Nous allons instancier cet objet avec un texte de notre choix, et l'afficher lorsque l'utilisateur clique sur le marqueur créé précédemment :var infowindow =new google.maps.InfoWindow({ content: "Texte de mon choix"});google.maps.event.addListener(marker,'click',function(){ infowindow.open(map,marker);});Voilà donc notre bulle d'information apparaîtra lorsque l'utilisateur cliquera sur le marqueur. Le contenu de la fenêtre d'information est dans notre exemple simplifiée à l'extrême, mais l'objet permet la spécification via des id d'éléments de présentation comme un titre, une icône...Pour conclure, on peut dire que l'objet fourni par l'API GoogleMap est très simple d'utilisation tout en étant extrêmement permissif au niveau des fonctionnalités. Pour aller plus loin : Tutoriaux & documentation GoogleMap
> Glissière pour choix d'une valeur numérique
Date  11/03/2011   Comms  Aucun commentaire   J'aime  8 visiteurs aiment  
Voici une classe mooTools permettant de sélectionner une valeur numérique à partir d'une glissière. Son utilisation est très simple, il suffit d'inclure le script JS, et instancier via javascript dans l'évênement window.domready la classe en lui passant en paramètre l'élément du formulaire (de type input) ainsi que les options de la glissière :window.addEvent('domready', function() { var maGlissiere = new MooSlider($('moninput'), { valMin: 0, valMax: 100 });});Coté HTML, très simplement :<form> <input type="text" id="moninput" name="moninput" value="50" /></form>L'input text sera automatiquement masqué, la glissière ajouté automatiquement, et l'input text aura sa valeur (value) synchronisée avec la glissière graphique. Télécharger le script
> mooTools v1.3 : Nouveautés
Date  24/02/2011   Comms  Aucun commentaire   J'aime  11 visiteurs aiment  
Le framework JavaScript mooTools version 1.3 est désormais distribué en lieu et place de la version 1.2.5... Qu'est-ce que cela change niveau programmation ? Voici un petit récapitulatif des grands changements à opérer sur les programmes basés sur la 1.2.x.Core$chk(value) => (value != null)$A(item) => Array.from(item) // Note: Array.from does not always return a new array but just ensures that the return value is an array.$splat => Array.from$clear => use the native clearTimeout when using fn.delay, use clearInterval when using fn.periodical.$defined => (value != null)$each => use Array.each for arrays, Object.each for objects$empty => No replacement, use function(){}$extend(source, extended) => Object.append(source, extended)$merge(a, b) => Object.merge({}, a, b)$mixin(a, b) => Object.merge(a, b)$lambda => Function.from$random => Number.random$time => Date.now$type => typeOf // Note: returns a string 'null' on empty objects as opposed to "false" in 1.2$unlink => Array.clone or Object.clone$arguments => No replacementNative => Type (see Core.js)Array.type / String.type / Number.type / … => Type.isArray / Type.isString / Type.isNumber / …Hash and $H were deprecated and moved from Core to More. Use plain objects instead of Hash. You can find methods to manipulate objects on Object. You can find all 1.2 functionality of Hash in MooTools More 1.3.BrowserEngine detection was changed in favor of user-agent detection. Browser.Engine was deprecated and according properties on the Browser object were added:Browser.Engine.trident => Browser.ieBrowser.Engine.gecko => Browser.firefoxBrowser.Engine.webkit => Browser.safari or Browser.chromeBrowser.Engine.presto => Browser.operaBrowser.Platform.ipod => Browser.Platform.ios$exec => Browser.execArray$pick => Array.pick or [a, b, c].pick()Array.extend => Array.appendFunction$try => Function.attemptmyFn.run(args, bind) => myFn.apply(bind, Array.from(args));myFn.create => Use the according functions like .pass, .bind, .delay, .periodicalmyFn.bindWithEvent => deprecatedmyFn.bind(this, [arg1, arg2, arg3]) => myFn.bind(this, arg1, arg2, arg3) OR myFn.pass([arg1, arg2, arg3], this)Elementelement.injectInside, .injectBefore, .injectAfter, .injectBottom, .injectTop => element.inject(context, where); // where = inside, bottom, …element.grabTop, … => element.grab(context, where) // see aboveelement.hasChild(item) => element.contains(item) && item != element$$ now only accepts a single selector, an array or arguments of elementsSelectors.Pseudo => Slick.definePseudo(name, fn)Source : github.com/mootools - Pour aller plus loin...
> Maintenir une session PHP active via Request
Date  08/11/2010   Comms  Aucun commentaire   J'aime  15 visiteurs aiment  
Une astuce très simple et efficace pour maintenir une session PHP (session_start) via l'objet Request de mooTools (inclure la bibliothèque mootools) consiste à faire appel au programme PHP dans lequel le session_start() est effectué avec une variable post qui permettra de quitter juste après l'ouverture de session. Il ne reste donc plus qu'à appeler régulièrement le Request, durée en fonction de la durée de vie de la session.Voici le code Javascript :window.addEvent('domready', function() { // Request temporisée pour empecher la session d'expirer (function() { new Request({ url: 'page.php?keepalive=1', method: 'post' }).send(); }).periodical(600000);});Ensuite en entête du programme PHP on trouvera le code suivant :session_start();if ($keepalive) die("");De cette façon le session_start() sera appelé toutes les 600 secondes, empêchant la session d'expirer tant que l'utilisateur reste sur la page PHP.
> Génération d'une bannière texte
Date  08/09/2010   Comms  Aucun commentaire   J'aime  16 visiteurs aiment  
Le code suivant permet la génération d'un fichier de type PNG à fond transparent contenant un texte blanc détouré de noir.Tout d'abord, on crée l'image en mémoire. Pour gérer la transparence, il faut utiliser la fonction imagecreatetruecolor() qui va gérer le canal alpha (transparence) : $imgtmp = imagecreatetruecolor(740, 50); imagecolortransparent($imgtmp, imagecolorallocate($imgtmp, 0, 0, 0)); imagealphablending($imgtmp, false); imagesavealpha($imgtmp, true);Ensuite on définit quelques variables qui seront utilisées dans les divers appels aux fonctions de création de graphique à partir de texte : $fontName = './fonts/OldTypefaces.ttf'; $fontSize = 30; $texte = 'Texte de la bannière';Ensuite, on génère à l'aide de la fonction imagettftext() l'ombrage de la police avec une couleur sombre, en faisant appel 4 fois à la fonction pour les 4 coordonnées qui nous intéresse, c'est à dire aux positions [x-1, y-1], [x 1, y-1], [x-1, y 1] et [x 1, y 1]. A noter que pour chaque appel on désactivera l'antialiasing en passant l'identifiant de couleur en négatif, sinon le fait de passer l'antialiasing plusieurs fois aura l'effet inverse et aura un rendu horrible au final. Voici le code : $couleur = imagecolorallocate($imgtmp, 64, 64, 64); imagettftext($imgtmp, $fontSize, 0, 21, 35, -$couleur, $fontName, $texte); imagettftext($imgtmp, $fontSize, 0, 23, 35, -$couleur, $fontName, $texte); imagettftext($imgtmp, $fontSize, 0, 22, 34, -$couleur, $fontName, $texte); imagettftext($imgtmp, $fontSize, 0, 22, 36, -$couleur, $fontName, $texte); Enfin, on génère le texte en blanc à la position [x, y], en laissant bien l'identifiant de la couleur en positif pour que l'antialiasing fasse son travail : $couleur = imagecolorallocate($imgtmp, 236, 236, 236); imagettftext($imgtmp, $fontSize, 0, 22, 35, $couleur, $fontName, $texte); Finalement, on enregistre le fichier PNG et on libère la mémoire : imagepng($imgtmp, "images/banniere.png"); imagedestroy($imgtmp);En espérant que cela puisse être utile, vu le temps que j'ai passé à essayer de faire fonctionner de manière correcte l'antialiasing !
> ComboxBox de choix d'images
Date  29/06/2010   Comms  Aucun commentaire   J'aime  27 visiteurs aiment  
Voici une classe mooTools permettant de choisir une image contenue dans un dossier sur le serveur PHP.La classe génère à droite de l'input un bouton qui permet d'ouvrir un popup contenant une liste de fichiers images, ainsi que, s'il y en a, les dossiers qui seront cliquables pour en afficher le contenu. Les fichiers et dossiers présentés disposent d'une icône permettant de les identifier comme tel.Un aperçu de l'image s'affiche au survol de la souris sur le nom du fichier. La sélection du fichier rapatrie dans le champ input la valeur du fichier ainsi que, selon l'option définie lors de l'instanciation de la classe, le chemin relatif au fichier choisi.UtilisationL'utilisation de la classe se fait en instanciant la classe avec comme paramètre un élément input de type text :var elt = $('monelement');new MooImgCombo(elt, [{ options }]);Attention à bien redéfinir la variable repICScript dans le script avec le dossier qui contient le script.Les options possibles sont :fullpath: Booléen indiquant si le champ input récupère non seulement le nom du fichier mais aussi le chemin relatif.repImages: Chaine désignant le répertoire contenant les images et/ou dossiers à afficher dans la liste déroulante.L'utilisation de ce script nécessite que la bibliothèque mooTools soit chargé ainsi que le fichier mooImgCombo.js et l'instanciation de la classe doit se faire dans l'évênement domready de l'objet window.C'est dans un programme PHP que la liste des fichiers est constituée et récupérée par un Request via JavaScript. Attention à ce qu'il y ait bien les droits en lecture sur le dossier désigné (au moins 0700 pour www-data).Téléchargement mooImgCombo.zip (15 ko)L'archive contient la classe (fichier mooImgCombo.js), le programme PHP (mooImgCombo.php) et des fichiers graphiques nécessaires à l'affichage de la liste déroulante (Icônes, image d'attente chargement aperçu, image du bouton de la combobox).
> ComboBox pour envoi de fichiers
Date  25/06/2010   Comms  Aucun commentaire   J'aime  17 visiteurs aiment  
Voici une classe mooTools permettant de relooker un input de type file.L'astuce reprise pour que cela fonctionne est celle de masquer le champ de type file dans un div qui sert de bouton pour déclencher la recherche du fichier. Une fois la sélection du fichier faite, le champ de type file est à jour et en cas de soumission du formulaire le fichier sera transmit à un programme php action du form. La classe est très simple, elle permettra de personnaliser à son gré l'aspect d'un champ de type file, chose impossible à ma connaissance en conservant l'objet de base.UtilisationL'utilisation de la classe se fait en instanciant la classe avec comme paramètre un élément input de type file :var elt = $('monelement');new MooUpCombo(elt);Attention à bien redéfinir la variable repUCScript dans le script avec le dossier qui contient le script.L'utilisation de ce script nécessite que la bibliothèque mooTools soit chargé ainsi que le fichier mooUpCombo.js et l'instanciation de la classe doit se faire dans l'évênement domready de l'objet window.Téléchargement mooUpCombo.zip (1.41ko)L'archive contient la classe (fichier mooUpCombo.js) et un fichier graphique (bull_down.png) pour le bouton qui permet de lancer la recherche du fichier à envoyer sur le poste client.