Kivy For The Non Computer Scientist – Part 10: KV Language

To this point in this blog series all of the code and Kivy layout has been done using pure python and in a manner familiar to python programmers. In this first post of this blog series I indicated that Kivy has something called KV Language.

Kivy Language is:

  • a different language from Python
  • is something akin to what CSS does for HTML
    • it’s great for screen layouts
      • it adds widgets, screen layouts, defines widget properties etc.
  • it can be loaded into your app in one of two ways
    • from a separate file
    • as a string that’s part of your Python code file

Kivy Language is not:

  • something that you manipulate directly
    • KV Language provides your initial screen layout, various widgets, buttons and labels.
    • Python is used to manipulate buttons, labels, and widget properties.
      • much like Javascript manipulates CSS in HTML web pages.

In this post we are going to create a five button kivy screen using KV Language. It will look as follows;

five_button

The complete code to accomplish this with comments is as follows;

import kivy # Required to run Kivy such as the next line of code
kivy.require('1.9.1') # used to alert user if this code is run on an earlier version of Kivy.
from kivy.app import App # Imports the base App class required for Kivy Apps
from kivy.lang import Builder # Imports the KV language builder that provides the layout of kivy screens

kivyscreen = Builder.load_string(""" # The variable kivyscreen is assigned the string that will build Kivy screens
GridLayout: # Creates a GridLayout for use in the app.
    cols: 1 # Sets column property to 1

    Button: # Creates a Button Widget instance.
        text: "I'm Button 1" #  Sets above button text property to I'm Button 1

    Button: # Creates a Button Widget instance.
        text: "I'm Button 2" #  Sets above button text property to I'm Button 2

    Button: # Creates a Button Widget instance.
        text: "I'm Button 3" #  Sets above button text property to I'm Button 3

    Button: # Creates a Button Widget instance.
        text: "I'm Button 4" #  Sets above button text property to I'm Button 4

    Button: # Creates a Button Widget instance.
        text: "I'm Button 5" #  Sets above button text property to I'm Button 5
""") # End of string.

class FiveButtonApp(App): # Creates the instance (copy) of the Kivy App class named FiveButtonApp.
    def build(self): # build is a method of Kivy's App class used to place widgets onto the GUI.
        return kivyscreen # return calls the build method which in turn builds the GUI.

FiveButtonApp().run()  # Calls the FiveButtonApp object to run the app.

New in the code is as follows;

  • Line 6 thru 24 – The variable kivyscreen is assigned the string that will build Kivy screens. Builder.load_string is connected to Kivy’s build that that places screen widgets (in this case the five buttons) on the GUI when called.
  • Line 28 – kivyscreen is called from this line.

One great thing about using the kv language is how much less code is required to create and place the widgets onto a Kivy GUI. In our next few posts we’ll look at how to add events that will provide the interactivity for this viewer. Here’s the link to Kivy For The Non Computer Scientist – Part 11: Using KV Language To Set Widget Text Size, Text Position And Text And Button Colours

….brad….

Advertisements

2 Responses

  1. […] give you an idea this post will build on the code from Kivy For The Non Computer Scientist – Part 10: KV Language and the Kivy Gui will build as […]

  2. […] this blog post we’ll build upon the code from Kivy For The Non Computer Scientist – Part 10: KV Language but we’ll stay from the blog material in Part 11 in order to provide working Kivy/Python […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: