Forum du club des développeurs et IT Pro - Blogs - tails https://www.developpez.net/forums/blogs/26529-tails/ Developpez.com, le Club des Développeurs et IT Pro fr Tue, 08 Sep 2026 02:03:12 GMT vBulletin 15 https://forum.developpez.be/images/misc/rss.jpg Forum du club des développeurs et IT Pro - Blogs - tails https://www.developpez.net/forums/blogs/26529-tails/ <![CDATA[Vue JS 3 - Utilisation de propriétés calculées dans le css d'un composant]]> https://www.developpez.net/forums/blogs/26529-tails/b10171/vue-js-3-utilisation-proprietes-calculees-css-d-composant/ Wed, 01 Sep 2021 10:15:27 GMT Bonjour :) Un besoin que... Bonjour :)

Un besoin que je rencontre de temps en temps lorsque je code mes composants VueJS, c'est celui de générer des styles css dynamiquement. L'une des possibilités réside dans l'utilisation de variables css. Mais comment s'y prendre ?

Tout d'abord, dans ce billet j'utilise VueJS 3 ainsi que la nouvelle API Composition de VueJS. C'est-à-dire qu'au lieu d'utiliser les champs data, mounted, computed..., j'utilise le champ setup ainsi que les nouvelles fonctions mises en place (onMounted, ref, computed, watch, ...).

Afin d'illustrer le concept, je pars du principe que l'on souhaite créer un simple composant carré (MyBox) de couleur rouge, dont la taille est configurable via un attribut personnalisé sizePx.

Admettons pour l'instant que le composant dispose d'une taille fixe de 60px :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
  <div id="root"></div>
</template>

<script>
export default {
  name: 'MyBox',
  props: {
    
  }
}
</script>

<style scoped>
#root {
  width: 60px;
  height: 60px;
  background-color: red;
}
</style>
Rien de bien compliqué en soi.

Ajoutons la propriété sizePx (lignes 8-12), qui n'aura pas encore d'effet sur la taille de notre composant :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<template>
  <div id="root"></div>
</template>

<script>
export default {
  name: 'MyBox',
  props: {
    sizePx: {
      type: Number,
      required: true,
    }
  }
}
</script>

<style scoped>
#root {
  width: 60px;
  height: 60px;
  background-color: red;
}
</style>
On pourra, moyennant importation et déclaration du composant, l'utiliser de la manière suivante : <MyBox :sizePx="100" />A l'heure où ce billet a été rédigé, il existait une proposition de syntaxe afin de pouvoir injecter des variables de notre script du composant dans le css du même composant :
  1. la variable en question doit être une référence
  2. dans le css en question, la variable est référencée à l'aide de la fonction v-bind


Il est fort probable que votre éditeur en ligne favori (par exemple, j'ai testé avec StackBlitz), ne supporte pas cette syntaxe : mieux vaut créer un projet avec Vue CLI (c'est-à-dire avec le générateur de projet Vue JS depuis le terminal).

Voici ce que cela peut donner avec notre composant :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<template>
  <div id="root"></div>
</template>

<script>
import  {computed} from 'vue';
export default {
  name: 'MyBox',
  props: {
    sizePx: {
      type: Number,
      required: true,
    }
  },
  setup(props) {
    const size = computed(() => props.sizePx + 'px');

    return {size};
  },
}
</script>

<style scoped>
#root {
  background-color: red;
  width: v-bind(size);
  height: v-bind(size);
}
</style>
Cette fois-ci, notre carré prend la dimension que l'on lui a indiqué.

Pour cela :
  1. j'ai crée une variable size, liée à la propriété sizePx (ligne 16)
  2. je l'ai référencée dans le css à l'aide de la fonction v-bind (lignes 26-27)


Ici, j'ai donné à la variable size la valeur de sizePx avec l'unité Mais je peux aussi ne donner que la valeur et ajouter l'unité lors de l'appel à la fonction v-bind dans le css :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<template>
  <div id="root"></div>
</template>

<script>
import  {computed} from 'vue';
export default {
  name: 'MyBox',
  props: {
    sizePx: {
      type: Number,
      required: true,
    }
  },
  setup(props) {
    const size = computed(() => props.sizePx);

    return {size};
  },
}
</script>

<style scoped>
#root {
  background-color: red;
  width: calc(v-bind(size) * 1px);
  height: calc(v-bind(size) * 1px);
}
</style>
Vous pouvez remarquer:
  1. l'appel à la fonction calc
  2. la multiplication de la valeur par l'unité 1px


Rien nous empêche de changer d'unité : je peux aussi écrire width: calc(v-bind(size) * 0.2vw);,width: calc(v-bind(size) * 3px); ...

Enfin, j'ai eu besoin dans un de mes projets d'une utilisation plus complexe :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<script>
import { ref, onMounted, onBeforeUnmount } from "vue";

export default {
   setup() {

      const controlsWidth = ref(0);
      const cellsSize = ref(0);

      function adjustLayoutDirection() {
          ...
          controlsWidth.value = isPortrait ? cellsSize.value * 8 + "px" : "calc(100% - " + cellsSize.value * 8 + "px)";
       }

      onMounted(() => adjustLayoutDirection);
      window.addEventListener("orientationchange", adjustLayoutDirection);
      onBeforeUnmount(function () {
         window.removeEventListener("orientationchange", adjustLayoutDirection);
       });

      return {
          controlsWidth, cellsSize
       };
   }
}
</script>

<style scoped>
#controls {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  width: v-bind("controlsWidth");
}
</style>
Ainsi le calcul de la valeur controlsWidth (ligne 12) est très dynamique : notamment avec l'intégration de la fonction calc dans la chaîne résultante en orientation paysage.

Voilà, j'espère avoir bien présenté le concept. N'hésitez pas à aller voir la page de la proposition de syntaxe, et à expérimenter cette fonctionnalité. :D ]]> tails https://www.developpez.net/forums/blogs/26529-tails/b10171/vue-js-3-utilisation-proprietes-calculees-css-d-composant/ <![CDATA[Nouvelle version stable d'Android Studio et Jetpack Compose passe en version 1.0 : bref cas pratique]]> https://www.developpez.net/forums/blogs/26529-tails/b10160/nouvelle-version-stable-d-android-studio-jetpack-compose-passe-version-1-0-bref-cas-pratique/ Thu, 29 Jul 2021 09:25:50 GMT Google vient d'annoncer sur son blog officiel la sortie de la nouvelle version stable d'Android Studio : Artic Fox 2020.3.1

Parmis les nouveautés, une a particulièrement retenu mon attention : le support de la boîte à outils Jetpack Compose qui vient d'ailleurs de passer en version stable 1.0.0.

Jetpack Compose a pour ambition de simplifier le développement d'applications Android.

Et la première différence notable avec le développement classique d'Android réside dans le fait que l'on ne décrit plus les interfaces par le biais de fichiers XML. On décrit toute l'interface dans le code Kotlin de notre application (car oui, Jetpack Compose se code en Kotlin, et non en Java). Chaque élément d'interface est codé dans une fonction -sans valeur de retour- et annotée par @Composable. Et elle peut faire appel à d'autre éléments @Composable, dont les éléments standards mis à notre disposition.

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
@Composable
fun MonComposant() {
    Row {
        Text(text = "Hello", modifier = Modifier.background(color = Color.Blue))
        Text(text = "World", modifier = Modifier.background(color = Color.Yellow))
    }
}
(J'ai volontairement omis la liste des importations.)

Où Row et Text sont des @Composable fournis par la boîte à outils Jetpack Compose. Row permet d'agencer plusieurs composants sur une ligne, Text permet d'afficher du texte. Modifier est un objet permettant ici de personnaliser les composants textes, notamment la couleur de fond ici. Modifier et Color sont aussi fournis par la boîte à outil Jetpack Compose.

Rien ne nous interdit d'ajouter des paramètres afin de pouvoir décrire un composant personnalisable.

Enfin, une autre nouveauté, et non des moindres, c'est qu'il est désormais possible de prévisualiser le composant dans Android Studio, avant même qu'il soit déployé dans l'émulateur/le périphérique de test. Pour cela il suffit de créer un nouveau @Composable qui utilisera notre composant, et en ajoutant l'annotation @Preview :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
@Preview
@Composable
fun MonComposantPreview() {
    MonComposant()
}
Voici un aperçu, dont j'ai pu directement copier l'image depuis la Preview de mon composant :

Nom : helloworld.png Affichages : 291 Taille : 3,8 Ko

Il y aurait évidemment beaucoup à dire pour introduire le développement d'applications avec Jetpack Compose : notamment la gestion d'états immutables/mutables, les composants standards, les layouts, la navigation, l'utilisation de ressources texte, l'utilisation de ressources images et images vectorielles ...

Je ne peux qu'inviter ceux qui désirent en savoir plus, à visiter la page de blog de Google, ainsi que la page officielle de Jetpack Compose, dont j'ai mis les liens en début de billet. ]]> tails https://www.developpez.net/forums/blogs/26529-tails/b10160/nouvelle-version-stable-d-android-studio-jetpack-compose-passe-version-1-0-bref-cas-pratique/ <![CDATA[[Dart] Déclarer un paramètre de type callback, avec les types.]]> https://www.developpez.net/forums/blogs/26529-tails/b10146/dart-declarer-parametre-type-callback-types/ Mon, 05 Jul 2021 08:08:18 GMT Ce billet se base sur la... Ce billet se base sur la version 2.13.3 du langage Dart.

Le langage Dart étant un langage de typage statique, il serait bien dommage de ne pas en profiter pour l'ensemble des signatures de fonction que l'on utilise.

Cependant, lorsque l'on a besoin de déclarer un callback (en variable d'instance de classe par exemple), la tâche n'est pas forcément simple. Si bien que souvent l'on écrit simplement :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
Function onReady;
Evidemment, avec cette fonction, rien ne nous interdit de passer un paramètre, de retourner un type différent de celui attendu ...

