Comme bon nombre de développeurs, j’adore découvrir de nouveaux langages (utiles ou non). Le soucis avec des langages comme le brainfuck c’est qu’on est assez vite limité. Même si le langage permet théoriquement de faire des programmes assez complexes, le code est vite indigeste et compliqué à faire évoluer. Un des soucis de certains langages également c’est la difficulté de créer des interfaces graphiques. Ce qui limite beaucoup le public auquel on veut envoyer notre programme. Je vous propose donc aujourd’hui de découvrir un langage qui permet de créer des programmes graphiques simplement et le tout avec une syntaxe simple: le Red.

Qu’est-ce que le langage Red ?

Créé en 2011 par Nenad Rakocevic, le Red est un langage qui repose sur le langage Rebol et qui se veut « human-friendly« , qui est multi-os (il fonctionne donc aussi bien sous Windows, MacOS et Linux) et qui ne nécessite aucune installation. Il a également pour vocation de devenir le premier langage de programmation FullStack. Après l’annonce officielle du projet lors de la conférence « REBOL & Boron » le 26 février 2011, le projet connut un tel succès qu’il valut à Nenad le titre de « Rebol de l’année 2011″.

Je vous propose donc aujourd’hui de découvrir un peu le Red au travers de quelques exemples. Et comme pour tous les langages de programmation, nous allons d’abord apprendre à dire bonjour. Cet article s’adresse à des gens ayant déjà quelques notions en informatique et à qui les notions de variables, de fonction et de terminal parleront.

Hello World

Tout d’abord vous devez télécharger le binaire de Red sur ce lien. Si vous êtes sous windows vous n’avez qu’à double-cliquer dessus, si vous êtes sous Linux ou MacOS (en 32bits uniquement désolé) vous devez simplement lancer ces deux lignes de commande dans votre terminal:

$ chmod u+x <red-binary>
$ ./<red-binary>

Cela étant fait nous pouvons désormais commencer à écrire du Red. Créez un fichier et nommez-le « hello.red », il contiendra tout le code de notre application. Comme je vous ai vanté la facilité de créer une interface graphique avec le Red nous allons sauter l’étape du simple print dans un terminal pour faire ça directement avec des éléments plus visuels. Nous devons donc préciser que nous voulons utiliser le composant « view » de Red comme ceci:

Red [needs: 'view']

Notez l’utilisation des crochets, en Red vous pouvez oublier les parenthèses et les accolades: seuls les crochets sont utilisés. Nous voulons maintenant préciser le contenu, pour ceci nous allons utiliser la syntaxe suivante:

view [

]

Ici nous précisons que nous utilisons le composant view et tout ce qui sera entre les crochets dépendra de ce composant.

Nous allons maintenant afficher un champ de texte qui nous permettra de préciser à qui nous allons dire bonjour et un bouton qui déclenchera l’affichage de la phrase. Pour pouvoir récupérer la valeur de notre champ de texte nous allons le stocker dans une variable, pour cela il vous suffit d’écrire dans votre view, à l’intérieur de notre view:

name: field

Sur ce bout de code notre variable est appelée « name » et nous lui assignons « field » qui est un champ de texte de base qui sera automatiquement affiché sur notre fenêtre. Nous allons maintenant afficher le bouton, écrivez en dessous:

button "Dire bonjour"

Ici nous n’avons pas besoin de le stocker dans une variable. On se contente donc de l’afficher en écrivant « button » puis on précise que le bouton affichera le texte « Dire bonjour ». Si vous exécutez le code vous devriez maintenant voir ceci:

Notre premier programme en red

Faire réagir notre bouton

Si vous cliquez sur le bouton vous aurez sans doute remarqué, déçu, que rien ne se passe. Et pour cause: nous n’avons pas encore précisé le comportement de notre bouton. Nous allons afficher dans la console le texte « Hello » suivi du nom saisi dans le champ de texte. Pour cela, juste après la déclaration de votre bouton (sur la même ligne) écrivez:

[print ["Hello" name/text]]

Ce code entre crochet précise que tout ce qui se trouve dedans sera exécuté au clic sur le bouton. Nous appelons donc la fonction print (qui comme dans la plupart des langages se contente d’afficher un texte dans la console) en lui donnant comme paramètre la chaine de caractère « Hello » ainsi que la propriété « text » de notre variable « name ». Comme vous l’aurez sûrement deviné la propriété text correspond à la valeur entrée dans notre champ de texte. Vous devriez normalement vous retrouver avec le code suivant:

Red [
    needs: 'view'
    Title: "Test"
]

view [
    name: field
    button "Dire Bonjour" [print ["Hello" name/text]]
]

Et à l’exécution vous devriez obtenir le résultat suivant:

Hello World en Red

Application factorielle

Pour aller plus loin nous allons maintenant essayer de créer une application qui nous donne la factorielle d’un nombre. Nous allons créer une interface avec 5 boutons numérotés de 1 à 10 et un texte qui affichera le résultat. Afin de nous éviter d’écrire chaque bouton un à un et définir un comportement pour chaque nous allons prédéfinir un style. Commençons avec le code suivant:

Red [needs: 'view']

view [
  title "Factorielle"

  result: text
  return

  style b: button 45x35
]

Dans ce code nous stockons le texte dans une variable pour pouvoir modifier sa valeur plus tard. Nous appelons ensuite la fonction return qui permet un retour à la ligne dans notre interface. Nous définissons ensuite un style que nous nommons b qui sera juste un bouton de 45px*35px. Pour ensuite utiliser ce style il suffit d’écrire à la suite (on verra les boucles dans un article suivant):

b "1"
b "2"
b "3"
b "4"
b "5"
b "6"
b "7"
b "8"
b "9"
b "10"

Ici nous annonçons que nous voulons un élément de type b avec comme texte « 1 », puis « 2 », … Vous devriez obtenir le résultat suivant:

Début de notre interface

Faire fonctionner tout ça

Avant de savoir comment nous allons récupérer la valeur des boutons, nous allons d’abord créer notre fonction factorielle. La structure d’une fonction est la suivante:

nomDeLaFonction: func [
  //paramètre       [type]
  return: [type]
][
  // corps de la fonction
]

Pour notre fonction factorielle nous avons besoin d’un Integer que nous nommerons x et nous retournerons un Integer. Écrivez donc déjà au dessus de votre view[]:

factorial: func [
  x       [integer!]
  return: [integer!]
][
]

Ensuite nous devons voir si x est égal à 0. Si oui on retourne 1, sinon nous devons calculer x * (x – 1)!. Donc x multiplié par la factorielle de x – 1 (je ne m’attarderai pas sur l’explication du calcul pour simplifier l’article, l’idée ici est simplement d’utiliser une fonction récursive). La structure du if/else en Red est la suivante:

either condition [//code si true][//code si false]

Nous pouvons donc écrire:

factorial: func [
  x       [integer!]
  return: [integer!]
][
  either x = 0 [1][x * factorial x - 1]
]

Ainsi la fonction s’appellera elle-même pour calculer les factorielle des nombres jusqu’à 0. Notez que nous n’avons pas besoin en Red de préciser ce qui doit être retourné par la fonction. Il retourne automatiquement la dernière valeur évaluée par la fonction. Nous pouvons maintenant appeler cette fonction au clic sur un bouton. Pour cela nous allons définir le comportement directement dans notre style b. Essayons d’abord de simplement afficher le texte de notre bouton.

style b: button 45x35 [
  print face/text
]

Sauf que notre fonction prend en paramètre un Integer. Nous devons donc le convertir pour appeler notre fonction. La conversion en Red est assez simple:

factorial to integer! face/text

Ce code permet d’appeler notre fonction « factorial » avec la valeur numérique du texte de notre bouton. Nous pouvons désormais convertir le résultat en string puis l’afficher dans notre text nommé « result ».

style b: button 45x35 [
  result/text: to string! factorial to integer! face/text
]

Et voilà ! Vous pouvez désormais connaître la factorielle des entiers de 1 à 10 grâce à notre petit programme d’une trentaine de lignes ! Voici le code complet de notre application:

Red [needs: 'view']

factorial: func [
  x       [integer!]
  return: [integer!]
][
  either x = 0 [1][x * factorial x - 1]
]

view [
    result: text
    return

    style b: button 45x35 [
       result/text: to string! factorial to integer! face/text
    ]

    b "1"
    b "2"
    b "3"
    b "4"
    b "5"
    b "6"
    b "7"
    b "8"
    b "9"
    b "10"
]

Et le résultat de la factorielle de 9:

Résultat de la factorielle de 9

C’est tout ce que nous verrons dans cette rapide introduction au langage Red. On reviendra un peu sur ce langage pour aller plus loin et voir comment créer des mini-jeux.