Présentation d'un projet de gestionnaire de fenêtres en javascript.

Version imprimable

22/08/2008, 12h03
Raph76

Présentation d'un projet de gestionnaire de fenêtres en javascript.

Bonjour à vous.

Après quelques mois de travail, je peux enfin publier le projet sur lequel j'ai beaucoup travaillé: un gestionnaire de fenêtres en javascript.
Celui-ci est gratuit (licence LGPL) et open-source.

Afin de le présenter en action, j'ai crée un mini-site dont voici l'adresse: www.xyndow.net.

J'espère ne pas enfreindre les règles de ce forum en postant l'adresse de mon site ici-même.
Si je viens vous présenter mon travail de cette manière, ce n'est pas seulement pour rendre publique mon travail, c'est aussi pour remercier toute cette communauté.
En effet, c'est par vos tutoriels, vos cours, ainsi qu'aux nombreux scripts que j'ai pu trouver ici ou sur d'autres sites, que j'ai pu créer ce logiciel.

Pour cela, je vous remercie tous infiniment.

Une dernière chose:
Pour l'instant, le logiciel en est à sa version 0.3.0
Je rendrais son code source publique (bien qu'il le soit techniquement déjà pour qui sait manipuler le code source d'un site...) dès le passage à la version 1.0.0. Ne vous étonnez donc pas de ne pas trouver de lien 'téléchargement'.
Pour l'instant, le logiciel mérite encore beaucoup de travail avant d'être réellement utilisable en production. C'est pour cela que je ne le distribue pas encore. Et c'est pourquoi également je compte beaucoup sur vos remarques pour l'améliorer encore, résoudre quelques problème de compatibilité, et d'autres détails.

Seulement voilà, il est grand temps pour moi de me frotter aux personnes qui seront susceptible de l'utiliser.

Merci d'avance pour vos commentaires, qu'ils s'agissent d'encouragements, d'idées ou de critiques.

Bonne fin de journée à vous...
25/08/2008, 11h12
Raph76

Hum, vue le peu d'échos obtenus ici, et après découverte du forum 'Contribuez', pourrais-je demander à un modérateur de déplacer ce sujet dans le forum adequat?
Merci d'avance...
25/08/2008, 13h57
Auteur

surprenant 8O et bravo pour ce travail :bravo:

Seul petit bémol : c'est long à charger. Pourquoi ?
25/08/2008, 14h12
kaymak

Un travail monstre !
Mais pour emporter plus de succès il faudrait que tu relookes tout cela !
Car là ce n'est pas sexy à souhait, et par expérience (de développeur très mauvais en design), présenter un projet légèrement bancal au niveau technique mais très joli et agréable à utiliser aura toujours plus de succès qu'un projet techniquement nickel mais horriblement moche.
Les joies des décideurs.

a plus
25/08/2008, 14h33
SpaceFrog

Joli travail en effet.
Je n'aime pas le chargement visible des fichiers ... mais je suppose que ce n'est que pour la démo ...

connais tu prototype window ???
http://dcabasson.developpez.com/arti...ototype-1.4.0/

Que penses tu apporter de plus ?
25/08/2008, 15h01
Raph76

Auteur> qu'est-ce qui, pour toi, est long à charger?
Le chargement initial?
Si c'est le cas, cela vient de la taille des fichiers: le "logiciel" complet fait plus de 300 Ko ! Et même s'il ne charge pas tout au début, il doit bien y en avoir une grosse moitié de mis en mémoire.

Kaymak> Je te l'accorde, moi aussi et le design, çà fait deux...:roll:
Si tu parles plus précisément du mini-site mis en place pour présenter le logiciel, alors je dois avouer être allé vite et ne pas m'être foulé dessus.
Je voulais juste de quoi mettre en ligne le logiciel et le présenter.

SpaceFrog> Pour le chargement des fichiers, effectivement, c'est une question de gout.
Perso, je trouvais plus sympa de montrer pourquoi il fallait attendre avant que l'interface n'apparaisse, mais je note l'idée de mettre cela en option dans les prochaines versions.

