| Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédente |
| issue63:tuto_python [2012/09/13 22:53] – fredphil91 | issue63:tuto_python [2012/09/15 12:32] (Version actuelle) – andre_domenech |
|---|
| First off, Kivy is an open source library that makes use of multi-touch displays. If that isn’t cool enough, it’s also cross-platform, which means that it will run on Linux, Windows, Mac OSX, IOS and Android. Now you can see why we are talking about this. But remember, for the most part, anything you code using Kivy, can run on any of the above platforms without recoding.** | First off, Kivy is an open source library that makes use of multi-touch displays. If that isn’t cool enough, it’s also cross-platform, which means that it will run on Linux, Windows, Mac OSX, IOS and Android. Now you can see why we are talking about this. But remember, for the most part, anything you code using Kivy, can run on any of the above platforms without recoding.** |
| |
| Cette fois, nous allons faire un petit détour de notre exploration de la programmation Android, et regarder un nouvel environnement pour la programmation d'interfaces graphiques appelé Kivy. Vous pouvez aller sur http://kivy.org et télécharger et installer le paquet - avant d'aller plus loin dans l'installation de ce mois-ci. Les instructions d'installation pour Ubuntu sont ici : http://kivy.org/docs/installation/installation-ubuntu.html. | Cette fois-ci, nous allons dévier un peu de notre exploration de la programmation Android et regarder un nouvel environnement pour la programmation d'interfaces graphiques appelé Kivy. Vous pouvez aller sur http://kivy.org pour télécharger et installer le paquet, avant d'aller plus loin dans cet article. Les instructions d'installation pour Ubuntu sont ici : http://kivy.org/docs/installation/installation-ubuntu.html. |
| |
| Tout d'abord, Kivy est une bibliothèque Open Source qui gère les écrans tactiles. Si ce n'est pas encore assez chouette, elle est aussi multi-plateforme, ce qui signifie qu'elle fonctionne sur Linux, Windows, Mac OSX, iOS et Android. Maintenant vous comprenez pourquoi nous parlons de cela. Mais rappelez-vous, la plupart du temps, tout ce que vous codez à l'aide de Kivy peut fonctionner sur n'importe laquelle des plateformes ci-dessus sans recodage. | Tout d'abord, Kivy est une bibliothèque Open Source qui gère les écrans tactiles. Si ce n'est pas encore assez chouette, elle est aussi multi-plateforme, ce qui signifie qu'elle fonctionne sous Linux, Windows, Mac OSX, iOS et Android. Maintenant vous comprenez pourquoi nous en parlons. Mais rappelez-vous, la plupart du temps, tout ce que vous codez à l'aide de Kivy peut fonctionner sur n'importe laquelle des plateformes ci-dessus sans recodage. |
| |
| **Before we go too far, let me make a couple of statements. Kivy is VERY powerful. Kivy gives you a new set of tools to make your GUI programming. All that having been said, Kivy is also fairly complicated to deal with. You are limited to the widgets that they have provided. In addition, there is no GUI designer for Kivy, so you have to do a GREAT deal of pre-planning before you try to do anything complicated. Also remember, Kivy is continually under development so things can change quickly. So far, I haven’t found any of my test code that has broken by a new version of Kivy, but that’s always a possibility. | **Before we go too far, let me make a couple of statements. Kivy is VERY powerful. Kivy gives you a new set of tools to make your GUI programming. All that having been said, Kivy is also fairly complicated to deal with. You are limited to the widgets that they have provided. In addition, there is no GUI designer for Kivy, so you have to do a GREAT deal of pre-planning before you try to do anything complicated. Also remember, Kivy is continually under development so things can change quickly. So far, I haven’t found any of my test code that has broken by a new version of Kivy, but that’s always a possibility. |
| It’s very simple, but shows a really neat widget. Below is their code.** | It’s very simple, but shows a really neat widget. Below is their code.** |
| |
| Avant d'aller trop loin, permettez-moi de faire quelques déclarations. Kivy est TRÈS puissant. Kivy vous procure un nouvel ensemble d'outils pour programmer des interfaces graphiques. Tout cela étant dit, Kivy est également assez compliqué à gérer. Vous êtes limité aux widgets qu'ils ont fournis. En outre, il n'existe pas de designer graphique pour Kivy, donc vous devez faire beaucoup de planification préalable avant d'essayer de faire quelque chose de compliqué. Rappelez-vous aussi que Kivy est toujours en cours de développement et que les choses peuvent changer rapidement. Jusqu'à présent, je n'ai jamais eu de morceaux de mon code qui aient été cassés par une nouvelle version de Kivy, mais c'est toujours une possibilité. | Avant d'aller trop loin, permettez-moi de faire quelques déclarations. Kivy est TRÈS puissant. Kivy vous procure un nouvel ensemble d'outils pour programmer des interfaces graphiques. Tout cela étant dit, Kivy est également assez compliqué à gérer. Vous êtes limité aux widgets qu'ils ont fournis. En outre, il n'existe pas de designer graphique pour Kivy et vous devez donc faire beaucoup de planification préalable avant d'essayer de faire des trucs compliqués. Rappelez-vous aussi que Kivy est constamment en développement et que les choses peuvent changer rapidement. Jusqu'à présent, je n'ai jamais eu de morceaux de mon code qui aient été cassés par une nouvelle version de Kivy, mais c'est toujours une possibilité. |
| |
| Plutôt que de sauter dedans et de créer notre propre code ce mois-ci, nous allons examiner quelques-uns des exemples livrés avec Kivy, et le mois prochain nous préparerons le notre. | Plutôt que de nous précipiter et de créer notre propre code ce mois-ci, nous allons examiner quelques-uns des exemples livrés avec Kivy et, le mois prochain, nous préparerons le nôtre. |
| |
| Une fois que vous avez décompressé Kivy dans son propre dossier, utilisez un terminal et allez dans ce dossier. Le mien est dans /home/greg/Kivy-1.3.0. Maintenant, allez dans le dossier des exemples, puis dans le dossier widgets. Regardons l'exemple accordion_1.py. | Une fois que vous avez décompressé Kivy dans son propre dossier, utilisez un terminal et allez dans ce dossier. Le mien est dans /home/greg/Kivy-1.3.0. Maintenant, allez dans le dossier des exemples, puis dans le dossier widgets. Regardons l'exemple accordion_1.py. |
| Go ahead and run it to see what it does.** | Go ahead and run it to see what it does.** |
| |
| Comme vous pouvez le voir, les trois premières lignes sont des déclarations d'importation. Tout widget que vous utilisez doit être importé, et vous devez toujours importer App de kivy.app. | Comme vous pouvez le voir, les trois premières lignes sont des déclarations d'importation. Tout widget que vous utilisez doit être importé et vous devez toujours importer App de kivy.app. |
| |
| Les huit lignes suivantes sont la classe principale de l'application. La classe est définie, puis une routine appelée build est créée. Vous devrez presque toujours avoir une routine de construction (build) quelque part dans vos programmes Kivy. Ensuite nous définissons un objet racine du widget Accordéon. Ensuite, nous créons cinq éléments AccordionItems et définissons leurs titres. Nous ajoutons ensuite dix étiquettes avec le texte « contenu très grand ». Nous ajoutons ensuite chaque étiquette dans le widget racine (l'accordéon) et puis finalement nous retournons l'objet racine. C'est en substance ce qui affiche l'objet racine dans la fenêtre que crée Kivy. Enfin, nous avons la déclaration « if __ name__ » puis exécutons l'application. | Les huit lignes suivantes sont la classe principale de l'application. La classe est définie, puis une routine appelée build est créée. Vous devrez presque toujours avoir une routine de construction (build) quelque part dans vos programmes Kivy. Ensuite nous définissons un objet racine du widget Accordéon. Ensuite, nous créons cinq éléments AccordionItems et définissons leurs titres. Nous ajoutons ensuite dix étiquettes avec le texte « contenu très grand ». Nous ajoutons ensuite chaque étiquette dans le widget racine (l'accordéon) et, enfin, nous retournons l'objet racine. C'est en substance ce qui affiche l'objet racine dans la fenêtre que crée Kivy. En dernier lieu, nous avons la déclaration « if __ name__ » puis exécutons l'application. |
| |
| Allez-y, exécutez cet exemple pour voir ce qu'il fait. | Allez-y, exécutez cet exemple pour voir ce qu'il fait. |
| Before we look at the code, run the program.** | Before we look at the code, run the program.** |
| |
| Vous verrez ça dans quelques instants, une fenêtre s'ouvre avec cinq barres verticales à l'intérieur. En appuyant sur une barre, on provoque son ouverture et on révèle les dix étiquettes. Bien sûr, chaque barre a le même texte dans les dix étiquettes, mais vous pouvez comprendre comment résoudre ce problème. | Dans quelques instants, vous verrez une fenêtre s'ouvrir avec cinq barres verticales à l'intérieur. En cliquant sur une barre, on provoque son ouverture ce qui révèle les dix étiquettes. Bien sûr, chaque barre a le même texte sur les dix étiquettes, mais vous êtes capable de changer cela. |
| |
| Le widget Accordéon peut être utilisé pour toutes sortes de choses, mais la chose qui me vient toujours à l'esprit est un écran de configuration... chaque barre étant un ensemble différent de configurations. | Le widget Accordéon peut être utilisé pour toutes sortes de choses, mais la chose qui me vient toujours à l'esprit est un écran de configuration... chaque barre étant un ensemble distinct de configurations. |
| |
| Ensuite, nous allons prendre l'exemple textalign.py. Il n'est pas aussi « sexy » que le précédent, mais c'est un bon exemple qui vous donne des informations importantes pour la suite. | Ensuite, nous allons prendre l'exemple textalign.py. Il n'est pas aussi « sexy » que le précédent, mais c'est un bon exemple qui vous fournit des informations importantes pour la suite. |
| |
| Avant de regarder le code, exécutez le programme. | Avant de regarder le code, exécutez le programme. |
| pass** | pass** |
| |
| Vous devriez voir une étiquette en haut de la fenêtre, un ensemble de neuf cases rouges avec du texte dans une grille 3x3, et quatre boutons situés en bas de la fenêtre. Lorsque vous cliquez (appuyez) sur chacun des boutons, l'alignement du texte dans les cases rouges va changer. La raison principale pour laquelle il faut prêter attention à cet exemple est qu'il vous montre comment utiliser et contrôler certains des widgets importants, ainsi que la façon de changer l'alignement de vos widgets, ce qui n'est pas totalement intuitif. | Vous devriez voir une étiquette en haut de la fenêtre, un ensemble de neuf cases rouges avec du texte dans une grille 3x3 et quatre boutons le long du bas de la fenêtre. Lorsque vous cliquez (appuyez) sur chacun des boutons, l'alignement du texte dans les cases rouges changera. La raison principale pour laquelle il faut examiner cet exemple attentivement est qu'il vous montre comment utiliser et contrôler certains des widgets importants, ainsi que la façon de changer l'alignement de vos widgets, ce qui n'est pas totalement intuitif. |
| |
| Le code de cet exemple se trouve ci-dessus à droite. Je vais le découper en morceaux. D'abord le code d'importation (en haut à droite). | Le code de cet exemple se trouve ci-dessus à droite. Je vais le décortiquer. D'abord le code d'importation (en haut à droite). |
| |
| Ci-dessous se trouve quelque chose de spécial. Ils ont créé une classe qui ne contient aucun code. Je vais en parler dans quelques minutes : | Ci-dessous se trouve quelque chose de spécial. Ils ont créé une classe qui ne contient aucun code. Je vais en parler dans quelques minutes : |
| self.root.remove_widget(self.grid) | self.root.remove_widget(self.grid) |
| |
| La méthode bind ici définit la taille, et la grille est ajoutée à l'objet racine. | La méthode bind ici définit la taille et la grille est ajoutée à l'objet racine. |
| |
| grid.bind(minimum_size=grid.setter('size')) | grid.bind(minimum_size=grid.setter('size')) |
| self.root.add_widget(grid) | self.root.add_widget(grid) |
| |
| Rappelez-vous, dans le dernier exemple j'ai dit que vous devrez presque toujours utiliser une routine de construction. Voici celle de cet exemple. L'objet racine est créé avec un widget FloatLayout. Ensuite (au milieu à droite) nous appelons la classe Selector pour créer un objet de sélection, qui est ensuite ajouté à l'objet racine, et on initialise l'affichage en appelant self.select(0). | Rappelez-vous, dans le dernier exemple j'ai dit que vous devrez presque toujours utiliser une routine de construction. Voici celle de cet exemple. L'objet racine est créé avec un widget FloatLayout. Ensuite (au milieu à droite) nous appelons la classe Selector pour créer un objet de sélection, qui est ensuite ajouté à l'objet racine et on initialise l'affichage en appelant self.select(0). |
| |
| **Finally the application is allowed to run. | **Finally the application is allowed to run. |
| TextAlignApp().run() | TextAlignApp().run() |
| |
| Maintenant, avant d'aller plus loin, nous devons éclaircir quelques petites choses. Tout d'abord, si vous regardez dans le dossier qui contient le fichier .py, vous remarquerez un autre fichier appelé textalign.kv. Ceci est un fichier spécial utilisé par Kivy pour vous permettre de créer vos propres widgets et des règles. Lorsque votre application Kivy démarre, elle cherche dans le même répertoire le fichier d'aide .kv. S'il est présent, elle le charge en premier. Voici le code dans le fichier .kv. | Maintenant, avant d'aller plus loin, nous devons éclaircir quelques petites choses. Tout d'abord, si vous regardez dans le dossier qui contient le fichier .py, vous remarquerez un autre fichier appelé textalign.kv. Ceci est un fichier spécial utilisé par Kivy pour vous permettre de créer vos propres widgets et règles. Lorsque votre application Kivy démarre, elle cherche dans le même répertoire le fichier d'aide .kv. S'il est présent, elle le charge en premier. Voici le code dans le fichier .kv. |
| |
| Cette première ligne indique la version minimum de Kivy qui doit être utilisée pour exécuter cette application. | Cette première ligne indique la version minimum de Kivy qui doit être utilisée pour exécuter cette application. |
| Ici (à droite sur la page suivante) le widget de sélection est créé. Ce sont les quatre boutons qui apparaissent au bas de la fenêtre ainsi que l'étiquette sur le haut de la fenêtre. | Ici (à droite sur la page suivante) le widget de sélection est créé. Ce sont les quatre boutons qui apparaissent au bas de la fenêtre ainsi que l'étiquette sur le haut de la fenêtre. |
| |
| Remarquez que l'étiquette qui constitue le titre en haut de la fenêtre a une position (pos_hint) en haut, a une hauteur de 50 pixels et une taille de police de 16. Chacun des boutons a un texte aligné au centre. La déclaration on_release est une déclaration qui ressemble à « bind », qui fait que lorsque le bouton est relâché il appelle (dans ce cas) root.app.select avec la valeur « case ». | Remarquez que l'étiquette qui constitue le titre en haut de la fenêtre a une position (pos_hint) en haut, a une hauteur de 50 pixels et une taille de police de 16. Chacun des boutons a un texte aligné au centre. La déclaration on_release est une déclaration qui ressemble à « bind », qui fait que, lorsque le bouton est relâché, il appelle (dans ce cas) root.app.select avec la valeur « case ». |
| |
| Espérons que cela commence à avoir du sens maintenant. Vous pouvez voir pourquoi Kivy est si puissant. | J'espère que tout commence à devenir plus clair maintenant. Vous pouvez voir pourquoi Kivy est si puissant. |
| |
| **Let’s talk for a moment about two widgets that I have passed over in the discussion of the application code, The GridLayout and the FloatLayout. | **Let’s talk for a moment about two widgets that I have passed over in the discussion of the application code, The GridLayout and the FloatLayout. |
| When you want to place a widget into a GridLayout, you use the add_widget method. Here lies a problem. You can’t specify which control goes into which grid cell other than the order in which you add them. In addition, each widget is added from left to right, top to bottom. You can’t have an empty cell. Of course, you can cheat. I’ll leave that up to you to figure out.** | When you want to place a widget into a GridLayout, you use the add_widget method. Here lies a problem. You can’t specify which control goes into which grid cell other than the order in which you add them. In addition, each widget is added from left to right, top to bottom. You can’t have an empty cell. Of course, you can cheat. I’ll leave that up to you to figure out.** |
| |
| Parlons un instant de deux widgets dont je n'ai pas parlé ci-dessus pendant la discussion du code de l'application, GridLayout et FloatLayout. | Examinons un instant deux widgets dont je n'ai pas parlé ci-dessus pendant la discussion du code de l'application, GridLayout et FloatLayout. |
| |
| GridLayout est un widget parent qui utilise une description en ligne et colonne qui permet de placer les widgets dans chaque cellule. Dans ce cas, il s'agit d'une grille 3x3 (comme un plateau de Tic-Tac-Toe). | GridLayout est un widget parent qui utilise une description en ligne et colonne qui permet de placer les widgets dans chaque cellule. Dans ce cas, il s'agit d'une grille 3x3 (comme un plateau de Tic-Tac-Toe). |
| | | | | | |
| | |
| Lorsque vous voulez placer un widget dans un GridLayout, vous utilisez la méthode add_widget. Il y a cependant un problème. Vous ne pouvez pas spécifier quelle commande va dans quelle cellule de la grille autrement que par l'ordre dans lequel vous les ajoutez. En outre, chaque widget est ajouté de gauche à droite, et de haut en bas. Vous ne pouvez pas avoir une cellule vide. Bien sûr, vous pouvez tricher. Je vais vous laisser comprendre comment. | Lorsque vous voulez placer un widget dans un GridLayout, vous utilisez la méthode add_widget. Il y a cependant un problème. Vous ne pouvez pas spécifier la cellule de la grille dans laquelle chaque commande sera placée autrement que par l'ordre dans lequel vous les ajoutez. En outre, chaque widget est ajouté de gauche à droite et de haut en bas. Vous ne pouvez pas avoir une cellule vide. Bien sûr, vous pouvez tricher. À vous de comprendre comment. |
| |
| **The FloatLayout widget seems to be just a parent container for other child widgets. | **The FloatLayout widget seems to be just a parent container for other child widgets. |
| Le widget FloatLayout semble être juste un conteneur parent pour d'autres widgets enfants. | Le widget FloatLayout semble être juste un conteneur parent pour d'autres widgets enfants. |
| |
| J'ai passé sous silence quelques points pour l'instant. Mon intention était cette fois tout simplement de vous enthousiasmer par les possibilités qu'offre Kivy. Dans les prochains articles, nous allons continuer à explorer ce que Kivy peut nous apporter, comment utiliser divers widgets, et comment créer un APK pour publier nos applications sur Android. | J'ai passé sous silence quelques points pour l'instant. Cette fois, mon intention était tout simplement de vous enthousiasmer par les possibilités qu'offre Kivy. Dans les prochains articles, nous allons continuer à explorer ce que Kivy peut nous apporter, comment utiliser divers widgets et comment créer un APK pour publier nos applications sur Android. |
| |
| En atendant, explorez davantage les exemples de Kivy, et surtout allez sur la page de documentation de Kivy : http://kivy.org/docs/. | En atendant, explorez davantage les exemples de Kivy et, surtout, allez sur la page de documentation de Kivy : http://kivy.org/docs/. |
| |
