Melakukan navigasi dari satu file ke file lainnya atau dari satu member ke member lainnya merupakan aktivitas yang sudah tentu sering dilakukan oleh developer. Hal tersebut cukup merepotkan apabila aplikasi yang dibuat cukup komplek dengan adanya pemisahan layer aplikasi. Kita harus membuka satu tab ke tab lainnya di editor visual studio untuk melihat kode yang terdapat di dalam file tersebut. Dengan adanya fitur Peek Definition, developer diberikan kemudahan untuk melihat kode yang terdapat di dalam file-file yang berbeda tanpa harus berpindah dari satu tab dokumen ke tab dokumen lainnya.
Pada artikel kali ini saya akan menjelaskan penggunaan fitur Peek Definition di Visual Studio 2013. Tentunya saya tidak akan memfokuskan pada konten kode yang dibuat. Asumsikan bahwa terdapat sebuah project (misal Console Application), di dalam project tersebut beberapa file diantaranya yaitu :
- Class ProductModel : Berisi beberapa properti.
- Interface IDataManipulation : Berisi beberapa member.
- Class PrintMessage : Berisi sebuah prosedur yang digunakan untuk menuliskan output pesan ke jendela console.
- Class ProductDataAccess : Berisi member-member dari implementasi interface IDataManipulation.
- Module1 : Main prosedur yang berisi kode untuk melakukan instance terhadap class ProductDataAccess.
Secara umum struktur project tersebut dapat dilihat pada gambar dibawah ini:
Kode dari interface IDataManipulation adalah sbb:
Perhatikan teks tepat diatas deklarasi tipe dan member yang diketikkan, disana terdapat tulisan “0 references”. Teks tersebut memberikan informasi jumlah kode yang melakukan referensi terhadap member atau tipe yang bersangkutan.
Pada saat interface tersebut diimplementasikan ke dalam sebuah class maka jumlah references tersebut akan berubah :
Perhatikan pada gambar diatas, jumlah references nya berubah menjadi 1 untuk setiap member yang terdapat di dalam interface tersebut. Teks berubah menjadi link, dan apabila link referencesnya di klik akan muncul tooltip yang berisi informasi nama file dan nama member yang melakukan referensi tersebut.
Ok, sekarang apabila kita melakukan klik kanan pada sebuah member dan memilih menu Go To Definition maka visual studio akan membuka tab dokumen baru yang berisi kode yang ingin kita lihat.
Lalu apa yang terjadi apabila menu yang dipilih yaitu Peek Definition:
Perhatikan gambar dibawah ini:
Visual studio akan membuat sebuah pop up baru berupa tab dokumen tepat dibawah member yang akan dilihat definisinya! Jadi developer tidak perlu lagi melakukan navigasi ke tab dokumen lain yang terpisah windows nya :) Anda dapat melakukan scrolling di dalam pop up tab dokumen peek definition.
Timbul sebuah pertanyaan bagaimana hasilnya apabila kita melakukan peek definition di dalam pop up peek definition yang sudah ada? Perhatikan gambar berikut ini:
Prosedur Print yang terdapat di dalam pop up peek definition yang sudah ada akan kita lihat juga peek definitionnya, hasilnya adalah sbb:
Voila..! Visual studio tidak membuka kode definisi tersebut di tab dokumen dalam windows yang baru, namun masih tetap di dalam peek definition yang sudah ada dengan menambahkan navigasi di atasnya berupa breadcrumb gambar titik-titik. Navigasi dari satu peek definition ke peek definition lainnya cukup mudah dengan adanya breadcrumb tersebut, dan apabila salah satu gambar titik tersebut di mouse hover maka akan muncul tooltip berisi informasi lokasi nama file dan member nya.
Kemudahan yang ditawarkan fitur peek definition tidak hanya untuk dilihat saja definisi kode nya, namun kita dapat melakukan editing kode langsung di pop up tersebut! Coba perhatikan gambar dibawah ini:
Saya ubah nilai integer dari 20 menjadi 15, lalu apa yang terjadi? Visual studio akan langsung membuatkan tab dokumen di window baru untuk file yang sedang di edit, perhatikan gambar persegi panjang berwarna merah.
Selain itu kita juga dapat melakukan copy-paste kode dari pop up atau ke dalam pop up peek definition, atau drag drop seperti pada gambar dibawah ini dimana kode yang terdapat di dalam pop up di drag dan di drop keluar pop up tersebut :
Drag drop kembali kode tersebut ke dalam pop up peek definition:
Cukup keren bukan fitur tersebut? Hehehe…selamat mencoba :)