User-Experience(UX) adalah fitur dalam membuat sebuah aplikasi.
Salah satunya dalam hal responsive dalam ber-interaksi dengan user-nya.

Ini merupakan kisah lama yang masih saja muncul di komunitas developer.
Untuk WinForm, sudah banyak cara untuk mengatasi ini.
Dalam tulisan ini kita coba lihat dengan cara paling sederhana sebagai contoh-nya.
<h3>Form</h3>
Kita buat sebuah Form dengan dua button dan picture-box.
Seperti yang terlihat di bawah.

<a href="http://dede.gitlab.io/a/i/p/winform-cross-thread/form-design.png" target="_blank"> <img src="http://dede.gitlab.io/a/i/p/winform-cross-thread/form-design.png" alt="FormCrossThread Design" /> </a>

&nbsp;

Cara kerjanya sederhana.
Aplikasi ini akan men-download image dari internet ketika salah satu button di tekan.
Setelah download-nya selesai, image itu akan di masukkan ke dalam picture-box.
Pada saat meng-download image, posisi kedua button akan disable(menghindari multi-click).

<a href="http://dede.gitlab.io/a/i/p/winform-cross-thread/form-run.png" target="_blank"> <img src="http://dede.gitlab.io/a/i/p/winform-cross-thread/form-run.png" alt="FormCrossThread Run" /> </a>

&nbsp;

Andaikata download image-nya sukses.
Maka kita akan melihat gambar peta di picture-box dan setiap button di tekan.
Image tersebut akan berganti-ganti.

<a href="http://dede.gitlab.io/a/i/p/winform-cross-thread/form-run-done.png" target="_blank"> <img src="http://dede.gitlab.io/a/i/p/winform-cross-thread/form-run-done.png" alt="FormCrossThread Done" /> </a>

&nbsp;
<h3>Synchronous</h3>
Pada kode di bawah, kita hanya meng-aktif-kan satu tombol saja.
Tombol itu adalah Get Image, tombol yang lain akan di pergunakan untuk cara yang lain.

Cara kerjanya seperti berikut.
Tombol di tekan akan memanggil RunLongProcess yang di sana akan menggunakan GetImageMap.
Kemudian hasil-nya akan di tampilkan oleh ShowImage.

RunLongProcess sendiri boleh di bilang sebagai persiapan sebelum GetImageMap.
Terutama menangani multi-click lewat variable noProc.

GetImageMap adalah fungsi utama dan fungsi yang kita simulasikan sebagai fungsi yang menggunakan resouces yang besar.
Di sini kita gunakan Thread.Sleep untuk membuat-nya lebih lama, di luar WebClient.
Kadang meng-akses GoogleApi juga suka lambat.

Dan ShowImage merupakan fungsi untuk memasukkan hasil dari GetImageMap ke dalam picture-box dan reset button agar bisa aktif kembali.

VB.Net
<a href="http://dede.gitlab.io/a/i/p/winform-cross-thread/class-formcrossthread-base-vb.png" target="_blank"> <img src="http://dede.gitlab.io/a/i/p/winform-cross-thread/class-formcrossthread-base-vb.png" alt="FormCrossThread Base - VB.Net" /> </a>
C#
<a href="http://dede.gitlab.io/a/i/p/winform-cross-thread/class-formcrossthread-base-cs.png" target="_blank"> <img src="http://dede.gitlab.io/a/i/p/winform-cross-thread/class-formcrossthread-base-cs.png" alt="FormCrossThread Base - C#" /> </a>

&nbsp;

Dan kode di atas bisa menghasilkan hasil seperti yang di harapkan.
Tapi ada sedikit yang kurang menyenangkan buat user.

&nbsp;
<h4>Hang</h4>
Yang di maksud pengalaman kurang menyenangkan adalah pada saat kita menekan tombol Get Image maka Form akan tidak responsive.
Ia tidak bisa di gerakkan sama sekali dan user akan berpikir aplikasi ini Hang.
Seperti-nya ada sesuatu yang menghambat aplikasi ini untuk mengikuti perintah kita -- dalam hal ini menggerakkan posisi window-nya.

<a href="http://dede.gitlab.io/a/i/p/winform-cross-thread/form-run-hang.png" target="_blank"> <img src="http://dede.gitlab.io/a/i/p/winform-cross-thread/form-run-hang.png" alt="FormCrossThread Hang" /> </a>

&nbsp;
<h3>Thread</h3>
Hal ini terjadi karena Thread yang di pakai oleh WinForm untuk menggambar window terhalang oleh kode yang menggunakan resouce(waktu atau cpu + memory).
Bagaimanapun dalam sebuah Thread, hanya satu instruksi ke cpu dalam satu waktu.
Biasanya tidak masalah karena cepat, hanya untuk kode tertentu yang seperti yang ada pada GetImageMap akan membuat winform tertunda melaksanakan tugasnya.

Salah satu cara paling umum di gunakan untuk mengatasi ini adalah menjalankan kode tersebut dalam Thread yang berbeda.
Oleh karena itu ada perubahan yang di lakukan seperti di bawah.

