Quelques compléments sur les interfaces graphiques

1- Page d'information du cours

Voir à l'adresse suivante pour trouver le cours et les énoncés des TP.

Concernant le fil conducteur des exercices (Station météo), vous pouvez consulter, à titre informatif, l'interface d'accès aux informations météorologiques mondiale sur la page du Système d'Information Météorologique Mondial (WWIS) .

Vous aurez alors les moyens de construire votre propre interface graphique qui propose la météo de toutes les villes du monde. Il faudra être capable d'effectuer une requête (curl ?), puis de parser/analyser un fichier XML. Voici un exemple de requête curl pour la ville de New York :

  $ curl http://worldweather.wmo.int/fr/json/278_fr.xml
  {"city":{"lang":"fr","cityName":"New York City, New York","cityLatitude":"40.650000000","cityLongitude":"-73.780000000","cityId":278,"isCapital":false,"stationName":"New York City, New York","tourismURL":"","tourismBoardName":"","isDep":false,"timeZone":"-0400","isDST":"Y","member":{"memId":93,"memName":"Etats-Unis","shortMemName":"","url":"www.nws.noaa.gov\/","orgName":"National Weather Service","logo":"usa_logo.png","ra":4},"forecast":{"issueDate":"2019-04-17 22:40:00","timeZone":"Local","forecastDay":[{"forecastDate":"2019-04-18","wxdesc":"","weather":"pluie fine","minTemp":"9","maxTemp":"17","minTempF":"48","maxTempF":"63","weatherIcon":1502},{"forecastDate":"2019-04-19","wxdesc":"","weather":"Petite averse","minTemp":"14","maxTemp":"21","minTempF":"57","maxTempF":"69","weatherIcon":1201},{"forecastDate":"2019-04-20","wxdesc":"","weather":"Averse de pluie","minTemp":"16","maxTemp":"19","minTempF":"60","maxTempF":"66","weatherIcon":901},{"forecastDate":"2019-04-21","wxdesc":"","weather":"Petite averse","minTemp":"11","maxTemp":"17","minTempF":"52","maxTempF":"63","weatherIcon":1201},{"forecastDate":"2019-04-22","wxdesc":"","weather":"Ensoleill\u00e9","minTemp":"11","maxTemp":"21","minTempF":"52","maxTempF":"70","weatherIcon":2402},{"forecastDate":"2019-04-23","wxdesc":"","weather":"P\u00e9riode ensoleill\u00e9e","minTemp":"12","maxTemp":"18","minTempF":"54","maxTempF":"65","weatherIcon":2201},{"forecastDate":"2019-04-24","wxdesc":"","weather":"Petite averse","minTemp":"10","maxTemp":"16","minTempF":"50","maxTempF":"61","weatherIcon":1201}]},"climate":{"raintype":"Rainfall","raindef":"","rainunit":"inch","datab":1981,"datae":2010,"tempb":"","tempe":"","rdayb":"","rdaye":"","rainfallb":"","rainfalle":"","climatefromclino":"","climateMonth":[{"month":1,"maxTemp":"3.5","minTemp":"-2.8","meanTemp":null,"maxTempF":"38.3","minTempF":"26.9","meanTempF":null,"raindays":"10.4","rainfall":"92.7","climateFromMemDate":"2014-01-06"},{"month":2,"maxTemp":"5.3","minTemp":"-1.7","meanTemp":null,"maxTempF":"41.6","minTempF":"28.9","meanTempF":null,"raindays":"9.2","rainfall":"78.5","climateFromMemDate":"2014-01-06"},{"month":3,"maxTemp":"9.8","minTemp":"1.8","meanTemp":null,"maxTempF":"49.7","minTempF":"35.2","meanTempF":null,"raindays":"10.9","rainfall":"110.7","climateFromMemDate":"2014-01-06"},{"month":4,"maxTemp":"16.2","minTemp":"7.1","meanTemp":null,"maxTempF":"61.2","minTempF":"44.8","meanTempF":null,"raindays":"11.5","rainfall":"114.3","climateFromMemDate":"2014-01-06"},{"month":5,"maxTemp":"21.6","minTemp":"12.2","meanTemp":null,"maxTempF":"70.8","minTempF":"54.0","meanTempF":null,"raindays":"11.1","rainfall":"106.4","climateFromMemDate":"2014-01-06"},{"month":6,"maxTemp":"26.3","minTemp":"17.6","meanTemp":null,"maxTempF":"79.3","minTempF":"63.6","meanTempF":null,"raindays":"11.2","rainfall":"112.0","climateFromMemDate":"2014-01-06"},{"month":7,"maxTemp":"28.9","minTemp":"20.4","meanTemp":null,"maxTempF":"84.1","minTempF":"68.8","meanTempF":null,"raindays":"10.4","rainfall":"116.8","climateFromMemDate":"2014-01-06"},{"month":8,"maxTemp":"28.1","minTemp":"19.9","meanTemp":null,"maxTempF":"82.6","minTempF":"67.8","meanTempF":null,"raindays":"9.5","rainfall":"112.8","climateFromMemDate":"2014-01-06"},{"month":9,"maxTemp":"24.0","minTemp":"16.0","meanTemp":null,"maxTempF":"75.2","minTempF":"60.8","meanTempF":null,"raindays":"8.7","rainfall":"108.7","climateFromMemDate":"2014-01-06"},{"month":10,"maxTemp":"17.7","minTemp":"10.0","meanTemp":null,"maxTempF":"63.8","minTempF":"50.0","meanTempF":null,"raindays":"8.9","rainfall":"111.8","climateFromMemDate":"2014-01-06"},{"month":11,"maxTemp":"12.1","minTemp":"5.3","meanTemp":null,"maxTempF":"53.8","minTempF":"41.6","meanTempF":null,"raindays":"9.6","rainfall":"102.1","climateFromMemDate":"2014-01-06"},{"month":12,"maxTemp":"6.1","minTemp":"0.0","meanTemp":null,"maxTempF":"43.0","minTempF":"32.0","meanTempF":null,"raindays":"10.6","rainfall":"101.6","climateFromMemDate":"2014-01-06"}]}}}macbook-de-christophe:~ christophecerin$ 

2- Cours introductif

Voir cette présentation introduisant l'histoire et des vieux outils (ncurses, X11, Python Tkinter). Ce polycopié propose également des exercices de programmation. Il y a aussi des éléments introductifs à Swing sur la page suivante à l'IRIF. Une édition du livre Java Swing, 2nd edition chez O'Reilly est à lire avec profit !

3- Quelques discussions et corrections des exercices Java

Vers des corrections

Veuillez suivre ce lien qui fournit des codes Java illustrant ou complétant les solutions des exercices vues en TP. Ces solutions utilisent les bibliothèques Swing et Awt.

Je vous conseille d'examiner les codes proposés sous l'angle MVC (Model View Controler) tel que ce concept est présenté ici ou ici (plus élaboré) ou encore ce post. Il s'agit pour l'étudiant de repérer les parties de code relatives à la View, au Model et au Controler. Attention, certains codes ne contiennent pas de partie controler (ce sont alors des exemples qui se concentrent sur autre chose).

Discussion sur le plan méthodologique

Les difficultés que vous rencontrez sont souvent de nature méthodologique. Sur le plan technique, il y a toujours un moyen pour trouver une documentation sur le comment écrire, d'un point de vue syntaxique, tel ou tel appel à une méthode ou fonction Java. Certes, vous rencontrez d'autres problèmes liés au fait que le cours sur les interfaces graphiques en Java arrive un peu en même temps que les cours introductifs à Java. Ce n'est pas grave si nous prenons un peu de recul.

Pour la feuille de TP concernant la VueStationMeteo vous avez un peu de mal avec les panneaux et la politique de placement dans chacun des panneaux. Nous pouvons toujours commencer par simplifier le sujet pour construire seulement un panneau nord (avant d'attaquer le sujet avec tous les panneaux).

Nous pouvons alors ne considérer que JPanel getPanneauNord(){ } qui est appelée par intialise(). Dans ce panneau, placer au début seulement 2 JLabels et 2 zones de saisie JTextField. Il convient alors de bien faire la distinction entre la politique Flow pour les éléments placés à l'intérieur de ce panneau et la politique de placement dans la fenêtre qui permet de positionner le panneau Nord (politique au niveau de la fenêtre)

D'ou viennent les difficultés ? De la relation, au niveau de l'API, entre les évênements qui ont été impliqués. Autrement dit, quel est le composant à la source de l'évênement alors que je suis en train de programmer un certain "composant" ? Par exemple, lorsqu'un composant fenêtre reçoit un événement FOCUS_LOST, ce composant ne peut pas savoir de quel composant il obtient le focus. Cet exemple grossit le trait - il a vocation à illustrer le propos.

Il convient alors d'observer et de comprendre comment le Système (API+évênements) est organisé de manière hiérarchique. Pour notre TD/TP :

4- GTK sur MacOs

Si vous voulez installer GTK sur MacOs, veuillez suivre ce lien. Si vous êtes sous Linux, GTK est plus facilement accessible.

4- Programmation en Go et GTK

Le langage de programmation Go est poussé par Google. Il ressemble à du Java. Pour pousser à l'adoption, la documentation dit :

Go is expressive, concise, clean, and efficient. Its concurrency
mechanisms make it easy to write programs that get the most out of
multicore and networked machines, while its novel type system enables
flexible and modular program construction. Go compiles quickly to
machine code yet has the convenience of garbage collection and the
power of run-time reflection. It's a fast, statically typed, compiled
language that feels like a dynamically typed, interpreted language.

Pour pouvoir construire des interfaces graphiques avec Go et GTK, il faut suivre cette installation. La méthode de construction que je recommande est :

# go get github.com/mattn/go-gtk/gtk
# cd $HOME/go/src/go-gtk
# make install
# make example
# ./example/demo/demo

Note : je suppose que la variable d'environnement GOPATH est $HOME/go

L'exécution de l'exemple, via la ligne de commande ./example/demo/demo donne l'interface graphique :

Interfaçage Go et GTK

Le code source de l'exemple est :


5- JavaFX

Avec l'apparition de Java 8 en mars 2014, JavaFX devient la bibliothèque de création d'interface graphique officielle du langage Java, pour toutes sortes d'applications (applications mobiles, applications sur poste de travail, applications Web), le développement de son prédécesseur Swing étant abandonné (sauf pour les corrections de bogues).

De nombreux tutoriels existent, dont celui-ci (en anglais). Cette page explique comment installer, utiliser... et concevoir une application JavaFX.


Christophe Cérin
christophe.cerin@lipn.univ-paris13.fr
March 8, 2018