Pierre Jean – Ingénieur de Recherche

Cet article est périmé. Il montre une utilisation de technologies qui fonctionnait au moment de son écriture, mais dont actuellement je ne sais si son fonctionnement est opérationnel et/ou pertinent.
J’ajoute que j’ai été contacté pour indiquer ce lien ci-dessous en référence sur les alternatives à firebug. J’avoue que la liste est correcte, mais que je ne me limiterai pas à cette page :
https://www.pcwdld.com/firebug-alternatives-javascript-debugging-tools

La liaison de débuggage Javascript dans le navigateur est par contre très utile et à retrouver ici : https://pierrejean.wp.imt.fr/2021/03/03/ligne-de-commande-pour-recharger-une-page-dans-chrome/

CrossFire

Je suis un utilisateur régulier de Firebug, donc je me suis tourné vers l’extension Crossfire de Firebug qui permet le « remote debug » depuis Eclipse. Malgré les explications du tutoriel je n’ai pas été capable d’avoir  les points d’arrêt entre Firebug et Eclipse qui fonctionne.

ChromeDevTools

J’ai donc basculer sur la solution Google Chrome Developer Tools for Java. Le projet est « discontinued » mais j’ai quand même fait un essai.

Configuration de base:

• Eclipse for PHP Developer Version: Mars.1 Release (4.5.1)
• Chromium 48.0.2539.0 (64-bit)

Installation:

• Site de Module Eclipse http://chromedevtools.googlecode.com/svn/update/dev/.
  • Installation depuis  ce site Google Chrome Developer Tools

Démarrage de Chromium avec le port d’écoute sur 5005 :

chrome.exe  --remote-debugging-port=5005

Configuration d’Eclipse pour le « remote debug » de type « WebKit Protocol »

Phase de Debug

Démarrage du Debug classique par le bouton « Debug » d’Eclipse.

La fenêtre « Debug » d’Eclipse indique que la connection avec Chrome fonctionne bien. Par contre, à ce moment là, les points d’arrêt ne semble pas fonctionner tout le temps.

Mon contournement est donc de mettre le processus de Debug en « Suspend » comme indiqué sur cette capture d’écran:

Et à ce moment là on peut débugger de manière classique avec des points d’arrêts :

Pour des breakpoints plus efficace surtout dans les frameworks Jquery et AngularJS, l’utilisation du mot-clef « debugger » est très utile.

Et voila.. à voir dans le temps si les variables sont bien échangées, les exécutions bien réalisées, bref si ce processus est robuste en attendant que CrossFire soit aussi plus mature.

Supposons que j’ai des nombres à traiter, séparés par des points virgules:

String donneesToSplit ="14;15;8;10;7;9";

Je voudrais obtenir au final une sortie de type CSV mais avec des zéro sur 4 chiffres, comme ceci:

14,0015,0008,0010,0007,0009

J’aurai donc un code Java qui va divisé donneesToSplit en tableau puis passer chaque élément du tableau pour ajouter les zéro puis reconstruire une chaîne de caractères en ajoutant une virgule pour au final enlevé la dernière virgule:

 String[] splited = donneesToSplit.split(";");
 String donneesCsv = "";
 for(int i=0; i<splited.length; i++){ 
    String nombre = splited[ i ];
    nombre = ("0000" + nombre).substring(nombre.length());
    donneesCsv += nombre + ",";
 }
 donneesCsv = donneesCsv.substring(0, donneesCsv.length()-1);

Un classique du parcours total dans un tableau avec un jolie conversion du nombre avec 4 chiffre que l’on trouve sur Internet.

La version Java 8, un peu plus complexe à lire mais je pense qu’elle est intéressante et surtout plus performante.

 List<String> numbers = Arrays.asList( donneesToSplit.split(";") ); 
 donneesCsv = numbers.stream()
 .map(i -> ("0000" + i).substring(i.length()) )
 .collect(Collectors.joining(",") );

On peut noter la conversion en List<String> qui est souvent une forme de données classique surtout après extraction de données depuis une base de données.

La nouvelle fonction stream() qui ouvre des fonctionnalités très performante surtout en parallélisant certains calcul.

La fonction map() qui injecte une méthode d’une classe anonyme, bref qui fait le parcours total de la liste et qui extrait le i ième élément pour lui appliquer une opération.

Enfin, la méthode collect qui assure le retour des données en une seule structure. Cette méthode exploite le Collectors qui évite la concaténation des chaines de caractères et d’enlever la dernière virgule.

Les dernières évolutions de Java 8 et bientôt Java 9 sont très performante pour traiter des « types de problématiques ». Il y a une évolution marqué pour améliorer les traitements de type filtrages et conversions de données en masse, surtout des données faiblement structurées que l’on retrouve dans le Big Data.

Dans le cadre d’un projet avec une forte composante Smartphone/Tablette, on se doit de tester différentes solutions techniques.

3 Solutions sont à l’étude:

• Développer pour le Web mobile avec javascript et svg/html
• Développer en natif avec Android et IOS
• Développer avec un générateur de code style phonegap et/ou JavaFX

Cette dernière solution est donc le sujet de cet article. Après une rapide étude de phonegap, je ne vois pas bien l’intérêt dans mon démonstrateur d’une solution phonegap. En effet, autant développer directement dans notre cas avec une application Web mobile.