Admettons par exemple que la fonction onReady, si l'on s'en réfère à la déclaration classique, soit la suivante (En ne prêtant guère attention aux nombreuses mauvaises pratiques de celles-ci, telle que l'utilisation d'entier au lieu d'une énumération. C'est juste pour illustrer rapidement le concept dont je veux vous parler.) :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
bool onReady(int eventType) {
  if (eventType == 3) return false;
  return true;
}
Si l'on se contente de la déclaration précédente, rien ne nous interdit d'ommettre le paramètre attendu eventType, ou de passer un 2e paramètre.

En fait on peut déclarer la signature de la fonction onReady de la manière suivante :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
bool Function(int eventType) statusHandler;
Voici un example complet d'utilisation :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
bool Function(int eventType) statusHandlerbool onReady(int eventType) {
  if (eventType == 3) return false;
  return true;
}

void printStatus(bool Function(int eventType) statusHandler, int eventType) {
  print(statusHandler(eventType));
}

void main () {
  printStatus(onReady, 3);
}
Et cela fonctionne aussi avec la fonctionnalité null-safety (la fonctionnalité de Dart qui vérifie si un type de variable peut ou non accepter la valeur null):

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
final void Function(int index)? handleHistoryItemRequested;
Ainsi j'ai pu utiliser cette fonction en paramètre de constructeur dans un Widget Flutter d'un projet personnel.
On constate donc que cette fonction peut prendre une valeur concrête, aussi bien que prendre null (grâce au point interrogation suivant la parenthèse de fermeture). Et cela fonctionne aussi pour les paramètres de la fonction, ainsi que le type de retour.

Voilà, j'espère que vous aurez pris plaisir à lire ce billet :D ]]> tails https://www.developpez.net/forums/blogs/26529-tails/b10146/dart-declarer-parametre-type-callback-types/ <![CDATA[[Rust][Windows][Gtk][Relm] Déploiement d'application Gtk+Relm sous Windows : une approche possible]]> https://www.developpez.net/forums/blogs/26529-tails/b9429/rust-windows-gtk-relm-deploiement-d-application-gtkprelm-sous-windows-approche-possible/ Sat, 23 May 2020 11:02:05 GMT Il peut paraître difficile de... Il peut paraître difficile de créer une application Rust avec Gtk qui soit entièrement autonome sous Windows. En me basant sur la méthode d'installation de GTK sur le site officiel, et sur ce ticket Github, je vais ici essayer de répondre simplement à la problématique.

Prérequis

Pas de prérequis particulier au niveau du langage, le but ici étant juste d'essayer d'empaqueter un programme minimal et fonctionnel.
Toutefois, si vous le souhaitez, vous pouvez regarder l'introduction minimaliste que j'ai rédigée sur Rust+Gtk+Relm.

