

#1
Posté 07 November 2011 - 16:49 PM
Je suis actuellement en pleine rédaction de mon premier tutoriel... Celui-ci portera sur la création d'un clavier virtuel. Il s'adressera aux programmeurs en herbe ayant un minimum de connaissance en P.O.O.
Je souhaitais savoir déjà si ça intéressait éventuellement des gens et si c'était le genre de tutoriel intégrables dans le Wiki?
Voilà...
Le tutoriel devrait voir le jour d'ici une à 2 semaine grand max...(j'espère)
#2
Posté 07 November 2011 - 17:55 PM
Je suis pas trop à la page à ce niveau: un clavier virtuel, c'est pour pouvoir entrer du texte dans une configuration sans clavier, comme un smartphone?
Si la réponse est oui, alors ben je pense que c'est tout à fait intéressant d'avoir ça comme tuto.
Tu viserais des personnes qui ont de petites bases en POO, mais qui ne sauraient pas programmer ça toutes seules? Est-ce cohérent? Je n'ai jamais essayé de programmer un clavier virtuel, mais j'imagine que ce n'est pas trop compliqué pour quelqu'un qui aurait déjà le niveau pour faire des classes. Mais c'est peut-être une idée à la noix que j'ai là

- comment ça marche sur des écrans tactiles et sans souris
- comment on pourrait faire des champs de texte éditables disposant du clavier virtuel.
C'est chouette que tu te lances dans un tuto.
#3
Posté 07 November 2011 - 20:23 PM
En fait, l'intérêt de ce clavier repose en effet sur sa portée, à savoir les configurations sans clavier: smartphones, tablettes tactiles, dalles tactiles,...
En ce qui concerne les champs textes, c'est justement là tout l'intérêt du tuto. Il est peut-être pas optimisé, mais le principe est le suivant: j'ai un champ Input et je veux lui entrer du texte dedans mais je n'ai pas de clavier physique. Je veux donc montrer qu'on peut coder ce fameux clavier virtuel qui va envoyer des données dans le champ.
Pour l'instant, dans le "premier chapitre", je n'aborderais que l'insertion et la suppression des caractères un à un. Je ne traite pas le placement du curseur. Ca viendra dans un deuxième chapitre je pense (si un jour j'ai le temps

Voilà comment je le voyais... Mais je suis ouverte à toute critique

#4
Posté 07 November 2011 - 21:36 PM
Avec les caractères accentués si on maintient une touche - virtuelle - enfoncée et des touches rapides du genre .com .fr etc.
Bonne rédaction
embryon de site
#5
Posté 08 November 2011 - 09:09 AM
dcz.switcher, le 07 November 2011 - 21:36 PM, dit :
Avec les caractères accentués si on maintient une touche - virtuelle - enfoncée et des touches rapides du genre .com .fr etc.
Bonne rédaction
Y'a en effet la touche Shift mais je n'avais pas pensé aux différentes configurations (clavier pour adresse mail, pour numéro de tel, ...)
Enfin, pour le moment, la première partie traite juste du principe de base: j'ai un champ texte et j'insère dedans des caractères au clavier. Les évolutions pourront faire l'objet d'un prochain chapitre...
#6
Posté 09 November 2011 - 15:26 PM
Le tutoriel est en ligne à cette adresse, tant qu'il n'aura pas été validé.
Je vous laisse le loisir de le lire et de me donner vos remarques. J'ai essayé d'être le plus simple possible.
Voilà... Dès que j'aurais le temps de m'y remettre, je sortirais un nouveau chapitre avec quelques évolution du clavier.
Bonne lecture à tous...
#7
Posté 11 November 2011 - 09:52 AM
C'était juste pour savoir si y'en avais qui étaient aller jeter un oeil sur le tuto et savoir ce que vous en pensiez...
#8
Posté 11 November 2011 - 11:09 AM

En revanche pour le code quelques maladresses m'ont sauté aux yeux du coup, si on ajoute que je ne m'y serais pas prise de la sorte (ce qui ne veut rien dire d'autre, pas de jugement valeur) je ne veux rien précipiter du point de vue technique et je me réserve d'une relecture dev, mais il va falloir patienter

[edit]
Si une chose : tu devrais peut-être poser des swf fonctionnels, plutôt que des copies d'écran pour illustrer les étapes, et le clavier tout fini en intro pour qu'on sache ce qu'on va fabriquer.
Et puis pense à ajouter nolink derrière les liens image pour éviter qu'ils ne soient éditables (tel que, qd on clique ça ouvre l'image ce qui ne présente aucun intérêt)
.:machin.truc.jpg?nolink

une tartine de tutos
#9
Posté 12 November 2011 - 21:50 PM
Nataly, le 11 November 2011 - 11:09 AM, dit :

