[[oktatas:programozás:python:kivy|< Kivy]]

====== A KV nyelv ======

  * **Szerző:** Sallai András
  * Copyright (c) 2020, Sallai András
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC BY-SA 4.0]]
  * Web: https://szit.hu

===== A KV nyelvről =====

A KV nyelv lehetővé teszi, hogy az alkalmazás kinézetét külön fájlban határozzuk meg.


<code python gomb.py>

from kivy.app import App
from kivy.uix.button import Button


class TesztApp(App):
	def build(self):		
		btn = Button()		
		return btn
	def csinal(self):
		self.title ='valami'
TesztApp().run()
</code>

Nem határoztuk meg a btn kinézetét.

Vesszük a TesztApp osztályt, "App" nélkül,
**kisbetűssé alakítjuk**, marad teszt szó.
Ebből készítünk egy teszt.kv nevű
fájlt, amiben leírjuk a Button kinézetét:

<code valami teszt.kv>
<Button>:
	text: 'Vált'
	size_hint: (.5, .5)
	pos_hint: {'center_x':.5, 'center_y':.5}
	on_press: app.csinal()
</code>


===== KV fájl más forrásból =====


A .kv fájl persze lehet máshol és más néven. Ekkor használjuk a 
következő formát:

<code>
Builder.load_file('utvonal/fajlnev.kv')
</code>



<code python>
from kivy.app import App
from kivy.lang.builder import Builder

class OrarendApp(App):
    def build(self):
        return Builder.load_file('main.kv')        

OrarendApp().run()
</code>


<code valami main.kv>
Screen:
    BoxLayout:
        Button:
        Button:
</code>


A main.kv tartalma, olyan mintha ezt írtam volna:
<code python>
screen = Screen()
box = BoxLayout()
box.add_widget(Button())
box.add_widget(Button())
screen.add_widget(box)
</code>


===== BoxLayout orientáció =====

Az előző példánkban a gombok horizontálisan vannak elrendezve. 
Nézzünk, hogyan állítjuk be vertikális elrendezést. 

<code valami main.kv>
Screen:
    BoxLayout:
        orientation: 'vertical'
        Button:
        Button:
</code>

===== Button feliratok =====

Az előző fejezetet folytatva, most adjunk gombjainak, feliratokat. 

<code valami main.kv>
Screen:
    BoxLayout:
        orientation: 'vertical'
        Button:
            text: 'Első'            
        Button:
            text: 'Második'
</code>



===== KV eseménykezelés =====

Ebben a példában, csak az eseménykezelést fogjuk .kv fájlban végezni.

<code python esemeny.py>

from kivy.app import App
from kivy.uix.button import Button
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.textinput import TextInput

class Box1(BoxLayout):	
	btnOne = Button()
	btnTwo = Button()
	btnCal = Button()
	txtOne = TextInput()
	def calc(self, txt):
		txt.text = "Más"		
class TesztApp(App):
	def build(self):
		return Box1()
	def csinal(self):
		self.title ='valami'
	def vissza_csinal(self):
		self.title ='eredeti'
		
TesztApp().run()
</code>


<code yaml teszt.kv>
<Box1>:
	Button:
		text: 'Vált'
		on_press: app.csinal()
	Button:
		text: 'Vissza'
		on_press: app.vissza_csinal()
	Button:
		text: 'Beállít'
		on_press: root.calc(txt)
	TextInput:
		id: txt
		text: 'kezdés'

</code>


===== Doboz a dobozban =====

<code python komplex.py>

from kivy.app import App
from kivy.uix.button import Button
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.textinput import TextInput

class Box1(BoxLayout):	
	btnOne = Button()
	btnTwo = Button()
	btnCal = Button()
	txtOne = TextInput()
	def calc(self, txt):
		txt.text = "Más"		
class Box2(BoxLayout):	
	btnOne = Button()
	btnTwo = Button()
	btnCal = Button()
	txtOne = TextInput()
	def calc(self, txt):
		txt.text = "Más"
class RootBox(BoxLayout):
	box1 = Box1()
	box2 = Box2()
class TesztApp(App):
	def build(self):
		return RootBox()
	def csinal(self):
		self.title ='valami'
	def vissza_csinal(self):
		self.title ='eredeti'
		
TesztApp().run()
</code>

<code xaml teszt.kv>
<Box1>:
	Button:
		text: 'Vált'
		on_press: app.csinal()
	Button:
		text: 'Vissza'
		on_press: app.vissza_csinal()
	Button:
		text: 'Beállít'
		on_press: root.calc(txt)
	TextInput:
		id: txt
		text: 'kezdés'


<Box2>:
	Button:
		text: 'Vált újra'
		on_press: app.csinal()
	Button:
		text: 'Vissza újra'
		on_press: app.vissza_csinal()
	Button:
		text: 'Beállít'
		on_press: root.calc(txt)
	TextInput:
		id: txt
		text: 'kezdés'

<RootBox>:
	BoxLayout:
		orientation: 'vertical'

		Box1:

		Box2:


</code>