Programmes à installer

  1. Msys2: utilitaire permettant notamment la compilation de programmes un peu comme sous Linux. La toolchain Gnu de Rust, qui sera utilisée, est basée sur Mingw. N'oubliez pas de vérifier l'architecture cible du binaire (i686, x86_64). Vérifiez également que le chemin C:\msys64\mingw64\bin (à adapter selon votre architecture et votre dossier d'installation de msys) figure dans les premiers résultats de votre environement PATH,
  2. Rustup : l'ensemble des outils de compilation pour Rust. Attention d'installer la version GNU, et non la version MSVC. Il faut donc choisir de personnaliser l'installation et demander la version x86_64-pc-windows-gnu (architecture 64 bit) ou i686-pc-windows-gnu (architecture 32 bit). Sinon il est encore possible d'ajouter la toolchain correspondante et de la déclarer comme version par défaut : je vous laisse essayer de vous renseigner pour ce cas précis,
  3. Git : pour pouvoir cloner le projet testé dans ce billet. Un terminal Bash est aussi fourni avec ce projet: nous l'utiliserons différentes tâches.


Installation des paquets de msys2 et Gtk

Une fois Msys installé, il faut dans un 1er temps installer les paquets systèmes:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
pacman -Syu
Une fois cela finit, il faut fermer le terminal, le relancer et exécuter de nouveau la commande. Recommencer le processus jusqu'à ce qu'il n'y ait plus de mise à jour à installer.

Puis installer Gtk:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
pacman -S mingw-w64-x86_64-gtk3
Eventuellement, Glade:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
pacman -S mingw-w64-x86_64-glade
pour les projets qui pourraient en avoir besoin.

Et enfin, les outils tels que gcc, necessaires pour la compilation:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
pacman -S mingw-w64-x86_64-toolchain base-devel

Il faut fixer la variable système globallement, et non pas pour votre propre compte, GTK_LIB_DIR au dossier (à adapter) C:\msys64\mingw64\lib.

Compilation du projet

Veuillez cloner le projet suivant (une calculatrice vraiment minimale) avec le terminal git bash, dans le dossier de votre choix
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
cd <dossier_de_choix>
git clone https://github.com/loloof64/SimpleCalculator.git
cd SimpleCalculator
Veuillez compiler le projet en mode release, toujours dans le terminal git bash (ne serait-ce que parce que la commande cargo est directement reconnue) :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
cargo build --release
Si tout se passe bien, le programme simple-calc.exe se trouve dans le sous-dossier target/release.

Veuillez noter que, pour éviter que le programme ouvre un terminal lors du lancement, l'attribut #![windows_subsystem = "windows"] a été ajouté au début du fichier source main.rs.

Nous pouvons donc lister l'ensemble des dll nécessaires pour le programme (j'ai filtré le résultat pour n'inclure que celles de mingw64):

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 ldd target/release/simple-calc.exe | grep mingw64
        libcairo-2.dll => /c/msys64/mingw64/bin/libcairo-2.dll (0x68dc0000)
        libgdk_pixbuf-2.0-0.dll => /c/msys64/mingw64/bin/libgdk_pixbuf-2.0-0.dll (0x6f740000)
        libgio-2.0-0.dll => /c/msys64/mingw64/bin/libgio-2.0-0.dll (0x613c0000)
        libgdk-3-0.dll => /c/msys64/mingw64/bin/libgdk-3-0.dll (0x6c1c0000)
        libgobject-2.0-0.dll => /c/msys64/mingw64/bin/libgobject-2.0-0.dll (0x67f00000)
        libglib-2.0-0.dll => /c/msys64/mingw64/bin/libglib-2.0-0.dll (0x649c0000)
        libgtk-3-0.dll => /c/msys64/mingw64/bin/libgtk-3-0.dll (0x67700000)
        libpango-1.0-0.dll => /c/msys64/mingw64/bin/libpango-1.0-0.dll (0x6d240000)
        libgmodule-2.0-0.dll => /c/msys64/mingw64/bin/libgmodule-2.0-0.dll (0x66c40000)
        libintl-8.dll => /mingw64/bin/libintl-8.dll (0x61cc0000)
        libgcc_s_seh-1.dll => /mingw64/bin/libgcc_s_seh-1.dll (0x1a0000)
        libcairo-gobject-2.dll => /c/msys64/mingw64/bin/libcairo-gobject-2.dll (0x6cf40000)
        libgcc_s_seh-1.dll => /mingw64/bin/libgcc_s_seh-1.dll (0x1a0000)
        libfontconfig-1.dll => /c/msys64/mingw64/bin/libfontconfig-1.dll (0x64f80000)
        libpixman-1-0.dll => /c/msys64/mingw64/bin/libpixman-1-0.dll (0x63500000)
        libfreetype-6.dll => /c/msys64/mingw64/bin/libfreetype-6.dll (0x6aac0000)
        libpng16-16.dll => /c/msys64/mingw64/bin/libpng16-16.dll (0x68b40000)
        zlib1.dll => /mingw64/bin/zlib1.dll (0x62e80000)
        libepoxy-0.dll => /c/msys64/mingw64/bin/libepoxy-0.dll (0x6d880000)
        libfribidi-0.dll => /c/msys64/mingw64/bin/libfribidi-0.dll (0x66600000)
        libpangocairo-1.0-0.dll => /c/msys64/mingw64/bin/libpangocairo-1.0-0.dll (0x65880000)
        libpangowin32-1.0-0.dll => /c/msys64/mingw64/bin/libpangowin32-1.0-0.dll (0x676c0000)
        libffi-7.dll => /c/msys64/mingw64/bin/libffi-7.dll (0x71040000)
        libwinpthread-1.dll => /mingw64/bin/libwinpthread-1.dll (0x64940000)
        libpcre-1.dll => /mingw64/bin/libpcre-1.dll (0x69140000)
        libthai-0.dll => /c/msys64/mingw64/bin/libthai-0.dll (0x66880000)
        libatk-1.0-0.dll => /c/msys64/mingw64/bin/libatk-1.0-0.dll (0x6bd40000)
        libharfbuzz-0.dll => /c/msys64/mingw64/bin/libharfbuzz-0.dll (0x6f840000)
        libiconv-2.dll => /mingw64/bin/libiconv-2.dll (0x66000000)
        libexpat-1.dll => /mingw64/bin/libexpat-1.dll (0x68f40000)
        libbz2-1.dll => /mingw64/bin/libbz2-1.dll (0x626c0000)
        libbrotlidec.dll => /c/msys64/mingw64/bin/libbrotlidec.dll (0x6e440000)
        libgcc_s_seh-1.dll => /mingw64/bin/libgcc_s_seh-1.dll (0x1a0000)
        libpangoft2-1.0-0.dll => /c/msys64/mingw64/bin/libpangoft2-1.0-0.dll (0x6e7c0000)
        libdatrie-1.dll => /c/msys64/mingw64/bin/libdatrie-1.dll (0x68ac0000)
        libgraphite2.dll => /c/msys64/mingw64/bin/libgraphite2.dll (0x70540000)
        libstdc++-6.dll => /mingw64/bin/libstdc++-6.dll (0x6fc40000)
        libbrotlicommon.dll => /c/msys64/mingw64/bin/libbrotlicommon.dll (0x6d4c0000)
        libgcc_s_seh-1.dll => /mingw64/bin/libgcc_s_seh-1.dll (0x1a0000)

Construction de l'archive avec les ressources nécessaires

Tout d'abord, veuillez récupérer et décompresser les dernières versions des icônes Adwiata et Hicolor. Les icônes Adwaita sont déjà incluses, par contre il faudra compiler les icônes hicolor.

Pour ce faire, avec le terminal msys, allez dans le dossier où vous avez décompressé l'archive hicolor. Et exécutez les commandes suivantes:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
./autogen.sh
make .MAKE
Soit $MSYS le dossier où est installé Msys2 (Par défaut C:\msys64 pour les installation 64 bits). Aussi pensez à adapter le dossier $MSYS/mingw64 en fonction de votre architecture.

Nous allons archiver l'application et ses dépendances:
  • Il faudra copier le contenu de $MSYS/mingw64/share/glib-2.0/schemas dans le dossier share/glib-2.0/schemas/ du dossier de préparation de l'archive
  • l'exécutable bien sûr
  • les dll listées par la commande ldd utilisée plus tôt dans le billet,
  • le sous-dossier icône Adwaita de l'archive Adwaita que vous avez récupéré et le dossier hicolor compilé (il se trouve dans $MSYS/mingw64/share/icons) dans le dossier share/icons/ du dossier de préparation de l'archive


Vous pouvez donc compresser le fichier, qui devrait normalement contenir toutes les dépendances.


Conclusion

Voilà, j'espère que cela a aussi fonctionné de votre côté :) . ]]> tails https://www.developpez.net/forums/blogs/26529-tails/b9429/rust-windows-gtk-relm-deploiement-d-application-gtkprelm-sous-windows-approche-possible/ <![CDATA[[Rust][AppImage][Docker][Linux] Création d'une AppImage à partir d'un binaire Rust avec Docker]]> https://www.developpez.net/forums/blogs/26529-tails/b9415/rust-appimage-docker-linux-creation-d-appimage-partir-d-binaire-rust-docker/ Thu, 21 May 2020 14:17:20 GMT Bonjour, dans ce billet je... Bonjour, dans ce billet je vais essayer de parler simplement de la création d'une AppImage pour un binaire graphique Rust GTK, en utilisant une image Docker en mode intéractif.

Prérequis

Pour pouvoir suivre ce billet, il est recommandé de connaître les bases de
  • Rust: syntaxe de base, ownership/borrowing, struct/impl/enum, cargo, (juste pour comprendre les sources du projet si vous le souhaitez)
  • Gtk+Relm: les bases, j'ai présenté cette combinaison dans un billet précédent,
  • Docker: création/exécution d'images, mode intéractif (tty), volumes,
  • Git: pour pouvoir récupérer les sources du projet "cobaye"
  • Commandes de bases dans un terminal linux: cd, ls, notamment. En effet, l'utilisation du terminal sera massive dans ce tutoriel.


Le format AppImage

Il s'agit en quelque sortes d'un fichier compressée, embarquant un programme et ses dépendances dynamiques notamment, et qui se monte sur son propre systèmes de fichiers. Ce format tente donc de résoudre la problématique du déploiement d'application vis-à-vis de la fragmentation des nombreuses distributions Linux.

Cependant, il est basé sur l'utilisation de l'utilitaire Fuse. Ce programme, disponible sous forme de paquets dans certaines distributions Linux (s'il n'est pas déjà installé par défaut), permet de monter un système de fichiers sans pour autant que l'on soit administrateur (root).

Le programme "cobaye" et ses dépendances

Pour effectuer notre expérimentation, nous allons compiler une calculatrice on ne peut plus simple et ridicule et qui, pour des raisons pratiques, n'a pas d'opérateur division.

Veuillez cloner le projet dans le dossier de votre choix:

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
$> git clone https://github.com/loloof64/SimpleCalculator.git calculatrice
En examinant les sources et le fichier Cargo.toml, vous pouvez constater qu'il s'agit d'une application Gtk+Relm minimaliste.

Veuillez compiler (et exécuter) le programme afin de pouvoir en analyser les dépendances dynamiques: (j'utilise la version 2018 de Rust, la dernière version à ce jour devrait convenir)

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
$> cargo run --release
Si tout se passe bien, l'exécutable se trouve dans le sous-dossier target/release. Analysons-donc les dépendances dynamiques à l'aide de la commande ldd. Voici ce que cela a donné de mon côté:

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
$> ldd target/release/simple-calc
        linux-vdso.so.1 (0x00007fff669c3000)
        libgtk-3.so.0 => /lib/x86_64-linux-gnu/libgtk-3.so.0 (0x00007f8a33d5c000)
        libgdk-3.so.0 => /lib/x86_64-linux-gnu/libgdk-3.so.0 (0x00007f8a33c58000)
        libpango-1.0.so.0 => /lib/x86_64-linux-gnu/libpango-1.0.so.0 (0x00007f8a33c0c000)
        libcairo-gobject.so.2 => /lib/x86_64-linux-gnu/libcairo-gobject.so.2 (0x00007f8a33c00000)
        libcairo.so.2 => /lib/x86_64-linux-gnu/libcairo.so.2 (0x00007f8a33ae0000)
        libgdk_pixbuf-2.0.so.0 => /lib/x86_64-linux-gnu/libgdk_pixbuf-2.0.so.0 (0x00007f8a33ab8000)
        libgio-2.0.so.0 => /lib/x86_64-linux-gnu/libgio-2.0.so.0 (0x00007f8a338db000)
        libgobject-2.0.so.0 => /lib/x86_64-linux-gnu/libgobject-2.0.so.0 (0x00007f8a3387e000)
        libglib-2.0.so.0 => /lib/x86_64-linux-gnu/libglib-2.0.so.0 (0x00007f8a33756000)
        libdl.so.2 => /lib/x86_64-linux-gnu/libdl.so.2 (0x00007f8a33750000)
        libpthread.so.0 => /lib/x86_64-linux-gnu/libpthread.so.0 (0x00007f8a3372d000)
        libgcc_s.so.1 => /lib/x86_64-linux-gnu/libgcc_s.so.1 (0x00007f8a33713000)
        libc.so.6 => /lib/x86_64-linux-gnu/libc.so.6 (0x00007f8a33520000)
        /lib64/ld-linux-x86-64.so.2 (0x00007f8a344dd000)
        libgmodule-2.0.so.0 => /lib/x86_64-linux-gnu/libgmodule-2.0.so.0 (0x00007f8a3351a000)
        libpangocairo-1.0.so.0 => /lib/x86_64-linux-gnu/libpangocairo-1.0.so.0 (0x00007f8a33509000)
        libX11.so.6 => /lib/x86_64-linux-gnu/libX11.so.6 (0x00007f8a333cb000)
        libXi.so.6 => /lib/x86_64-linux-gnu/libXi.so.6 (0x00007f8a333b9000)
        libXfixes.so.3 => /lib/x86_64-linux-gnu/libXfixes.so.3 (0x00007f8a331b3000)
        libatk-1.0.so.0 => /lib/x86_64-linux-gnu/libatk-1.0.so.0 (0x00007f8a33187000)
        libatk-bridge-2.0.so.0 => /lib/x86_64-linux-gnu/libatk-bridge-2.0.so.0 (0x00007f8a33151000)
        libepoxy.so.0 => /lib/x86_64-linux-gnu/libepoxy.so.0 (0x00007f8a3301f000)
        libfribidi.so.0 => /lib/x86_64-linux-gnu/libfribidi.so.0 (0x00007f8a33002000)
        libm.so.6 => /lib/x86_64-linux-gnu/libm.so.6 (0x00007f8a32eb3000)
        libharfbuzz.so.0 => /lib/x86_64-linux-gnu/libharfbuzz.so.0 (0x00007f8a32dbc000)
        libpangoft2-1.0.so.0 => /lib/x86_64-linux-gnu/libpangoft2-1.0.so.0 (0x00007f8a32da0000)
        libfontconfig.so.1 => /lib/x86_64-linux-gnu/libfontconfig.so.1 (0x00007f8a32d5a000)
        libfreetype.so.6 => /lib/x86_64-linux-gnu/libfreetype.so.6 (0x00007f8a32c9f000)
        libXinerama.so.1 => /lib/x86_64-linux-gnu/libXinerama.so.1 (0x00007f8a32c9a000)
        libXrandr.so.2 => /lib/x86_64-linux-gnu/libXrandr.so.2 (0x00007f8a32c8d000)
        libXcursor.so.1 => /lib/x86_64-linux-gnu/libXcursor.so.1 (0x00007f8a32c80000)
        libXcomposite.so.1 => /lib/x86_64-linux-gnu/libXcomposite.so.1 (0x00007f8a32c79000)
        libXdamage.so.1 => /lib/x86_64-linux-gnu/libXdamage.so.1 (0x00007f8a32c74000)
        libxkbcommon.so.0 => /lib/x86_64-linux-gnu/libxkbcommon.so.0 (0x00007f8a32c33000)
        libwayland-cursor.so.0 => /lib/x86_64-linux-gnu/libwayland-cursor.so.0 (0x00007f8a32c2a000)
        libwayland-egl.so.1 => /lib/x86_64-linux-gnu/libwayland-egl.so.1 (0x00007f8a32c25000)
        libwayland-client.so.0 => /lib/x86_64-linux-gnu/libwayland-client.so.0 (0x00007f8a32c14000)
        libXext.so.6 => /lib/x86_64-linux-gnu/libXext.so.6 (0x00007f8a32bfd000)
        librt.so.1 => /lib/x86_64-linux-gnu/librt.so.1 (0x00007f8a32bf2000)
        libthai.so.0 => /lib/x86_64-linux-gnu/libthai.so.0 (0x00007f8a32be7000)
        libpixman-1.so.0 => /lib/x86_64-linux-gnu/libpixman-1.so.0 (0x00007f8a32b40000)
        libpng16.so.16 => /lib/x86_64-linux-gnu/libpng16.so.16 (0x00007f8a32b08000)
        libxcb-shm.so.0 => /lib/x86_64-linux-gnu/libxcb-shm.so.0 (0x00007f8a32b01000)
        libxcb.so.1 => /lib/x86_64-linux-gnu/libxcb.so.1 (0x00007f8a32ad8000)
        libxcb-render.so.0 => /lib/x86_64-linux-gnu/libxcb-render.so.0 (0x00007f8a32ac9000)
        libXrender.so.1 => /lib/x86_64-linux-gnu/libXrender.so.1 (0x00007f8a328bf000)
        libz.so.1 => /lib/x86_64-linux-gnu/libz.so.1 (0x00007f8a328a3000)
        libmount.so.1 => /lib/x86_64-linux-gnu/libmount.so.1 (0x00007f8a32843000)
        libselinux.so.1 => /lib/x86_64-linux-gnu/libselinux.so.1 (0x00007f8a32816000)
        libresolv.so.2 => /lib/x86_64-linux-gnu/libresolv.so.2 (0x00007f8a327fb000)
        libffi.so.6 => /lib/x86_64-linux-gnu/libffi.so.6 (0x00007f8a327f1000)
        libpcre.so.3 => /lib/x86_64-linux-gnu/libpcre.so.3 (0x00007f8a3277d000)
        libdbus-1.so.3 => /lib/x86_64-linux-gnu/libdbus-1.so.3 (0x00007f8a3272e000)
        libatspi.so.0 => /lib/x86_64-linux-gnu/libatspi.so.0 (0x00007f8a326f5000)
        libgraphite2.so.3 => /lib/x86_64-linux-gnu/libgraphite2.so.3 (0x00007f8a326c8000)
        libexpat.so.1 => /lib/x86_64-linux-gnu/libexpat.so.1 (0x00007f8a3269a000)
        libuuid.so.1 => /lib/x86_64-linux-gnu/libuuid.so.1 (0x00007f8a32691000)
        libdatrie.so.1 => /lib/x86_64-linux-gnu/libdatrie.so.1 (0x00007f8a32687000)
        libXau.so.6 => /lib/x86_64-linux-gnu/libXau.so.6 (0x00007f8a3267f000)
        libXdmcp.so.6 => /lib/x86_64-linux-gnu/libXdmcp.so.6 (0x00007f8a32677000)
        libblkid.so.1 => /lib/x86_64-linux-gnu/libblkid.so.1 (0x00007f8a32620000)
        libpcre2-8.so.0 => /lib/x86_64-linux-gnu/libpcre2-8.so.0 (0x00007f8a3259b000)
        libsystemd.so.0 => /lib/x86_64-linux-gnu/libsystemd.so.0 (0x00007f8a324f3000)
        libbsd.so.0 => /lib/x86_64-linux-gnu/libbsd.so.0 (0x00007f8a324d7000)
        liblzma.so.5 => /lib/x86_64-linux-gnu/liblzma.so.5 (0x00007f8a324b0000)
        liblz4.so.1 => /lib/x86_64-linux-gnu/liblz4.so.1 (0x00007f8a32490000)
        libgcrypt.so.20 => /lib/x86_64-linux-gnu/libgcrypt.so.20 (0x00007f8a32372000)
        libgpg-error.so.0 => /lib/x86_64-linux-gnu/libgpg-error.so.0 (0x00007f8a3234f000)
Elles sont toutes résolues : c'est la seule prérogative pour pouvoir construire un fichier AppImage à partir du binaire.

Nous pouvons donc passer à l'étape de la création du fichier AppImage. Pour cela je vais me servir de Docker, car il est recommandé de construire l'AppImage sur une version de linux assez ancienne afin qu'elle puisse ensuite s'exécuter sur la majorité des distributions existantes. Sans rentrer dans les détails, c'est notamment à cause de la libc.

J'ai donc opté pour l'utilisation de Docker pour me faciliter la tâche, sachant que je pourrais monter un volume sur l'image docker afin de pouvoir partager des fichiers depuis mon système hôte.

Sachez également que Travis CI (entre autres) permet de faire cela plus simplement depuis un repository Github, mais cela sort du cadre de ce billet.

Construction avec Docker

L'image personnalisée pour l’environnement de travail

Tout d'abord, nous pouvons nous constituer une image Docker qui contiendra à minima l'installation de Rust et les utilitaires pour construire l'AppImage. Par la suite nous lancerons un conteneur basé sur cette image (que l'on pourra réutiliser à souhait), en mode intéractif, afin de construire l'AppImage

Veuillez créer un conteneur basé sur la version 16.04 d'Ubuntu, en démarrant un bash en mode interactif:

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
$> docker run -t -i --name ubuntu_16_rust_setup ubuntu:16.04 /bin/bash
Voici la liste des commandes à entrer, une à une, une fois que le conteneur a démarré (attention à ne pas insérer mes commentaires :lol:):

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
apt update
apt install wget curl git fuse build-essential libgtk-3-dev -y
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh # installation de Rust : veuillez chosir l'option par défaut
exit
De retour dans votre terminal hôte (grâce à la commande exit), veuillez transformer le conteneur juste créé en image:

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
$> docker commit ubuntu_16_rust_setup ubuntu_16_rust:v1
Comme précisé plus haut, cette image pourra être réutilisée plusieurs fois.

Construction de l'AppImage

Nous pouvons donc démarrer un conteneur à partir de notre base de travail:
  • j'utilise encore le mode intéractif
  • je monte un volume me permettant d'accéder aux ressources que j'ai préparées pour mon projet (fichier desktop, icone): ici avec le dossier courant ($PWD)
  • j'indique également quelques drapeaux supplémentaires afin de pouvoir créer l'AppImage sans tracas
  • ce conteneur sera détruit (--rm) en le quittant : vous pouvez en décider autrement si vous le souhaitez (c'est juste dans mon utilisation personnelle, j'ai trouvé cela plus pratique)


Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
$> docker run -t -i -v "$PWD:/home/host_documents" --cap-add SYS_ADMIN --cap-add MKNOD --device=/dev/fuse --security-opt apparmor:unconfined --rm ubuntu_16_rust:v1 /bin/bash
Préparatifs côté hôte

Avant de commencer la construction de l'AppImage, préparons les ressources nécessaires, que nous placerons dans le dossier hôte sur lequel nous avons monté notre image de travail:
  • un fichier .desktop : je vous passe le contenu du mien plus bas
  • une icône png (la taille 16x16 peut faire l'affaire)
  • le script qui nous simplifiera la tâche, je vous en passe le contenu plus bas


Voici un fichier .desktop (SimpleCalc.desktop) que vous pouvez utiliser:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
[Desktop Entry]
Version=1.0
Type=Application
Name=Simple calculator
Comment=A ridiculously simple calculator
Exec=simple-calc
Icon=calculator
Categories=Utility;Education;
Il requiert donc que l'icône utilisée s'appelle calculator.png.

Voici le script que nous utiliserons dans le conteneur (build_appimage.sh) :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
#!/bin/bash

##############################################################
# Building exectuable into AppImage (Laurent Bernabe)        #
# from an Ubuntu 14.04 x86_64 docker image.                  #
#                                                            #
# Also these arguments are needed when lauching docker run ! #
# --cap-add SYS_ADMIN                                        #
# --cap-add MKNOD                                            #
# --device=/dev/fuse                                         #
# --security-opt apparmor:unconfined                         #
#                                                            #
# Volume /home/host_documents should point to                #
# the build files folder !                                   #
#                                                            #
# Arguments:                                                 #
# 1 => Path to AppImage target (with AppImage extension)     #
# 2 => Path to executable to wrap                            #
# 3 => Desktop file name (with .desktop extension)           #
# 4 => Icon file name (with extension)                       #
##############################################################

if [[ "$#" -lt 4 ]]; then
    echo "Usage: build_appimage TARGET_APPIMAGE EXECUTABLE DESKTOP_FILE ICON_FILE"
    exit 1
fi


apt update
apt install wget fuse file -y

wget -P /tmp https://github.com/linuxdeploy/linuxdeploy/releases/download/continuous/linuxdeploy-x86_64.AppImage
wget -P /tmp https://github.com/AppImage/AppImageKit/releases/download/continuous/appimagetool-x86_64.AppImage
chmod +x /tmp/linuxdeploy-x86_64.AppImage /tmp/appimagetool-x86_64.AppImage
cd /home/host_documents

/tmp/linuxdeploy-x86_64.AppImage -e $2 -d $3 -i $4 --appdir $1
/tmp/appimagetool-x86_64.AppImage $1

exit 0
Notamment, ce script:
  1. Télécharge les deux utilitaires necessaires à la création d'AppImage à partir d'un binaire existant,
  2. construit un dossier AppImage à partir de l'exécutable et de ses ressources,
  3. construit une archive AppImage à partir du dossier ainsi généré.


Etape finale

Allons-y !

Rendons les commandes de Rust disponibles:

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
$> source $HOME/.cargo/env
Crééons un dossier projets:

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
$> mkdir -p /home/projects
$> cd /home/projects
Clonons le projet et compilons-le:

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
$> git clone https://github.com/loloof64/SimpleCalculator.git calculatrice
$> cd calculatrice
$> cargo build --release
Enfin passons à la production de l'AppImage, en n'oubliant pas de renseigner les différents paramètres

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
$> cd /home/host_documents
$> chmod +x build_appimage.sh
$> ./build_appimage.sh SimpleCalculator.AppImage /home/projects/calculatrice/target/release/simple-calc ./SimpleCalc.desktop ./calculator.png
Normalement vous devriez disposer du fichier AppImage dans votre dossier monté sur le système hôte. N'oubliez pas de quitter le conteneur

Conclusion

Voilà en ce qui concerne la création de l'AppImage, j'espère que cela n'a pas été indigeste.
Vous avez donc la possibilité de tester le programme sur différentes distributions Linux. Sachez que pour ma part, j'ai réussi à l'exécuter sur des distributions Ubuntu (Ubuntu, Kubuntu, Xubuntu), Gentoo, Manjaro Linux, Linux Mint datant de 2016/2017 et même 2020 entre autres.

Je tiens quand même à remercier les contributeurs des projets relatifs à AppImageKit, qui m'ont gentiment répondu à mes interrogations sur leur chat Irc : en particulier TheNinjaAssasin. ]]> tails https://www.developpez.net/forums/blogs/26529-tails/b9415/rust-appimage-docker-linux-creation-d-appimage-partir-d-binaire-rust-docker/ <![CDATA[[Rust][Gtk-Rs][Relm][tutoriel] Une simple application saluant l'utilisateur par son prénom (qu'il renseigne)]]> https://www.developpez.net/forums/blogs/26529-tails/b8921/rust-gtk-rs-relm-tutoriel-simple-application-saluant-l-utilisateur-prenom-qu-renseigne/ Wed, 05 Feb 2020 18:38:21 GMT Le "crate" Relm est une librairie visant à simplifier la création d'applications GTK en Rust en permettant d'utiliser une syntaxe déclarative.
Afin de mettre le pied à l'étrier, j'ai décidé de réaliser une application minimaliste, où le but est simplement de saluer l'utilisateur par le prénom qu'il a renseigné.

Nom : apercu_saluer_utilisateur.png Affichages : 1290 Taille : 17,5 Ko

Tout d'abord, afin de pouvoir suivre ce billet, vous devez
  • connaître un minimum le fonctionnement de Rust, les modules, l'utilitaire Cargo, ainsi que les bases des Structs/Traits/Impl,
  • connaître les bases du développement en Gtk, même par le biais d'un autre langage (tel que Python). En effet, les connaissances peuvent être transposées.


Configuration des dépendances

Après avoir créé un nouveau projet binaire
Code : Sélectionner tout - Visualiser dans une fenêtre à part
cargo new $nom_projet
(remplacer $nom_projet par le nom voulu) nous pouvons ajouter la courte liste de dépendances dans le fichier Cargo.toml

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
gtk = "0.7.0"
relm = "0.18.0"
relm-derive = "0.18.0"
Ajout du code et exécution

Module d'interface

Nous pouvons ajouter le code graphique, que j'expliquerais plus bas, dans un fichier gui.rs, directement dans le sous-dossier src.

Code Rust : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
 
use relm::Widget;
use relm_derive::{Msg, widget};
 
use gtk::{LabelExt, WidgetExt, Inhibit, OrientableExt, EntryExt};
 
#[derive(Msg)]
pub enum AppMsg {
    Ignore,
    Quit,
    UpdateMessage(String),
}
 
pub struct AppModel {
    message: String,
}
 
#[widget]
impl Widget for AppWindow {
    fn model() -> AppModel {
        AppModel {
            message: String::from("Bonjour le monde !"),
        }
    }
 
    fn update(&mut self, event: AppMsg) {
        match event {
            AppMsg::Ignore => {},
            AppMsg::Quit => gtk::main_quit(),
            AppMsg::UpdateMessage(name) => self.update_hello_message(name),
        }
    }
 
    fn update_hello_message(&mut self, name: String) {
        self.model.message = format!("Bonjour {} !", name);
    }
 
    view! {
        gtk::Window {
            gtk::Box {
                orientation: gtk::Orientation::Vertical,
                gtk::Box {
                    orientation: gtk::Orientation::Horizontal,
                    gtk::Label {
                        text: "Votre prénom: ",
                    },
                    #[name="name_input"]
                    gtk::Entry {
                        text: "le monde",
                        activate(text_comp) => match text_comp.get_text() {
                            Some(name) => AppMsg::UpdateMessage(String::from(name)),
                            None => AppMsg::Ignore,
                        },
                    }
                },
                gtk::Label {
                    text: &self.model.message.to_owned(),
                },
            },
            delete_event(_self, _event) => (AppMsg::Quit, Inhibit(false)),
        }
    }
}
 
pub fn run_app() {
    AppWindow::run(()).expect("Echec de demarrage de l'application");
}

La fonction main

Nous pouvons modifier le fichier main.rs ainsi :

Code Rust : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
 
mod gui;
 
use gui::run_app;
 
fn main() {
    run_app();
}

L'application devrait donc pouvoir compiler et fonctionner
Code : Sélectionner tout - Visualiser dans une fenêtre à part
cargo run
Fonctionnement général de Relm

Avant d'expliquer le fonctionnement du code exemple, il nous faut d'abord comprendre comment fonctionne la librairie Relm de manière générale.

En Relm, on peut considérer que chaque composant est le reflet d'un modèle (des données qu'il est censé gérer), qui reçoit des messages en guise d’événements, et met à jour sa vue (son interface graphique) en fonction de ces messages. Une application Relm est constituée d'au moins un composant : le composant qui gère la fenêtre principale (et qui donc aura un gtk::Window comme composant racine).

Dans ce billet, nous voyons comment construire un composant en utilisant des attributs Rust (#[widget] entre autres) qui génère le code correspondant, mais sachez qu'il est également possible de s'en passer et de ne faire qu'avec du code. Pour cela, je vous invite à consulter les exemples officiels (ceux qui ne se terminent pas par "-attribute.rs").

Ainsi dans notre exemple :
  • le model (AppModel) est constitué d'un unique champ message (String),
  • l'énumération AppMessages définit l'ensemble des messages possibles pour le composant associé AppWindow. A noter l'utilisation de l'attribut #[derive(Msg)] et d'un Tuple Struct UpdateMessage acceptant une String en paramètre,
  • l'implémentation AppWindow permet de définir le composant. A noter l'utilisation de l'attribut #[widget] qui générera la classe composant.


La classe AppWindow définit également deux méthodes de base de tout composant :
  • fn model() -> AppModel, chargé de définir la valeur initiale du model associé au composant. Ici nous retournons une instance de la structure AppModel que nous avons défini plus haut. Mais nous aurions pu lui associer une autre structure,
  • fn update(&mut self, event: AppMsg) qui doit mettre à jour le modèle en fonction du message reçu. De même, nous aurions pu associer une autre énumération utilisant l'attribut #[derive(Msg)].


Et enfin, la macro view! permet de définir l'apparence graphique du composant. Et comme nous le verrons plus bas, nous pouvons simplement définir les propriétés des composants et Widgets GTK déclarés dans cette hiérarchie (notamment certaines en fonction du modèle associé au composant), ainsi que de lier des événements aux messages que nous avons définis. Pour rappel, on doit se contenter d'envoyer des messages, et c'est la méthode update qui met à jour le modèle, qui lui-même déclenchera une mise à jour de la vue s'il change.

Maintenant, il est tant d'essayer de mieux comprendre le fonctionnement de notre projet.

Décortiquons notre code

Le module graphique gui.rs

Lignes 2 et 3, nous importons quelques éléments utiles des modules relm et relm-derive : l'attribut widget, le trait Widget et le type Msg.

Ligne 5, nous importons divers traits de la librairie Gtk ainsi que la structure Inhibit. La structure Inhibit est utilisé pour gérer l'évènement Quit du composant, comme nous le verrons plus loin. Tandis que les différents traits suffixés par Ext sont des traits définissant différentes fonctionnalités des Widgets Gtk utilisés par notre composant. Par exemple, LabelExt apporte certaines fonctionnalités au Widget Label : dont notamment la méthode set_text(). Autre exemple, le trait OrientableExt permet de définir l'orientation de certains widgets, via la méthode set_orientation(), dont le Widget Box.
Alors comment savoir quel trait apporte quelle fonctionnalité ? Il suffit, dans la documentation de Gtk-Rs, de rechercher la documentation correspondant au Widget voulu, prenons par exemple le Widget gtk::Button. Nous avons donc accès à la section Implements, listant les différents traits implémentés par le Widget, et de naviguer dans les différentes documentations de ces traits. Ainsi, en naviguant dans la documentation de ButtonExt par exemple, nous retrouvons entre autres la méthode connect_clicked : permettant de gérer l’événement clic.

Lignes 7 à 12: les différents messages que nous souhaitons voir gérer par notre composant, et qui mettra à jour le modèle en conséquence. Quand un message a besoin de paramètres, on peut facilement définir un Tuple Struct, tout comme nous l'avons fait pour UpdateMessage. Le nom de l'énumération est évidemment libre.

Lignes 14 à 16: le modèle de notre composant : ici nous souhaitons juste gérer le message destiné à l'utilisateur.

Lines 18 et 19: pour définir notre composant, nous implémentons le trait Widget, sans oublier de préciser l'attribut #[widget], le nom de la structure étant encore une fois, libre.

Lignes 20 à 24: la définition du modèle initial pour notre composant.

Lignes 26 à 32: la mise à jour du composant, ou plutôt de son modèle, en fonction des messages reçus. Nous utilisons un simple pattern matching sur le type du message. Nous avons aussi bien fait directement appel à du code Gtk, gtk::main_quit() pour quitter l'application, que fait appel à une méthode personnelle pour du traitement plus complexe (update_hello_message(name)). Il est également possible de ne rien associer au message, comme pour le message Ignore.

Lignes 38 à 62: la définition de l'interface par l'intermédiaire de la macro view!. Les éléments y sont imbriquées, chaque propriété/événement/composant ou widget enfant étant séparé par une virgule. Il faut alors distinguer propriété et événement.

Les propriétés sont définis par toute méthode préfixée par set_ dans l'ensemble des Traits décorant les Widgets Gtk, comme expliqué plus haut (les différentes classes suffixées par Ext). Ainsi le trait LabelExt, que le Widget Label implémente, définit une méthode set_text(). Nous pouvons donc utiliser la propriété text sur le Widget Label, comme en ligne 57. Pour définir une propriété d'un composant, on supprime donc le préfixe set_ ainsi que les parenthèses, et nous définissons la valeur après le signe de ponctuation deux points ":". Un autre exemple de propriété: orientation pour le widget gtk::Box, ligne 43.

Les évènements sont définis par toute méthode préfixée par connect_ dans l'ensemble des Traits décorant les Widgets Gtk. Ainsi, le trait EntryExt, implémenté notamment par la structure Entry, définit la méthode connect_activate. Cet évènement permet de gérer la validation de la valeur du champ texte par la touche Enter. Nous pouvons voir cela à l'oeuvre en ligne 50. Ainsi, pour définir un évènement nous enlevons le préfixe connect_, puis ajoutons les paramètres en donnant des noms arbitraires, car cela fonctionne avec le pattern matching. Ensuite il faut ajouter le signe égal suivi du signe supérieur "=>". Et enfin, nous définissons le message à envoyer au composant. Attention ! Les paramètres sont définis, dans la documentation, dans le paramètre Fn. Par exemple "fn connect_activate<F: Fn(&Self) + 'static>(&self, f: F) -> SignalHandlerId", l'évènement est activate, le paramètre &self (Fn(&self)), donc on écrira activate(comp) => $handler, par exemple, ou même activate(_) => $handler. Où $handler est le code de votre gestionnaire pour cet évènement.

Ainsi lignes 50 à 53, l’événement Activate du widget Entry est lié au message UpdateMessage en cas de succès de récupération de la valeur du champ texte, ou à Ignore en cas d'échec divers.

Par contre, ligne 60, pour l'événement delete_event() de la fenêtre principale, nous retournons un Tuple dont le 1er paramètre est le type de message (ici Quit) et le deuxième paramètre est la valeur de retour attendue par l'évènement delete_event. En effet, si vous consultez la documentation de connect_delete_event, du trait WidgetExt (implémenté par gtk::Window), vous verrez qu'il faut retourner une valeur Inhibit. En effet la méthode est défini comme suit
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
fn connect_delete_event<F: Fn(&Self, &Event) -> Inhibit + 'static>(
    &self,
    f: F
) -> SignalHandlerId
(J'ai mis en évidence ce qui nous intéresse vraiment.)
Cette valeur sert à déterminer si les gestionnaires par défauts de l'événement restent actifs ou non. Même si la documentation recommande de ne pas les désactiver (donc de passer Inhibit(false)), il est possible de les désactiver (Inhibit(true)).

Lignes 65 à 67: cette méthode nous permet d'appeler simplement le code d’exécution de l'application dans la fonction main. En effet, le code qu'elle contient doit être définit dans la même "portée" que la définition de notre composant, macro de génération oblige.

Le code principal main.rs

Ici rien de bien compliqué, grâce notamment à la définition de la méthode run_app dans le module gui.rs .

Conclusion

Dans ce tutoriel, nous avons vu une utilisation basique du framework Relm, dont le but est simplifier la création d'applications GTK en Rust.
J'espère que ce billet n'a pas été trop indigeste.

Je voudrais remercier antoyo, l'auteur du framework, pour ses précieuses réponses à mes questions sur le forum Gitter dédié à Relm. ]]> tails https://www.developpez.net/forums/blogs/26529-tails/b8921/rust-gtk-rs-relm-tutoriel-simple-application-saluant-l-utilisateur-prenom-qu-renseigne/ Le langage Rust : ma nouvelle cible pour développer des applications de bureau :) https://www.developpez.net/forums/blogs/26529-tails/b6655/langage-rust-nouvelle-cible-developper-applications-bureau/ Fri, 30 Nov 2018 13:31:15 GMT Cela fait quelques années que... Cela fait quelques années que je suis de près ou de loin le langage de Mozilla : mais en ayant "abandonné" à plusieurs reprises. Toutefois, j'ai décidé de m'y remettre sérieusement depuis quelques semaines : fort des évolutions positives du langage, et d'une plus grande facilité en ce qui me concerne pour l'étudier plus profondément.

Justement, je me suis lancé pour défi de développer une application pour les 3 OS principaux en Rust et Gtk. Et même si elle n'est encore qu'à ses balbutiements, je dois dire que je prends de plus en plus de plaisir à la développer. De plus le canal de chat Rust sur Gitter est très accueillant, toujours prêt à aider et à expliquer les concepts difficiles.

Bref, j'ai également pu me rendre compte, moyennant quelques prises de têtes, combien il peut être aisé de développer une application depuis un environnement Linux, la publier sur Github, et ensuite la récupérer très simplement et la faire tourner sur Windows. La documentation officielle de Gtk-Rs expliquant correctement la démarche quant aux prérequis pour installer Gtk sous Windows (Je suis passé, non par l'utilitaire MinGW, mais par CygWin).

De plus, l'application fonctionne aussi bien en mode Debug qu'en mode Release (les ressources images sont le point critique).

Pour finir, voici des résultats très intéressants d'un sondage Rust anglophone.

Voilà, en espérant que vous avez eu plaisir à lire ce billet ]]> tails https://www.developpez.net/forums/blogs/26529-tails/b6655/langage-rust-nouvelle-cible-developper-applications-bureau/ <![CDATA[[Kotlin] Déclarations/Types/Inférence de types]]> https://www.developpez.net/forums/blogs/26529-tails/b3685/kotlin-declarations-types-inference-types/ Tue, 05 Sep 2017 10:04:37 GMT _Déclarations_ Comme vous... Déclarations

