Différences

Ci-dessous, les différences entre deux révisions de la page.

--- issue64:tuto_python [2012/09/30 14:14] – fredphil91
+++ issue64:tuto_python [2012/10/07 09:27] (Version actuelle) – auntiee
@@ Ligne 5: / Ligne 5: @@
 Now to the actual meat of this article... more on Kivy.**
-Avant de commencer, je tiens à souligner que cet article marque les trois ans de la série d'articles sur la programmation Python pour débutants. Je tiens à remercier Ronnie et l'ensemble des personnes de Full Circle Magazine pour leur soutien et surtout vous, les lecteurs. Je n'ai jamais pensé que cela continuerait aussi longtemps.
+Avant de commencer, je tiens à souligner que cet article marque les trois ans de la série d'articles sur la programmation Python pour débutants. Je tiens à remercier Ronnie et l'ensemble des personnes du magazine Full Circle pour leur soutien et surtout vous, les lecteurs. Je n'ai jamais pensé que cela continuerait aussi longtemps.
-Je tiens aussi à mettre une seconde note au sujet de quelques commentaires flottant dans l'air faisant remarquer que, après trois ans, le mot « débutant » est peut être déplacé dans le titre de cette série. Après tout, au bout de trois ans, êtes-vous toujours un débutant ? Eh bien, à certains niveaux, je suis d'accord. Cependant, je reçois encore des commentaires de lecteurs disant qu'ils viennent de découvrir la série et Full Circle Magazine, et qu'ils sont maintenant en train de lire toute la série en repartant du début. Ces gens sont donc bien des débutants. Bon, à partir de la partie 37, nous enlèverons « débutant » du titre de la série.
+Je tiens aussi à saisir l'occasion de faire une brève remarque au sujet de quelques commentaires flottant dans l'air, suggérant que, après trois ans, le mot « débutant » est peut être déplacé dans le titre de cette série. Après tout, au bout de trois ans, êtes-vous toujours un débutant ? Eh bien, à certains niveaux, je suis d'accord. Cependant, je reçois encore des commentaires de lecteurs disant qu'ils viennent de découvrir la série et le magazine Full Circle, et qu'ils sont maintenant en train de lire toute la série à partir du début. Ces gens sont donc bien des débutants. Quoi qu'il en soit, à partir de la partie 37, nous enlèverons « débutant » du titre de la série.
 Maintenant place au contenu de cet article... la suite sur Kivy.
@@ Ligne 15: / Ligne 15: @@
 Our app will be fairly simple. A title label, a button with our basic scale as the text, a scrollview (a wonderful parent widget that holds other controls and allows you to “fling” the inside of the control to scroll) holding a number of buttons that have repositioned scales as the text, and an exit button. It will look SOMETHING like the text below.**