En revanche pour le code quelques maladresses m'ont sauté aux yeux du coup, si on ajoute que je ne m'y serais pas prise de la sorte (ce qui ne veut rien dire d'autre, pas de jugement valeur) je ne veux rien précipiter du point de vue technique et je me réserve d'une relecture dev, mais il va falloir patienter

[edit]
Si une chose : tu devrais peut-être poser des swf fonctionnels, plutôt que des copies d'écran pour illustrer les étapes, et le clavier tout fini en intro pour qu'on sache ce qu'on va fabriquer.
Et puis pense à ajouter nolink derrière les liens image pour éviter qu'ils ne soient éditables (tel que, qd on clique ça ouvre l'image ce qui ne présente aucun intérêt)
.:machin.truc.jpg?nolink

Je vais réfléchir pour les swf...
Quand aux images, je m'en occupe tit suite!!
Modifié par Tit'Nelly, 12 November 2011 - 21:50 PM.
#10
Posté 14 November 2011 - 10:51 AM
J'ai fait une lecture assez rapide du tuto, et j'ai noté au fur et à mesure les questions qui me venaient à l'esprit. Les voici, c'est un peu "à l'état brut", pour que tu vois ce qui a pu se passer dans la tête d'un lecteur:
Qu'est-ce que la classe Bouton?
"emprunté à ..." Qu'est-ce que ça veut dire?
Dommage de ne pas voir les commentaires. Tu dis qu'ils sont dans les sources, mais j'aurais aimé les avoir sous les yeux sans avoir à les ouvrir. C'est peut-être parce-que je fais seulement une relecture rapide, ceci dit.
Faut-il vraiment un écouteur sur chaque bouton? Un écouteur sur le clavier ne serait-il pas mieux?
N'y aurait-il pas un moyen de définir le placement et l'aspect des touches dans l'interface graphique de Flash, plutôt qu'en code? En particulier pour le placement, c'est dommage de devoir réfléchir aux bonnes coordonnées x et y pour chaque touche, cela paraitrait si simple de les placer à la souris. Je ne sais pas trop comment il faudrait faire. Peut-être bêtement créer dans la bibliothèque autant de symboles qu'il y a de touches, chaque symbole de touche étant un bouton qui contiendrait:
1- le fond (qui serait lui-même un symbole partagé par toutes les touches)
2- un champ de texte contenant le texte à afficher sur la touche. Le nom d'occurence de ce champ de texte serait différent pour chaque touche. Par exemple ce nom serait "A" pour la touche A, shift pour la touche shift, etc...
Puis le constructeur de KeyBoard se contenterait d'ajouter un écouteur d'évènement clic, et dans cet écouteur on lirait le nom d'occurence du champ de texte de la touche cliquée pour savoir de quelle touche il s'agit.
Une fois que ce serait fait, ce serait très simple de changer la disposition et l'apparence des touches, sans avoir à modifier du code.
Est-ce pour être plus compréhensible que tu as codé:
isShift = false; // Je désactive la touche : false
} else { // Elle est désactivée : false
isShift = true; // Je l’active : true
}
Il me semble que ce serait plus pratique d'avoir un seul objet KeyBoard qui gérerait en interne la bascule entre les modes de présentation numérique et alphabétique. Là on est obligé de créer deux objets clavier dans le code qui utilise tes classes, et de créer les fonctions qui basculent l'affichage en réponse aux évènements callNumericKB et callAlphaKB. Cela complique pas mal l'utilisation il me semble.
Pourquoi ne pas utiliser un switch plutôt qu'une succession de if dans clicSpecialKey ?
Dans la classe KeyBoard, pourquoi initialiser la variable tf en créant un TextField:
Voilà. Et... ne te sens même pas obligé de répondre en justifiant tous tes choix

Des choix il faut toujours en faire de toute façon, chacun à ses préférences et tout le monde ne sera jamais d'accord.
Sinon, je suis tout à fait d'accord avec ce que disais Nataly. C'est bien et agréablement écrit, j'ai l'impression qu'on te suis bien, et les screenshots soignés sont appréciables. Donc au niveau rédaction et présentation je trouve cela très réussi, mes questions sont plus sur l'implémentation. Bravo

#11
Posté 14 November 2011 - 13:02 PM
lilive, le 14 November 2011 - 10:51 AM, dit :
J'ai fait une lecture assez rapide du tuto, et j'ai noté au fur et à mesure les questions qui me venaient à l'esprit. Les voici, c'est un peu "à l'état brut", pour que tu vois ce qui a pu se passer dans la tête d'un lecteur:

