Est-ce que le Javascript fera l'affaire?

Bonsoir,

Je suis actuellement en stage dans une petite entreprise, et on m'a donné un petit travail à faire. J'ai peu d'expériences dans la programmation web, et je dois faire l'interface graphique d'une appli web qui va accueillir des flux de données.

J'aimerais faire une sorte de page personnalisable proposant des widgets avec une taille ré-ajustable, et un système de drag&drop, tout en gérant la collision avec entre les différents widget.

Est ce que le tout est faisable via Javascript d'après vous ? Tout ce que j'ai utilisé jusqu'à aujourd'hui était le HTML/CSS, et je ne connais pas la multitude de langages web qui peuvent exister aujourd'hui.

Merci d'avance! :)

Citation:

---

la multitude de langages web

---

Euh... côté navigateur, la multitude, ça se limite à JavaScript...

Ensuite, oui, ce que tu proposes est réalisable en JavaScript (avec quand même un peu d'AJAX pour la persistance des données), mais si tu es débutant, tu vas au casse gueule...

D'accord, c'est ce que je pensais, mais avec les modules python, ruby on rails et tout ça je pensais que peut-être on pouvait faire ce genre de truc.. C'est plus pour les templates ça je me trompe?

Comment ça avec de l'Ajax? Quelle partie?

Huuum .. j'ai de l'expérience en C, en python, et j'ai une bonne logique, et je n'ai pas besoin de donner un résultat très abouti, c'est un stage.. pensant que ce que je voulais faire étant faisable en Javascript j'ai commencé à apprendre ce langage ce matin, et j'ai déjà commencé à coder ma page, j'aurais peut-être besoin d'un peu d'aide mais je ne penses pas que ce soit insurmontable!

effectivement, si tu débutes en js, tu vas mettre des semaines avant d'avoir un truc correct je pense(surtout une fois que t'auras découvert le bonheur des non compatibilités de code entre navigateurs), perso je te conseillerai d'utiliser des librairies (genre jquery + jquery-ui) pour faire ce que tu veux, ça te facilitera la tâche même si en général c'est toujours mieux de d'abord apprendre le langage "pur" avant d'utiliser les librairies.

J'ai 2-3 semaines de stage. Ca devrait le faire..

Ouais surtout avec cet IE à la con..

Ca m'embête de commencer directement avec une librairie, on perd en performance. Ce que je veux faire ne risque pas de laguer si je le fais en jquery? Pour être plus productif ça peut être intéressant.. mais ça me dérangerai un peu, d'une question d'éthique.

Citation:

---

Envoyé par Knightdead

J'ai 2-3 semaines de stage. Ca devrait le faire..

Ouais surtout avec cet IE à la con..

Ca m'embête de commencer directement avec une librairie, on perd en performance. Ce que je veux faire ne risque pas de laguer si je le fais en jquery? Pour être plus productif ça peut être intéressant.. mais ça me dérangerai un peu, d'une question d'éthique.

---

En général ça lag plus souvent SANS librairie, surtout si tu débutes, car jQuery a pensé à tout. (tu dois être vachement calé pour faire mieux/aussi bien qu'eux).

C'est vrai que c'est qqes milliers de lignes de codes à initialiser mais avec les navigateurs actuels, ça prend une tellement petite fraction de seconde que ça ne ralenti en RIEN le chargement de ta page, le seul point qui puisse être génant niveau perfomance c'est le 70ko de jquery-ui sur le réseau si ta connexion est très très lente. (un vestige de 56kps ou une 3g dans le fin fond de la brousse).

Pour le "IE de merde", moi je trouve que les 2 de l'époque (IE vs MOZILLA[nescape]) ont fait autant les cons de chacun créer leurs normes dans leurs coins. Mais ce n'est que mon avis et ça reste une superbe source de trolls. ;)

