tfeserver : Blog de tfe

Comme promis, voici une tout première version de mon script de visualisation des fichiers kmymoney.

Au final, j'ai décidé d'utiliser javascript pour faciliter les traitements et alléger la charge coté serveur.

Étapes du script:

• Chargement du fichier XML
• Modifications basiques pour faciliter le traitement des données
• Calcul des sommes de chaques catégories

Par la suite, il ne s'agit que d'affichage des données:

• Via la liste des transactions
• Via un graphique personalisable

Vous pouvez trouver un exemple d'utilisation (avec un fichier quelconque, ce ne sont pas mes comptes hein!).
Si vous le souhaitez, vous pouvez télécharger ce script gratuitement...
Pour l'installation, il vous suffit d'enregistrer votre fichier kmymoney au format XML, et de remplacer le fichier Budget.xml du dossier d'installation par le votre.
Par la suite, vous pouvez directement ouvrir le fichier index.html dans votre navigateur.

Quelques captures d'écran:


Note:  Pour le moment, le script est  incompatible avec Internet Explorer (toutes versions); problèmes de styles entre autres.

0 commentaire(s) javascript ajax kmymoney argent

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);
}

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