All is about my experience | Linux

Like Us

Showing posts with label Vala. Show all posts
Showing posts with label Vala. Show all posts

19 June 2017

Mengenal Data Type pada Vala



Dalam vala secara garis besarnya terdapat dua tipe data yaitu reference types dan value types
Perbedaanya adalah dari cara pewarisan nilai dari Instance ( Instance adalah.. ) pada Identifier/Variable ( Identifier adalah.. ) baru.

Value Type

Instance dari value type akan disimpan secara langsung didalam Identifier/Variable yang mewakili instance tersebut. Jadi setiap kali value type ditugaskan ke identifier/variable baru maka variable ini akan menggandakan/mengcopy nilai dari instance yang telah ditugaskan tersebut.

Dari itu tiap-tiap variable/identifier akan mengacu pada salinan/copy dari instance yang telah ditugaskan padanya

Setiap konstant yang didefinisikan dengan "const" harus berhuruf kapital

Byte: char, uchar;
Character: unichar;
Integer: int, uint;
Long Integer: long, ulong;
Short Integer: short, ushort;
Guaranteed-size Integer: int8, int16, int32, int64;
Guaranteed-size UnInteger: uint8, uint16, uint32, uint64;
Float number: float, double;
Boolean: bool;
Compound: struct;
Enumeration: enum;


/* atomic types */
unichar c = 'u';
float percentile = 0.75f;
const double MU_BOHR = 927.400915E-26;
bool the_box_has_crashed = false;

/* Mendefinisikan struct */
struct Vector {
    public double x;
    public double y;
    public double z;
}

/* Enum */
enum WindowType {
    TOPLEVEL,
    POPUP
}


Reference Type

Sebaliknya dari Value Type, tiap variable/identifier dari Reference Value tidak menggandakan instance dari Reference yang ditugaskan melainkan variable ini akan mengacu pada Instance dari Reference Value tersebut.

Maksudnya setiap variable/identifier yang mengacu pada Rerefence Type yang sama akan berbagi data/menggunakan data yang sama.

Oiya, kalau instance dari value type tidak disimpan dalam variable lalu dimana instance tersebut berada?
Yup, pertanyaan yang bagus. jawabannya adalah "heap memory" pada RAM

string, array, class-reference, delegate, error;

String

String dalam vala formatnya adalah UTF-8


// String
string ini_string = "Hello, aku adalah string \n";
print (ini_string);

// Membaca input user
print ("Nama kamu: ");
string nama = stdin.read_line ();
print ("Hai, "+nama+"\n");


Array

Array didefinisikan menggunakan []
misal string[], int[], dsb.

// Array
int[] arrayku = {1, 2, 3, 4, 5};

string[] = {"aku index 0", "aku index 1", "aku index 3"};
print (string[0]);

// Multi-dimensional arrays didefinisikan dengan [,] atau [,,] dsb.
int[,] c = new int[3,4];
int[,] d = {{2, 4, 6, 8},
            {3, 5, 7, 9},
            {1, 3, 5, 7}};
d[2,3] = 42;

Class Reference

Class yang dijadikan reference, pada dasarnya setiap class juga adalah reference. Identifier/Variable dari reference yang tidak digunakan akan bernilai "null"


// Membuat class
class ClassBaru {
    public int aku_integer;
    public string aku_string;
    public void ClassBaru () {
        this.aku_integer = 1;
        this.aku_string = "a b c";
    }
}

ClassBaru aku_variable_satu;
ClassBaru aku_variable_dua;

int main () {
    aku_variable_satu = new ClassBaru();
    print (aku_variable_satu.aku_string);
}

/*
    Dalam contoh ini aku_variable_satu adalah ClassBaru;
    Sementara aku_variable_dua adalah "null", mengapa? karena tidak pernah digunakan
*/

12 May 2017

Load Resource UI dengan Vala


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

05 May 2017

Memanggil Dialog dari Main Window dengan Vala


vala
Kali ini kita akan belajar membuat window dialog yang dapat dipanggil dari window utama.
Jadi kita akan membuat dua tampilan window, kita akan gunakan Gtk.Window sebagai main window dan Gtk.Dialog sebagai second window atau dialog.

Buka program Builder dan buat project baru, atau boleh gunakan project yang sudah ada yang biasa digunakan untuk latihan.

Window Dialog

Buat object/class baru yang akan kita jadikan sebagai window dialog yang nantinya dapat dipanggil dari window utama ( main window )
Tambahkan kode ini kedalam "src/main.vala" setelah "Using Gtk"

public class Dialogku:Dialog {
    public Dialogku() {
        this.title = "Ini aku";
        set_default_size(200,200);

        var label = new Label("Taraaaa... aku dialog");

        var box = get_content_area() as Box;
        box.pack_start(label, true, false, 0);
    }
}
Pada kode diatas kita telah membuat Object/class baru "Dialogku" sebagai turunan dari object "Gtk.Dialog" dan nantinya object ini akan dapat dipanggil dari main window

Sekarang kita coba panggil object tersebut dari window utama melalui event tombol yang diklik. Ketika tombol diklik maka tampilkan "Dialogku".
Tempatkan setelah class "Dialogku"


int main (string[] args) {

    init (ref args);

    var window = new Window ();
    window.title = "Tombol";
    window.set_default_size (300, 100);
    window.border_width = 20;
    window.destroy.connect (Gtk.main_quit);

    var button = new Button();
    button.set_label("Klik untuk membuka dialog");

    //Tombol diklik, tampilkan "Dialogku"
    button.clicked.connect(() => {
        var dialog = new Dialogku();

        //Agar dialog selalu ditempatkan diatas window utama
        dialog.set_transient_for(window);
        dialog.show_all();
    });

    window.add(button);

    //Tampilkan window
    window.show_all();

    Gtk.main ();
    return 0;
}
Seperti inilah hasilnya


Kode lengkapnya disini

using Gtk;

public class Dialogku:Dialog {
    public Dialogku() {
        this.title = "Ini aku";
        set_default_size(200,200);

        var label = new Label("Taraaaa... aku dialog");

        var box = get_content_area() as Box;
        box.pack_start(label, true, false, 0);
    }
}

int main (string[] args) {

    init (ref args);

    var window = new Window ();
    window.title = "Tombol";
    window.set_default_size (300, 100);
    window.border_width = 20;
    window.destroy.connect (Gtk.main_quit);

    var button = new Button();
    button.set_label("Klik untuk membuka dialog");
    button.clicked.connect(() => {
        var dialog = new Dialogku();
        dialog.set_transient_for(window);
        dialog.show_all();
    });

    window.add(button);

    //Tampilkan window
    window.show_all();

    Gtk.main ();
    return 0;
}

Mari berdiskusi dikolom komentar

Vala Event Handler ( SIGNALS )


vala - event handler - signals
Berbicara tentang bahasa pemrogramman, tentu kita tak kan lepas dari yang namanya Event. Event itu sendiri adalah aksi atau kejadian yang terjadi pada aplikasi. Contoh sederhananya misalkan kejadian ketika user menginput data, user menggeser mouse, user menekan tombol, etc. Ah kurang lebih seperti itulah kira-kira.

Menurut bos wikipedia
Event is an action or occurrence recognized by software that may be handled by the software. Computer events can be generated or triggered by the system, by the user or in other ways. [...]
 Jadi Event Handler adalah sebuah fungsi yang akan menangani event-event tadi. Event tidak hanya disebabkan oleh user saja, tapi juga bisa oleh system.

Unik dan berbeda dari bahasa pemrogramman lainnya Vala tidak mengenal yang namanya Event, yang ada adalah Signals. Yup, signals.
Di situs resminya dijelaskan
Signals are a system provided by the Object class in GLib, and made easily accessible by Vala to all descendants of Object.

Daripada bingung mending kita langsung ke contoh

Oiya, contoh ini saya copas dari vala wiki :v


public class Test : GLib.Object {

    public signal void sig_1(int a);

    public static int main(string[] args) {
        Test t1 = new Test();

        t1.sig_1.connect((t, a) => {
            stdout.printf("%d\n", a);
        });

        t1.sig_1(5);

        return 0;
    }
}

Dari contoh diatas kita bisa lihat bagian "public signal void sig_1(int a)", signal/event harus didefinisikan terlebih dahulu agar signal itu dapat direspon dengan metode "connect()".
Pada bagian berikutnya "t1.sig_1.connect((..." kalau di javascript mungkin bisa di ibaratkan EventListener. Akan dijalankan ketika ada signal dikirim ke "sig_1()"

Selanjutnya saya punya contoh lain. coba buat project baru dengan builder dengan nama project "Tombol". Dalam folder "src" ( pada directory project ) buka "main.vala" dan ganti isinya dengan


using Gtk;

int main (string[] args) {

    Gtk.init (ref args);

    var window = new Window ();
    window.title = "Tombol";
    window.set_default_size (250, 250);
    window.destroy.connect (Gtk.main_quit);

    var label = new Label(null);

    var button = new Button();
    button.set_label("Klik aku dong");
    button.clicked.connect(() => {
        label.set_label("Taraaaaaa.. bakikuk");
    });
 
    //Buat container Box untuk wadah dari label dan button
    var box=new Box(Orientation.VERTICAL, 10);
    //Masukan label kedalam box
    //Pada argument ke-dua saya set "true" agar label memenuhi seluruh bagian kosong
    box.pack_start(label, true, false, 0);
    //Masukan button/tombol kedalam box
    box.pack_start(button, false, false, 0);

    //Tambahkan box ke window
    window.add(box);

    //Tampilkan window
    window.show_all();

    Gtk.main ();
    return 0;
}

Jalankan project dengan menekan CTRL+F5. kira-kira hasilnya seperti ini


Oh. mungkin ada yang bertanya tanya "Kenapa haru menyertakan Using Gtk?"
Simple, adalah untuk mempersingkat penulisan kode. bisa saja tidak menyertakan "Using Gtk" namun object Gtk harus selalu dipanggil ketika object turunan dari Gtk akan dipanggil.

Dengan Using Gtk

var window = new Window(); //Window adalah objek turunan dari Gtk
var label = new Label(); // Label juga objek turunan Gtk

Tanpa Using Gtk

var window = new Gtk.Window();
var label = new Gtk.Label();

Mari berdiskusi di kolom komentar. :P

04 May 2017

Membuat Program "Hello World" Dengan Vala



Oke, sesuai janji saya sebelumnya di artikel kali ini kita akan belajar membuat program "hello world" dengan menggunakan bahasa pemrogramman Vala dan tentunya Builder sebagai IDE nya.

Belum tau apa itu Vala?

Ahkk. ketahuan dah, pasti kamu gak nonton "The Conjuring". nonton dulu gih, nanti kalau udah nonton balik lagi kesini. ( readers: lu mau gua ketok pake palu? ) eehh.. ampun mbah..

Menurut wikipedia
Vala is an object-oriented programming language with a self-hosting compiler that generates C code and uses the GObject system. [...]
Nahas, saya gak bisa bahasa inggris jadi gak bisa nerjemahin.. #sad
Intinya Vala adalah sebuah bahasa pemrogramman yang menghasilkan kode C sebagai hasil dari kompilasi kode vala itu sendiri.

Dan secara tidak langsung meskipun developer menulis programnya dengan Vala, program tersebut bisa dibilang sebagai program yang ditulis dengan C. karena memang kode Vala tersebut di compile menjadi C, dan kemudian di compile lagi menjadi binnary sebagai C. dan bukan sebagai Vala.

Udah mengerti? Sekarang mari kita buat program "hello world"


Buka Builder dan buat project baru. Disesuaikan seperti pada screenshot
Sebagai contoh saya menggunakan nama "Hello" sebagai nama dari project.
Project Location adalah tempat dimana nantinya kode kamu disimpan, silahkan sesuaikan sendiri.

Language, disana terdapat empat opsi C, C++, Python, dan Vala. pilih Vala.
Pada contoh saya menggunakan GPLv3+ sebagai lisensi dari project yang akan dibuat.

Template, pilih GNOME Application . memudahkan untuk konfigurasi awal. klik "Create" ( Pojok kanan atas )


Saya rasa screenshot diatas sudah cukup jelas.
Sekarang perhatikan bagian direktori project ( blok paling kiri ), sebagai default disana terdapat 4 folder. data, m4, po dan src.

Lalu apa tujuan dari folder-folder ini?

data: biasanya digunakan untuk menyimpan data seperti Ui, font, config, icon. dan semacamnya
m4: disini file-file library Autotools
po: ini biasanya digunakan untuk menyimpan source terjemahan. misal applikasi yang dibuat tersedia dalam beberapa bahasa
src: disinilah source code program kamu disimpan

Coba kita double klik folder "src" dan tarraaaaa.. ada dua file disana "main.vala" dan "Makefile.am"
Nah, "Makefile.am" adalah dimana kamu konfigurasi Autotools. dan "Main.vala" adalah dimana program kamu ditulis.

Double klik lagi "main.vala" untuk membukanya. project akan secara otomatis di build


Oke. mari kita lihat isi dari "main.vala" kurang lebih isinya seperti kode berikut


using Gtk;

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

    var window = new Window ();
    window.title = "hello";
    window.set_default_size (200, 200);
    window.destroy.connect (Gtk.main_quit);

    /* You can add GTK+ widgets to your window here.
     * See https://developer.gnome.org/ for help.
     */

    window.show_all ();

    Gtk.main ();
    return 0;
}

Jika kamu jalankan programnya maka akan menghasilkan window kosong/blank ukuran 200x200 dengan title "hello". Coba tekan CTRL+F5 untuk menjalankan program

hapus kode tersebut dan ganti dengan


using Gtk;

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

    //Buat objek window baru
    var window = new Window ();

    //Tentukan title dari window baru
    window.title = "Hello World";

    //Set ukuran window baru
    window.set_default_size (250, 250);

    //Event ketika aplikasi ditutup, data akan dibuang dari RAM
    //Maksudnya adalah mematikan total aplikasi
    //Banyak aplikasi yang ketika ditutup tapi sebenarnya masih aktif di background
    //Dan menjadi beban pada RAM
    window.destroy.connect (Gtk.main_quit);

    //Buat objek label baru
    var label = new Label("Selamat Datang!!");

    //Tambahkan label ke window yang telah dibuat
    window.add (label);

    //Tampilkan window
    window.show_all ();

    //Aplikasi berjalan
    Gtk.main ();
    return 0;
}

Jalankan aplikasi dengan menekan tombol CTRL+F5

Tinggalkan pertanyaan dikolom komentar