L'utilisation d'une librairie comme jQuery diminue effectivement les perfs, mais cela n'a d'importance que pour les structures très lourdes. Mais pour un projet "normal", la différence est rarement perceptible.
D'autre part, Will a raison : si tu débutes, tu auras moins la logique optimale qu'en utilisant jQuery (que ce soit pour d'éventuels effets, de la gestion de drag and drop etc.)

Citation:

---

mais avec les modules python, ruby on rails et tout ça je pensais que peut-être on pouvait faire ce genre de truc..

---

Non, tous ces langages interviennent côté serveur, au niveau du navigateur, c'est JavaScript ou Flash.

Citation:

---

Comment ça avec de l'Ajax? Quelle partie?

---

Et bien si ta page est personnalisable, c'est logiquement pour retrouver sa personnalisation à chaque visite, tu auras donc besoin de stocker des informations et pour ça, l'idéal c'est AJAX.

Citation:

---

J'ai 2-3 semaines de stage. Ca devrait le faire..

---

Je ne voudrais pas être rabat-joie, mais je doute fortement que ça soit suffisant... Ceci dit, t'inquiètes pas, on est là pour aider ;)

Citation:

---

Envoyé par Bovino

L'utilisation d'une librairie comme jQuery diminue effectivement les perfs, mais cela n'a d'importance que pour les structures très lourdes. Mais pour un projet "normal", la différence est rarement perceptible.
D'autre part, Will a raison : si tu débutes, tu auras moins la logique optimale qu'en utilisant jQuery (que ce soit pour d'éventuels effets, de la gestion de drag and drop etc.)

---

D'accord, merci pour ces réponses, j'ai commencé à m'initer au jQuerry ce matin, c'est vrai que ça à l'air d'être un bon gain de temps .. Par contre j'ai un problème que j'avais avec le Javascript et que je retrouve avec le jQuerry que je posterais à la fin.

Citation:

---

Envoyé par Bovino

Non, tous ces langages interviennent côté serveur, au niveau du navigateur, c'est JavaScript ou Flash.

---

D'accord, je disais ça comme ça, j'ai aucune idée de ce que font ces modules.

Citation:

---

Envoyé par Bovino

Et bien si ta page est personnalisable, c'est logiquement pour retrouver sa personnalisation à chaque visite, tu auras donc besoin de stocker des informations et pour ça, l'idéal c'est AJAX.

---

J'aurais plutôt dis PHP+Mysql et Ajax pour les flux de données récupérés de façon asynchrone non? Je n'ai jamais fait d'Ajax mais je vois comment faire ce genre de truc en PHP ..

Merci vraiment pour l'aide que vous m'apportez.

Voilà alors mon problème (et je vais surement avoir l'air bête car je suis sur que c'est normal ..) est que j'ai 3 balises <div> dans mon code html, avec comme attribut la class "widget". J'aurais aimé récupérer dans une nodeList ces 3 balises, et les afficher pour vérifier si ça marche, j'ai donc fait cela:

Code:

---

1 2 3 4 5 6 7

var widgets = document.querySelectorAll('.widget');   for(i = 0; i < 3; i++) {   alert(widgets[i].innerHTML);   }

---

ou en jQuery:

Code:

---

1 2 3 4

for(i = 0; i < 3; i++) {   alert($('.widget')[i].innerHTML); }

---

Mais pour une raison qui m'échappe j'ai à chaque fois le contenu à partir de la div, jusqu'à la fin de <body>. C'est à dire les 3 divs dans le premier emplacement du tableau, 2 divs dans le deuxième et la dernière div dans le dernier, est-ce normal?

Citation:

---

Envoyé par Knightdead

ou en jQuery:

Code:

---

1 2 3 4

for(i = 0; i < 3; i++) {   alert($('.widget')[i].innerHTML); }

---

Mais pour une raison qui m'échappe j'ai à chaque fois le contenu à partir de la div, jusqu'à la fin de <body>. C'est à dire les 3 divs dans le premier emplacement du tableau, 2 divs dans le deuxième et la dernière div dans le dernier, est-ce normal?

---

Fermes-tu bien tes balises dans ton code HTML ?

Sinon pour ton code jQuery, il est correct mais n'utilise pas jQuery au maximum. Je te donne donc la version jQuery (pour te familiariser avec la librairie) :

Code:

---

1 2 3

$('.widget').each(function(){ alert($(this).html()); });

---

;)

J'aimerais bien avoir une explication rapide pour l'AJAX s'il vous plaît. :)

Citation:

---

Envoyé par Willpower

Fermes-tu bien tes balises dans ton code HTML ?

Sinon pour ton code jQuery, il est correct mais n'utilise pas jQuery au maximum. Je te donne donc la version jQuery (pour te familiariser avec la librairie) :

Code:

---

1 2 3

$('.widget').each(function(){ alert($(this).html()); });

---

;)

---

J'en suis au début du tuto sur jQuery, le each m'a l'air très pratique!
Et le this est 100% compatible avec les navigateurs sur jQuerry ? J'ai vu qu'en Javascript IE ne l'aimais pas..