-Imaginez que vous jouez de la guitare. Pas de la « air guitare » (en faisant semblant), mais avec une guitare réelle. Cependant, vous n'êtes pas le meilleur joueur de guitare, et quelques accords vous posent problème. Par exemple, vous connaissez les accord standards de Do, Mi, Sol, Fa, mais quelques accords - comme Fa# mineur ou Do# mineur - bien que faisables, sont difficiles à plaquer pour vos doigts pendant un morceau rapide. Que faites-vous, surtout si le concert est dans seulement quelques semaines et que vous devez être au point AUJOURD'HUI ? Vous pouvez contourner ce problème en utilisant le capo (cette drôle de pince que vous voyez parfois sur le manche de la guitare). Cela relève la tonalité de la guitare et vous utilisez alors des accords différents pour être comme le reste du groupe. C'est ce qu'on appelle la transposition. Parfois, vous pouvez transposer à la volée dans votre tête. Parfois, il est plus facile de s'asseoir et de travailler sur le papier ; par exemple, si l'accord est Fa# mineur et que vous placez le capo sur la frette 2, vous pouvez simplement jouer un Mi mineur. Mais cela prend du temps. Fabriquons une application qui vous permet de simplement faire défiler la position sur les frettes pour trouver les accords les plus faciles à jouer.
+Imaginez que vous jouez de la guitare. Pas de la « air guitare » (en faisant semblant), mais avec une guitare réelle. Cependant, vous n'êtes pas un très bon joueur de guitare et quelques accords vous posent problème. Par exemple, vous connaissez les accord standards de Do, Mi, Sol, Fa, mais quelques accords - comme Fa# mineur ou Do# mineur - bien que faisables, sont difficiles à faire pendant un morceau rapide. Que faites-vous, surtout si le concert est dans seulement quelques semaines et que vous devez être au point AUJOURD'HUI ? Vous pouvez contourner ce problème en utilisant le capo (cette drôle de pince que vous voyez parfois sur le manche de la guitare). Cela relève la tonalité de la guitare et vous utilisez alors des accords différents pour être comme le reste du groupe. C'est ce qu'on appelle la transposition. Parfois, vous pouvez transposer à la volée dans votre tête. Parfois, il est plus facile de s'asseoir et de travailler sur le papier ; par exemple, si l'accord est Fa# mineur et que vous placez le capo sur la frette 2, vous pouvez simplement jouer un Mi mineur. Mais cela prend du temps. Fabriquons une application qui vous permettra tout simplement de faire défiler la position sur les frettes pour trouver les accords les plus faciles à jouer.
-Notre application va être assez simple. Une étiquette de titre, un bouton avec notre échelle basique comme texte, une vue défilante « scrollview » (un widget parent merveilleux qui contient d'autres commandes et vous permet de « lancer » ce qu'il contient pour le faire défiler) contenant un certain nombre de boutons pour repositionner l'échelle et un bouton de sortie. Cela ressemblera À PEU PRÈS au texte ci-dessous.
+Notre application va être assez simple. Une étiquette de titre, un bouton avec la gamme de base comme texte, une vue défilante « scrollview » (un widget parent merveilleux qui contient d'autres commandes et vous permet de « lancer » ce qu'il contient pour le faire défiler) contenant un certain nombre de boutons qui ont des gammes repositionnées comme texte et un bouton de sortie. Cela ressemblera À PEU PRÈS au texte ci-dessous.
-Start with a new python file named main.py. This will be important if/when you decide to create an Android app from Kivy. Now we’ll add our import statements which are shown on the next page, top right.
+**Start with a new python file named main.py. This will be important if/when you decide to create an Android app from Kivy. Now we’ll add our import statements which are shown on the next page, top right.
 Notice the second line, “kivy.require(‘1.0.8’)”. This allows you to make sure that you can use the latest and greatest goodies that Kivy provides. Also notice that we are including a system exit (line 3). We’ll eventually include an exit button.
@@ Ligne 29: / Ligne 29: @@
     def exit(instance):
+        sys.exit()**
+Commencez avec un nouveau fichier Python nommé main.py. Ce nom sera important si/quand vous décidez de créer une application Android avec Kivy. Maintenant, nous allons ajouter nos instructions d'importation qui sont indiquées en haut à droite de la page suivante.
+Remarquez la deuxième ligne, « kivy.require('1.0.8') ». Cela vous permet de vous assurer que vous pouvez utiliser les fonctionnalités les plus récentes et les meilleures fournies par Kivy. Notez également que nous incluons une instruction système pour quitter (ligne 3). Plus tard nous aurons un bouton pour quitter.
+Voici le début de notre classe appelée « Transpose ».
+  class Transpose(App):
+    def exit(instance):
         sys.exit()
-Now we work on our build routine (middle right). This is needed for every Kivy app.
+**Now we work on our build routine (middle right). This is needed for every Kivy app.
 This looks rather confusing. Unfortunately, the editor doesn’t always keep spaces correct even in a mono-spaced font. The idea is that the text1 string is a simple scale starting with the note “C”. Each should be centered within 5 spaces. Like the text shown bottom right.
