tfeserver : Blog de tfe

Suite au gros problème de ne pas pouvoir utiliser d'applications KDE sous swindows, et au fait que mon logiciel de comptabilité (kmymoney) est vraiment puissant, et que je ne peux plus m'en passer, j'ai décidé de lancer un petit projet de viewer de fichiers xml kmymoney directement depuis javascript.

Cela ne devrait pas être trop dur compte tenu du fait que c'est une structure XML plutôt claire.
Par contre, peut-etre existe-t-il déjà un projet similaire?

À venir bientôt donc, une tout première "version" de la librairie kmymoney pour javascript.

Update: Voir la news sur la première version de kmymoney viewer.

0 commentaire(s) javascript ajax kmymoney web dhtml comptes argent

Je fais partager ici un petit script que j'ai codé pour créer une petite barre de chargement d'un fichier en php/javascript.
Le principe est plutôt simple:

• La page appelle le fichier via xmlhttpRequest

• Le fichier que l'on appelle va se charger de temporiser la sortie, de faire de temps en temps de flush afin de nous informer de l'etat de l'avancée de l'envoie.

• Le script JS va recevoir au fur et à mesure ces données, et montrer l'état d'avancement dans la barre de chargement.

Si le fichier cible n'a pas renseigné l'entête HTTP Content-Length, le script JS avancera de 1% à chaque fragment reçu.

Il ne s'agit bien sûr que d'un exemple de script, dont vous pouvez vous inspirer au besoin. Il est basé sur la librairie javascript prototype, que vous pouvez récuperer sur le site officiel.

Le script:

function creation_barre_chargement( lien)
{
    // Creation du fond grisé
    var back= document.createElement('DIV');
    back.style.position='absolute';
    back.style.top='0px';
    back.style.left='0px';
    back.style.width='100%';
    back.style.height='100%';
    back.style.background='white';
    back.style.opacity='0.8';
    back.style.filter='alpha(opacity=80)';

    // Creation de la barre de chargement
    var div= document.createElement('DIV');
    div.style.position='absolute';
    div.id='barre_chargement';
    div.style.width='40%';
    div.style.marginLeft='30%';
    div.style.marginTop='10%';
    div.style.border="1px solid black";
    div.style.background="#d0d0d0";
    div.style.height='20px';

    // Creation de l'avancement de la barre de chargement
    var p= document.createElement('P');
    p.style.margin='0px';
    p.style.width='0px';
    p.style.padding='0px';
    p.style.borderLeft='1px solid #333';
    p.style.height='100%';
    p.style.background='green';
    p.style.fontWeight='bold';
    p.id='pourcentage_accompli';
    p.style.textAlign='right';

    // Texte de l'avancement de la barre de chargement
    var txt= document.createTextNode('0%');

    // Ajout des elements DOM
    p.appendChild(txt);
    div.appendChild(p);
    back.appendChild(div);
    document.body.appendChild(back);

    // Gestion de la récuperation du fichier
    myAjax=new Ajax.Request( lien.href, {
        method: 'get',
        onInteractive : function(response)
        {
            if(response.getHeader('Content-Length')!='')
            {
                var pourcentage=$('pourcentage_accompli').getWidth()/$('barre_chargement').getWidth()*100;
                pourcentage+=1;
            }
            else
            {
                var pourcentage= myAjax.transport.responseText.length/response.getHeader('Content-Length')*100;
           }
            if(pourcentage>100)
            {
                pourcentage=0;
            }
            $('pourcentage_accompli').style.width=pourcentage+'%';
            $('pourcentage_accompli').firstChild.nodeValue=pourcentage.toFixed(2)+'%';
        },
        onSuccess: function() {
            document.location.href='#'+lien.href;
            document.body.update(myAjax.transport.responseText);
        }
    });
}

Event.observe(window, 'load', function()
{
    $$('.loading_item').each(
        function(item)
        {
            item.onclick= function() { creation_barre_chargement(item); return false; }
        }
    );
});

Un exemple d'appel  est disponible sur cette page: barre de chargement pourcentage en javascript.
Source du fichier test.php:

$html="
blah blah blah
bah blah blah
bah blah blah
blah blah bla
blah blah bla
";

header("Content-Length:".strlen($html));

foreach(preg_split("/[\r\n]/",$html) as $v_text)
{
    print "$v_text\n";
    flush();
    sleep(1);
}

5 commentaire(s) javascript ajax loading dhtml chargement pourcentage barre