lilive, le 14 November 2011 - 10:51 AM, dit :
"emprunté à ..." Qu'est-ce que ça veut dire?
lilive, le 14 November 2011 - 10:51 AM, dit :
La classe étant un peu longue, je n'ai pas osé la mettre directement dans le tuto... Peut-être est-ce un tord ? En tout cas, c'est un choix.
lilive, le 14 November 2011 - 10:51 AM, dit :
lilive, le 14 November 2011 - 10:51 AM, dit :
1- le fond (qui serait lui-même un symbole partagé par toutes les touches)
2- un champ de texte contenant le texte à afficher sur la touche. Le nom d'occurence de ce champ de texte serait différent pour chaque touche. Par exemple ce nom serait "A" pour la touche A, shift pour la touche shift, etc...
Puis le constructeur de KeyBoard se contenterait d'ajouter un écouteur d'évènement clic, et dans cet écouteur on lirait le nom d'occurence du champ de texte de la touche cliquée pour savoir de quelle touche il s'agit.
Une fois que ce serait fait, ce serait très simple de changer la disposition et l'apparence des touches, sans avoir à modifier du code.
#12
Posté 14 November 2011 - 13:03 PM

lilive, le 14 November 2011 - 10:51 AM, dit :
isShift = false; // Je désactive la touche : false
} else { // Elle est désactivée : false
isShift = true; // Je l’active : true
}

lilive, le 14 November 2011 - 10:51 AM, dit :
En effet, on est obligé de générer 2 instances de claviers. Dans l'absolu, on pourrait, en effet, les générer dans la classe KeyBoard et ne générer qu'une seule instance sur la scène.
Dans la réalité, je souhaitais montrer que les 2 claviers (alpha et numérique) sont 2 entités, certes distinctes, mais de même "sorte".
lilive, le 14 November 2011 - 10:51 AM, dit :
lilive, le 14 November 2011 - 10:51 AM, dit :

lilive, le 14 November 2011 - 10:51 AM, dit :

Des choix il faut toujours en faire de toute façon, chacun à ses préférences et tout le monde ne sera jamais d'accord.
lilive, le 14 November 2011 - 10:51 AM, dit :

Merci beaucoup Lilive!! Ca me fait énormément plaisir de voir que ça plait.
Merci encore pour ta relecture...!
#13
Posté 14 November 2011 - 13:38 PM
Tit'Nelly, le 14 November 2011 - 13:03 PM, dit :

#14
Posté 14 November 2011 - 14:34 PM
lilive, le 14 November 2011 - 13:38 PM, dit :
Heu.. surement une mauvaise habitude

#15
Posté 14 November 2011 - 15:37 PM
Tit'Nelly, le 14 November 2011 - 13:03 PM, dit :
Citation
isShift = false; // Je désactive la touche : false
} else { // Elle est désactivée : false
isShift = true; // Je l’active : true
}

Non

1) ce n'est pas une écriture ternaire (et le serait-ce on s'en fout)
2) il faut arrêter de se réfugier derrière ce sont des débutants pcq si ce sont des débutants à qui tu t'adresses alors il est préférable de les guider vers les bons réflexes et compréhensions.
un if…else pour inverser une booléenne ce n'est pas acceptable et surtout pour un débutant, ça impliquerait qu'il n'ait pas compris ce qu'est une booléenne, le maintenir ds cet obscurantisme n'est pas correct.
une tartine de tutos
#16
Posté 14 November 2011 - 16:37 PM
Nataly, le 14 November 2011 - 15:37 PM, dit :

1) ce n'est pas une écriture ternaire (et le serait-ce on s'en fout)
2) il faut arrêter de se réfugier derrière ce sont des débutants pcq si ce sont des débutants à qui tu t'adresses alors il est préférable de les guider vers les bons réflexes et compréhensions.
un if…else pour inverser une booléenne ce n'est pas acceptable et surtout pour un débutant, ça impliquerait qu'il n'ait pas compris ce qu'est une booléenne, le maintenir ds cet obscurantisme n'est pas correct.
heu... pas les tomates pourries ...?
*s'enfuit en courant*
#17
Posté 14 November 2011 - 17:09 PM
une tartine de tutos
#18
#19
Posté 15 November 2011 - 20:47 PM

Ça m'urtiquait cette histoire, comme l'impression qu'on pouvait tout de même faire plus simple et puis aussi je partageais le point de vue de Lilive sur le fait que ce serait plus sympa de pouvoir dessiner son clavier avec les outils de dessin, répartir les touches à son grès sans avoir à tout se repalucher les x/y (pcq le client qui te dit "il est joli le clavier mais un peu plus d'espace entre les touches, ben non un peu moins… tu le butes

