RiffaMedia

Bahasa KV, atau disebut kvlang atau bahasa kivy, memungkinkan Anda untuk membuat ui dengan file baru dengan ekstensi .kv . Jadi codingan kita tidak kita letakkan di file python akan tetapi dalam file terpisah. Ini memungkinkan prototipe yang sangat cepat dan perubahan yang gesit pada UI Anda. Ini juga memfasilitasi pemisahan logika aplikasi Anda dan Antarmuka Penggunanya.

Jadi ketika kita ingin menggunakan bahasa kivy, berarti kita membutuhkan 2 file. yaitu file python dan file kv. Bagaimana cara aplikasinya.

Cara Penggunaan Kivy lang

1. Menggunakan Builder.loadfile()

Pertama tama silahkan membuat file python.py kemudian silahkan isikan code dibawah ini

from kivy.app import App
from kivy.lang import Builder
 
class MainApp(App):
    def build(self):
        return Builder.load_file("inteface.kv")
    
MainApp().run()

Pada kode diatas anda akan menemukan code return Builder.load_file(“inteface.kv”) Ini berarti file python ketka di jalankan akan mengimport file bernama interface.kv Untuk menggunakan load file ini anda harus import terlebih dahulu untuk buildernya dengan cara

	
from kivy.lang import Builder

Karena dalam kode kita load file inteface.kv, maka kita perlu membuat file baru bernama inteface.kv dan bisa anda isikan dengan bahasa kivy seperti kode dibawah

#:kivy 2.1.0
BoxLayout:
    orientation : 'vertical'
    Button:
        text: "Button1"
    Button:
        text: "Button2"

2. Menggunakan Builder.loadstring()

Sama seperti load file, kita perlu mengimport Bulder terlebih dahulu from kivy.lang import Builder akan tetapi methodnya kita tidak menggunakan loadfile akan tetapi loadstring. dan kita tidakmembutuhkan file .kv karena bahasa kivy langsung di tuliskan di filie python.

from kivy.app import App
from kivy.lang import Builder
 
class MainApp(App):
    def build(self):
        kvfile = Builder.load_string("""
BoxLayout:
    orientation : 'vertical'
    Button:
        text: "Button1"
    Button:
        text: "Button2"        
""")
        return kvfile
    
MainApp().run()

3. Menggunakan nama file berdasarkan nama class

Dalam hal ini , kita tidak akan menggunakan Builder. baik loadstring maupun loadfile . File kv langsung di berinama sesuai dengan nama classnya. Contoh seperti ini

Class MainApp nama file adalah  main.kv
Class WindowApp nama file window.kv

Sebagai contoh di bawah ini class bernama MainApp

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
import kivy
print(kivy.__version__)
class MainLayout(BoxLayout):
    pass
class MainApp(App):
    pass
 
MainApp().run()

Maka kita perlu membuat sebuah file kv dengan mana main.kv

#:kivy 2.1.0
MainLayout: #mengembalikan return
<MainLayout>: #Nama Class yang akan di atur widgetnya
    orientation : 'vertical'
    Button:
        text:"test"
    Button:
        text:"test"
    BoxLayout:
        orientation: 'horizontal'
        Button:
            text:"test"
        Button:
            text:"test"

File main.kv diatas terdapat MainLayout. Itu merupkan nilai return. Anda bisa menghilangkan kode tersebut, akan tetapi pada MainLayout harus mengembalikan sebuah output.

class MainApp(App):
    def build(self):
        return MainLayout()

Di atas output berupa class MainLayout() . Dengan demikian didalam file main.kv tidak perlu menambahkan nilai output. Sehingga kode pada file main.kv menjadi seperti ini.

#:kivy 2.1.0
<MainLayout>: #Nama Class yang akan di atur widgetnya
    orientation : 'vertical'
    Button:
        text:"test"
    Button:
        text:"test"
    ............

Sehinggal Full kode untuk main.py nya adalah

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
import kivy
print(kivy.__version__)
class MainLayout(BoxLayout):
    pass
class MainApp(App):
    def build(self):
        return MainLayout()
 
MainApp().run()

Dan kode untuk main.kv adalah

#:kivy 2.1.0
<MainLayout>:
    orientation : 'vertical'
    Button:
        text:"test"
    Button:
        text:"test"
    BoxLayout:
        orientation: 'horizontal'
        Button:
            text:"test"
        Button:
            text:"test"

Transfer Nilai Variable Dari Python ke File .KV

Untuk transfer data property sangatlah mudah. kita tinggal membuat declarasi di file python nya, dan kita tinggal panggil di file kv. Contoh penggunaan

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
 
class MainWindow(BoxLayout):
    data_one ="Data One"
    pass
class MainApp(App):
    data_two ="Data Two"
   pass
 
MainApp().run()

Untuk pemanggilan variable tersebut, kita tinggalpanggil saja di file kv dengan menambahkan root, atau app tergantung class yang di tuju

#:kivy 2.1.0
MainWindow:
<MainWindow>:
    orientation : 'vertical'
    Button:
        text: root.data_one
    Button:
        text: app.data_two
    BoxLayout:

Jika variable berada di dalam class yang sama bisa kita gunakan root, akan tetapi jika variable berada didalam App, maka kita panggil dengan menggunakan app

Button Event / Binding

Untuk event / Binding button di kivy. kita bisa menggunakan on_release dan on_press . Contoh penggunaan bisa anda lihat di bawah ini

#:kivy 2.1.0
MainWindow:
<MainWindow>:
    orientation : 'vertical'
    Button:
        text: "Button 1"
        on_release:root.button_1_release()
    Button:
        text: "Button 2"
        on_press :app.button_2_release()

root.button_1_release() berarti mengkases funsi yang ada di rootnya yaitu di class di mana ui itu berada dan dalam kasus ini adalah main window.
app.button_2_release() berarti mengkases funsi yang ada di App nya .
Jadi untuk main.py nya, kodenya adalah sebagai berikut

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
 
class MainWindow(BoxLayout):
    def button_1_release(self):
        print("button 1 release")
 
    pass
class MainApp(App):
    def button_2_release(self):
        print("button 2 release")
    pass
 
MainApp().run()

Melalui event / binding ini, kita juga bisa mentransfer nila property dari file kv ke file python dengan menggunakan id. Jadi widget yang di inginkan kita berikan id terlebih dahulu

#:kivy 2.1.0
MainWindow:
<MainWindow>:
    orientation : 'vertical'
    Button:
        text: "Button 1"
        on_release:root.button_1_release()
    Button:
        text: "Button 2"
        on_press :root.button_2_release()
    BoxLayout:
        orientation: "horizontal"
        Label:
            id : label_one
            text : "label 1"
        Label:
            id : label_two
            text : "label 2"

File kv diatas memiliki dua label yang sudah kami beri id . Yauti label_one dan label_two . Untuk mengaksesnya kita bisa menuliskan kode dibawah ini

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
 
class MainWindow(BoxLayout):
    def button_1_release(self):
        self.labelone = self.ids.label_one.text
        print(self.labelone)
    def button_2_release(self):
        self.labeltwo = self.ids.label_two.text    
        print(self.labeltwo)    
class MainApp(App):
    pass
 
MainApp().run()