Menggunakan JavaFX dalam IDE Eclipse

* Kiriman ini telah dikemaskini pada 8 Sept 2024.

NOTA: Bagi melaksanakan penerangan di bawah, diandaikan Java JDK dan IDE Eclipse sudah dipasang. Jika belum, pemasangnya boleh dimuat turun dari laman web Eclipse : 

https://www.eclipse.org/downloads/packages/installer

Logo IDE Eclipse (sumber: www.eclipse.org)

JavaFX ialah pustaka antara muka pengguna (GUI, atau graphical user interface) untuk aplikasi yang dibina menggunakan bahasa Java. JavaFX membolehkan aplikasi Java dibina dengan GUI yang sesuai untuk aplikasi terkini yang amnya memerlukan fleksibiliti merentas peranti paparan yang bersifat pelbagai ragam atau bentuk.

Logo JavaFX (sumber: Internet)

Membina GUI dengan JavaFX memerlukan pustaka JavaFX. Pustaka ini dipasang berasingan daripada kit pembangunan Java (JDK, atau Java Development Kit) kerana JavaFX tidak digabungkan sebagai pustaka standard JDK. Hal ini berbeza jika dibandingkan dengan pustaka GUI Java lain iaitu Swing dan AWT yang mana digabungkan dan dipasang bersama JDK.

IDE Eclipse boleh menyokong penggunaan pustaka JavaFX tetapi memerlukan konfigurasi tambahan selepas pustaka JavaFX dipasang. Jika tidak dibuat, Eclipse tidak dapat menggabungkan proses pembinaan atur cara Java bersama JavaFX. Maka penggunaan kod JavaFX dalam atur cara akan menyebabkan ralat sintaks.

Pemasangan JavaFX memerlukan EMPAT langkah am berikut:

1. Memasang plugin e(fx) Eclipse 
• e(fx) ialah plugin yang membolehkan projek berkaitan JavaFX dibina / diurus oleh Eclipse.
2. Memuat turun dan memasang pustaka JavaFX 
• JavaFX ialah pustaka yang diperlukan untuk membina aplikasi Java denga GUI JavaFX.
3. Membina komponen pustaka JDK dengan JavaFX dalam Eclipse
• komponen ini diperlukan oleh pengkompil JDK semasa pembinaan / pengkompilan Java di dalam Eclipse.
4. Membina komponen JRE (mesin maya) dengan JavaFX dalam Eclipse
• komponen ini diperlukan untuk melaksanakan aplikasi Java dengan JavaFX dari dalam Eclipse (pengujian).

Berikut adalah langkah-langkah pemasangan JavaFX untuk digunakan dalam IDE Eclipse. 

Langkah 1: Memasang plugin e(fx) Eclipse

1. Buka Eclipse dan pilih 'Help' kemudian 'Install New Software' daripada bar menu.
2. Tekan bebutang 'Add'.
3. Isikan nama yang sesuai untuk mengambarkan sumber pemasangan plugin (cth: 'efx nightly build') pada kotak input 'Name'.
4. Isikan URL https://download.eclipse.org/efxclipse/updates-nightly/site/ pada kotak input 'Location'.
5. Tekan bebutang 'Add'. 
6. Senarai pustaka akan dipaparkan. Pilih semua item 'e(fx) ...' yang disenaraikan dan tekan bebutang 'Finish'.
7. Pustaka e(fx) akan dimuat turun dan dipasang. Pemasangan ini mungkin memerlukan masa dan tunggu saja sehingga selesai (lihat status pemasangan di penjuru kanan, bawah).

Langkah 2: Memuat turun / memasang pustaka JavaFX

1. Muat turun pemasang JavaFX (*.zip, pakej SDK) daripada laman web JavaFX cth: https://jdk.java.net/javafx22/ (ketika artikel ini ditulis versi 22 adalah yang terkini)
2. Ekstrak fail pustaka ke dalam direktori yang akan digunakan untuk pembangunan (cth: c:\users\USER\javafx-sdk\). 

Apabila diekstrak, direktori c:\users\USER\javafx-sdk\javafx-sdk-22.0.2 akan diwujudkan (bergantung kepada pustaka yang dimuat turun) dan turut mengandungi subdirektori 'lib'. Subdirektori ini mengandungi fail-fail pustaka yang diperlukan untuk pembinaan dan pelaksanaan aplikasi JavaFX.

Langkah 3 : Membina komponen pustaka JDK dengan JavaFX dalam Eclipse