Comme vous l'avez probablement constaté dans les billets précédents, en Kotlin lors d'une déclaration de variable (val ou var) on précise dans l'ordre :
  1. son immutabilité (val ou var ?) : pour rappel, val désigne une valeur fixée, donc immuable. Alors que var désigne une variable donc muable
  2. son nom : comme en Java, soumis à des restrictions et de plus limité par l'existence de mots-clés propres à Kotlin
  3. son type : nous allons y venir très vite


(Bien sûr dans le cas où l'on utilise pas l'inférence de type, point sur lequel je reviendrais vite fait plus tard dans ce billet).

Ainsi l'on peut écrire :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
var loopCount:Int = 5
val student55 = Student(firstName = "John", lastName = "Doe", age = 36) // Petit spoiler sur la création de classes :p
Les Types

Le type logique : Boolean

Tout d'abord, première remarque, le type Boolean prend une majuscule en Kotlin. Cela sera aussi le cas avec les autres types de Java -qui étaient primitifs en Java et ne le sont plus en Kotlin : le fameux "tout est objet"- qui prenaient une minuscule : Int, Float, Double, Long, Short, Byte.

Rien de nouveau à part cela : true/false sont les deux valeurs possibles, et les opérateurs &&/||/! fonctionnent de la même manière qu'en Java. Vous ne devriez pas être embêté par l'utilisation des Boolean.