Agar bisa kita melihat bedanya, maka sekarang kita gunakan button Get Image(Thread).
Pada RunLongProcess ada perubahan sedikit agar bisa menjalankan dua cara.
Penandanya adalah parameter nonThread.

Untuk memindahkan kode ke dalam Thread yang berbeda, cukup bungkus fungsi tersebut dengan class Thread.
Pada saat method Start di jalankan maka fungsi GetImageMap akan di jalankan pada Thread yang kita buat ini. Mudah bukan?

VB.Net
<a href="http://dede.gitlab.io/a/i/p/winform-cross-thread/class-formcrossthread-thread-vb.png" target="_blank"> <img src="http://dede.gitlab.io/a/i/p/winform-cross-thread/class-formcrossthread-thread-vb.png" alt="FormCrossThread Thread - VB.Net" /> </a>
C#
<a href="http://dede.gitlab.io/a/i/p/winform-cross-thread/class-formcrossthread-thread-cs.png" target="_blank"> <img src="http://dede.gitlab.io/a/i/p/winform-cross-thread/class-formcrossthread-thread-cs.png" alt="FormCrossThread Thread - C#" /> </a>

&nbsp;
<h4>Error</h4>
Sayang seribu sayang, pada saat kita menekan tombol Get Image(Thread).
Muncul error seperti di bawah.

VB.Net
<a href="http://dede.gitlab.io/a/i/p/winform-cross-thread/error-crossthread-vb.png" target="_blank"> <img src="http://dede.gitlab.io/a/i/p/winform-cross-thread/error-crossthread-vb.png" alt="FormCrossThread Error - VB.Net" /> </a>
C#
<a href="http://dede.gitlab.io/a/i/p/winform-cross-thread/error-crossthread-cs.png" target="_blank"> <img src="http://dede.gitlab.io/a/i/p/winform-cross-thread/error-crossthread-cs.png" alt="FormCrossThread Error - C#" /> </a>

&nbsp;

Apakah salah ku pada mu?
Ya memang salah, karena fungsi GetImageMap akan memanggil fungsi ShowImage.
Kita menjalankan GetImageMap dalam Thread yang berbeda dengan Thread Control (Winform) yang ada di fungsi ShowImage.
Istilahnya sudah beda kamar tapi mau buka lemari di kamar yang lain, terhalang tembok kamar.

&nbsp;
<h4>Invoke</h4>
Itu normal saja, karena aturan-nya seperti itu.
Sesama Thread tidak boleh saling menerobos.

Dan aturannya juga memberikan cara untuk saling ber-komunikasi antar Thread.
Dalam hal ini di lakukan dengan delegate, kalau di dunia lain biasa di kenal dengan nama pointer.

Jadi dengen delegate ini kita sampaikan data dari Thread yang satu ke Thread lain.
Dalam kode ini, kita lemparkan data localFile ke Thread yang dimana Control berada.

Dan cara mudah saja kok.
Pada fungsi GetImageMap kita gunakan Method Invoke dengan menggunakan delegate MethodInvoker.

VB.Net
<a href="http://dede.gitlab.io/a/i/p/winform-cross-thread/class-formcrossthread-full-vb.png" target="_blank"> <img src="http://dede.gitlab.io/a/i/p/winform-cross-thread/class-formcrossthread-full-vb.png" alt="FormCrossThread Full - VB.Net" /> </a>
C#
<a href="http://dede.gitlab.io/a/i/p/winform-cross-thread/class-formcrossthread-full-cs.png" target="_blank"> <img src="http://dede.gitlab.io/a/i/p/winform-cross-thread/class-formcrossthread-full-cs.png" alt="FormCrossThread Full - C#" /> </a>

&nbsp;
<h3>Penutup</h3>
Agar aplikasi kita tetap responsive ketika kita sedang melakukan sebuah pekerjaan yang memerlukan resource besar.
Maka teknik yang di lakukan adalah menjalankan fungsi tersebut pada Thread yang berbeda.

Pada tulisan ini, kita melihat teknik dasar untuk itu.
Umumnya cara ini sudah mulai di tinggalkan karena sekarang sudah banyak alternative untuk itu.
Seperti dengan <a href="http://msdn.microsoft.com/en-us/library/system.componentmodel.backgroundworker%28v=vs.110%29.aspx" target="_blank">BackgroundWorker</a> atau <a href="http://msdn.microsoft.com/en-us/library/ms228963%28v=vs.110%29.aspx" target="_blank">Async-Await</a> akan lebih menyederhanakan kode kita untuk hal seperti ini.

&nbsp;
<h3>Referensi</h3>
<ul>
 	<li><a href="http://msdn.microsoft.com/en-us/library/ms228963%28v=vs.110%29.aspx" target="_blank">MSDN: Asynchronous Programming Model (APM)</a></li>
 	<li><a href="http://msdn.microsoft.com/en-us/library/system.componentmodel.backgroundworker%28v=vs.110%29.aspx" target="_blank">MSDN: BackgroundWorker Class</a></li>
 	<li><a href="https://msdn.microsoft.com/en-us/library/system.windows.forms.control.invoke(v=vs.110).aspx" target="_blank">MSDN: Control.Invoke Method</a></li>
 	<li><a href="https://msdn.microsoft.com/en-us/library/system.windows.forms.methodinvoker(v=vs.110).aspx" target="_blank">MSDN: MethodInvoker Delegate</a></li>
 	<li><a href="https://msdn.microsoft.com/en-us/library/ms171728.aspx" target="_blank">MSDN: Make Thread-Safe Calls to Windows Forms Controls</a></li>
</ul>
&nbsp;
<blockquote>Perhatian! Code yang di tampilkan dalam tulisan ini merupakan ilustrasi dari yang ingin dipaparkan dan bukan production ready code.
Sudah banyak kejadian karena asal meng-copy-and-paste tanpa mengerti code yang di ambil itu ke dalam production.
Selain itu perlu ada tambahan code dan test sebelum siap untuk di gunakan secara utuh.</blockquote>

WinForm: Cross-Thread

GenAI Video Fest adalah ajang kompetisi video kreatif yang diselenggarakan oleh CODEPOLITAN bekerjasama dengan Alibaba Cloud.

Kami menantang kreator, tech-enthusiast, dan siapa saja untuk mendobrak batas imajinasi menggunakan teknologi Generative AI terbaru. Di sini, kamu wajib menggunakan WAN Model Studio dari Alibaba Cloud sebagai tools utama untuk menghasilkan karya videomu (bisa dikombinasikan dengan tools editing lainnya).

Tunjukkan pada dunia bagaimana teknologi dan kreativitas bisa bersatu menciptakan karya visual yang berdampak!

Kategori Kompetisi
Pilih satu dari empat tema besar ini untuk karyamu:
* Humanity (Kemanusiaan): Cerita yang menyentuh hati, sosial, dan kepedulian antar sesama.
* Sports (Olahraga): Energi, semangat juang, dan dinamika dunia olahraga.
* Entertainment (Hiburan): Komedi, musik, video klip, atau parodi yang menghibur.
* Science (Sains): Visualisasi masa depan, teknologi, alam semesta, atau penemuan ilmiah.

Total Prize Pool senilai Rp 250.000.000 menunggu para pemenang!
* Top Winners Rewards: Uang Tunai, Alibaba Cloud Credits (hingga $500), Merchandise Eksklusif, dan SWAG CODEPOLITAN.
* Lucky Draw Event: Kesempatan menang hadiah tambahan bagi peserta yang beruntung.
* Massive Exposure: Karya terbaik akan di-highlight di media sosial CODEPOLITAN, Alibaba Cloud, dan channel industri kreatif lainnya.
* Special Access (Khusus Alumni RuangAI): Dapatkan 2 Token untuk klaim Kelas Spesialisasi di RuangAI secara gratis.

Jangan sampai ketinggalan tanggal penting ini:
* Pendaftaran & Submission: 23 Desember 2024 - 23 Januari 2025
* Penjurian (Judging Phase): 24 - 26 Januari 2025
* Pengumuman Pemenang: 27 Januari 2025

Cara Ikutan:
1. Daftar: Klik tombol "Daftar Sekarang" dan pastikan kamu punya akun RuangAI.
2. Join Discord: Masuk ke server Discord komunitas untuk info teknis dan diskusi.
3. Create: Buat video kreatifmu menggunakan WAN Model Studio (Alibaba Cloud) sesuai kategori pilihan.
4. Upload & Submit: Unggah videomu ke media sosial (IG/TikTok/YouTube) dan submit link karyamu di halaman submission RuangAI.

Ikuti kompetisi video Generative AI terbesar dari CODEPOLITAN dan Alibaba Cloud! Gunakan teknologi WAN Model Studio untuk menyulap ide liarmu menjadi visual memukau. Rebut total hadiah senilai Rp 250.000.000!

GenAI Video Fest

Program Beasiswa Belajar Generative AI Chapter 4 hadir sebagai kelanjutan dari komitmen jangka panjang kolaborasi antara CODEPOLITAN dengan mitra global: Google.org, AVPN, dan Asian Development Bank (ADB). Program ini tetap dijalankan secara terpusat melalui ekosistem RuangAI.

Pada Chapter 4 ini, kami membawa semangat kolaborasi ke tingkat yang lebih tinggi. Selain tetap menyediakan kurikulum fundamental Generative AI berstandar Google untuk empat kategori utama peserta (Mahasiswa, Pencari Kerja, Siswa Vokasi, dan UMKM), RuangAI kini melakukan ekspansi strategis dengan menggandeng berbagai komunitas di seluruh Indonesia.

Program beasiswa fundamental Generative AI berstandar Google untuk Mahasiswa, Pencari Kerja, Siswa Vokasi, dan UMKM yang siap naik level di era AI.

WinForm: Cross-Thread

Learning

KelasFullstack

RuangAI

JagoanSiber

Baca Artikel Lainnya

IBM Swift Sandbox, Belajar dan Tes Kode Program Swift Online

T-SQL : Greatest Function di SQL Server

WinForm: Cross-Thread

Implementasi Math Summation

PeachPie, PHP compiler untuk .NET

UrhoSharp Game-Engine dari Xamarin