Ceci est une ancienne révision du document !
This time, we are going to take a short detour from our exploration of Android programming, and look at a new framework for GUI programming called Kivy. You’ll want to head over to http://kivy.org and download and install the package – before getting too far into this month’s installment. The Ubuntu installation instructions can be found at http://kivy.org/docs/installation/installation-ubuntu.html. 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.
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.
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.
Rather than jump in and create our own code this month, we’ll look at some of the examples that come with Kivy, and, next month, we’ll “roll our own”.
Once you’ve unpacked Kivy into its own folder, use a terminal and change to that folder. Mine is in /home/greg/Kivy-1.3.0. Now change to the examples folder, then to the widgets folder. Let’s look at the accordion_1.py example.
It’s very simple, but shows a really neat widget. Below is their code.
As you can see, the first three lines are import statements. Any widget you use must be imported, and you must always import App from kivy.app.
The next eight lines are the main application class. The class is defined, then a routine called build is created. You will almost always have a build routine somewhere in your Kivy programs. Next we set a root object from the Accordion widget. Next we create five AccordionItems and set their title. We then add ten labels with the text “Very big content”. We then add each label to the root widget (the Accordion) and then finally we return the root object. This, in essence, displays the root object in the window that Kivy creates for us. Finally we have the “if name” statement and then run the application.
Go ahead and run it to see what it does.
You will see that in a moment or two, a window opens up with five vertical bars in it. Clicking on a bar causes it to open up revealing the ten labels. Of course, each bar has the same text in the ten labels, but you can figure out how to fix that.
The Accordion widget can be used for any number of things, but the thing that has always jumped to my mind is for a configuration screen… each bar being a different configuration set.
Next we’ll look at the textalign.py example. It’s not as “sexy” as the last one, but it’s a good example that gives you some important information for later on.
Before we look at the code, run the program.
What you should see is a label at the top of the window, a set of nine red boxes with text in a 3×3 grid, and four buttons along the bottom of the window. As you click (tap) each of the buttons, the alignment of the text within the red boxes will change. The main reason you would want to pay attention to this example is how to use and control some of the important widgets as well as how to change the alignment in your widgets, which is not completely intuitive.
Above right is their code for this one. I’ll break it into pieces. First the import code (above right).
Below is something special. They created a class with no code in it. I’ll discuss that in a few minutes:
class BoundedLabel(Label):
pass
Next a class called “Selector” (below) is created:
class Selector(FloatLayout):
app = ObjectProperty(None)
Now the Application class is created.
Here the routine select is created. A GridLayout widget is created (called grid) which has 3 rows and 3 columns. This grid is going to hold the nine red boxes.
for valign in ('bottom', 'middle', 'top'):
for halign in ('left', 'center', 'right'):
Here we have two loops, one inner and one outer.
label = BoundedLabel(text='V: %s\nH: %s' % (valign, halign),
size_hint=(None, None),
halign=halign, valign=valign)
In the code above, an instance of the BoundedLabel widget is created, once for each of the nine red boxes. You might want to stop here and say “But wait! There isn’t a BoundedLabel widget. It just has a pass statement in it.” Well, yes, and no. We are creating an instance of a custom widget. As I said a little bit above, we’ll talk more about that in a minute.
In the code block (top right, next page), we examine the variable ‘case’ which is passed into the select routine.
Here, the grid is removed, to clear the screen.
if self.grid:
self.root.remove_widget(self.grid)
The bind method here sets the size, and the grid is added to the root object.
grid.bind(minimum_size=grid.setter('size'))
self.grid = grid
self.root.add_widget(grid)
Remember in the last example I said that you will almost always use a build routine. Here is the one for this example. The root object is created with a FloatLayout widget. Next (middle right) we call the Selector class to create a Selector object, then it’s added to the root object, and we initialize the display by calling self.select(0).
Finally the application is allowed to run.
TextAlignApp().run()
Now, before we can go any further, we need to clear up a few things. First, if you look in the folder that holds the .py file, you’ll notice another file called textalign.kv. This is a special file that Kivy uses to allow you to create your own widgets and rules. When your Kivy application starts, it looks in the same directory for the .kv helper file. If it is there, then it loads it first. Here’s the code in the .kv file.
This first line tells Kivy what minimum version of Kivy that must be used to run this app.
#:kivy 1.0
Here the BoundedLabel widget is created. Each of the red boxes in the application is a BoundedLabel.
Color sets the background color of the box to red (rgb: 1,0,0). The Rectangle widget creates a (you guessed it) rectangle. When we call the BoundedLabel widget in the actual application code, we are passing a label as the parent. The size and position (here in the .kv file) are set to whatever the size and position of the label are.
Here (right, next page) the Selector widget is created. This is the four buttons that appear at the bottom of the window as well as the label across the top of the window.
Notice that the label that makes up the title at the top of the window has a position (pos_hint) as top, has a height of 50 pixels and a font size of 16. Each of the buttons has an alignment for the text of center. The on_release statement is a bind-like statement so that, when the button is released, it calls (in this case) root.app.select with a case value.
Hopefully, this is beginning to make sense now. You can see why Kivy is so powerful.
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.
The GridLayout is a parent widget that uses a row and column description to allow widgets to be placed in each cell. In this case, it is a 3×3 grid (like a Tic-Tac-Toe (or Naughts and Crosses) board).
|| ||
| |
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.
The FloatLayout widget seems to be just a parent container for other child widgets.
I’ve glossed over a few points for now. My intent this time was simply to get you somewhat excited about the possibilities that Kivy has to offer. In the next couple of articles, we’ll continue to explore what Kivy has for us, how to use various widgets, and how to create an APK to publish our applications to Android.
Until then, explore more of the examples in Kivy, and be sure to go to the documentation page for Kivy at http://kivy.org/docs/.