Par rapport à prototype, j'aurais pu me baser dessus, mais j'avoue très mal connaitre cette bibliothèque.
De ce que j'en connais, celle-ci est plus généraliste alors que mon logiciel ne cherche qu'à gérer des fenêtres, mais à le faire au maximum de ce que peut permettre le javascript.
D'ailleurs, les deux ne sont pas incompatibles et il devrait être possible de faire tourner prototype en même temps que Xyndow.

J'en profite d'avoir un modo sous la main: pas de soucis pour le forum?:oops:
25/08/2008, 15h14
SpaceFrog

non je ne parle pas de prototype masi de prototype window qui est dédiée aux fenetres ...

sinon le 76 c'est pour le département ?
25/08/2008, 15h43
le_chomeur

ce n'est que mon avis, mais un peu lourd . . .
de plus qqs bugs subsistent :

lors du click sur la version 0.3.0 la fenètre s'ouvre et si je click au niveau des redimensionnement => "message d'erreur" => veuillez activer javascript ^^
25/08/2008, 17h01
Raph76

Spacefrog> Je ne connaissais même pas prototype window, si tu as un lien...
Le lien que tu m'as doné précédemment pointait seulement vers une doc sur prototype.

Pour le numéro, oui, c'est mon département. D'habitude, je n'aime pas mettre de chiffre dans mes pseudo, mais là, 'Raph' tout court était déjà pris...:aie:

Le_chomeur> Effectivement, le logiciel est assez lourd.
Cependant, ca rentre dans la catégories des inconvénients qui ne me genaient pas à condition que les avantages soient superieurs.
C'est d'ailleur cette lourdeur qui m'a poussé à mettre au point le chargeur de fichier que spacefrog trouve un peu trop voyant.

Au passage, je rappel que le logiciel n'a pas vraiment pour but d'équiper un simple site, mais plus une application en ligne, et dans ce cas, je pense que la lourdeur pose moins de probleme.

EDIT: pour ce qui est du bug que tu as remarqué, ca n'en est pas vraiment un. ("it's not a bug, it's a feature!":mouarf:)
Le texte "javascript est indispensable, etc..." est le contenu de base du body du site.
Ensuite, la fonction de déplacement des fenetres 'cache' automatiquement toutes les iframes lorsqu'elle les déplace, de manière à éviter un scintillement ganaralisé et quelques plantages de gestion des évenements. Ensuite, dès que le bouton de la sourie est relaché, les iframes sont de nouveau affichées.
25/08/2008, 17h25
kaymak

