[TUTO de A à Z] Débuter avec SZ2012

Bonjour,

Après la demande de plusieurs membres du forum, je vais vous faire un tutoriel pour débuter avec Software Zator 2012  .
Je vais estimer que dans ce tuto, vous savez à quoi sert SZ2012 (sinon, allez voir sur le site internet de Etienne Baudoux (abrégé E.B, par la suite), anciennement appelé Veler Software).

Ce tuto est découpé en 2 parties. Tout d'abord nous allons voir l'apparence et les fonctionnalités du logiciel, puis nous verrons dans un petit TP les outils qui le composent.
Vous êtes près? A vos marques, près, APPUYEZ SUR LE BOUTON ARRÊT DE VOTRE ORDINATEUR !  

Tout d'abord, voyons l'interface en détail:



(remarquez qu'au démarrage de SZ, vous ne devez rien avoir dans la partie droite  )

Cette page est la page de démarrage, elle s'affichera à chaque démarrage de SZ. Dans celle-ci, vous pouvez démarrer rapidement vos projets
récents, ouvrir un projet exemple et consulter les dernières informations concernant les produits de E.B de manière rapide.

D'ailleurs pour la suite du tuto, je vous demanderai d'ouvrir le projet exemple qui se trouve tout en bas de la liste:
(Novice) Utiliser une solution multi-projets

Voyons voir... la première chose la plus rapidement visible qui se présente à vos yeux est cette partie:



Au centre, se trouve une fenêtre (Fenêtre1) dans laquelle ont été insérés des composants.
Un composant est un outil d'interaction avec l'utilisateur: il peut afficher du texte (label), en demander (textbox et richtextbox),
demander un nombre (numericupdown) rendre compte d'une progression (progressbar)... ainsi que de nombreuses autres fonctions.
Cette partie rend donc de  l'apparence qu'aura le programme quand on l’exécutera. 

Dans la partie supérieure, vous pouvez voir des onglets, en fait ils permettent d'accéder aux différentes fenêtres de votre projet
ainsi qu'aux paramètres du programme. Dans notre exemple, on observe également un onglet intitulé "Classe1.szc", cet onglet-là qui n'a pas
le même icone que celui de la fenêtre est en fait une partie du programme qui ne possède pas d'apparence:
elle permet d’exécuter des fonctions mais pas d'interagir directement avec l'utilisateur.

A gauche de cette fenêtre, se trouve l'emplacement des composants:



Comme son nom l'indique, la boite à outil va vous permettre d'insérer dans votre programme tout les outils dont vous avez besoins  .
Pour disposer les composants, ils vous suffit de les faire glisser vers l'emplacement que vous désirez

A droite, vous pouvez modifier le contenu/l'apparence de vos contrôles grâce au propriétés:



(ici j'ai cliqué sur la fenêtre pour avoir ses propriétés)

Sur l'onglet juste à coté se trouve l'organisation de votre projet:



Afin de structurer vos projets, SZ vous permet de créer des solutions qui englobent plusieurs projets.
Dans notre cas, la solution "(Novice) Utiliser une solution multi-projets" englobe 2 projets: "Premier_Projet" qui est une fenêtre et "Second_Projet" qui est une fonction.
Chaque projet possède:

• Des paramètres qui vont permettre de rajouter des fonctions, de rajouter des ressources qui seront réutilisables, de modifier la version du programme...
  
• Des statistiques pour évaluer l'ampleur du projet
  
• Une fenêtre et des fonctions // des fonctions seules qui constituent le contenu de votre programme
  

Et n'oublions pas, pour finir la présentation du concepteur de fenêtre de vous montrer le menu du haut:



Le menu accueil pour ouvrir/enregistrer/exporter la fenêtre et le projet



et le menu concepteur de fenêtres si vous êtes fâchés avec le redimensionnement des contrôles

ouille ! mes doigts ! mon cerveau ! et encore, se n'est que le début ! 

Maintenant, il va falloir associer les composants que l'on a disposé à la fenêtre à des fonctions, par exemple, le clic sur un bouton affiche un message.
Pour cela, 2 possibilités:

1. Soit on sélectionne un composant et on clique en bas sur: "Lier le contrôle à une fonction"
   
2. Soit on fait clic droit sur le composant puis "Créer un événement"
   

Bon, dans notre cas l’événement a déjà été créé donc il n'est pas nécessaire de faire cette action, après le clic on obtiens cette fenêtre:



Il suffit alors, en fonction de l’événement qui déclenche notre action (clic, mouvement de souris, touche de clavier) de le sélectionner dans sa catégorie. (on peut s'aider des descriptions jointes à chaque événements).

Bref, en bas (sous le bouton "Lier le contrôle à une fonction"), se trouve 2 onglets, cliquez sur "Éditeur de fonction"
Ici se situe la "machinerie" de votre programme, si vous voulez on peut dire que la fenêtre est le volant
tandis que l'éditeur de fonction est tout les engrenages qui entraînent la rotation de la roue. (Et le mur de 10m de haut avec des morceaux de verres au sommet, juste devant vos roues, représente les erreurs de programmations, mais pour l'instant on n'en n'est pas là )

Tout comme pour les fenêtres (et ce qu'il le différencie de Visual Studio) l'éditeur de fonction fonctionne sur du glisser déplacer:



Une barre entre l'éditeur de fonction et les fenêtres/fonction du projet récapitule les événements pour chaque fenêtres.



(notez ici qu'il ne s'agit pas d'un événement, mais d'une fonction exécuté par une autre partie du programme. Cette fonction a été créé grâce à l'icone à gauche de l'onglet "Classe1")

la boite à outil de droite présente les actions disponibles par catégorie (comme pour les fenêtres):


[information]Remarquez que si vous n'avez pas pris d'édition payante, vous n'avez pas la catégorie Excel, ne soyez donc pas inquiété si elle n’apparaît pas  [/information]
(S'est pas joli toutes ses icônes ? )

et chaque actions à des propriétés (qu'on ne peut pas modifier ici):


Ses propriétés sont en fait ce que vous rentrez dans le fenêtre de paramétrage d'action.

[question]Attend attend... parce qu'il y a des fenêtres de paramétrage d'action?[/question]

oui, quand vous faîtes glisser une action sur les petites flèches, une fenêtre s'ouvre pour que vous puissiez paramétrer, modifier l'action.
On n'écrit plus un code, on le construit en donnant des arguments à des actions qui sont ensuite traduites en code.

Et ensuite quand on a finit de construire l'algorithme... on l’exécute ! Pour cela, on utilise le menu du haut, onglet "Projet"



[question]Du coup... on ne peut pas faire d'erreur si le code est écrit par le programme?[/question]

Si... à vrai dire dès que l'on laisse l'utilisateur modifier des paramètres on lui laisse la liberté de personnaliser... et de tous faire planter ! 
S'est là où la petite barre toute discrète du bas va beaucoup nous servir pour contrer ces erreurs, on peut y afficher l'aide d'une action 
sans ouvrir sa fenêtre de paramétrage:


on peut aussi (et s'est le plus important) y afficher le résultat du débogage (pour détecter les bugs): j'ai rajouté une action
complètement inadaptée et j’exécute en mode débogage:


le programme affiche la valeur actuelle des variables et m'indique d'ou vient l'erreur et comment la corriger
(précision importante: le débogage n'est accessible que pour ceux qui ont la version pro, les autres doivent se contenter du débogage JIT qui affiche
la même chose que dans le rectangle blanc à droite sans préciser l'action concernée).

Enfin, cette barre permet d'afficher les erreurs de génération, en général vous avez le bandeau du haut + la partie du bas:




mais quand vous voyez cet écran (ce qui est super rare   ):


votre projet n'a pas de problème de syntaxe (mais il pourra quand même buger), votre projet est alors près à être distribué !


  j'ai bien mérité ma sieste moi... quand vous aurez finit votre TP !

A vrai dire ce n'est pas vraiment un TP, s'est un cours. Mais rien ne vous empêche de le faire en même temps que moi !

Nous allons faire un programmmmmmmeeeeeeeee qui ne sert à rien ! sauf à vous apprendre quelques astuces

Bon, d'abord redémarrez tout et créez un nouveau projet:



on peut donc créer pas mal de choses: des fenêtres, des consoles, des bibliothèque de fonctions réutilisables (dll)... 

voici les différentes possibilités:


Sélectionnez se projet pour créer un bibliothèque de fonction (dll), sa peut être utile si vous voulez créer un nouveau contrôle
ou une nouvelle fonction que vous souhaiteriez réutiliser.



Sélectionnez ce choix là si vous avez besoins de faire surtout du traitement d'information et que vous
avez besoins d'un minimum d'interaction avec l'utilisateur.



Nous, nous allons créer un logiciel avec fenêtre, nous nous intéressons donc à la dernière.
Maintenant, j'ai envie de faire quelque chose de joli*, je vais donc créer une fenêtre krypton
(* disons que s'est plus personnalisable: on peut faire du très beau comme du très moche )

Cliquez ensuite sur suivant:



Vous pouvez ici donner un nom à votre projet et votre solution (voir plus haut pour rappeler ce que sont projet/solution).

Bien, maintenant que le projet est créé, il faut savoir ce que l'on va faire. S'est simple, on va faire ça:


on affiche la valeur d'une graduation (trackbar) au travers d'une barre de progression (progressbar) et d'un pourcentage (texte donc label).
Je vous laisse concevoir cette interface (ce n'est pas très compliqué, en sachant qu'il n'y a qu'un seul label).

Puis nous allons créer une variable qui va contenir la valeur de la progression actuelle. S'est une chose dont je n'ai pas parlé, mais
il faut savoir que les variables sont l'intermédiaire entre les contrôles et les évènements/fonction (voir mon tutoriel sur les variables et leur type, dans ma signature).

Pour créer une variable, on va dans l'onglet projet et on clique sur "Gestionnaire de variable":



Le gestionnaire de variable récapitule toutes les variables que votre projet utilise, dans ma capture j'ai
créé 3 variables normales (mais il y a aussi les variables tableaux, pour une prochaine fois peut être...)
qui se nomment respectivement: Bleu, Rouge, Vert.

Pour créer une variable, il faut cliquer sur ajouter  :

• Nom de la variable: le nom que vous utiliserez pour faire référence à cette variable
  
• Description: que est censé contenir cette variable (Facultatif)
  
• Groupe: à quelle groupe appartient t'elle (texte, nombre, couleur...) (Facultatif)
  

J'ai créé une variable "valeur" (nom très original je sais, mais au moins il est explicite  ) qui va contenir l'état, le statut actuel de la graduation.
Je cherche donc d'abord à obtenir le statut de la trackbar lorsque je modifie sa valeur, pour cela on va donc créer l’événement qui s’exécute quand on modifie la valeur, 
je ne mettrai pas les captures d'écrans de la création de cet événement mais pour vous aider, il s'agit de l’événement "Value_Changed".

On va ensuite rajouter une action qui va obtenir la valeur actuelle de la trackbar et placer le résultat dans la variable "valeur" 



On utilise pour cela la fonction "Obtenir les propriétés d'un contrôle"

• on cherche à obtenir une valeur du trackbar
  
• on veut avoir sa progression, soit "Value"
  
• on enregistre le résultat dans la variable 'valeur"
  

Vous remarquez d'ailleurs l'apparence de ses fameuses fenêtres de paramétrage dont je vous parlais tout à l'heure, 
remarquez que je peut afficher le code que va générer ces paramètres (disponible dans la version gratuite mais on ne peut pas le
modifier contrairement à une version payante).

Une fenêtre de paramétrage comme celle précédente fonctionne avec des paramètres qui ont un type, une catégorie si vous préférez.
Par exemple ici, on nous demande dans l'ordre:

• un paramètre de type contrôle (trackbar1 est un contrôle)
  
• un paramètre de type propriété (value est une propriété)
  
• un paramètre de type variable (valeur est une variable)
  

Ici, il est difficile de se tromper (vu que la variable peut contenir n'importe quel type) mais nous allons voir une autre action plus
problématique.



(je vous invite d'ailleurs à valider l'action précédente et à rajouter celle ci (qui se trouve juste en dessous)).
Cette action permet donc de MODIFIER la valeur d'un contrôle, vous remarquez que les 2 premier paramètres sont les mêmes que pour
l'autre action (sauf que cette fois ci on désigne la propriété à CHANGER dans un contrôle). Ce qui change s'est le 3ème paramètre:
par quoi change t'on la valeur? Dans la capture d'écran, on voit que le logo en forme de pi est sélectionné et que je modifie 
la valeur par la variable "valeur". En fait, ma variable est de type nombre et ce composant permet de dire au programme
que s'est bien une valeur nombre. Il est partagé en 8 icones:

- code VB.NET:

Si vous n'arrivez pas à trouver le type de votre variable, vous pouvez passer par du code.

- texte:

Si vous voulez modifier un texte (System.String a coté du nom de la propriété)
[erreur]Un texte peut être un nombre, "64" est un texte et 64 est un nombre en VB.NET[/erreur]

- nombre:

La valeur à modifier est un nombre (System.Int32), vous pouvez même faire directement des opérations ici, 
par exemple pour faire la somme de 2 nombres A et B, vous pouvez taper:
%(VARIABLE=A)% + %(VARIABLE=B)%

- booléen

La valeur à modifier est un booléen (System.Boolean), c'est à dire que s'est un état comme blanc/noir, vrai/faux, oui/non...
il n'y a que 2 issues possibles.

- couleur

La valeur à modifier est une couleur (System.Drawing.Color), par exemple la couleur de fond de votre fenêtre ou encore la couleur d'une ligne que
vous avez dessiné à l'écran.

- autre type

Vous souhaitez modifier un type moins courant? S'est ici que sa ce passe: sélectionnez une bibliothèque puis un type précis
choisissez la propriété à modifier et modifiez la/les valeurs.

- variable

Votre variable a le même type que la propriété à modifier et ne nécessite pas de conversion ou d'arrangement

et enfin ressource quand vous souhaitez modifiez la valeur par celle d'une ressource du projet


fiou... configurez votre action comme sur la capture d'écran.

Récapitulons: on fait suivre la progression du trackbar avec la progressbarre, il ne nous reste plus que le texte à modifier.
Pour cela je vais utiliser une fonction comprise dans l'onglet texte de ce composant,  rajoutez donc une nouvelle action pour 
modifier la propriété d'un contrôle, on va remplacer le texte du label1.

Dans l'onglet texte du composant du bas, cliquez sur la flèche



en fait, cette partie permet de rajouter la valeur de certaines variables du système, voici un petit récapitulatif:


VARIABLE: valeur d'une variable
FUNCTION: valeur des paramètres d'une fonction
CONTROL: valeur d'une propriété d'un contrôle
APPLICATION: valeur de l'emplacement des principaux fichiers (images, texte, endroit ou se trouve le programme)
ENVIRONMENT: constances d'environnement qui décrivent l'environnement sur lequel est installé le programme (nombre de coeur, nom de l'admin, nom du PC...)
CODE: pour mettre du code vb.net dans un texte

toute ses propriétés sont bien entendues accessibles par le menu que je vous ait montré

nous allons nous intéressez à la valeur CONTROL, dans le menu, cliquez sur le bouton "Propriété d'un contrôle".



sélectionnez dans l'arborescence le contrôle (trackbar) puis la propriété à obtenir (value) et cliquez sur ok, vous obtenez:



validez et générez, normalement si tout se passe bien, vous pouvez vous amusez avec votre programme et y apporter
des changements pour l'améliorer.



Voila  , spéciale dédicace à mes yeux et mes mains puis ce que ce tuto comprend 40 capture d'écrans et a nécessité 2 jours de travail.
(et spéciale dédicace à lereparateurdepc pour les codes arduino que j'ai étudié entre quelques lignes de tuto  , merci à toi ! )

Merci pour votre lecture, n'hésitez pas à commenter et à poster des questions.
Bonne fêtes.

Re,

Ouah super tuto !
Continue ! Fais-en d'autres!

Cordialement,
Softewarzatorman

re,

Sympas je le lirais en détail mais en tout cas, ça à l'air cool tu a bien fait de mettre autant d'images car ça donne un petit avis

Cordialement,
Le réparateur de PC

Encore un magnifique tuto qui enrichie le forum et va aider les débutants  !
B.R.A.V.O. !

Je pense que tu devrait demander à Etienne de le mettre en avant plan sur ce sous-forum : histoire qu'il soit toujours visible  !

re,

Et pas que celui-là ..... Les autre aussi

Cordialement,
Le réparateur de PC

Bonjour,

softewarzatorman a écrit:Re,

Ouah super tuto !
Continue ! Fais-en d'autres!

Cordialement,
Softewarzatorman

merci, d'autres tutos sont en préparation

lereparateurdepc a écrit:re,

Sympas je le lirais en détail mais en tout cas, ça à l'air cool tu a bien fait de mettre autant d'images car ça donne un petit avis

Cordialement,
Le réparateur de PC

oui j'ai mit beaucoup d'images pour que ce soit vraiment accessible à tous (et puis ça n'a pas été le plus long la collecte )

Blackorion35 a écrit:Encore un magnifique tuto qui enrichie le forum et va aider les débutants  !
B.R.A.V.O. !

Je pense que tu devrait demander à Etienne de le mettre en avant plan sur ce sous-forum : histoire qu'il soit toujours visible  !

merci
je pensait créer un sujet qui servirait de "sommaire" pour tout les tutos du forum en les classant par catégorie

Je suis d'accord avec un sommaire  Sa serait une très bonne chose.

@blackorion +1

bonjour à tous

comme certains l'on déjà remarqué, j'ai créé un sujet sommaire, alors n'oubliez pas: envoyez les adresses de vos prochains tutos par message privé

bonne journée !

bonjour,
cela me motive pour faire plus de tuto
cordialement

Merci  pour le tuto mais j'ai rien compris

bonsoir,
ce n'est pas vraiment un tuto
cordialement

jbernard48 a écrit:Merci  pour le tuto mais j'ai rien compris

disons que s'est une partie qui décrit l'interface du logiciel suivie d'un tuto

que n'a tu pas compris ?

PS: je ne l'ai pas dit dans le tuto mais il est fortement conseillé d'ouvrir SZ en même temps pour manipuler

bonjour,
en même temps ...
cordialement

polien a écrit:

jbernard48 a écrit:Merci  pour le tuto mais j'ai rien compris

disons que s'est une partie qui décrit l'interface du logiciel suivie d'un tuto

que n'a tu pas compris ?

j'ai pas compris les variables
j'ai l'habitude en c et c++ des variables suivantes :

Int pour un nombre entier
double et float pour un nombre décimal
et char pour les caracteres

ah ok toi tu a vu les variables qui représentent différente taille de mémoire...
il faut s'avoir qu'en vb.net une variable n'est pas définie par sa taille mais par son type.
Par exemple un tableau de char en C équivaut à une simple variable System.String en vb (tout les types de variables dérivent de System en .NET)

Avec SZ s'est encore plus simple puisque les variables que tu créent peuvent contenir n'importe quoi et changer de contenu, par exemple une variable System.String peut prendre une valeur de type System.Int32 (les nombres)...

Après, passer du C++ à SZ s'est assez complexe puisque l'un est hyper strict niveau langage (C++) alors que l'autre laisse beaucoup de liberté...

re,

D'où l'importance du choix de la variable ......
Pour stocker une valeur 1 ou 0 inutile d'utiliser integer mais boolean.

@Polien : Dans SZ 2012, tu peut attribuer à type à tes variables ...
Regarde, en bas de la fenêtre modifier une variable, il y a la possibilité de sélectionner un groupe.

Cordialement,
Le réparateur de PC

bonjour,
moi je ne le fait jamais
cordialement

lereparateurdepc a écrit:re,

D'où l'importance du choix de la variable ......
Pour stocker une valeur 1 ou 0 inutile d'utiliser integer mais boolean.

@Polien : Dans SZ 2012, tu peut attribuer à type à tes variables ...
Regarde, en bas de la fenêtre modifier une variable, il y a la possibilité de sélectionner un groupe.

Cordialement,
Le réparateur de PC

bonjour

s'est vrais  mais sa ne change rien au code (j'ai essayé en convertissant un de mes projets pour visual studio)... puisque les variables déclarées dans SZ sont des objets (system.objects)
elles prennent le type de la valeur qu'elle reçoivent sans devenir indépendantes à se type.

Par exemple x est un objet:

x prend la valeur "test" (texte)
x vaut alors "text"
x prend la valeur 43 (nombre)
x vaut alors 43
x prend la valeur (0, 255, 0) (couleur)
x vaut alors (0, 255, 0)

j'ai toujours rien compris   je trouve que c'est trop le fouilli

Re,

@jbernard48: je vais te montrer deux déclarations de variable différentes (C++, VB.Net):

C++:

Code:

string maVar = "Hello World";

VB.Net

Code:

Dim maVar As String = "Hello World!"

ou

Code:

Dim maVar As System.String = "Hello World!"

Et pour SZ je ne montre pas vu que j'ai la version 2011 et le test est fini et j'ai la fleeemme de me mettre en édition gratuite >_<

Cordialement,
Softewarzatorman

re,

en plus de softwarezatorman, je dirais que le vb.net travaille sur des structures déjà établies. Par exemple, pour contenir une couleur il faut créer une objet/une structure en C++ (composé de 3 variables de type double pour Rouge, Vert, Bleu).

On aura, ainsi, quelque chose comme cela:

Code:


#include<iostream>
using namespace std;
 
struct couleur
{
    double r,v,b;
};
 
int main()
{
    couleur rouge;
 
    rouge.r=255;
    rouge.v=0;
    rouge.b=0;
    
    return 0;
}


alors qu'en vb, on mettra:

Code:


Import System.Drawing

Module Module1
    Sub Main()
        rouge = System.Drawing.Color.Red
    End Sub
End Module


bonjour,
c'est compliqué    mais je crois avoir compris
cordialement

Personne ne veux m'aider