| Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédente |
| issue64:tuto_python [2012/09/30 15:51] – andre_domenech | issue64:tuto_python [2012/10/07 09:27] (Version actuelle) – auntiee |
|---|
| Now to the actual meat of this article... more on Kivy.** | 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 du 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. | Maintenant place au contenu de cet article... la suite sur Kivy. |
| 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.** | 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 simplement de 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. |
| 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. | 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 meilleurs fournies par Kivy. Notez également que nous incluons une instruction système pour quitter (ligne 3). Plus tard nous aurons un bouton pour quitter. | 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 ». | Voici le début de notre classe appelée « Transpose ». |
| Maintenant, travaillons sur notre routine « build » (au milieu à droite). Elle est nécessaire pour toutes les applications Kivy. | 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 graduation commençant par la note « Do ». Chacune doit être centrée dans 5 espaces. Comme le texte affiché en bas à droite. | 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. | 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. |
| -----------------------------** | -----------------------------** |
| |
| Nous créons maintenant l'objet racine (qui est notre fenêtre principale) contenant un widget GridLayout. Si vous vous souvenez, il y a 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. | 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) | racine = GridLayout(orientation='vertical', spacing=10, cols=1,rows=3) |
| 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 est identique pour Y) est défini comme suit : | 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 %. | 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 %. |
| #----------------------------** | #----------------------------** |
| |
| Maintenant, nous définissons notre bouton « principal » (en haut à droite de la page suivante). Il s'agit d'une référence statique d'échelle. | 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. | Encore une fois, tout devrait être assez clair. |
| racine.add_widget(sv) | racine.add_widget(sv) |
| |
| Enfin, nous ajoutons le GridLayout qui contient tous nos boutons dans le ScrollView, et retournons l'objet racine à l'application. | Enfin, nous ajoutons le GridLayout, qui contient tous nos boutons dans le ScrollView, et retournons l'objet racine à l'application. |
| |
| sv.add_widget(s) | sv.add_widget(s) |
| Transpose().run() | 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 un peu plus. | 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 | Le code source peut être trouvé sur Pastebin : http://pastebin.com/8jTJSmLR |
