PROGRESS BAR WIDGET

Commentaire de XtremDuke le 01/02/2008 10:10:52

C'est clean et bien implémenté. Y'a presque rien à dire.

Cependant, j'ai deux remarques :
- Tu as voulu te passer d'images pour créer tes controles. C'est bien et tu y es arrivé. Mais est-ce vraiment judicieux ? 9 calques pour créer un cluster... je ne suis pas fan de cette approche même si, il est vrai, celà permet de moduler la taille du controle à sa convenance.

- Tu repetes x fois pratiquement la même chose pour créer tes clusters et tes bordures. Pourrais-tu pas réduire celà à une seule et même fonction ?

Et en passant, vive prototype !   ^^'

Commentaire de Nix le 01/02/2008 11:20:04 administrateur CS

Pour info : J'ai dézippé et rezippé ton zip et c'est passé. (Cela ne passait pas avec le zip d'origine)
Avec quoi avais-tu compressé ce zip ? (Qu'on regarde pourquoi cela ne fonctionnait pas)

Commentaire de Nix le 01/02/2008 12:17:57 administrateur CS

Ok merci pour l'info, on va regarder ce qui n'est pas conforme dans ces zip

Commentaire de stefane321 le 03/06/2008 22:01:35

De mon coté ce script ne fonctionne pas avec Internet Explorer mais fonctionne avec Firefox.

Pourquoi sa marche pas avec Internet Explorer?

Merci!

Commentaire de stefane321 le 04/06/2008 13:23:20

J'ai internet explorer 7, donc je dois avoir fait une erreur en tranférant le code dans ma page mais cest étrange que firefox l'exécute

Commentaire de stefane321 le 04/06/2008 14:10:03

Dans mon fichier header.php j'ai mis:

<!--PROGESS BAR -->

<!--
/**
* @comment: Les css qui determine la taille des progress bar
* @import: progressBar
*/
-->
<link rel="stylesheet"
    href="../css/progressBar.css"
    type="text/css"/>
    
<!-- JavaScript -->

<!--
/**
* @comment: The prototype frameworks 1.6
* @import: prototype
*/
-->
<script
    src="../lib/prototype.js"
    type="text/javascript">
</script>

<!--
/**
* @comment: the ProgressBar class
* @import: ProgressBar
*/
-->
<script
    src="../lib/ProgressBar.js"
    type="text/javascript">
</script>

<!--
/**
* @comment: the progress bar tests
*/
-->
<script type="text/javascript">
//Instancie les barres de progression
progressBar1 = null;
progressBar2 = null;
progressBar3 = null;
function start(){
// Barre par défault en style indeterminé ( comme celle d'XP )
new ProgressBar( $("container"), {classProgressBar: 'progressBar1'} );


}

function updateProgressBar1( delta ){
progressBar1.setSelection( progressBar1.getSelection() + delta );
$("minimum").value= progressBar1.getMinimum();
$("selection").value= progressBar1.getSelection();
$("maximum").value= progressBar1.getMaximum();
}

function updateMinimum( ){
if( isNaN( $("minimum").value ) ){
$("minimum").value = progressBar1.getMinimum();
}else{
progressBar1.setMinimum( parseInt( $("minimum").value ) );
}
}

function updateSelection( ){
if( isNaN( $("selection").value ) ){
$("selection").value = progressBar1.getSelection();
}else{
progressBar1.setSelection( parseInt( $("selection").value ) );
}
}

function updateMaximum( ){
if( isNaN( $("maximum").value ) ){
$("maximum").value = progressBar1.getMaximum();
}else{
progressBar1.setMaximum( parseInt( $("maximum").value ) );
}
}

function startUpdateProgressBar2Selection(){
progressBar2.setSelection( ( progressBar2.getSelection() + 1 ) % progressBar2.getMaximum() );
setTimeout(startUpdateProgressBar2Selection, 200);
}

function startUpdateProgressBar3Selection(){
if( progressBar3.getSelection() == 0 )
progressBar3.setSelection( progressBar3.getMaximum() );
else
progressBar3.setSelection( progressBar3.getSelection() - 1  );
setTimeout(startUpdateProgressBar3Selection, 200);
}

function startUpdateProgressBar4Selection(){
progressBar4.setSelection( ( progressBar4.getSelection() + 1 ) % progressBar4.getMaximum() );
setTimeout(startUpdateProgressBar4Selection, 100);
}


function startUpdateProgressBar5Selection(){
if( progressBar5.getSelection() == 0 )
progressBar5.setSelection( progressBar5.getMaximum() );
else
progressBar5.setSelection( progressBar5.getSelection() - 1  );
setTimeout(startUpdateProgressBar5Selection, 200);
}

</script>
<!--PROGESS BAR -->

Dans mon formulaire j'ai mis:

<table width="600" border="0" cellspacing="4" cellpadding="4">
<tr>
<td align="center"><div id="container" align="center"></div></td>
</tr>
<tr>
<td align="center"><input type="submit" name="submit" value="Envoyer" class="submit" onclick="start()"></td>
</tr>
</table>

Dans le fichier css jai mis le positionnement à: relative

Commentaire de stefane321 le 06/06/2008 22:24:24

Je ne suis pas certains de comprendre complètement.

Je fais exécuter le code comment?

Par un appel dans le tag body ou dans le submit de mon formulaire?

Commentaire de stefane321 le 10/06/2008 02:04:41

Maintenant, sa fonctionne sous Internet Explorer mais ne fonctionne plus avec FireFox

Deplus,le positionnement ne marche plus.

La barre s'affiche en haut a gauche

Commentaire de the_wwt le 11/06/2008 17:02:40

Je crois que tu trouveras ton bonheur dans ce petit exemple,
bonne fin de stage, :-P
Pierrick

Commentaire de the_wwt le 11/06/2008 18:23:16

Bonjour,
le style css définit seulement la taille et la position de la barre de progression.
Sinon tout ce passe par les options que tu fournit au constructeur.

Pour ton problème, je crois que c'est bien plus compliqué que tu ne l'imagines.
Si tu veux faire évoluer la barre de progression en fonction de l'avancement de l'upload, il faut que ton serveur web te dise où c'est qu'il en est de la reception.
Et tout ceci bien sur en ajax pour pour voir l'afficher chez le client.

Un exemple serait:
// Tu crée ta barre de progression en style determiné dans le onsubmit:
var progressBar = null;
$("myForm").onsubmit = function(){
     progressBar = new ProgressBar( $("container"), {classProgressBar: 'progressBar', style: ProgressBar.DETERMINATE, selection: 0} );

     // Tu appels ton serveur
     appelServer();
}

// La fonction qui appel ton serveur:
function appelServer(){
new Ajax.Request(url, { onSuccess: updateProgressBar } );
}

// Ton serveur te renvoie une page contenant uniquement un chiffre entre 0 et 100 ( pour faire simple ), donc quand tu récupères ta réponse dans la fonction updateProgressBar:
function updateProgressBar( transport ){
   progressBar.setSelection( parseInt( transport.responseText ) );
}

Le fait de pouvoir montrer à l'utilisateur où en est l'avancement est très intéressant, mais ça demande un effort certains d'implémentation.
Quand j'aurai le temps (moi aussi j'ai un rapport de stage à faire, :( ), j'écrirai un petit tuto pour montrer la démarche plus proprement.

En tout cas bon courage à toi!
Pierrick