Gambas 3/GraphicalApplication

Créez votre première application graphique

Démarrez l'environnement de développement !

Actions en détails si nécessaire :

Cliquez dans le coin du bas à gauche pour afficher le menu puis
Positionnez la souris sur la catégorie "Programmation" et
Déplacez le pointeur avec votre souris vers la droite (à l'horizontale) et
Cliquez sur Gambas3 !

Créez un projet de type "Application graphique" !

Actions en détails si nécessaire :

Cliquez sur Nouveau projet...
Cliquez sur Application graphique, Application graphique GTK+ ou sur Application graphique QT !
Suivant
Choisissez le dossier et le nom du projet !
Chez moi, je l'ai appelé guigui2. :-P

Ignorez l'astuce du jour pour l'instant !

Voici une petite remarque sur les astuces :

Vous pouvez les afficher avec le menu ?, Astuce du jour.
Une fois la fenêtre affichée, vous pouvez désactiver l'affichage automatique d'une astuce.
Dans la même fenêtre, vous pouvez revenir à l'astuce précédente.

Affichez le volet permettant d'explorer le projet avec la touche F10 si nécessaire !

Un formulaire a été automatiquement créé, c'est le FMain. Il s'agit du formulaire principal.

A ce stade, vous l'aurez compris. Il suffit de faire F5 pour démarrer l'application graphique en mode débogage !

OK. Mais on va en faire plus. :-)

Nous allons insérer un module et nommer MMain.

Pour faire cela, faites :

Clic droit sur le dossier Sources puis
Nouveau
Module
Renommez le module MMain si nécessaire !

Sélectionnez si nécessaire le module MMain en faisant un double-clic sur "MMain" dans le volet du projet !

Ensuite, nous allons faire en sorte que Gambas amorce l'application avec le module que nous venons d'insérer !

Observez le symbole du module et celui du formulaire ! Pour le moment, le projet démarre avec le formulaire. Pour modifier ceci :

Clic droit sur le module MMain
Clic sur Classe de démarrage

Remarquez le symbole dans le volet qui vous indique où Gambas recherche l'amorce du projet.

Nous devons encore insérer la routine Main dans notre module MMain !

Je vais vous faire gagner du temps. Copiez le code ci-dessous et insérez-le dans le module !

' Gambas module file

Private form1 As FMain
Private form2 As FMain

' la routine de démarrage ... 
Public Sub Main()
  
  '
  ' on crée les objets ici ... 
  If Not Object.IsValid(form2) Then
    form2 = New FMain  ' crée un objet avec le moule FMain ...
    form2.DefineCaptionAndText("Fenêtre 2")
    form2.Show()
  Endif
  If Not Object.IsValid(form1) Then
    form1 = New FMain
    form1.DefineCaptionAndText("Fenêtre 1")
  Endif
  '
  ' et on affiche pour la première fois le formulaire 1 ...
  HideAndShow(form2, form1)
  
End

Public Sub HideThisForm(f As Form)
  
  If f = form1 Then
     HideAndShow(form1, form2)
  Else
     HideAndShow(form2, form1)
  Endif
  
End

Public Sub QuitApplication()

  If Object.IsValid(form1) Then
    form1.Close()
  Endif
  If Object.IsValid(form2) Then
    form2.Close()
  Endif
  
End

Private Sub HideAndShow(formToHide As Form, formToShow As Form)
  Dim r, g, b, a As Integer
  
  formToHide.Hide()
  formToShow.Top = formToHide.Top
  formToShow.Left = formToHide.Left
  formToShow.Width = formToHide.Width
  formToShow.Height = formToHide.Height
  r = GetRandomInt()
  g = GetRandomInt()
  b = GetRandomInt()
  a = GetRandomInt()
  formToShow.Background = Color.RGB(r, g, b, a)
  If a < 20 Then a = 20 ' moins de 20 = presque totalement transparent ! 
  Print "Valeur de a == " & CStr(a)
  formToShow.Opacity = a
  formToShow.Show()
  