Les types numériques

Int, Short, Byte, Long, Float, Double : presque comme en Java, hormis la majuscule.

Déjà, commençons par un détail subtil : la conversion automatique en Wrapper ou primitif par le compilateur Kotlin. En effet, Kotlin essaiera dans la mesure du possible, pour des raisons de performances, de convertir la valeur en type purement primitif, et non en Wrapper. Mais dans certains cas cela sera impossible, par exemple pour l'utilisation de Générics.

Ensuite, la taille mémoire est la même qu'en Java pour chacun des types. (Vérifiez d'ailleurs par vous-même).

Les littéraux sont semblables à Java : 12 est un Int, 12L est une Long, 123_456_789 est autorisé.

Détail très important, si ce n'est le plus important de cette section : il n'y a aucune conversion automatique entre les différents types ! (Aucune coercition ni promotion).

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
val a:Int = 120L.toInt() // ok
// val b:Int = 120L // =>  erreur de compilation !!!
val c:Long = 120 // fonctionne grâce à l'inférence de type !
// val d:Long = a // =>  erreur de compilation !!!
Enfin, les opérateurs de manipulation de bits de Java sont remplacés par des fonctions en Kotlin:
  • shl : équivalent de << (shift left)
  • shr : équivalent de >> (shift right)
  • ushr: équivalent de >>> (unshift right)
  • and()/or()/xor() : équivalents respectifs de &/|/^
  • inv() : inversion de bits


Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
val x = (1 shl 2) and 0x000FF000