1. Buka IDE Eclipse.
2. Pilih 'Window' kemudian 'Preferences' di bar menu.
3. Dalam tetingkap yang terpapar, lihat senarai di sebelah kiri. Pilih 'Java' kemudian 'Build Path' dan seterusnya 'User Libraries'.
4. Tekan bebutang 'New' dan tuliskan nama untuk pustaka baharu (cth: 'Pustaka JavaFx 22'). Tekan bebutang 'OK'.
5. Pilih nama pustaka baharu daripada senarai yang dipaparkan ('Pustaka JavaFx 22'). Kemudian tekan bebutang 'Add External JARs...'.
6. Cari dan dapatkan semula direktori yang mengandungi pustaka JavaFX yang dipasang dalam Langkah 2 (c:\users\USER\javafx-sdk\javafx-sdk-22.0.2). Buka subdirektori 'lib'.
7. Pilih semua fail dengan sambungan *.jar. Kemudian tekan bebutang 'Open'.
8. Tekan bebutang 'Apply and Close'. Pustaka JavaFX yang diperlukan sepatutnya sudah terbina dengan nama 'Pustaka JavaFx 22'.

NOTA: Penetapan ini bersifat global dan akan digunakan bagi sebarang projek yang dibina dalam ruang kerja Eclipse yang sama. Jika anda ingin menggunakan pustaka JDK tanpa JavaFX, ulang langkah 3.1 hingga 3.3, dan pilih pustaka JDK asal.

Langkah 4: Membina komponen JRE (mesin maya) dengan JavaFX dalam Eclipse

1. Pilih 'Window' kemudian 'Preferences' daripada bar menu.
2. Dalam tetingkap yang terpapar, lihat senarai di sebelah kiri. pilih 'Java' kemudian 'Installed JREs'. 
3. Pilih nama pustaka JRE yang dipaparkan. Pustaka sedia ada ini akan dijadikan salinan untuk JRE dengan JavaFX. (NOTA: Sepatutnya terdapat sekurang-kurangnya satu JRE asas disenaraikan, yang dipasang bersama pakej Eclipse dengan JDK)
4. Tekan bebutang 'Duplicate'.
5. Dalam tetingkap yang terpapar, tukarkan kandungan kotak input 'VM Name' kepada nama yang sesuai untuk menamakan JRE VM baharu. Contoh JRE JavaFx.
6. Di dalam kotak input 'Default VM Arguments' tuliskan teks berikut:
   --module-path c:\users\USER\javafx-sdk\javafx-sdk-22.0.2\lib --add-modules javafx.controls,javafx.fxml 
   
   (NOTA: Teks merah c:\users\USER\javafx-sdk\javafx-sdk-22.0.2 ialah direktori di mana JavaFX dipasang semasa Langkah 2. Pastikan ia sama dengan lokasi JavaFX yang anda pasang. Jika tidak ralat akan berlaku semasa penggunaan JRE)
7. Tekan bebutang 'Add External JARs'. 
8. Pilih semua fail dengan sambungan *.jar. Kemudian tekan bebutang 'Open'.
9. Tekan bebutang 'Finish'. Mesin maya JRE dengan JavaFX yang diperlukan sepatutnya sudah terbina dengan nama 'JRE JavaFx'.

Selepas ini apa yang perlu dilakukan?

Selepas JDK dengan JavaFX dan JRE dengan JavaFX sudah disediakan, projek JavaFX sudah boleh dibina. 

1. Pada bar menu, pilih 'File', 'New' kemudian 'Other'. 
2. Daripada senarai yang terpapar, pilih 'JavaFX Project'.
3. Tekan bebutang 'Next'.
4. Isikan nama projek yang sesuai pada kotak input 'Project name'.
5. Pada bahagian / seksyen 'JRE' di bawahnya, pada bulet 'Use a specific project JRE', pilih JRE yang dibina daripada Langkah 4 - 'JRE JavaFx'.
6. Pada bahagian / seksyen, pastikan 'Create module-info.java file' tidak ditanda. 
• Fail ini ialah fail konfigurasi projek. Sekiranya diperlukan kelak, ia masih boleh dibuat secara manual selepas projek dibina.
7. Tekan bebutang 'Finish'. Projek untuk pembangunan Java dengan JavaFX akan dibentuk.

Itu saja. Seterusnya atur cara berkaitan JavaFX sudah boleh dibina, dikompil dan diuji. Selamat mencuba.

Eksperimen simulasi Penjadualan Proses menggunakan aplikasi ALExSIM (USAS)

Alhamdulillah, saya berjaya juga menyiapkan projek terbaru iaitu pensimulasi algoritma penjadualan proses yang dinamakan ALExSIM (USAS), atau ringkasnya USAS. 

Aplikasi ini dalam tempoh percubaan dan boleh diperolehi dari laman khas ALExSIM (USAS). Di bawah ini adalah contoh antaramuka daripada aplikasi tersebut.

Contoh antaramuka ALExSIM (USAS)

Aplikasi USAS ini sebenarnya bukanlah unik atau yang pertama seumpamanya. Terdapat beberapa aplikasi pensimulasi penjadualan proses seperti USAS yang telahpun ada. Walau bagaimanapun saya tetap bina USAS sebagai usaha menambahkan pilihan alat aplikasi sedia ada. Saya dapat motivasi membina USAS daripada aktiviti pengaturcaraan yang pernah saya bincangkan sebelum ini (berkenaan menggunakan JFreeChart dalam Java)

USAS juga dibina dengan harapan untuk memudahkan pelajar-pelajar saya dan sesiapa saja yang mempelajari kursus Sistem Pengoperasian untuk mendalami topik Penjadualan Proses (salah satu topik dalam kursus tersebut). Bahkan saya sendiri menggunakan USAS ini untuk bereksperimen dan menyediakan skema jawapan untuk soalan peperiksaan berkaitan topik ini.

Mudah-mudahan aplikasi ini ada manfaatnya.

Implimentasi pustaka Taburan Custom Nombor Rawak menggunakan Java

Menjana nombor rawak dengan Math.random()

Pustaka bahasa pengaturcaraan Java menyediakan fungsi/metod Math.random() untuk menjana nombor rawak dalam atur cara. Metod ini akan menjana nilai dalam julat 0 hingga 1, dan nilai ini boleh digunakan untuk menjana nombor tertentu dalam julat tertentu.

Misalnya kod atur cara berikut menjana 5 nombor rawak dalam julat 0 hingga 9 :

for(int i = 0; i < 5; i++) {
    System.out.println((int)(Math.random() * 10));
}


Manakala dengan menambah 1, seperti berikut, boleh mendapatkan 5 nombor dalam julat 1 hingga 10 :

for(int i = 0; i < 5; i++) {
     System.out.println((int)(Math.random() * 10 + 1)); 
}

Kita juga boleh menjana nombor rawak dalam julat 'min' dan 'max' yang kita sendiri tetapkan. Misalnya contoh berikut menjana nombor rawak dalam lingkungan 5 hingga 9:

int min = 5;
int max = 9;
for(int i = 0; i < 5; i++) {
    System.out.println((int)(Math.random() * (max-min+1)) + min)); 
}



Menjana nombor rawak dengan taburan custom

Kebarangkalian bagi nombor dalam julat di atas untuk muncul/dipilih, secara amnya ialah sama rata, iaitu 1/N bagi setiap nombor (Misalnya julat 1 hingga 10, N=10, maka 1/10 = 0.1 bagi 1, 1/10 = 0.1 bagi 2, dan seterusnya sehingga 10).

Tapi bagaimana kita boleh menjana nombor rawak dalam julat 1 hingga 10 dengan pemberat tertentu, misalnya 50% percubaan (kebarangkalian 0.5, atau 1/2) mendapat nombor 4? Atau menetapkan 20% balingan dadu akan kena pada nombor 6? Bagaimana kita hendak menggunakan Math.random() untuk menjana nombor rawak berdasarkan pemberat/kebarangkalian yang ditetapkan? Pustaka Java yang asas ini tidak menyediakannya.

Saya cuba mencari implimentasi sedia ada, dan terjumpa perbincangan mengenainya di sini -> https://stackoverflow.com/questions/16435639/generating-random-integers-within-range-with-a-probability-distribution

Daripada perbincangan tersebut, saya mendapat idea untuk mengimplimentasi suatu kelas pustaka sendiri (dinamakan CustomProbabilityRandom), yang membolehkan seseorang pengatur cara menjana nombor rawak mengikut kebarangkalian tertentu. (Lihat senarai kod atur cara dalam fail CustomProbabilityRandom.java di bawah. Turut disertakan contoh aplikasi untuk cara menggunakan pustaka, iaitu fail ExampleCustomDistribution.java).

Dengan menggunakan kelas ini, agak mudah untuk menetapkan taburan kebarangkalian bagi suatu senarai item-item (nombor rawak yang dijana mewakili index bagi item dalam senarai).

Sebenarnya implimentasi ini tidaklah benar-benar menghasilkan nombor rawak mengikut taburan yang ditetapkan, tetapi hanya boleh menghampiri taburan tersebut. Namun diharap dengan implimentasi ini akan memudahkan anda membina aplikasi yang melibatkan nombor rawak dengan lebih fleksibel. Untuk mengkompil kod atur cara aplikasi dalam ExampleCustomDistribution.java, anda perlu kompil bersama-sama dengan fail pustaka CustomProbabilityRandom.java.

Selamat mencuba.

---

Fail 'CustomProbabilityRandom.java' (pustaka)

---

Fail 'ExampleCustomDistribution.java' (aplikasi)

---

Kenali gaya pembelajaran anda

Pernah tak anda terfikir, apakah gaya pembelajaran yang anda suka? 

Amnya setiap orang ada gaya pembelajaran yang tersendiri. Misalnya ada orang suka belajar dengan menghadiri kelas dan mendengar kuliah atau penyampaian dari guru, ada juga lebih suka membaca sendiri, ada yang suka belajar melalui laman web secara dalam talian, dsb. Dari segi bentuk bahan pembelajaran pula ada yang suka mendengar, ada yang suka melihat gambar (visual), dan ada pula yang lebih suka melihat perkataan. Pendek kata, gaya pembelajaran boleh jadi berbeza dan pelbagai mengikut individu. Tujuan mengenal pasti gaya pembelajaran ialah untuk membolehkan kita belajar secara efektif (lebih mudah atau cepat faham, melaksanakan sesi pembelajaran yang lebih lama tanpa bosan dsb.).

Bagaimana anda menilai gaya pembelajaran anda?

Mungkin anda ada cara yang tersendiri untuk menilai gaya pembelajaran yang disukai. Namun ada beberapa kaedah formal yang dibentuk untuk membolehkan seseorang memahami gaya pembelajarannya. Antara model yang dibentuk untuk mengenal gaya pembelajaran ini termasuklah model ILS (index of learning style) oleh Felder dan Silvermann. Secara teorinya model gaya pembelajaran ini masih boleh dipertikaikan kesahihannya, dan jangan percaya 100%. Namun sedikit-sebanyak boleh digunakan sebagai gambaran gaya pembelajaran yang kita sukai.

Model ILS Felder dan Silvermann

Model oleh Felder dan Silvermann ini mengenal pasti gaya pembelajaran berdasarkan 8 ciri yang dipadankan menjadi 4 pasangan - 

• visual vs verbal, 
• aktif vs reflektif, 
• sensing vs intuitif, 
• global vs berjujukan. 

Penerangan bagi setiap ciri boleh dirujuk dari dokumen ini. [muat turun rujukan tentang ILS. hakcipta pemunya asal]

Model ILS diaplikasi dengan mengira indeks bagi 4 pasangan ciri (1 ciri dipilih daripada setiap pasangan), dan daripada indeks ini akan menggambarkan gaya pembelajaran seseorang. Indeks ini berjulat 1-11, dan nilai indeks yang lebih dari 5 dianggap menggambarkan ciri yang sesuai untuk seseorang itu (misalnya jika indeks visual dapat 7, seseorang itu dianggap 'suka' cara visual, dan jika 11 sangat 'suka'). 

Cara indeks dikira ialah dengan menjawap 44 soalan khusus berkaitan ILS (ILS questionnaire), dan akan menghasilkan 4 nilai indeks (dan padanan ciri).

Di mana boleh dapatkan soalan ILS untuk dicuba?

Set soalan standard untuk mengenal pasti ILS ini boleh diperolehi secara dalam talian di laman web ini -> https://www.webtools.ncsu.edu/learningstyles/. (Set soalan ILS mempunyai hakcipta yang dimiliki oleh Felder dan Silvermann)

Walau bagaimanapun anda boleh muat turun aplikasi yang hampir sama yang saya bangunkan, di sini [ Muat turun aplikasi ILS Questionnaire ]. Hakcipta soalan-soalan masih hakmilik pemilik asal.

Pastikan scan dahulu fail yang dimuat turun dengan anti-virus, sebagai langkah keselamatan. Kemudian ikuti langkah-langkah berikut:

1. Ekstrak (unzip) folder 
2. Buka dokumen index.html menggunakan pelayar (browser) internet seperti Chrome, Mozilla Firefox dll, tanpa perlukan internet. 

Contoh pelaksanaan aplikasi ini seperti yang ditunjukkan di bawah:

Paparan aplikasi ILS questionnaire

Aplikasi ini dibina berdasarkan soalan-soalan yang sama daripada laman web asal ILS dan anda boleh gunakan secara percuma. Juga boleh dijawab dalam dwi bahasa - English atau Bahasa Melayu!

Selain untuk kegunaan sendiri, para guru dan pendidik juga boleh galakkan murid-murid dan pelajar anda menggunakan aplikasi ini (mungkin perlu dibantu). Hasilnya nanti boleh digunakan untuk memperbaiki cara penyampaian kepada mereka dalam kelas dan kuliah.

Lepas ni bolehlah kenali gaya pembelajaran anda. Selamat mencuba.

Pengalaman yang menakutkan...

Setiap orang ada pengalaman menakutkan. Saya juga tak terlepas melalui pengalaman ini.

Baru-baru ini saya berjaga malam untuk menyiapkan satu projek menggunakan Javascript. Sedang saya leka menulis atur cara ini, saya ternampak suatu benda yang sangat pelik. Saya pun cuba teliti betul-betul. Yalah, mana tahu saya tersalah tengok. Berulang kali saya periksa, rasanya macam mustahil terjadi perkara sedemikian. Selalunya tak akan muncul. Tapi yang ni betul-betul lain.

sumber foto: internet

Seram giler

Perhatikan kod aturcara Javascript di bawah:

function 
index2QuestionId( index ) {
    return 'q' + ( index + 1 );   
}

Operator + dalam Javascript boleh digunakan untuk operasi aritmetik (cth. 1+1=2) dan operasi pencantuman (concatenation) rentetan cth. "q" + 1 = "q1". Penentuan operasi akan dibuat secara automatik oleh penterjemah Javascript.

Fungsi Javascript di atas sepatutnya membina rentetan (string) berbentuk 'q1' (index=0), 'q29' (index=28) dsb. Parameter index sepatutnya menerima nilai integer untuk indeks suatu tatasusunan (array, yang bermula dari 0). Apa yang pelik? Nampak biasa saja kan? 

Tapi bukan bagi Javascript. Jika fungsi di atas dipanggil,

index2QuestionId(0);     // oops! return 'q01'??
index2QuestionId(28);    // oops! return 'q281'??

Kod tu saya rasa betul! Kenapa hasilnya salah? Ni yang jadi seram ni.

Setelah berhempas pulas debug dengan menggunakan Chrome developer tool (kemudianlah saya cerita pasal tool ni) akhirnya saya dapat kesan punca masalah dari fungsi ini dan kenapa ia berlaku.

Penjelasan

Penentuan operasi akan dibuat secara automatik oleh penterjemah Javascript. Ini bahayanya. Tujuannya memudahkan pengatur cara tetapi berisiko. Dalam contoh fungsi di atas, apa yang dibuat ialah (andaikan index=0),

=> 'q' + ( index + 1 )
=> 'q' + ( '0' + 1 )
=> 'q' + ( '01' )
=> 'q01'

Dalam kes ini index diterjemah sebagai string! (sepatutnya integer, 0 + 1 = 1) oleh penterjemah (bijak la sangat...)

Ini yang saya kata menakutkan, sebab tindakan penterjemah sebegini memang tak dijangka, dan susah nak dikesan.

Rasionalnya dalam kesilapan di atas, penterjemah tak ada cara menentukan parameter yang diberi ialah berjenis integer sebab bahasa Javascript tidak menggunakan penanda jenis data atau pemboleh ubah (bahasa Java atau C ada int, float, char dsb.). Jadi penterjemah cuba buat tekaan (dan tersilap).

Untuk memperbaiki masalah ini (memastikan penterjemah buat tekaan yang betul), boleh dilakukan dengan 2 cara seperti berikut:

CARA 1 - asingkan operasi untuk jenis data yang berbeza.

function 
index2QuestionId( index ) {
     var x = index + 1;      // aritmetik
     return 'q' + x;         // cantum
}

CARA 2 - jelaskan pada penterjemah operasi yang diperlukan (cth. parseInt() hasilkan integer, jadi dapat jelaskan pada penterjemah pembolehubah yang nak diguna ialah jenis integer)

function 
index2QuestionId( index ) {
     return 'q' + ( parseInt(index) + 1);
}

Kedua-dua cara ini akan hasilkan output yang betul seperti berikut

index2QuestionId(0);     // return 'q1'
index2QuestionId(28);    // return 'q29'

Bila dapat kesan punca kesilapan, dan tahu penyelesaiannya, barulah lega sikit.

Semoga perkongsian pengalaman menakutkan ini dapat memberi manfaat.
Jadi tuan-tuan, bila mengaturcara dengan Javascript berhati-hatilah.

Jangan biarkan diri anda diselubungi misteri...