-The text2 string should be the same thing but repeated. We will use an offset into the text2 string to fill in the button text within the scrollview widget.
+The text2 string should be the same thing but repeated. We will use an offset into the text2 string to fill in the button text within the scrollview widget.**
+Maintenant, travaillons sur notre routine « build » (au milieu à droite). Elle est nécessaire pour toutes les applications Kivy.
+Cela semble confus. Malheureusement, l'éditeur ne garde pas toujours les espaces correctement, même avec une police à espacement fixe. L'idée est que la chaîne texte1 est une simple gamme commençant par la note « Do ». Chacune doit être centrée dans 5 espaces. Comme le texte affiché en bas à droite.
+La chaîne texte2 devrait être la même chose, mais répétée. Nous allons utiliser un décalage dans la chaîne texte2 pour remplir le texte du bouton à l'intérieur du widget scrollview.
-Now we create the root object (which is our main window) containing a GridLayout widget. If you remember WAY back when we were doing other GUI development for Glade, there was a grid view widget. Well, the GridLayout here is pretty much the same. In this case, we have a grid that has one column and three rows. In each of the cells created in the grid, we can put other widgets. Remember, we can’t define which widget goes where other than in the order in which we place the widgets.
+**Now we create the root object (which is our main window) containing a GridLayout widget. If you remember WAY back when we were doing other GUI development for Glade, there was a grid view widget. Well, the GridLayout here is pretty much the same. In this case, we have a grid that has one column and three rows. In each of the cells created in the grid, we can put other widgets. Remember, we can’t define which widget goes where other than in the order in which we place the widgets.
 root = GridLayout(orientation='vertical', spacing=10, cols=1,rows=3)
@@ Ligne 49: / Ligne 65: @@
 -----------------------------
 (2)            scrollview
------------------------------
+-----------------------------**
+Nous créons maintenant l'objet racine (qui est notre fenêtre principale) contenant un widget GridLayout. Si vous vous souvenez, il y a TRÈS longtemps, quand nous faisions d'autres développements d'interfaces pour Glade, il y avait un widget grille (« grid view »). Eh bien, le GridLayout ici est à peu près la même chose. Dans notre cas, nous avons une grille qui contient une colonne et trois lignes. Dans chaque cellule de la grille, on peut mettre d'autres widgets. Rappelez-vous, nous ne pouvons pas choisir où va chaque widget autrement que par l'ordre dans lequel on les ajoute.
+  racine = GridLayout(orientation='vertical', spacing=10, cols=1,rows=3)
+Dans ce cas, la représentation est la suivante...
+  -----------------------------
+  (0)       étiquette titre
+  -----------------------------
+  (1)       bouton principal
+  -----------------------------
+  (2)       scrollview
+  -----------------------------
-The scrollview contains multiple items – in our case buttons. Next, we create the label which will be at the top of our application.
+**The scrollview contains multiple items – in our case buttons. Next, we create the label which will be at the top of our application.
 lbl = Label(text='Transposer Ver 0.1',
@@ Ligne 57: / Ligne 87: @@
       size_hint=(None,None),
       size=(480,20),
-      padding=(10,10))
+      padding=(10,10))**
-The properties that are set should be fairly self-explanatory. The only ones that might give you some trouble would be the padding and size_hint properties. The padding is the number of pixels around the item in an x,y reference. Taken directly from the Kivy documentation size_hint (for X which is same as Y) is defined as:
+La vue scrollview contient plusieurs éléments ; dans notre cas ce sont des boutons. Ensuite, on crée l'étiquette qui sera tout en haut de notre application.
+  etiquette = Label(text='Transposer Ver 0.1',
+              font_size=20,
+              size_hint=(None,None),
+              size=(480,20),
+              padding=(10,10))
+**The properties that are set should be fairly self-explanatory. The only ones that might give you some trouble would be the padding and size_hint properties. The padding is the number of pixels around the item in an x,y reference. Taken directly from the Kivy documentation size_hint (for X which is same as Y) is defined as:
 X size hint. Represents how much space the widget should use in the direction of the X axis, relative to its parent’s width. Only Layout and Window make use of the hint. The value is in percent as a float from 0. to 1., where 1. means the full size of his parent. 0.5 represents 50%.
-In this case, size_hint is set to none, which defaults to 100% or 1. This will be more important (and convoluted) later on.
+In this case, size_hint is set to none, which defaults to 100% or 1. This will be more important (and convoluted) later on.**
+Les propriétés qui sont définies devraient être assez explicites. Les seules qui pourraient vous poser problème sont celles de « padding » (remplissage) et de « size_hint ». Le remplissage est le nombre de pixels autour de l'élément dans un repère x,y. On lit dans la documentation Kivy que « size_hint » (pour X, mais c'est identique pour Y) est défini comme suit :
+X size hint. Représente la quantité d'espace que le widget doit utiliser selon la direction de l'axe X, par rapport à la largeur de son parent. Seuls Layout et Window utilisent cette propriété. La valeur est indiquée en pourcentage sous forme d'un nombre compris entre 0 et 1, où 1 signifie la taille totale de son parent et 0,5 représente 50 %.
+Dans notre cas, size_hint est défini à « none » (aucun), qui vaut par défaut 100 % ou 1. Ce sera plus important (et compliqué) plus tard.
-Now we define our “main” button (next page, top right). This is a static reference for the scale.
+**Now we define our “main” button (next page, top right). This is a static reference for the scale.
 Again, most of this should be fairly clear.