De mon point de vu, effectivement cela me parait un peu long à charger, mais je comprend tout à fait pourquoi.
Maintenant tu peux surement améliorer la chose comme l'ont fait avant YAHOO avec sa biblio YUI.
Ils ont agit sur différents points :
- Générer des fichiers le moins lourd possible sans commentaires ni retours à la ligne ect (d'ailleurs pour cela tu peux utiliser leur app YUI Compressor)
- Ils ont générer des fichiers de bibliothèques, si tu as trois fichiers distincts qui ont à peu près le même domaine de gestion, tu les fusionnent dans un plus gros fichiers. A toi de voir ce qui est le plus efficace par rapport à ton app.
- Ils ont créé une classe pour charger CSS + js en dynamique avec gestion de versionning sur les modules JS. Très pratique tu peux l'extend pour faire pleeeiiinn de trucs super sympa ;)

Après je pense que tu aurais dû utiliser une bibliothèque existante car Javascript est tellement peu homogène d'un browser à l'autre que cela permet d'avoir première couche de travail bien plane.
Et par dessus tu aurais pu/du avoir ton manager de fenêtre.
C'est ce que je suis entrain de faire pour une appli, qui va reprendre l'explorateur mac.
Et perso je ne serait jamais arriver à 10% de ce que j'ai réalisé avec YUI.

a plus
25/08/2008, 19h29
Raph76

Le chargeur permet déjà de charger JS et CSS dynamiquement (et même les images).
Et il y'a bien entendu déjà un gestionnaire de fenêtre accessible via F12 (mais ca marche pas tout le temps à cause de certains probleme de focus avec les iframe. Mais quand on utilise le logiciel seulement avec Ajax, alors le probleme ne se pose pas et le gestionnaire est toujours accessible.)

Cependant, il y'a surement pas mal de choses à faire pour alléger le chargement. Notamment, arrêter de mettre presque chaque méthode dans un fichier à part... C'est bien pour structurer le dév, mais j'avoue que ca devient un peu lourd en prod!:oops:

Sinon, pour les bibliothèques de fonction, j'avais effectivement hésité à utiliser prototype, mais comme j'aime bien tout faire moi-même (j'en profite pour apprendre, comme çà), je n'ai pas encore sauté le pas. Mais ca pourrait se faire dans une version future, à condition que j'y trouve un réel intérêt vue que maintenant, la plupart des choses fonctionnent déjà bien comme çà.
A voir...
25/08/2008, 21h40
SpaceFrog

Arf :oops: en effet je me perds entre tous ces frames works librairies prototypes ...

voici le bon :

http://prototype-window.xilinus.com/
25/08/2008, 21h53
Raph76

"google est mon ami"!;)
J'ai fini par trouver par moi-même...

Je n'avais jamais entendu parlé de ce framework et je suis donc forcément assez impressionné.
Je dirait que Xyndow est évidemment moins beau (quoi que cela puisse être amélioré et que j'ai pas mal d'idée pour la suite surtout au niveau animations), mais qu'il apporte tout de même quelques plus:
- une persistance des fenêtres au fil de la navigation (au prix, c'est vrai, de certains inconvénients).
- un système de réduction des fenêtres dans le bas de l'écran.
- un gestionnaire de fenêtres.
- une centralisation des définitions de fenêtres permettant de réellement bâtir son site sur le logiciel.
- une appellation d'origine contrôlée française (vous permettez que je fasse le chant du coq?).
25/08/2008, 23h33
SpaceFrog

pour certaines des fonctionalités avancées l'autre le fait aussi ..

Mais pour le chant du coq ...
respects !
26/08/2008, 10h45
Auteur

Citation:

Envoyé par Raph76

Auteur> qu'est-ce qui, pour toi, est long à charger?
Le chargement initial?
Si c'est le cas, cela vient de la taille des fichiers: le "logiciel" complet fait plus de 300 Ko ! Et même s'il ne charge pas tout au début, il doit bien y en avoir une grosse moitié de mis en mémoire.

Déjà la page d'accueil est longue à charger (une fois dans le cache c'est plus rapide). D'ailleurs ça bloque FF un court instant.

Ensuite lorsque je clique sur l'une des versions (j'ai testé la version 0.2.0), là le chargement est "assez" long : 10 secondes au moins pour un débit de 1Mo (ma connexion). Sinon pour la suite pas de souci.