End

Private Function GetRandomInt() As Integer
  
  Dim f As Float 
  Dim i As Integer
  f = Rnd(0, 256)
  i = Floor(f)
  Return i
  
End

Je vais aussi vous donner le code du formulaire ! Mais comment afficher ce code ?

Pour commencer, je choisi cette manière de faire parmi plusieurs possibilités :

Faites un clic-droit sur FMain puis
Cliquez sur Éditer le code !

S'il y a du code, supprimez le ! Puis copiez le code ci-dessous et insérez-le dans le code du formulaire !

' Gambas class file

' events
Public Sub Form_DblClick()

  MMain.HideThisForm(Me)

End

Public Sub Form_Close()

  MMain.QuitApplication()

End

Public Sub DefineCaptionAndText(caption As String)
  
  Me.Text = caption
  
End

Une autre façon d'éditer le code du formulaire :

Après avoir affiché le formulaire, faites un clic-droit sur le formulaire (au centre de l'écran) !
Cliquez sur Événement !
et choisissez l'événement Close !

Le curseur sera placé dans la procédure Form_Close() car c'est cette procédure qui est appelée par le gestionnaire d'événements de Gambas à la fermeture de la fenêtre.

J'ai aussi utilisée l'événement double-clic. C'est la procédure Form_DblClick().

Cette modeste application colorée jongle avec deux fenêtres. Ceci me permet de vous montrer un peu de code Gambas.

Les routines avec le mot-clef Public peuvent être appelées depuis d'autres modules, ou d'autres formulaires.

Si vous affichez le code du module MMain, il y a tout en bas une routine et une fonction privée. Vous le voyez car il y a le mot-clef Private !

Ceci signifie que l'appel de la routine ou de la fonction ne peut se faire que depuis le code du module. Ceci permet plus de contrôle, plus de sécurité et un code plus propre. Mais au début de votre apprentissage, vous pouvez tout laisser Public.

Démarrez l'application et double-cliquez sur la fenêtre ! Une nouvelle fenêtre apparaît, redimensionnez-la ! Double-cliquez sur la fenêtre pour faire apparaître la première fenêtre ! Etc.

Fermez quand vous serez lassés !

Notez, au passage, que les principes expliqués dans le tutoriel pour le Hello World! en console restent identiques ici.

Vous pouvez générer l'exécutable, ouvrir un terminal et démarrer l'application graphique de la même façon que l'application console :

gbr3 guigui2.gambas

Si vous débutez avec Gambas, retenez les points suivant :

les application graphiques fonctionnent avec une ou plusieurs fenêtres qui ont des contrôles (parfois appelés widgets) et qui ont eux-même des événements (Close par exemple).
l'application se termine quand on a fermé la dernière fenêtre.
vous pouvez éditer le code du formulaire.
vous pouvez tout modifier avec du code (couleur, transparence, position de la fenêtre et plus tard valeurs dans les champs de saisie).

Si vous êtes plus avancé, retenez les points suivant :

MMain est un module statique. C'est du code toujours disponible dans l'application.
FMain est une classe (un moule). Je peux créer plusieurs instances de formulaires avec cette classe (ce moule).
Le code du formulaire n'est accessible que si objet de type formulaire existe.
"Object.IsValid(form1)" vérifie si l'objet existe.
Chaque formulaire généré avec la classe FMain est un objet indépendant. Il a sa propre vie, etc.
"Private form1 As FMain" ou "Dim form1 As FMain" dit en gros qu'il y a une variable appelée form1 et que son type sera FMain.
"form1 = New FMain" va construire l'objet. Le formulaire existera en mémoire mais il ne sera pas encore affiché !
"form1.Show()" va afficher le formulaire.
"form1.Close()" va fermer le formulaire.

Ne vous braquez pas si vous trouvez tout cela difficile ! Regardez d'autres exemples et petit à petit, toutes les pièces du puzzle vont s'emboîter.

Pour conclure, vous savez maintenant comment générer une application graphique. Que de progrès !