toujours mes même antiennes : booster souplesse, puissance et confort de l'environnement auteur avec quelques lignes de code, plutôt que faire la dactylo…
Et d'un coup ce soir en attendant que ça cuise (ce que j'avais mis au four) j'ai pas pu m'empêcher de vérifier.
le principe c'est : les touches standard (celles qui écrivent) sont des instances d'un symbole (clip) étendant une classe ToucheClavier.as (classe de base).
Deux impératifs
• le symbole contient un champ texte dynamique nommé txt
• le nom des instances commence par un caractère quelconque suivit de la valeur de la touche (ta, tb, tc, t1… chez moi) - pour les caractère spéciaux un caractère quelconque suivit du code ascii (t64 pour arobase par exemple)
voilà c'est tout… pour la touche Majuscule je vois pas l'intérêt d'une classe pour si peu, pas plus que pour la barre d'espace.
On pourrait éventuellement faire une classe Clavier à associer à un symbole clavier qui reprendrait le peu que j'ai mis sur la fla… éventuellement…
le fla :
clavier est le clip contenant l'ensemble des touches que j'ai dites standard (ds un clip touches)
Maj la touche Majuscule
barre la touche barre d'espace
clavier.Maj.addEventListener(MouseEvent.CLICK,qdClicMaj);
clavier.barre.addEventListener(MouseEvent.CLICK,qdClicBarre);
function qdClicTouche(e:Event):void {
txtSortie.appendText(e.target.valeur);
}
// majuscule
function qdClicMaj(me:MouseEvent):void {
if (me.currentTarget.currentFrame==1) {
me.currentTarget.gotoAndStop(2);
ToucheClavier.Majuscule=true;
} else {
me.currentTarget.gotoAndStop(1);
ToucheClavier.Majuscule=false;
}
miseAjourAffichage(clavier.touches);
}
function miseAjourAffichage($c):void {
for (var i:int=0; i<$c.numChildren; i++) {
ToucheClavier($c.getChildAt(i)).affiche();
}
}
// espace
function qdClicBarre(me:MouseEvent):void {
txtSortie.appendText(" ");
}
// effacer
addEventListener(MouseEvent.CLICK,qdClicScene);
function qdClicScene(me:MouseEvent):void {
if (me.shiftKey) {
txtSortie.text="";
}
}
et voilà la classe
import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.events.Event;
public class ToucheClavier extends MovieClip {
public static const CLIC_TOUCHE:String="clicTouche";
public static var Majuscule:Boolean;
private var _val:String;// pour prop valeur
public function ToucheClavier():void {
buttonMode=true;// pour comportement type bouton
mouseChildren=false;// sans quoi le champ texte interfère
if (name.length>2) {
// les caractères spéciaux
_val=String.fromCharCode(name.substr(1));
} else {
_val=name.substr(1);
}
txt.text=_val;
addEventListener(MouseEvent.CLICK,qdClic);
}
public function qdClic(me:MouseEvent):void {
dispatchEvent(new Event(CLIC_TOUCHE,true));
}
public function get valeur():String {
if (Majuscule) {
return _val.toUpperCase();
}
return _val;
}
public function affiche():void {
txt.text=valeur;
}
}
}
je le savais bien qu'on pouvait s'en sortir à pas cher


Fichier(s) joint(s)
une tartine de tutos
#20
Posté 16 November 2011 - 17:38 PM

Bon, ben je retourne réviser ma copie...


#21
Posté 18 November 2011 - 11:36 AM

Tu as fourni un gros boulot, il faudrait voir à ne pas jeter le bébé avec l'eau du bain.
Sans doute y a-t-il moyen de proposer deux options : tout code ou juste mixture des deux. Je voulais en tout premier lieu m'assurer qu je ne ratais pas une subtilité quelque part, et en second lieu alerter sur le fait qu'il y a diverses voies, y compris celle de la liberté du grapheux.
je confesse n'avoir pas encore lu ton code (je vis ds un vacarme assourdissant depuis six semaines et j'y perds toute capacité de concentration), mais promis c'est pour bientôt (pcq là aussi j'ai la croyance qu'on peut s'y prendre à moins lourd. L'impression que j'ai, c'est un bazooka pour tuer une mouche - mais bien foutu le bazooka -

Si d'autres veulent y jeter un œil et donner leur point de vue… ça aiderait

une tartine de tutos
#22
Posté 18 November 2011 - 11:40 AM
Nataly, le 18 November 2011 - 11:36 AM, dit :

Heu...C'est bizarre c'est pas la première fois qu'on me fait cette remarque...

Ceci étant, ton idée d'associer les 2 méthodes me semble ingénieuse. On pourrait ainsi le proposer au plus grand nombre, tout niveaux confondus...
1 utilisateur(s) li(sen)t ce sujet
0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)