Le déplacement et le redimensionnement des div est quelque chose qui me surprend toujours :lol: (sans doute parce que je n'ai jamais su implémenter un truc pareil :aie:).
26/08/2008, 10h59
DoubleU

Meme avis que les autres: du bon boulot mais trop lourd a charger et l'interface trop vilaine.

Perso, déja quand j'ai du attendre plus de 10s pour charger l'interface, j'ai hésité à fermer l'onglet. J'ai laissé faire par curiosité, mais si ton objectif c'est que ta bibliothèque soit diffusée et utilisée, faut que tu fasses quelque chose à ce niveau la. Si je cherche un window manager et que je vois qu'il faut 10s pour charger le tien, moi je ne vais pas plus loin, je ferme direct.

Concernant l'interface, même si t'es pas graphiste, faut que tu fasses quelque chose la, parce que quand je la vois, j'ai l'impression de faire un bon en arriere de 10 ans. Ca fait vraiment pas web 2.0 et rien que pour ca, ta librairie risque de ne pas etre utilisée.

Et ca serait domage parce qu'au niveau du fonctionnement, ca a de la gueule.
26/08/2008, 11h40
Raph76

Spacefrog> j'espere au moins que ce n'est pas la persistance des fenêtres, car il me semblait justement que c'était LE gros avantage de mon logiciel...

Auteur & DoubleU> Je l'admet, j'ai du travail pour alléger le chargement...
Je m'ocuperais de çà pour la prochaine version.
Ceci dit, le gros chargement se fait en double, sur le site de test.
Et oui, une fois pour le site en lui-même, et une autre fois pour le mini-site de test (qui recharge la version correspondante), ce qui explique le sentiment de lourdeur.

DoubleU> Je te l'accorde, je ne fait pas de miracle en graphisme, mais n'ayant aucune compétence dans ce domaine, je ne vois pas trop comment améliorer la chose.

je le redis , mais je ne veux vraiment pas te décourager ...

bof bof bof :oops:

un exemple pour auteur , très bien commenté pour le drag d'objet :)

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>classe d'élement déplaçable</title>
<style type="text/css">
.boiteBleu{
background-color:#C1D8E8;
width:300px;
height:300px;
}
.boiterouge{
background-color:red;
width:150px;
height:150px;
}
.drag{
border:2px dashed #F1CEC5;
cursor:move;
}
</style>
<script type="text/javascript">
/*script permettant de rendre déplaçable
les éléments qui ont la classe définit
en paramètre
*/
var classMove = "drag";
var myObjectClick = null;
var movable = false;
var positionXAtClick = null;
var positionYAtClick = null;
var positionXMyobjectClick = null;
var positionYMyobjectClick = null;
//Fonction permettant d'initialiser les listeners
function init_evenement(){
//On commence par affecter une fonction à chaque évènement de la souris
if(window.attachEvent){
document.onmousedown = start;
document.onmousemove = drag;
document.onmouseup = drop;
}
else{
document.addEventListener("mousedown",start, false);
document.addEventListener("mousemove",drag, false);
document.addEventListener("mouseup",drop, false);
}
}
//Fonction permettant de récupèrer l'objet sur lequel on a clické, et l'on récupère sa classe
function start(e){
//On initialise l'évènement s'il n'a aps été créé ( sous ie )
if(!e){
e = window.event;
}
//Détection de l'élément sur lequel on a clické
monElement = (e.target)? e.target:e.srcElement;
if(monElement)
{
//On appel la fonction permettant de récupèrer la classe de l'objet et assigner les variables
getClassDrag(monElement);
if(myObjectClick){
positionXAtClick = e.clientX;
positionYAtClick = e.clientY;
positionXMyobjectClick = parseInt(myObjectClick.offsetLeft);
positionYMyobjectClick = parseInt(myObjectClick.offsetTop);
return false;
}
}
}
function drag(e){
//On initialise l'évènement s'il n'a aps été créé ( sous ie )
if(!e){
e = window.event;
}
//Si l'objet est déplaçable et qu'il existe
if(movable && myObjectClick){
myObjectClick.style.position = "absolute" ;
//On récupère la position de la souris par rapport à l'objet
myObjectClick.style.left = e.clientX + ( positionXMyobjectClick - positionXAtClick ) + "px";
myObjectClick.style.top = e.clientY + ( positionYMyobjectClick - positionYAtClick ) + "px";
return false;
}
}
function drop(){
myObjectClick = null;
movable = false;
positionXAtClick = null;
positionYAtClick = null;
positionXMyobjectClick = null;
positionYMyobjectClick = null;
}
function getClassDrag(myObject){
with(myObject){
var x = className;
listeClass = x.split(" ");
//On parcours le tableau pour voir si l'objet est déplaçable
for(var i = 0 ; i < listeClass.length ; i++){
if(listeClass[i] == classMove){
movable = true;
myObjectClick = myObject;
}
}
}
}
window.onload = init_evenement;
</script>
</head>
<body>
<div class="boiteBleu drag"></div>
<div class="boiterouge drag"></div>
<div class="drag">et avec du contenu</div>
<div class="boiteBleu"></div>
<input type="text" class="drag" style="width:300px" />
</body>
</html>

juste gestion du drag and drop , a peine quelques ko , loin de moi l'idée de vouloir dénigrer ton travail raph au contraire , je ne saurais que t'encourager, mais essaye d'une part de travailler de façon plus ouverte ( montre tes sources expliques les etc :) )
allèges les également 8O8O8O

mais bon , bravo pour le travail effectué ;)

26/08/2008, 11h55
kaymak

Ou tu peux le faire comme sa http://developer.yahoo.com/yui/examp...dd-region.html

C'est plus lourd mais y'à plus qu'à faire sa propre logique et ne plus se prendre la tête avec les particularité de js + dom.