Didacticiel

Voici les cinq écrans de Control Editor, Control Editor qui permet de définir les contrôles. Il y a peu de textes à saisir, la plupart des options sont à sélectionner dans les boites déroulantes, Menu Editor dans lequel vous pouvez définir vos menus, Visu qui affiche la fenêtre du Form, Code Editor où le code va être généré et Build project qui permet de générer le code de plusieurs forms.

Control Editor comporte un menu Edit qui permet de choisir :

Code ouvre la fenêtre Code Editor avec le code généré.
Code VGA comme ci-dessus mais adapté au format VGA
Menu ouvre Menu Editor
Project ouvre une fenêtre où charger plusieurs forms pour la génération du code
Clear Form efface les données dans le formulaire
Init program efface toutes les données.
Load charge vos fichiers form avec le menu.
Save sauvegarde vos fichiers form.

Visu montre votre Form comme il sera à l'écran 

About, je vous laisse essayer...

 

Les controles

Form
TabControl  
Panel
Label
Button
TextBox
ListBox
ListView
ComboBox
NumericUpDown CheckBox
RadioButton
PictureBox
HSrollBar
VSrollBar
ProgressBar
TrackBar
MonthCalendar
TreeView
Splitter

Les évènements 

Click
DoubleClick
GotFocus
LostFocus
TextChanged
Validated
SelectedValueChanged SelectedIndexChanged KeyUp
KeyPress
KeyDown

Control Editor est limité à 30 contrôles par Form et il n'est possible de construire qu'un Form. Chaque Form peut être sauvegardé, puis tous les forms sont rechargés dans un projet global pour la génération du code.

- Descriptif

Les contrôles apparaissent dans le sélecteur au dessus de New.
C'est le sélecteur de controles.

Au dessus du constructeur de Form se trouve le sélecteur d'évènements.
A sa gauche est placé le type de contrôle qui est sélectionné dans le 
constructeur de Form.

Tous les contrôles saisis s'ajoutent dans le Constructeur de Form ce qui vous permettra ensuite de les éditer (Edit)  et ensuite les modifier (Modify), voire les supprimer (Trash).

Fixed Panel permet de fixer un controle à un Panel.

Le sélecteur d'onglets permet de sélectionner l'onglet d'un TabControl.

Commencez par charger le fichier Visu.txt (Edit->load).
En cliquant sur Visu vous obtiendrez la fenêtre de votre Form.

Dans cet exemple vous avez les contrôles acceptés par Control Editor. Le contenu saisi dans le champ Text apparaît dans les contrôles.

La couleur est rendue, ainsi que la casse des caractères.

Les menus apparaissent également.

Les Panels sont dessinés en gris clair, les PictureBox en bleu clair et les TreeView en vert clair..

Editez les contrôles en sélectionnant les contrôles dans le constructeur de Form, puis en cliquant sur Edit.

- Saisir un Form

Choisissez Form dans le sélecteur de contrôles et cliquez sur New.
En Name un nom générique form1 donne le nom du Form. Vous pouvez le modifier.
En Text placez le nom qui apparaîtra dans la barre de titre, ici test, puis cliquez sur Add.
Le nom du Form (ici form1) apparaît dans le constructeur de Form.
Choisissez un Button, et entrez les valeurs comme sur la copie écran de droite.
Validez avec Add.
Cliquez sur Visu et regardez !

Avec le sélecteur d'évènements, vous pouvez affecter à un contrôle un évènement.
Il suffit de le sélectionner pour qu'il apparaisse. L'évènement est enregistré avec Add à la création, ou avec Modify si le contrôle est déjà déclaré. 

Si vous voulez ajouter un TabControl, vous devez le déclarer tout de suite après le Form. Après avoir saisi les noms des onglets, vous les verrez ensuite dans le sélecteur d'onglets.
Il suffira de sélectionner le nom pour que les contrôles y soient attachés. (voir plus bas)

Si vous voulez attacher des controles à un panel, déclarez un Panel, puis cliquez sur Fixed Panel.Il apparaît alors en jaune avec le nom du Panel. Quand il est coché, les controles que vous déclarez sont attachés au Panel. Pour fixer un contrôle déjà déclaré, éditez le contrôle, puis placez le constructeur de Form sur le Panel et cliquez sur Fixed Panel.
Ensuite replacez le constructeur de Form sur votre contrôle et cliquez sur Modify.

Voici quelques écrans montrant comment saisir et remplir les TabControl, ListView, ListBox et ComboBox.
Il suffit d'entrer dans le champ Text les Items séparés par une virgule.

Pour le TabControl, vous devez l'ajouter juste après le form1.
Vous pouvez placer des espaces avant et après la légende des tabs, et entrer des noms composés.
Une fois ajoutés au Constructeur de Form, les noms des onglets se retrouvent dans le Sélecteur d'onglets en bleu, à droite de celui des ScrollBars.

Pour attacher un contrôle à un TabControl, il suffit de sélectionner le nom de l'onglet avant d'ajouter le contrôle.