@@ Ligne 74: / Ligne 118: @@
 root.add_widget(lbl)
 root.add_widget(btn1)
+#----------------------------**
+Maintenant, nous définissons notre bouton « principal » (en haut à droite de la page suivante). Il s'agit d'une référence statique pour la gamme.
+Encore une fois, tout devrait être assez clair.
+Maintenant, nous ajoutons les widgets à l'objet racine, qui est le widget GridLayout. L'étiquette va dans la première cellule, le bouton (btn1) va dans la seconde.
+#----------------------------
+racine.add_widget(etiquette)
+racine.add_widget(btn1)
 #----------------------------
-Now comes some harder-to-understand code. We create another GridLayout object and call it “s”. We then bind it to the height of the next widget which, in this case, will be the ScrollView, NOT the buttons.
+**Now comes some harder-to-understand code. We create another GridLayout object and call it “s”. We then bind it to the height of the next widget which, in this case, will be the ScrollView, NOT the buttons.
 s = GridLayout(cols=1, spacing = 10, size_hint_y = None)
 s.bind(minimum_height=s.setter('height'))
-Now (middle right) we create 20 buttons, fill in the text property, and then add it to the GridLayout.
+Now (middle right) we create 20 buttons, fill in the text property, and then add it to the GridLayout.**
-Now we create the ScrollView, set its size, and add it to the root GridLayout.
+Arrive maintenant du code plus difficile à comprendre. Nous créons un autre objet GridLayout et l'appelons « s ». Nous le lions ensuite à la hauteur du widget suivant qui, dans ce cas, se trouve être la ScrollView, PAS les boutons.
+s = GridLayout(cols=1, spacing = 10, size_hint_y = None)
+s.bind(minimum_height=s.setter('height'))
+Maintenant (au milieu à droite), nous créons 20 boutons, remplissons la propriété « texte », puis les ajoutons au GridLayout.
+**Now we create the ScrollView, set its size, and add it to the root GridLayout.
 sv = ScrollView(size_hint=(None, None), size=(600,400))
@@ Ligne 95: / Ligne 157: @@
 sv.add_widget(s)
-return root
+return root**
+Maintenant nous créons le ScrollView, définissons sa taille, et l'ajoutons au GridLayout racine.
+  sv = ScrollView(size_hint=(None, None), size=(600,400))
+  sv.center = Window.center
+  racine.add_widget(sv)
+Enfin, nous ajoutons le GridLayout, qui contient tous nos boutons dans le ScrollView, et retournons l'objet racine à l'application.
+  sv.add_widget(s)
+  return racine
-Finally, we have our “if __name__” routine. Notice that we are setting ourselves up for the possibility of using the application as an android app.
+**Finally, we have our “if __name__” routine. Notice that we are setting ourselves up for the possibility of using the application as an android app.
 if __name__ in ('__main__','__android__'):
@@ Ligne 107: / Ligne 180: @@
 The source code can be found on PasteBin at http://pastebin.com/hsicnyt1
-Until next time, enjoy and thank you for putting up with me for three years!
+Until next time, enjoy and thank you for putting up with me for three years!**
+Enfin, nous avons notre routine « if __name__ ». Remarquez que nous nous réservons la possibilité d'utiliser l'application comme une application android.
+  if __name__ in ('__main__','__android__'):
+    Transpose().run()
+Maintenant, vous vous demandez peut-être pourquoi j'ai utilisé des boutons au lieu d'étiquettes pour tous nos objets textuels. C'est parce que les étiquettes dans Kivy n'ont aucune sorte de bordure visible par défaut. Nous jouerons avec cela dans le prochain épisode. Nous allons également ajouter un bouton pour quitter et d'autres petites choses.
+Le code source peut être trouvé sur Pastebin : http://pastebin.com/8jTJSmLR
+Jusqu'à la prochaine fois, amusez-vous et je vous remercie de m'avoir suivi pendant trois ans !