Saya telah menulis editor teks XML yang menyediakan 2 opsi tampilan untuk teks XML yang sama, satu indentasi (secara virtual), yang lain dibenarkan kiri. Motivasi untuk tampilan yang dibenarkan kiri adalah untuk membantu pengguna 'melihat' karakter spasi putih yang mereka gunakan untuk lekukan teks biasa atau kode XPath tanpa gangguan dari lekukan yang merupakan efek samping otomatis dari konteks XML.
Saya ingin memberikan petunjuk visual (di bagian editor yang tidak dapat diedit) untuk mode yang dibenarkan kiri yang akan membantu pengguna, tetapi tanpa terlalu rumit.
Saya mencoba hanya menggunakan jalur penghubung, tapi itu sepertinya terlalu sibuk. Sejauh ini yang terbaik yang saya hasilkan ditunjukkan dalam screenshot tiruan editor di bawah ini, tetapi saya mencari alternatif yang lebih baik / lebih sederhana (yang tidak memerlukan terlalu banyak kode).
[Sunting]
Mengambil ide heatmap (dari: @imp) saya mendapatkan ini dan 3 alternatif - berlabel a, b dan c:
Bagian berikut menjelaskan jawaban yang diterima sebagai proposal, menyatukan ide-ide dari sejumlah jawaban dan komentar lainnya. Karena pertanyaan ini sekarang adalah wiki komunitas, silakan perbarui ini.
NestView
Nama untuk gagasan ini yang menyediakan metode visual untuk meningkatkan keterbacaan kode bersarang tanpa menggunakan lekukan.
Garis Kontur
Nama untuk garis yang diarsir berbeda dalam NestView
Gambar di atas menunjukkan NestView yang digunakan untuk membantu memvisualisasikan cuplikan XML. Meskipun XML digunakan untuk ilustrasi ini, setiap sintaks kode lain yang menggunakan nesting dapat digunakan untuk ilustrasi ini.
Gambaran:
Garis kontur diarsir (seperti dalam peta panas) untuk menyampaikan tingkat bersarang
Garis kontur miring untuk menunjukkan kapan level bersarang dibuka atau ditutup.
Garis kontur menautkan mulai dari level bersarang ke ujung yang sesuai.
Lebar garis kontur yang digabungkan memberikan kesan visual tingkat bersarang, di samping peta panas.
Lebar NestView mungkin dapat diubah ukurannya secara manual, tetapi tidak boleh berubah karena kode berubah. Garis kontur dapat dikompres atau dipotong untuk mempertahankannya.
Baris kosong terkadang menggunakan kode untuk memecah teks menjadi potongan-potongan yang lebih mudah dicerna. Baris seperti itu dapat memicu perilaku khusus di NestView. Misalnya peta panas dapat diatur ulang atau garis kontur warna latar belakang digunakan, atau keduanya.
Satu atau lebih garis kontur yang terkait dengan kode yang dipilih saat ini dapat disorot. Garis kontur yang terkait dengan tingkat kode yang dipilih akan paling ditekankan, tetapi garis kontur lain juga bisa 'menyala' di samping untuk membantu menyoroti grup bertingkat yang mengandung
Perilaku yang berbeda (seperti pelipatan kode atau pemilihan kode) dapat dikaitkan dengan mengklik / mengklik dua kali pada Garis Kontur.
Bagian garis kontur yang berbeda (ujung depan, tengah, atau belakang) mungkin memiliki perilaku dinamis yang berbeda.
Tooltips dapat ditampilkan pada acara mouse di atas garis kontur
NestView diperbarui terus-menerus saat kode diedit. Di mana asumsi bersarang tidak seimbang dapat dibuat di mana level bersarang harus berakhir, tetapi garis kontur sementara yang terkait harus disoroti dalam beberapa cara sebagai peringatan.
Perilaku seret dan lepas dari Garis Kontur dapat didukung. Perilaku dapat bervariasi sesuai dengan bagian garis kontur yang diseret.
Fitur yang biasa ditemukan di margin kiri seperti penomoran baris dan penyorotan warna untuk kesalahan dan perubahan kondisi dapat menutupi NestView.
Fungsi Tambahan
Proposal membahas berbagai masalah tambahan - banyak di luar ruang lingkup dari pertanyaan awal, tetapi efek samping yang bermanfaat.
Menautkan secara visual awal dan akhir wilayah bersarang
Garis kontur menghubungkan awal dan akhir setiap tingkat bersarang
Sorot konteks dari baris yang dipilih saat ini
Saat kode dipilih, level sarang terkait di NestView dapat disorot
Membedakan antara wilayah kode pada tingkat bersarang yang sama
Dalam kasus XML, warna yang berbeda dapat digunakan untuk ruang nama yang berbeda. Bahasa pemrograman (seperti c #) mendukung daerah bernama yang dapat digunakan dengan cara yang sama.
Membagi area dalam area bersarang menjadi blok visual yang berbeda
Garis ekstra sering dimasukkan ke dalam kode untuk membantu keterbacaan. Baris kosong seperti itu dapat digunakan untuk mereset level saturasi garis kontur NestView.
Tampilan Kode Multi-Kolom
Kode tanpa lekukan membuat penggunaan tampilan multi-kolom lebih efektif karena pembungkus kata atau pengguliran horizontal cenderung tidak diperlukan. Dalam tampilan ini, setelah kode mencapai bagian bawah satu kolom, kode akan mengalir ke yang berikutnya:
Penggunaan lebih dari sekadar memberikan bantuan visual
Seperti yang diusulkan dalam ikhtisar, NestView dapat menyediakan serangkaian fitur pengeditan dan seleksi yang akan secara luas sejalan dengan apa yang diharapkan dari kontrol TreeView. Perbedaan utama adalah bahwa simpul TreeView khas memiliki 2 bagian: ikon expander dan ikon node. Garis kontur NestView dapat terdiri dari 3 bagian: pembuka (miring), konektor (vertikal) dan tutup (miring).
Pada Indentasi
NestView disajikan bersama pelengkap kode tanpa lekukan, tetapi tidak mungkin untuk menggantikan, tampilan kode lekukan konvensional.
Kemungkinan setiap solusi yang mengadopsi NestView, akan menyediakan metode untuk beralih secara mulus antara tampilan kode indentasi dan non-indentasi tanpa mempengaruhi teks kode itu sendiri - termasuk karakter spasi putih. Salah satu teknik untuk tampilan lekukan adalah 'Pemformatan Virtual' - di mana margin kiri dinamis digunakan sebagai pengganti karakter tab atau spasi. Data tingkat sarang yang sama yang digunakan untuk secara dinamis membuat NestView juga dapat digunakan untuk tampilan indentasi yang lebih konvensional.
Pencetakan
Lekukan akan menjadi penting untuk keterbacaan kode cetak. Di sini, tidak adanya karakter tab / spasi dan margin kiri dinamis berarti bahwa teks dapat membungkus pada margin kanan dan tetap mempertahankan integritas tampilan indentasi. Nomor baris dapat digunakan sebagai penanda visual yang menunjukkan di mana kode dibungkus dengan kata dan juga posisi indentasi yang tepat:
Layar Real-Estate: Flat Vs Indented
Mengatasi pertanyaan apakah NestView menggunakan real-estate layar yang berharga:
Garis kontur berfungsi dengan baik dengan lebar yang sama dengan lebar karakter editor kode. Oleh karena itu, lebar NestView dengan 12 karakter dapat mengakomodasi 12 level sarang sebelum garis kontur dipotong / dikompresi.
Jika tampilan lekukan menggunakan 3 karakter-lebar untuk setiap level bersarang maka ruang disimpan hingga bersarang mencapai 4 level bersarang, setelah level bersarang ini, tampilan datar memiliki keunggulan hemat-ruang yang meningkat dengan setiap level bersarang.
Catatan: Lekukan minimum 4 lebar karakter sering direkomendasikan untuk kode, namun XML sering kali mengelola dengan kurang. Juga, Pemformatan Virtual memungkinkan lekukan yang lebih sedikit untuk digunakan karena tidak ada risiko masalah penyelarasan
Perbandingan 2 tampilan ditampilkan di bawah ini:
Berdasarkan hal di atas, mungkin adil untuk menyimpulkan bahwa pilihan gaya tampilan akan didasarkan pada faktor-faktor selain layar real-estate. Satu-satunya pengecualian adalah di mana ruang layar berada pada premium, misalnya pada Netbook / Tablet atau ketika beberapa kode jendela terbuka. Dalam kasus ini, NestView yang dapat diubah ukurannya tampaknya menjadi pemenang yang jelas.
Gunakan Kasing
Contoh-contoh dunia nyata di mana NestView mungkin merupakan opsi yang berguna:
Di mana layar real-estat berada di premium
Sebuah. Pada perangkat seperti tablet, notes, dan ponsel cerdas
b. Saat menampilkan kode di situs web
c. Ketika beberapa kode windows perlu terlihat di desktop secara bersamaan
Dimana lekukan spasi putih yang konsisten dari teks dalam kode adalah prioritas
Untuk meninjau kode yang sangat bersarang. Misalnya di mana sub-bahasa (misalnya Linq di C # atau XPath di XSLT) dapat menyebabkan tingkat bersarang yang tinggi.
Aksesibilitas
Pengubahan ukuran dan opsi warna harus disediakan untuk membantu mereka yang memiliki gangguan penglihatan, dan juga agar sesuai dengan kondisi lingkungan dan preferensi pribadi:
Kesesuaian kode yang diedit dengan sistem lain
Sebuah solusi yang menggabungkan opsi NestView idealnya mampu menghilangkan karakter tab dan spasi terkemuka (diidentifikasi sebagai hanya memiliki peran format) dari kode yang diimpor. Kemudian, setelah ditelanjangi, kode tersebut dapat ditampilkan dengan rapi di tampilan kiri-kanan dan lekukan tanpa perubahan. Bagi banyak pengguna yang mengandalkan sistem seperti penggabungan dan alat diff yang tidak sadar spasi ini akan menjadi perhatian utama (jika bukan show-stopper lengkap).
Pekerjaan lain:
Visualisasi Markup yang Tumpang tindih
Penelitian yang diterbitkan oleh Wendell Piez , tertanggal dari 2004, membahas masalah visualisasi markup yang tumpang tindih, khususnya LMNL . Ini termasuk grafik SVG dengan kemiripan yang signifikan dengan proposal NestView, sehingga diakui di sini.
Perbedaan visualnya jelas pada gambar (di bawah), perbedaan fungsional utama adalah bahwa NestView hanya dimaksudkan untuk XML atau kode yang tersusun rapi, sedangkan grafik Wendell Piez dirancang untuk mewakili penyarangan yang tumpang tindih.
Grafik di atas direproduksi - dengan izin baik - dari http://www.piez.org
Sumber: