Load Resource UI dengan Vala

Load Resource UI dengan Vala

  11:07 pm       deikatsuo 12 May 2017

---

Untuk memuat file UI dengan vala terdapat dua cara yaitu Builder.from_file() dan Builder.from_resource()
Tentunya kedua cara tersebut memiliki kelebihan dan kekurangan misalnya from_file() hanya dapat bekerja jika file .ui berada satu folder dengan source file .vala , kelebihannya mungkin lebih simpel dan gak banyak konfigurasi lainnya.
Sementara from_resource() kekurangannya yaitu konfigurasinya lebih banyak dari from_file, Namun biasanya ini cocok untuk membangun aplikasi skala besar juga lebih terstruktur.

Oke, dalam artikel kali ini kita akan belajar cara Load menggunakan Builder.from_resource() dan bagaimana cara ngebuild file resource tersebut.

Pertama-tama buat window baru dengan Glade yang didalamnya terdapat sebuah tombol

GtkWindow:
ID - window
Default Width - (checklist)
Default Height - (checklist)

GtkButton:
ID - tombol

Simpan ( CTRL+S ) dengan nama contoh.ui

Kemudian buat project baru dengan Builder ( Gnome Builder ):
Project Name - Contoh
Language - Vala
Template - Gnome Application

Copy file contoh.ui kedalam direktori /data pada project "Contoh" yang barusaja dibuat. atau bisa dengan klik kanan pada direktori /data ( sidebar/project ) -> Open Containing Folder

Buat file baru dalam direktori /data dengan mengkilk kanan folder /data pada sidebar -> New -> Empty File. dan beri nama contoh.gresource.xml

<gresources>
    <gresource prefix="/app/namaku/contoh">
      <file preprocess="xml-stripblanks">contoh.ui</file>
    </gresource>
</gresources>

Simpan dengan menekan CTRL+S

Build Resource File

Buka Makefile.am pada directory /src lalu copy dan paste

bin_PROGRAMS = contoh

resource.c: $(top_srcdir)/data/contoh.gresource.xml
    $(AM_V_GEN) $(GLIB_COMPILE_RESOURCES) --target=$@ --sourcedir=$(top_srcdir)/data --generate-source $<

BUILT_SOURCES = resource.c

contoh_SOURCES = \
    $(BUILT_SOURCES) \
    main.vala

contoh_CPPFLAGS = $(CONTOH_CFLAGS)
contoh_VALAFLAGS = --pkg gtk+-3.0

contoh_LDADD = $(CONTOH_LIBS)

-include $(top_srcdir)/git.mk

Tekan CTRL+F7 untuk build project
Selanjutnya ubah isi dari /src/main.vala dengan

using Gtk;

int main (string[] args) {
    Gtk.init (ref args);

    var builder = new Builder.from_resource("/app/namaku/contoh/contoh.ui");
    var window = builder.get_object("window") as Window;
    var button = builder.get_object("tombol") as Button;
    window.title = "Jreng Jreng Jreng";
    button.label = "Hulalala";
    window.destroy.connect(Gtk.main_quit);

    window.show_all ();

    Gtk.main ();
    return 0;
}

Build project ( CTRL+F7 ) dan Jalankan project ( CTRL+F5 )
Selamat mencoba dan berkreasi

Read More

Membuat GUI Dengan Glade

Membuat GUI Dengan Glade

  12:51 pm       deikatsuo 07 May 2017

---

Karena belajar itu menyenangkan jadi mari kita terus belajar dan belajar. #LoL

Oke, pada artikel kali ini kita akan belajar merancang sebuah tampilan GUI dengan menggunakan software Glade. yang nantinya akan kita gunakan sebagai bahan atau tampilan dasar dari aplikasi yang akan dibuat.

Langsung saja kita buka aplikasi Glade, kamu akan dihadapkan dengan tampilan kurang lebih seperti screenshot berikut

Disana ada Palette, Inspector dan Properties

Palette: Tempat Komponen/Object seperti Window, Container, Label, Button, etc. semuanya dapat dicari disini
Inspector: List/Daftar komponen yang sedang digunakan
Properties: Setting/Konfigurasi dari komponen/Object

Coba kita buat window baru dengan memilih/klik icon "Window" pada Palette bagian Toplevels.

Lalu pada bagian Properties
ID : Windowku
Title: Membuat window dengan Glade
Default Width: (centang)
Default Height: (centang)

Untuk melihat preview bisa dengan mengklik tombol Gear ( Preview Snapshot ) pada toolbar.

Coba tambahkan beberapa komponen baru pada window yang baru dibuat, guna mengenal nama-nama komponen yang tersedia pada Palette.
Selamat berkreasi dengan komponen komponen yang telah disediakan di Palette.

Untuk menyimpan hasil desain tekan CTRL+S

Read More

Glade

Glade

  4:24 pm       deikatsuo 04 May 2017

---

Menurut keterangan dari situs resminya,

Glade is a RAD tool to enable quick & easy development of user interfaces for the GTK+ toolkit and the GNOME desktop environment.

Readers: Lu kayak orang lagi males aja cuk. ngasih deskripsi yang bener dong
Saya: Maaf bos, mungkin saya lagi lapar . eh ngantuk :v

Kenapa saya buat artikel ini? 
Karena sebelumnya saya memposting http://deriload.blogspot.com/2017/05/gnome-builder.html

Apa hubungannya?
Saya katakan sebenarnya Glade dan Builder itu seperti sepasang kekasih. kenapa?
Karena fungsi Glade itu sendiri adalah sebagai RAD ( Rapid Application Development ) tools, tepatnya untuk mendesain UI yang nantinya digunakan oleh developer guna mempercepat proses pembuatan aplikasi.
Jadi developer tidak harus menulis UI dengan manual, mungkin kamu gak tau gimana ribetnya kalau membuat tampilan GUI dengan kode program. nih saya kasih contoh

GtkWidget *window;
window = gtk_application_window_new ();
gtk_window_set_title (GTK_WINDOW (window), "test");
gtk_window_set_default_size (GTK_WINDOW (window), 200, 200);
gtk_widget_show (window);

Nah, itu hanya untuk membuat window kosong/blank dengan ukuran 200x200. Ribet?
Disinilah Glade berperan, developer tidak perlu susah payah membuat objek semacam window tadi dengan kode, juga tidak perlu lagi mengatur posisi objek-objek tersebut ( tombol, teks, dll ) dengan menggunakan kode.

Yup. Nantinya desain yang telah dibuat dengan Glade akan disimpan dalam format XML (.xml) dan dapat di muat ( load ) dengan Gtk.Builder. pengembang hanya perlu memanggil kembali objek-objek tersebut.
Ada banyak sekali bahasa pemrogramman yang sudah support Glade, misalnya C, C++, C#, Vala, Java, Perl, Python, dan masih banyak lagi lainnya.

Install Glade?

Yang pake archlinux angkat tangan. :v

sudo pacman -S glade

Oh? gak pake archlinux?
Ooops. itu bukan tanggung jawab saya. :v :v ( readers: digebukin baru tau rasa lu ) :v ammpuun
Biasanya glade sudah tersedia di repository resmi tiap distro, jadi bisa disesuaikan.
Buat pengguna ubuntu mungkin bisa menginstall glade dengan perintah "sudo apt install glade"
Para sesepuh bisa langsung install dari sourcenya https://glade.gnome.org/sources.html

Read More