La solution JavaFX semble enfin mature dans Java8. Une intégration directe avec le JDK 8 sans installation additionnel est enfin opérationnelle. Eclipse avec e(fx)clipse intègre le JavaFX au sein de cet IDE utilisé classiquement en développement Java.

Les premiers développements sous JavaFx montrent une facilité dans les interactions avec l’interface graphique. Swing et Awt semblent bien partis pour être remplacés à plus ou moins long terme.

La problématique est de basculer une application JavaFX vers un fichier apk.

En m’appuyant sur le tutoriel suivant : (https://bitbucket.org/javafxports/android/wiki/Building%20and%20deploying%20JavaFX%20Applications), l’on peut arriver à ses fins.

Je me permet juste quelques remarques comme retour d’expérience sur mon portage d’application.

En premier lieu, les chemins des outils principaux que l’on indique d’ailleurs en variable d’environnement:

• JAVA_HOME=C:\Program Files\Java\jdk1.8.0_25
• PATH=C:\Program Files\Java\jdk1.8.0_25\bin;C:\Developpement\gradle-2.2.1-all\bin;C:\Developpement\android-sdk_r24.0.2-windows\tools;C:\Developpement\apache-ant-1.9.4-bin\bin;

Voici une copie d’écran de mon disque dur, je ne travaille jamais dans le dossier c:\Programme Files\ ou sur le bureau, tous mes outils sont dans un dossier Developpement (sans accent, sans espace ou caractères autre que [A-Za-z0-9.-]):

Après le développement de l’application de manière classique dans Eclipse, il faut faire un export en « Runnable JAR file »:

Le fichier final est dans le dossier PierreFX du dossier sample de l’outil de portage javafxport. Dans cet outil de portage, il y a un script pour déployer l’application d’exemple (qui ne fonctionne pas d’ailleurs dans ma configuration) : createHelloworld.bat, voici donc la version pour ma configuration et mon projet PierreFX.jar:

Ligne de commande de gradlew.bat: ANDROID_SDK , JFX_SDK, , JFX_MAIN_CLASS

Notez les / au lieu des \ plus classique sous Windows. D’avance j’avais installé dans le SDK les packages pour le développement en Android 4.4.2 et 5.0, d’ailleurs je ne sais pas comment il fait le choix de la version…

L’exécution de ce programme createPierre.bat va produire un dossier: C:\Developpement\dalvik-sdk-8u40-ea3\samples\PierreFX\PierreFX contenant tout le projet préparé pour android.

Un ant debug dans le dossier  C:\Developpement\dalvik-sdk-8u40-ea3\samples\PierreFX\PierreFX va produire ensuite dans C:\Developpement\dalvik-sdk-8u40-ea3\samples\PierreFX\PierreFX\bin le fichier apk: PierreFX-debug.apk

Nota important: si vous travailler avec un émulateur, vous pouvez avoir l’impression que le JavaFX produit une application avec écran noir (c’est aussi le cas si vous avez une erreur, logcat est à ce moment là votre meilleur ami). L’écran noir peut aussi venir que l’application dans l’émulateur est très lente, elle peut prendre 30 secondes même pour une application classique et même sur un ordinateur Core i7, ce n’est peut être pas planté, juste très lent….

Nota: l’affichage de png a posé un problème sur l’émulateur Android, « Pixel format BYTE_BGRA_PRE not supported on this device », il semblerait que le support de la transparence soit la cause du problème. La conversion de l’image en jpg a contourné le problème mais sans donné l’effet de la transparence bien sûr.

Si vous avez la ligne verte symbolisant la ligne de debug dans Eclipse PDT Luna qui ne se décale pas, alors il faut:

• Allez dans le Menu Eclipse->Help->Install New Software
• Appuyez sur le bouton Add, ajouter une nom par exemple PDT et location: http://download.eclipse.org/tools/pdt/updates/latest/
• Dans le champ « type filter text » indiquez PDT
• Et cocher « PHP Development Tools (PDT) »
• Continuer l’installation en acceptant la licence
• Redémarrer Eclipse

Article de référence: http://stackoverflow.com/questions/26067892/xdebug-breakpoints-work-but-step-over-does-not

L’article de référence d’Alex Faaborg sur la quantification de l’utilisabilité est à la fois simple et exhaustif (http://uxmag.com/articles/quantifying-usability).  Je reprend ci-dessous les principes qui devraient conduire au développement orienté utilisateur.

Continuer la lecture →

Installation et activation de firebug

Le navigateur firefox dispose d’une extension de référence: firebug. L’installation se fait en consultant le site de l’extension firebug; via le bouton « +Ajouter à firefox ».

Continuer la lecture →

Habituellement, le processus de réalisation d’un programme en Java s’accompagne habituellement de ce genre de ligne:

System.out.println( "Connexion à  " + bd + " réussie" );

Continuer la lecture →

J’utilise ce dessin pour représenter la liaison entre le navigateur et le serveur web.

L’allégorie permet de simplifier la représentation de l’échange de données numériques émises par le serveur web apache.

L’envoie de données par le serveur Web.

Le premier train Html+Css+Javascript arrive dans le navigateur.

Le navigateur déclenche alors l’appel à une page CSS, une page Javascript et une image qui arrivent ensuite.