Object Properties and .kv Continued
Subscribe to Tech with Tim
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()