Les type "Littéraires"

*)Le type Char : pas de difficulté particulière, si ce n'est que convertir un Char vers Int et inversement n'est pas automatique

*)Le type String
Tout d'abord il y a une nouvelle façon de déclarer une String, qui convient au format multilignes :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
"""
Mon
texte
multi lignes
"""
Attention ! Ce format n'échappe pas les caractères spéciaux !
En revanche, si la chaîne est agrémentée d'indentations pour une meilleure mise en forme, voici comment y remédier :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
println("""|Voici
        |une simple
        |façon de traiter
        |une chaine multi lignes.
    """.trimMargin())
Enfin, une fonctionnalité très utile, les templates : elles fonctionnent d'ailleurs aussi bien avec le format standard que le format multi-lignes.

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
val name = "Cora"
val age = 10

println("$name a $age an(s)")
Ou encore, adaptons le pluriel de l'âge :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
val name = "Cora"
val age = 10

println("$name a $age an${if (age > 1) "s" else ""}")
Le type range

Qui n'a jamais trouvé laid de devoir sans cesse écrire un code de ce genre en Java ?

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
if (c >= 0 && c <= 10)  { // instructions }
ou encore

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
for (int i=0; i<=10; i++) { // instructions }
C'est là qu'en Kotlin on peut faire intervenir le type Range (Intervalle) :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
if (c in 0..10) { // instructions } // teste si c est supérieur et égal à 0 et inférieur et égal à 10
De même

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
(0..10).forEach { i -> // instructions impliquant i }
Ce code fait intervenir une lambda (fonction anonyme), que nous aurons l'occasion d'étudier ultérieurement.

N'oublions pas le mot-clé when :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
when(x_avion) {
   in 0..10, in 20..30 -> "L'attérissage est râté" // teste si x_avion est ou bien dans 0..10 ou dans 20..30
   in 11..19 -> "L'attérissage est réussi"
   else -> "Vous êtes sûr que l'on joue au même jeu ?"
}
Inférence de types

Vous en avez déjà vu dans les billets précédents, j'ai beaucoup tendance à m'en servir :)

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
val x = 120 // le compilateur a déduit que x est un Int
val x:Long = 120 // en revanche, le compilateur a déduit que le littéral 120 est à convertir en Long, et comme c'est possible, ça passe.
L'inférence de type désigne toutes les situations où l'on ne déclare pas le type mais que le compilateur parvient à déduire du contexte.
Je n'ai pas encore abordé les fonctions/méthodes, mais ça fonctionne aussi dans ce cas :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
fun Hello() = "Hello, World !"
équivaut à
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
fun Hello():String {
    return "Hello, World !"
}
Dans le premier cas le compilateur a juste déduit que le type de retour est String grâce à l'expression à droite de la déclaration de fonction.

Sachez également que les Closures/Lambdas - qui n'ont pas été abordées - peuvent aussi utiliser l'inférence de type.

Ouf ! Cela fait beaucoup d'informations dans ce billet, même si je n'ai évoqué que des bases.
J'espère que vous avez pris du plaisir à lire ce billet :) ]]> tails https://www.developpez.net/forums/blogs/26529-tails/b3685/kotlin-declarations-types-inference-types/ <![CDATA[[Kotlin] Expressions]]> https://www.developpez.net/forums/blogs/26529-tails/b3667/kotlin-expressions/ Sat, 02 Sep 2017 07:01:50 GMT Comme en Java, en Kotlin tout... Comme en Java, en Kotlin tout ce qui retourne une valeur est une expression : litéral, opération, appel de fonction ...
On peut aussi combiner déclaration et expressions :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
val a = 10
val b = f(150)
val c = 60*89
Là où les choses deviennent intéressantes, c'est l'emploi de certaines structures de contrôles en tant qu'expressions !!!
Je m'explique. Prenons le snippet suivant :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
val majeur = if (age < 18) "Non" else "Oui"
N'y remarquez-vous rien d'étrange ?

Et oui, la structure de contrôle if est bien utilisée comme expression afin d'initialiser la variable majeur. D'ailleurs, au passage, il n'y a pas d'opérateur ternaire en Kotlin : cette syntaxe remplace l'opérateur ternaire.

D'ailleurs je vous ferais remarquer que dans le cas de blocs en lieu et place des branches, la valeur de chaque branche correspond à la valeur de sa dernière ligne (et donc Unit -équivalent de Void- si jamais cette dernière ligne ne retourne aucune valeur) :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
val majeur = if (age < 18) {
   println("Non, accès interdit !")
   false
}
else {
    println("C'est bon, entrez !")
    true
}
Il va de soi que les différentes branches doivent retourner des valeurs compatibles.

Une autre situation : le mot-clé when :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
val resultat = java.util.Random().nextInt(21)
	println(when (resultat) {
       in 0..9 -> "Passable"
       in 10..14 -> "Bien"
       in 15..18 -> "Très bien"
       in 18..20 -> "Excellent et prometteur !"
       else -> throw IllegalArgumentException()
    })
Alors plusieurs remarques sur le code :
  • j'utilise directement le résultat de l'expression offerte par when dans la fonction println
  • je teste à chaque fois si la valeur figure dans la plage donnée. En effet le mot-clé in permet de tester l'appartenance (de manière générale sur tout itérateur) et 0..9 est une "range", un intervalle valant [0,9] pour les matheux. Pour les autres cela signifie simplement que les valeurs 0 et 9 sont comprises. Enfin, les range en Kotlin n'impliquent que des entiers
  • j'utilise une forme générique de when : on peut tester de simples valeurs, des intervalles, le fait que ce soit une instance de telle classe ... Plus d'exemples dessous.
  • enfin, si je lance une exception, son type de retour est Nothing, et comme Nothing est considéré comme sous-classe de toutes les classes existantes en Kotlin, cela ne pose aucun problème. Alors que vaut Nothing ? Et bien rien ! En effet, quand je lance une exception le programme s'arrête ou en tout cas la fonction où elle est lancée si il n'y a pas de try/catch


Avant de finir avec l'utilisations de when, il faut être conscient que try/catch/finally est aussi une expression !

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
val nombre = try {
  10 / 0
} catch (e: ArithmeticException){
   0
}

println("Nombre vaut $nombre")
Comme vous l'aurez probablement deviné sans même passer par le playground Kotlin, ce code affiche tout simplement "Nombre vaut 0".

Revenons maintenant, sur le mot-clé when.

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
    val a = 10
    when {
       a in -10..3 -> println("Evidement ça ne passe pas ici !")
       a < -1 -> println("Là non plus !")
       else -> println("C'est bon !")
    }
Ceci est la forme générique du when, sans test de variable direct. Notez bien qu'afin de couvrir tous les cas imaginables, le mot-clé else est ici obligatoire (c'est le default du switch de java). Aussi, on ne peut comparer un Int et un Double en Kotlin (si j'avais précisé `a !is Double` dans l'une des branches, j'aurais eu une erreur de syntaxe). Le trantypage automatique n'existe pas en Kotlin (un choix qui peut paraître honorable).

Cette forme
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
     val a = 10
    println(when (a) {
        in -10..-1, in 1..10 -> "Valeur non nulle"
        else -> "Valeur nulle"
    })
est la forme directe que nous avons déjà rencontré auparavant.

Voilà, j'espère que vous aurez pris du plaisir à lire ce billet :) ]]> tails https://www.developpez.net/forums/blogs/26529-tails/b3667/kotlin-expressions/ <![CDATA[[Kotlin] Nullabilité ?]]> https://www.developpez.net/forums/blogs/26529-tails/b3659/kotlin-nullabilite/ Thu, 31 Aug 2017 06:57:29 GMT Amis programmeurs Kotlin,... Amis programmeurs Kotlin, pour ceux qui auraient remarqué, désolé pour l'humour bidon :mrgreen:
Les autres auront la possibilité de comprendre après avoir lu ce billet :)

Qu'est-ce qui différencie un type "nullable" d'un type standard ?

En java toute référence (donc non sur un type primitif) peut pointer
  • soit sur un objet défini
  • soit sur la valeur null

A ce propos : en Kotlin, il n'y a pas la notion de type primitif et de wrapper. Par défaut, un Int est converti vers une type primitif pour des raisons de performances, et sinon dans un type java.lang.Integer quand cela n'est pas possible pour le compilateur.

Cependant en Kotlin, une distinction très importante et utile est faite par le compilateur entre un type qui peut valoir null, et un type qui n'acceptera jamais la valeur null.
Illustration avec le snippet suivant :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
val age:Int = 10 // ok
val age:Int = null // erreur de compilation !!!

(A) val adresse:String? = "Saint-Germain en Laye" // Besoin de commenter ?
(B) val adresse:String? = null // Ok, ca passe sans problème
Ainsi un type nullable se déclare avec le type de base auquel on ajoute le symbole '?'.

Alors, que se passe-t-il si je veux accéder à la longueur de la chaîne adresse ci-dessus ? Et bien, surprise (ou non), mais dans l'extrait (A) tout comme l'extrait (B), il y aura une erreur de compilation ! Avouez que cela est bien utile pour éviter bien des écueils :)

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
val adresse:String? = "Saint-Germain en Laye" 
println(adresse.length) // erreur de compilation !!! Impossible d'accéder à la propriété length car adresse est nullable !
Mais alors, comment malgré tout accéder à la longueur "au moins" -vous comprendrez plus tard dans ce billet" - dans le cas (A) , où l'on sait pourtant plus que le compilateur et on est sûr que la valeur n'est pas null ?
C'est justement l'objectif de la section suivante, mais juste à titre d'exemple, on pourrait écrire
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
val adresse:String? = "Saint-Germain en Laye" 
if (adresse != null) println(adresse.length)
L'utilisation d'un type nullable

Comme nous l'avons vu plus haut, la structure de contrôle if permet d'utiliser simplement une valeur nullable :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
val adresse:String? = "Saint-Germain en Laye" 
if (adresse != null) println(adresse.length)
Question d'observation : avez-vous remarqué l'utilisation de la variable adresse sans avoir effectué aucun casting de String? vers String ? Ici on a une nouvelle application de la notion de Smart-Cast, tel que décrit dans un précédent billet.

Toutefois cela ne peut fonctionner avec le mot-clé when : cette structure de contrôle n'acceptant que des comparaison de valeurs (sans "is") ou de type (avec "is", comme vu précédemment dans la section casting de types) : à moins de s'embêter à vérifier les deux types, à savoir nullable et non nullable. Mais quel en serait l'intérêt :weird: ?

Sinon il y a un moyen beacoup plus simple de s'y prendre, qui combine deux syntaxes n'existant pas en Java :
  • l'acces à une propriété nullable (.?)
  • l'opérateur Elvis (?:)


Avec l'accès à une propriété nullable :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
val monNullable: String? = "12345"
val monNull: String? = null

println(monNullable?.length) // affiche 5
println(monNull?.length) // n'affiche rien !!!
Ainsi, pour la variable monNull, monNull?.length retourne null, sans provoquer d'exception, et l'instruction associée (à savoir println) n'est pas exécutée.

On aurait pu aussi afficher une valeur par défaut, une valeur de substitution pour ce cas précis. En effet, Kotlin reconnaît l'opérateur elvis (?:) :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
val monNullable: String? = "12345"
val monNull: String? = null

println(monNullable?.length ?: 0) // affiche 5
println(monNull?.length ?: 0) // affiche 0
Voilà, j'espère que vous aurez pris plaisir à lire ce billet :) ]]> tails https://www.developpez.net/forums/blogs/26529-tails/b3659/kotlin-nullabilite/ <![CDATA[[Kotlin] Documentation officielle et livre recommandé]]> https://www.developpez.net/forums/blogs/26529-tails/b3654/kotlin-documentation-officielle-livre-recommande/ Thu, 31 Aug 2017 04:53:30 GMT Amis programmeurs de Kotlin,... Amis programmeurs de Kotlin, voici quelques ressources intéressantes :

]]> tails https://www.developpez.net/forums/blogs/26529-tails/b3654/kotlin-documentation-officielle-livre-recommande/ <![CDATA[[Kotlin] Essayer son propre code en ligne (et donc les snippets de ce tutoriel)]]> https://www.developpez.net/forums/blogs/26529-tails/b3649/kotlin-essayer-propre-code-ligne-snippets-tutoriel/ Thu, 31 Aug 2017 04:48:35 GMT Voici une adresse très utile,... Voici une adresse très utile, amis programmeurs Kotlin : Playground Kotlin.
N'hésitez pas à tester
  • vos propres codes
  • les snippets du tutoriel (attention toutefois à les insérer dans la méthode main quand les snippets ne le font pas !)
  • les koans et autres snippets, certes en anglais, offerts par JetBrains