Par contre si vous avez un Panel attaché à un TabControl et que vous voulez placer un contrôle sur le Panel, il ne faut pas sélectionner l'onglet du TabControl, seulement le nom du Panel présent en Fixed Panel. C'est pour cela que le Sélecteur d'onglets n'est plus sélectionné quand on coche Fixed Panel pour assigner un Panel.

- Le mode Edition (Edit)

En sélectionnant dans le constructeur de Form un contrôle, vous pouvez l'éditer en cliquant sur Edit ou encore le supprimer en cliquant sur Trash.

Deux contrôles sont à noter.

Fixed Panel signale le nom du Panel sur lequel est fixé un contrôle, surligné en jaune.

Une boite déroulante, le Sélecteur d'onglet se colore en bleu et donne le nom de l'onglet du TabControl sur lequel se trouve le contrôle.

Ici nous avons un bouton (button1) sur un panel (panel1) qui est sur un TabControl (1).


Le contrôle Panel permet de lier les controles ce qui peut permettre des les aligner plus facilement. On déplace le Panel, pas les contrôles.

Ici le ComboBox est fixé à la location 10,10 par rapport au Panel.

Pour fixer un contrôle au Panel il suffit de procéder comme suit :
Déclarez un Panel et ajoutez le au constructeur de Form.
Cliquez sur Fixed Panel qui prendra le nom du Panel et qui restera coché en mode ajout de contrôles et ajoutez les contrôles associés.
Ensuite décochez Fixed Panel.

En mode édition Fixed Panel signale le nom du Panel en jaune.

Si vous voulez rattacher un contrôle déjà saisi à un Panel, il faut procéder comme suit :
Editer le contrôle, puis avec le constructeur de Form, sélectionnez le Panel, cliquez sur Fixed Panel, puis replacez le constructeur de Form sur le contrôle à modifier et enfin cliquez sur Modify.



Une fois votre Form terminé, sauvez le avec (menu Edit) Save
Puis allez sur (menu Edit) Code qui ouvre la fenêtre Code Editor.

Le code y est généré et peut être directement interprété par C# IDE Mobile.

Deux entrées au menu permettent soit de sélectionner tout le texte avec Select soit
de sauvegarder au format *.css le fichier avec Save.

Après Select il faut faire un Copier (Ctrl C au clavier) et fermer les fenêtres pour revenir dans C# IDE mobile. Ensuite Collez le code (Ctrl V au clavier) dans  C# IDE mobile et faites un run.

Vous verrez votre form à l'écran, ensuite ajoutez votre code, construisez votre programme !


- Project

Ouvir Project en sélectionnant au menu Edit->Project.
Avec Select ouvrez le sélecteur de fichier et choisissez les forms que vous avez créé. Puis ajoutez une coche à VGA si vous voulez votre fichier au format VGA (Control Editor QVGA seulement) et appuyez sur Build.
Le code de l'ensemble du projet est généré dans Code Editor.


- Anchors et Docks

Les Anchors et Docks sont sélectionnable en bas d'écran. Il suffit de cliquer sur le grisé pour valider une option. Pour les Anchors un clic au centre valide tous les côtés, pour les Docks un clic au centre correspond à Fill. Un clic sur une option de Dock désélectionne l'autre. Si le Dock est sélectionné il n'est pas nécessaire d'entrer les coordonnées X,Y. Il peut être nécessaire d'entrer la largeur et la hauteur du controle.

Le contrôle Splitter est lié au Dock. Sur l'image à droite il y en a deux, un en jaune et un en rouge. Ils permettent de modifie la hauteur et la largeur des contrôles adjacents.
Rappelons que les Docks plaquent les contrôles sur les bords de l'écran et que les Anchors fixent les bords des contrôles par rapport aux bords de l'écran.

Exemple : choisir un Panel Docké en bas, puis un Splitter docké en bas, puis un PictureBox docké en bas. Chaque nouveau controle se replace depuis le bas de l'écran .Entrer des hauteurs pour le Panel et le PictureBox pour équilibrer l'affichage et jouez avec le Splitter.


- Ajouter un menu

Ouvrir Menu Editor avec (menu Edit) Menu
Avec First Items vous avez les entrées de la barre de menu. 
La virgule sert de séparateur.  Le premier nom saisi sera en bas du menu.
ex : Fichier,Edition
Pour espacer les entrées, vous pouvez pacer des espaces avant et après l'entrée.
Vous pouvez aussi entrer des noms composés.
Validez avec Add. Vous retrouvez alors votre saisie dans la boite déroulante, à gauche du bouton Edit.
Les entrées sont  placées les unes au dessous des autres.

Ensuite sélectionnez votre entrée, ici Fichier et saisissez les seconds Items
Même principe pour les troisièmes Items

Le bouton Edit permet de revoir un groupe d'Items.
Si vous voulez effacer ou modifier un Item, Editez le, changez ou effacez votre saisie puis cliquez sur Add

Enfin pour valider votre menu, choisissez au menu Ok
Avec Visu, vous pourrez voir votre menu, les premiers items sont toujours en bas de menu.

J'espère que vous aurez autant de plaisir à vous servir de Control Editor que j'en ai eu à le développer.

Essayer Control Editor, c'est l'adopter !

Me contacter : Jean Brunet