2012-04-04 10:04:52 +00:00
Kv Design Language
2012-04-04 10:40:11 +00:00
-------------------
2012-04-04 10:38:24 +00:00
.. container :: title
Designing through kv language.
2012-03-16 14:42:35 +00:00
2012-04-04 10:48:34 +00:00
Kivy provides a design language specifically geared towards ease of GUI Design, seperating the interface design part of your App from the rest. for example.
2012-04-04 19:38:00 +00:00
To create a username/passsword accepting feilds, do this in your kv file :
2012-04-04 10:04:52 +00:00
2012-04-04 19:38:00 +00:00
.. code-block :: kv
2012-04-04 10:04:52 +00:00
#:kivy 1.1.2
2012-04-04 19:38:00 +00:00
<MyAppClass>
2012-04-04 10:04:52 +00:00
GridLayout:
rows: 2
cols: 2
Label:
text: 'User Name:'
TextInput:
Label:
text: 'Password:'
TextInput:
password: True
2012-04-04 19:38:00 +00:00
In the above code :
2012-04-04 10:38:24 +00:00
2012-04-04 19:38:00 +00:00
.. code-block :: kv
2012-04-04 20:19:20 +00:00
2012-04-04 10:04:52 +00:00
<MyappClass> # every class in your app can be represented by a rule like this in the kv file
GridLayout: # this is how you add your widget/layout to the parent note the indentation.
2012-04-04 10:40:11 +00:00
rows: 2 # this how you set each property of your widget
2012-04-04 10:04:52 +00:00
2012-04-04 19:38:00 +00:00
An important thing to note here is that when you set a property in your `` kv `` language like `` row: 2 `` one of two things happen.
If the value(the part that comes after the `` : `` ) has no variables then what happens is a normal assignment like `` gridlayout_obj.rows = 2 `` .
2012-04-04 10:04:52 +00:00
However, if the value part has one or more variables in it then the property/field(the part to the left of `` : `` ) is updated whenever any of the variables on the right change.
2012-04-04 19:38:00 +00:00
For example consider this:
2012-04-04 10:04:52 +00:00
2012-04-04 19:38:00 +00:00
.. code-block :: kv
2012-04-04 20:19:20 +00:00
2012-04-04 10:04:52 +00:00
pos: self.center_x - self.texture_size[0] / 2., self.center_y - self.texture_size[1] / 2.
This expression listens for a change in center_x, center_y, and texture_size. If one of them is changing, the expression will be re-evaluated, and update the `` pos `` field.
2012-04-04 20:19:20 +00:00
You can also handle `` on_ `` events inside your kv language. For example the TextInput class has a `` focus `` property whose auto-generated `` on_focus `` event can be accessed inside the kv language like so:
2012-04-04 10:04:52 +00:00
2012-04-04 19:38:00 +00:00
.. code-block :: kv
2012-04-04 20:19:20 +00:00
2012-04-04 10:04:52 +00:00
TextInput:
on_focus: Print args
The `` args `` is a list of arguments passed to the `` on_focus `` event.
2012-04-04 19:38:00 +00:00
To define a new property in you class through kv language:
2012-04-04 10:04:52 +00:00
2012-04-04 19:38:00 +00:00
.. code-block :: kv
2012-04-04 20:19:20 +00:00
2012-04-04 10:38:24 +00:00
<MyAppClass>
myNewProperty: 'my new property value'
2012-04-04 10:04:52 +00:00
Now you can access this new property in your .py file like so::
my_app_class_instance.myNewProperty
2012-04-04 19:38:00 +00:00
To change the appearance of any widget inside the kv language you can use the canvas property like so:
2012-04-04 10:04:52 +00:00
2012-04-04 19:38:00 +00:00
.. code-block :: kv
2012-04-04 20:19:20 +00:00
2012-04-04 10:04:52 +00:00
Button:
text: 'Hello World!'
canvas:
Color:
rgba: 0, 1, 0, 1
For an in depth look at the kv design language look at http://kivy.org/docs/guide/kvlang.html
Please note that if you want to call from kv lang a widget you defined from python. you need to register it from python, using the `Factory` object.