Au cas où vous aurez tout effacé, la méthode main, en Kotlin, se déclare ainsi :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
fun main(args: Array<String>){
}
Allez, amusez-vous bien :) ]]> tails https://www.developpez.net/forums/blogs/26529-tails/b3649/kotlin-essayer-propre-code-ligne-snippets-tutoriel/ <![CDATA[[Kotlin] Casting par le biais du mot-clé "when"]]> https://www.developpez.net/forums/blogs/26529-tails/b3645/kotlin-casting-biais-cle-when/ Wed, 30 Aug 2017 09:11:51 GMT Contrairement au Java, bien... Contrairement au Java, bien qu'il existe un mot-clé dédié à cet effet, le casting de type se fait à l'aide d'une structure de contrôle. Elle s'appelle when : c'est en quelque sorte la structure switch de Java mais bien plus puissante. Par contre ici, nous nous limiterons à l'une des utilisations les plus simple afin de pouvoir effectuer un casting de type.

Soit la hiérarchie de classes suivantes (vous noterez que créer une classe en Kotlin est bien plus simple qu'en Java) :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
class Figure
class Rectangle(val largeur: Double val longueur: Double) : Figure {
    fun perimetre(): Double = 2*(largeur + longueur)
}
class Cercle(val centre: Point, val rayon: Double) : Figure {
   fun aire() : Double {
       return 2*Math.PI*rayon
   }
}
Ici je déclare une classe concrète Figure qui ne fait absolument rien.
Quatre remarques importantes :
  • On déclare le constructeur en même temps que la classe. (Comment alors définir plusieurs constructeurs ? Cela sera l'objet d'un billet ultérieur:P),
  • Pour dériver une classe, on utilise la syntaxe ": <Classe de Base>", avec éventuellement les paramètres renseignés pour le constructeur de la classe de base (Idem pour le cas des constructeurs multiples pour la classe de base : ce sera l'objet d'un billet ultérieur),
  • On déclare le type d'une variable avec la syntaxe "val <NomVariable> : <Type>" , comme vu dans le billet précédent sur l'immutabilité,
  • Enfin le fait de déclarer un paramètre comme val permet de créer automatiquement un getter (et aucun setter) pour la variable déclarée tandis que l'utilisation de var permet de générer automatiquement à la fois un getter et un setter pour la dite propriété.


Je vous prie de ne pas attacher trop d'importante à la syntaxe de déclaration de fonctions/méthodes (notamment aire() et perimetre()) pour l'instant.

Ainsi, le code suivant est valide :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
class Adress(val ville: String, val codePostal: Int)
class Person(val nom: String, val prenom: String, var adress: Adress)

val noemie = Person("Tartempion", "Noemie", Adress("Troyes", 10420))
println(noemie.adress.ville) // afficher du texte sur la sortie standard est bien plus simple en Kotlin.
noemie.adress = ("Strasbourg", 67000)
// En revanche le code suivant provoquera une erreur de compilation
noemie.prenom = "Toto"
//De même celui-là
noemie.adress.codePostal = 15200
Remarquez aussi que l'on crée une instance de classe sans le mot-clé new, contrairement au Java.

Il me manque aussi la classe Point :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
class Point(val x: Double, val y: Double)
Nous pouvons donc écrire le code suivant :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
val allFigures = arrayOf(Rectangle(10.0, 20.0), Cercle(Point(5.0, -15.0), 20.0) // Déclare un simple tableau de Figures (polymorphique)
// Ecriture equivalente : val allFigures = arrayOf<Figures>(Rectangle(10.0, 20.0), Cercle(Point(5.0, -15.0), 20.0) : le precent code fait appel à l'inference de type

for (currentFigure in allFigures) {
   when (currentFigure) {
       is Rectangle -> println("Mon permimetre est de ${currentFigure.perimetre()}")
       is Cercle -> println("Mon aire est de ${currentFigure.aire()}")
   }
}
Plusieurs remarques sur le code précédent :
  • La boucle for est simplifiée par rapport au Java : écrire "for (valeur: Int = 0; valeur < 10; valeur++)" ou tout code de ce genre est totalement interdit en Kotlin. Il faut obligatoirement passer par un itérateur !
  • On teste dans chaque branche de when à l'aide du mot clé if, et on ne met ni point-virgule, ni virgule ... rien en fin de ligne de chaque branche !!!
  • Ici je crée une TemplateString : dès que le compilateur verra $a dans la chaîne "Voici a : $a", il remplacera la chaîne "$a" par la valeur de a. Par contre si l'on doit utiliser une expression, il faut l'englober dans des accolades, comme dans le code.
  • Enfin, l'aspect le plus inattendu, le SmartCast. Une fois que le compilateur voit is Rectangle, c'est comme si il avait aussitôt transformé lui-même la variable currentFigure en instance de Rectangle, de sorte que la méthode perimetre() peut être directement appellée. Mais attention, cela ne vaut que pour cette branche-ci ! De même pour la branche is Cercle.


Voilà ! En espérant ne pas trop vous avoir noyé et que vous avez pris du plaisir à lire ce billet ! ]]> tails https://www.developpez.net/forums/blogs/26529-tails/b3645/kotlin-casting-biais-cle-when/ <![CDATA[[Kotlin] Immutabilité]]> https://www.developpez.net/forums/blogs/26529-tails/b3643/kotlin-immutabilite/ Wed, 30 Aug 2017 08:29:19 GMT En programmant sous Kotlin,... En programmant sous Kotlin, la gestion de l'immutabilité est ultra-simple. Par exemple dans le code suivant :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
val a = 10
val b = "Toto"
Les variables a et b valent respectivement 10 et "Toto" et ce, de manière définitive !

