Object Properties and .kv Continued

Object Properties

After experimenting with the .kv language some of you may have asked the question: How do we access our elements (textinput, button etc.) from our python script? Well that is an excellent question and is what we have object properties for!

An object property allows us to create a reference to widgets from within a .kv file from our python script.

Modifying the .kv File

To set up object properties we need to create global variables from within our .kv file and assign these variables to the id property of specific widgets.

<MyGrid>:
   
    name: name  # Global variable name references the id name
    email: email  # Global variable email references the id email

    GridLayout:
        cols:1
        size: root.width - 200, root.height -200
        pos: 100, 100

        GridLayout:
            cols:2

            Label:
                text: "Name: "

            TextInput:
                id: name  # <- Add this
                multiline:False

            Label:
                text: "Email: "

            TextInput:
                id: email  # <-Add this
                multiline:False

        Button:
            text:"Submit"

Modifying the Python Script

The first thing we need to do to use an object property from within our python script is import the specific module.

from kivy.properties import ObjectProperty

Next we will define two object properties from within our class MyGrid.

class MyGrid(Widget):
    name = ObjectProperty(None)
    email = ObjectProperty(None)

We initialize the values as None to start as when we first create the class they will have no value. Now if we want to access the value of the TextInput box with id email we can simply use self.email to do so. Similarity for the name TextInput.

Creating a Button On_Press

Like we had in previous tutorials we'd like our button to perform a function when it is clicked. To accomplish this we need to create a method inside of our MyGrid class that we can call each time our button is pressed. We will call this btn().

# Goes inside MyGrid Class
def btn(self):
    print("Name:", self.name.text, "email:", self.email.text)
    self.name.text = ""
    self.email.text = ""

This method will print the contents of our form and clear both of the text input boxes.

Now we need to tell the button what it should call when it is pressed. To do this we will add the property on_press in our .kv file.

Button:
    text:"Submit"
    on_press: root.btn() # <- Add this

We use app.btn() to reference the class that contains our btn method.

Now we should have a functioning application that works the same as the one we created in tutorial #3. However, we have successfully separated our logic from our styling and elements.

Full Code

import kivy
from kivy.app import App
from kivy.uix.label import Label
from kivy.uix.gridlayout import GridLayout
from kivy.uix.textinput import TextInput
from kivy.uix.button import Button
from kivy.uix.widget import Widget
from kivy.properties import ObjectProperty


class MyGrid(Widget):
    name = ObjectProperty(None)
    email = ObjectProperty(None)

    def btn(self):
        print("Name:", self.name.text, "email:", self.email.text)
        self.name.text = ""
        self.email.text = ""




class MyApp(App):
    def build(self):
        return MyGrid()


if __name__ == "__main__":
    MyApp().run()

<MyGrid>:

    name: name
    email: email

    GridLayout:
        cols:1
        size: root.width - 200, root.height -200
        pos: 100, 100

        GridLayout:
            cols:2

            Label:
                text: "Name: "

            TextInput:
                id: name
                multiline:False

            Label:
                text: "Email: "

            TextInput:
                id: email
                multiline:False

        Button:
            text:"Submit"
            on_press: root.btn()