Ok, autant pour moi, jEdit m'a fait une petite connerie, je ne sais pas quand, il m'a transformé toutes mes balises fermantes de paragraphe en </p non fermées .. Merci bien.

ajax, c'est simplement le nom qu'on donne au fait de modifier une partie de la page sans la recharger en entier.

en fait, c'est juste appeler (via javasript en général) une page sur notre serveur (php ou autre) soit pour lui envoyer des informations, soit pour les récupérer, dans ce dernier cas, la page (php ou autres) renverra des données sous une forme ou l'autre (txt, xml, json, etc...).

exemple pour envoyer simplement des données, dans ton javascript(jQuery) :

Code:

---

1 2 3

$.ajax({ url: "test.php?position=124" });

---

et coté serveur, tu auras créé une simple page "test.php" qui sauve en base de donnée la variable $_GET['position'].

;)

Et oui le "this" est "100%", c'est simplement l'objet appelant de la fonction.

Ouais, c'est bien ce que je pensais, pas besoin d'ajax pour récupérer les dimensions des div quand elles sont modifiées du coup, juste un petit coup de php nan?
Moi je m'occupe juste de la partie graphique, à priori je vais ne vais pas toucher aux data streams, au contenu de la page.

Est-il nécessaire d'entourer son jQuerry de:

Code:

---

1 2 3 4 5

$(function(){   //jQuerry ici   });

---

?

Euh... à partir du moment où tu peux modifier les dimensions d'un élément, je vois mal comment PHP peut agir :koi:

A moins que tu comptes recharger l'ensemble de ta page à chaque déplacement en t'arrangeant pour transmettre les nouvelles dimensions, mais alors, bonjour l'ergonomie !

Ouais .. pas faux, je vois comment Ajax peut servir maintenant, merci!

Une petite question intermédiaire: Avant de me mettre au jQuery j'ai commencé un bouton que je viens de finir, pour voir si j'arrivais à manipuler le CSS, au final je veux savoir si en Javascript c'est une bonne façon de bouger un bloc, où s'il y a plus court/performant:

Code:

---

1 2 3

<button onclick="document.getElementById('cafe').style.left= parseInt(getComputedStyle(document.getElementById('cafe'), null).left) +50 + '' + 'px';">---></button>

---

Citation:

---

Envoyé par Knightdead

Est-il nécessaire d'entourer son jQuerry de:

Code:

---

1 2 3 4 5

$(function(){   //jQuerry ici   });

---

?

---

Seulement ce qui doit s'exécuter au chargement de la page.
Tu peux définir des fonctions en dehors, et les appeler quand bon te semble.

(Personnellement, je préfère la syntaxe :

Code:

---

1 2 3 4 5

$(document).ready(function() {   // code au démarrage   });

---

qui est équivalente, mais à mon avis plus claire.)

Citation:

---

Envoyé par Knightdead

Une petite question intermédiaire: Avant de me mettre au jQuery j'ai commencé un bouton que je viens de finir, pour voir si j'arrivais à manipuler le CSS, au final je veux savoir si en Javascript c'est une bonne façon de bouger un bloc, où s'il y a plus court/performant:

Code:

---

1 2 3

<button onclick="document.getElementById('cafe').style.left= parseInt(getComputedStyle(document.getElementById('cafe'), null).left) +50 + '' + 'px';">---></button>

---

---

Guère, en tout cas pas qui soit gérée par tous les navigateurs. C'est entre autres pour ça qu'un framework comme jQuery ôte une belle épine du pied.

D'accord merci!

Une autre question, vaut-il mieux que j'utilise les évènements mouseup, mousedown et mousemove ou alors dragstart, dragend, etc... ?

Le système de drag de html5 me paraît plus efficace, déjà bien optimisé mais question compatibilité, est-il déjà bien ancré ?

Edit: Sinon j'ai refait mon bouton à l'aide de ce que je sais pour le moment sur jQuery, à vous de me dire si c'est bon/optimisable/mauvais :

Code:

---

1 2 3 4

<button onclick:"$('#cafe').css('left', function(){ return parseInt($(this).css('left')) + 50 + 'px' });">---></button>

---

Citation:

---

Envoyé par Knightdead

Est-il nécessaire d'entourer son jQuerry de:

Code:

---

1 2 3 4 5

$(function(){   //jQuerry ici   });

---

?

---

en général oui, c'est un diminutif de $.ready qui équivaut plus ou moins à window.onload ... ça attend donc que ta page soit chargée, car si tu places ton script en début de page, le code html qui suit ne sera pas encore chargé lors de son exécution et les selector ne trouveront pas tes éléments HTML. ;-)

je te propose de jeter un oeil à sencha
http://www.sencha.com/products/extjs/examples/

les widget sont nombreux homogène (tous batis sur le même principe)
rapides efficaces
ils s'intègre bien avec n'importequel langage coté serveur
supportent les échange Ajax en xml et json
supportent JSONP et DirectAPI

l'ensemble est batit sur un principre déclaratif. I.E. on donne un description de ce que l'on veut. (à l'opposé de Jquery par exemple qui lui est basé sur l'aspect fonctionnel on applique une fonction à des tag HTML)

A+JYT

Je n'ai pas fait gaffe à si c'était payant mais je ne vois pas l'intérêt si je n'ai rien à faire, et qu'au final le site ne soit pas modulable car on doit modifier des fichiers .js incompréhensibles codés par des pros ...

Je m'étais redirigés vers jQuerry UI ayant vu que ce plugin disposait du drag n drop et du resizable (j'aurais besoin des deux) mais ça buguait énormément, je ne savais pas comment changer les flèches de redimensionnement qui était moches, et je comprenais en allant fouiller dans les fichiers javascript..
J'ai donc décidé de me lancer, j'ai commencé le drag n drop, et à l'heure où j'arrête maintenant (car j'en ai marre de bosser..) j'ai quelques questions, et je vous donne mon code pour que vous le testiez, et voyez s'il est optimisable:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Prototype!</title> <link rel="stylesheet" href="prototype.css" /> <style> .widget { border: solid black 1px; width: 350px; height: 110px; text-align: center; position: absolute; padding: 0px 0px; }   #bloc1 { left: 100px; }   #cafe { top: 250px; left: 500px; }   #bloc3 { top: 500px; left: 200px; }   p { font-family: Tahoma; }   .dragging { background: #dcf;   }   </style> </head>   <body> <div id="posX"> <p></p> </div> <div id="posY"> <p></p> </div> <div class="widget" id="bloc1"> <p>Ceci est un bloc<br /> inutile, mais qui sert à son développeur. </p> </div>   <div class="widget" id="cafe"> <p>Ce widget permet de faire du café<br /> Essayez donc!<br /> <br /> <button onclick="alert('Vous avez fait un café.');"> Faire un café!</button><br /> </p> </div>   <div class="widget" id="bloc3"> <p>Il fallait un 3ème bloc, alors me voilà..<br /> *grognon* </p> </div>     <script src="http://ajax.googleapis.com /ajax/libs/jquery/1/jquery.min.js"></script> <script src="prototype.js"></script> <script> $(function(){   $('.widget').mousedown(function(oMouse){   var dragged = $(this);   $(this).addClass('dragging'); wPos = { x : $(this).offset().left, y : $(this).offset().top }; //Position du widget en absolu   $(document).mousemove(drag = function(nMouse){   $('#posX').text('X : '+nMouse.pageX); $('#posY').text('Y : '+nMouse.pageY);   var dPos = { x : (wPos.x + nMouse.pageX - oMouse.pageX), //Nouvelle y : (wPos.y + nMouse.pageY - oMouse.pageY) } //position du widget     if(dPos.x >= 0 &&*dPos.y >= 0 && (dPos.x + parseInt(dragged.css('width')) + 1) < screen.availWidth && (dPos.y + parseInt(dragged.css('height')) + 113) < screen.availHeight) { dragged.css('left', dPos.x); dragged.css('top', dPos.y);   }   });   });     $('.widget').mouseup(function(){   $(document).unbind('mousemove', drag); $(this).removeClass('dragging');   });   }); </script>   </body> </html>

---

J'ai mis une condition pour empêcher de sortir le bloc de l'écran et faire apparaître des ascenseur, cette condition est provisoire, je compte faire un truc plus propre en utilisant les dimensions de body ou html, je n'y ai pensé qu'après avoir mis cette connerie...

Mes questions sont:

1) Comment faire pour que le système de drag n drop continue de fonctionner quand notre curseur sort de l'écran pendant qu'on drag?

Je crois que j'en avais une autre mais j'ai zappé...
Bref désolé pour le post hyper long, je vous remercie d'avance si vous avez prit le temps de lire!

si tu as des question sur JQuery je te conseille de poster dans le forum JQuery


quant à sencha il existe deux licence une free (GPL) et une payante
avec sencha tu n'as pas rien à faire tu as à te concentrer sur ton application et non sur le codage de widgets.

A+JYT