Remarquez d'ailleurs que j'ai ici utilisé l'inférence de type, qui consiste à laisser le compilateur deviner le type de variable lui-même.
J'aurais très bien pu écrire :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
val a:Int = 10
val b:String = "Toto"
Où ici Int représente soit un entier primitif ou un wrapper Int (en l’occurrence ici un entier primitif car on a déclaré un littéral : 10).

Veuillez remarquer l'absence de point-virgules en fin de ligne : ils sont optionnels.

Enfin, pour déclarer une variable que l'on sait muable, il faut utiliser le mot-clé var en lieu et place de val.

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
var a = 10
var b = "Toto"

a = 120
b = "Gros zéro !"
Voilà, en espérant que vous aurez pris plaisir à lire (voir relire) ce billet ! ]]> tails https://www.developpez.net/forums/blogs/26529-tails/b3643/kotlin-immutabilite/ <![CDATA[[C++11]Constructeur par copie et opérateurs d'affectations : comment éviter de dupliquer le code ?]]> https://www.developpez.net/forums/blogs/26529-tails/b3271/cpp11-constructeur-copie-operateurs-d-affectations-eviter-dupliquer-code/ Thu, 22 Jun 2017 12:03:11 GMT Récemment je me suis demandé... Récemment je me suis demandé comment initialiser proprement une classe avec les différents constructeurs et opérateurs de copie/affection proprement, sans dupliquer le code, étant donné que la classe ne compte aucun pointeur nu. Je me suis donc orienté sur le forum de developpez. La réponse citée vient du topic que j'ai crée à ce sujet.

Et je dois dire que j'ai appris pas mal de choses durant cette discussion, dont notamment :
  • l'utilisation de std::move (header <utility>) pour gérer proprement le transfert
  • le 4e constructeur (dont j'ignorais complètement l'existence)


Bref, cela a été pour moi une excellente occasion de renforcer mes connaissances et mes bonnes pratiques.

Page de la discussion originale

Citation Envoyé par tails Voir le message
Bonjour à tous :)

J'ai besoin de créer un constructeur par copie dans une classe personnelle, et deux opérateurs d'affectations (un avec une R-Value), mais j'ai dû dupliquer le code :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Operation::Operation(const Operation &valueToCopy){
    this->_operator = valueToCopy._operator;
    this->_tile_1 = valueToCopy._tile_1;
    this->_tile_2 = valueToCopy._tile_2;
}

Operation& Operation::operator=(Operation&& valueToCopy){
    this->_operator = valueToCopy._operator;
    this->_tile_1 = valueToCopy._tile_1;
    this->_tile_2 = valueToCopy._tile_2;
    return *this;
}

Operation& Operation::operator=(const Operation& valueToCopy){
    this->_operator = valueToCopy._operator;
    this->_tile_1 = valueToCopy._tile_1;
    this->_tile_2 = valueToCopy._tile_2;
    return *this;
}
(Si vous vous demandez pourquoi les 3, c'est simplement pour mieux utiliser la STL, elles paraissent indispensables pour utiliser les méthodes de certaines collections).

Comment faire plus simple, factoriser tout cela en réutilisant l'une des 3 méthodes dans les deux autres ? J'avais vu dans un cours, mais j'ai carrément oublié.

Autre question liée : vu que je n'utilise pas de pointeur nu dans ma classe, je n'ai pas besoin de surcharger le destructeur : n'est-ce pas ?
Citation Envoyé par dalfab Voir le message
Je ne vois pas du tout l’intérêt de ces fonctions qui ne font que ce que font les fonctions par défaut. Mais en nettement moins optimal!
Voilà le code qui est utilisé si ces fonctions ne sont jamais déclarés ou si elles sont définies en "= default" :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
Operation::Operation( const Operation &valueToCopy )
:  _operator(valueToCopy._operator),
   _tile_1(valueToCopy._tile_1) ,  _tile_2(valueToCopy._tile_2) {
       // crée les 3 membres et les initialise en même temps
}

Operation& Operation::operator=( Operation&& valueToCopy ) {
   this->_operator = std::move(valueToCopy._operator);
   this->_tile_1 = std::move(valueToCopy._tile_1);
   this->_tile_2 = std::move(valueToCopy._tile_2);
   // fait un transfert des éléments au lieu d'une simple copie
   return *this;
}
 
Operation& Operation::operator=( const Operation &valueToCopy ) {
    // peut utiliser un swap par exemple ou
   if ( &valueToCopy != this ) {
      this->_operator = valueToCopy._operator;
      this->_tile_1 = valueToCopy._tile_1;
      this->_tile_2 = valueToCopy._tile_2;
   }
   return *this;
}

// et il manque une quatrième, le constructeur par transfert
Operation::Operation( Operation&& valueToMove )
:  _operator(std::move(valueToMove._operator)),
   _tile_1(std::move(valueToMove._tile_1)) ,  _tile_2(std::move(valueToMove._tile_2) {
}
]]> tails https://www.developpez.net/forums/blogs/26529-tails/b3271/cpp11-constructeur-copie-operateurs-d-affectations-eviter-dupliquer-code/