tfeserver : Blog de tfe

Rien de plus rageant de vouloir tester son application utilisant google chart sur un ordinateur n'ayant pas internet.

Pour cela, j'ai un peu rusé et ai recuperé les sources chargés dynamiquement par l'api google pour gérer les graphiques.

Au final on se retrouve donc avec 5 petits fichiers javascripts, que l'on pourra charger en local.

Vous retrouvez ces fichiers dans la section download du site.

Pour charger google chart en local, il suffit alors d'introduire les lignes suivantes dans le header de votre page (si vos fichiers javascript se situent dans le dossier js par exemple) :

<script type="text/javascript" src="js/01.js"></script>
<script type="text/javascript" src="js/02.js"></script>
<script type="text/javascript" src="js/3.js"></script>
<script type="text/javascript" src="js/google/04.js"></script>
<script type="text/javascript" src="js/05.js"></script>

Note pour plus tard: vérifiér la légalité de la chose... :x
Exemple d'utilisation: ici

0 commentaire(s) javascript google chart googlechart

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

Ayant du passer quelques temps sur internet pour trouver la solution, je me permets d'écrire un petit billet sur la solution pour utiliser xpath avec javascript.

L'idée est de créer 3 fonctions génériques qui fonctinneront  indépendemment du navigateur.

• xpath (requete)
• xpathItem (recupere un resultat)
• xpathLength (recuper le nombre de résultats trouvés)

    // GetXPath 
    // Cross browser
    function xpath(path)
    {   
        if(this.xmlDoc.evaluate)
        {   
        return this.xmlDoc.evaluate(
            this.prefix+path,
            this.xmlDoc, 
            null, 
            XPathResult.ORDERED_NODE_SNAPSHOT_TYPE , 
            null 
        );  
        }   
        else
        {   
            return this.xmlDoc.selectNodes(this.prefix+path);
        }   
    },  

    // XPath result item
    // Cross browser
    function xpathItem(elt, i)
    {   
        if(elt.snapshotLength)
        {   
            return elt.snapshotItem(i);
        }   
        return elt[i];
    },  

    // XPath result length
    // Cross browser
    function xpathLength(elt)
    {   
        if(elt.snapshotLength)
        {   
            return elt.snapshotLength
        }   
        return elt.length;
    },  

Comment utiliser ces fonctions?

var resultats = xpath('/MON/CHEMIN[@monparametre=\'valeur\']');

for(var i= 0; i< xpathlength(resultats); i++)
{
  // on utilise ici le résultat avec
  // xpathItem(resultats,i);
}

0 commentaire(s) javascript xpath

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

Quand je pensais encore  ce matin à  ce que Internet Explorer nous empêche de faire, je n'avais pas encore toutes les cartes en main.

Encore une chose que Internet Explorer7 ne sais pas faire: la gestion des données encodées directement dans l'url.

Exemple d'image : ""
Exemple de soure d'une autre image:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSU
hEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGPC/xhBQAA
AAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+
IAAAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q
72QlbgAAAF1JREFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQ
g2JoQ9LE1exdlYvBBeZ7jqch9//q1uH4TLzw4d6+ErXMMcXuHW
xId3KOETnnXXV6MJpcq2MLaI97CER3N0vr4MkhoXe0rZigAAAA
BJRU5ErkJggg==" alt="image point rouge">

Exemple d'utilisation:
http://downloadstats.mozilla.com/, stats temps reel des telechargements de firefox.
Plus d'information, sur wikipedia.
Certes avec les canvas, ce genre d'image serait facilement faisable avec moins de lignes, mais cela peut representer un gain precieux de temps et nombre de requetes http, en ayant par exemple toutes les images de son style css dans un meme fichier...

0 commentaire(s) javascript images web navigateurs

Rien d'extraordinaire ici, juste une petite astuce visant à modifier le style d'une page web dynamiquement, sans recharger l'ensemble de la page.

Contexte: une page web ayant au moins un style css du type
<link rel="stylesheet" href="style.css" type="text/css" />

Code pour retirer le style actuel:

var links=document.getElementsByTagName('link');
for (i=0;i<links.length;i++)
{
links[i].parentNode.removeChild(links[i]);
}

Ajouter un style:

var link = document.createElement('link');
link.href='/style.css';
link.type='text/css';link.rel='stylesheet';
document.getElementsByTagName('head')[0].appendChild(link);

Suite au commentaire de kapouik, vous pouvez aussi visiter la page d'exemple.

1 commentaire(s) javascript astuce

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

Moi qui voulait essayer d'innover, c'est tombé à l'eau :(.
Mon idée de faire un site entièrement en RSS, et modifier l'affichage via une feuille XSL  semble ne pas être bonne, du moins pour Mozilla/Firefox.

L'idée de principe était d'avoir une url unique, servant à la fois pour les visiteurs, et pour les agregateurs RSS. Pour ce genre d'utilisations, les standards mettaient à disposition les feuilles de style xml (type <?xml-stylesheet ..?>).
Après un test en local, j'étais  heureux de voir tout cela marcher. Malheureusement, c'est lorsque je fis le test sur le serveur web local que patatra...

La fonctionnalité d'agregateur RSS de Firefox m'achève: dès que Firefox détecte un flux rss, il oublie la mise en page et force la page de type "agregateur RSS". Certes c'est une fonctionnalitée interessante, mais de là à ne pas permettre à l'utilisateur de voir le rendu initial du site?

Seule solution au final que j'ai trouvé pour l'instant: utiliser un flux XML classique (non de type RSS), et là alors, la feuille de style XSL sera prise en compte.

Exemple de site sur la même structure:  http://www.starcraft2.com
Voila c'etait mon coup de gueule de la soirée.

2 commentaire(s) javascript standards web xsl

C'est avec l'annonce de l'apha  de Firefox 3.1 que je viens de faire la découverte des "API Selectors".
Apparemment cette version intégrerait un manière très pratique de sélectionner des éléments en Javascript.

Exemple tiré du site w3.org:

var cells = document.querySelectorAll("#score>tbody>tr>td:nth-of-type(2)");

Comme vous l'aurez compris, il s'agit de sélectionner les éléments via leur hiérarchie, comme l'émulait les librairies telles que prototype...

Toute la documentation est disponible sur le site du W3.
Si vous vous dites que c'est encore un truc nouveau que IE mettra des années à implémenter, vous avez tout faux :)

À noter également l'implémentation des TEXT API, pour que votre site soit joli joli.

0 commentaire(s) javascript api standards w3c selectors

Encore une fois, google nous facilite le développement Web: cette fois-ci, nous avons droit à tout un emsemble de documentation et trucs & astuces, aussi bien sur le DOM, que sur les CSS.

À quand le framework complet google?

0 commentaire(s) programmation javascript google css dom