Bir kod editörü girintiyi kullanmadan kod iç içe geçme seviyesini nasıl etkili bir şekilde etkileyebilir? [kapalı]

Biri girintili (neredeyse) diğeri sola dayalı, aynı XML metni için 2 görünüm seçeneği sunan bir XML metin düzenleyicisi yazdım . Sola dayalı bir görünüm için motivasyon, kullanıcıların, XML içeriğinin otomatik bir yan etkisi olan girintiden etkilenmeden, düz metin veya XPath kodunun girintisi için kullandıkları boşluk karakterlerini 'görmelerine' yardımcı olmaktır.

Kullanıcıya yardım edecek, ancak fazla ayrıntıya girmeden sola dayalı mod için görsel düzenleyici ipuçları (editörün düzenlenemez bölümünde) sunmak istiyorum.

Sadece bağlantı hatlarını kullanmayı denedim, ama bu çok meşguldü. Şimdiye kadar bulduğum en iyisi, aşağıdaki editörün sahte bir ekran görüntüsünde gösteriliyor, ancak daha iyi / daha basit alternatifler arıyorum (çok fazla kod gerektirmez).

[Düzenle]

Isı haritası fikrini alarak (from: @jimp) Bunu ve 3 alternatifi alıyorum - etiketli a, b ve c:

Aşağıdaki bölüm, bir dizi başka cevap ve yorumdan fikirleri bir araya getirerek, teklif olarak kabul edilen cevabı açıklamaktadır. Bu soru şu an topluluk wiki olduğundan, lütfen bunu güncellemekten çekinmeyin.

NestView

İç içe geçmiş kodun okunabilirliğini geliştirmek için girintiyi kullanmadan görsel bir yöntem sağlayan bu fikrin adı.

Kontur Çizgileri

NestView içindeki farklı şekilde gölgeli satırların adı

Yukarıdaki resimde, bir XML snippet'inin görselleştirilmesine yardımcı olmak için kullanılan NestView gösterilmektedir. Bu gösterim için XML kullanılmasına rağmen, bu gösterim için yuvalamayı kullanan diğer herhangi bir kod sözdizimi kullanılmış olabilir.

Genel Bakış:

1. Kontur çizgileri, yuvalama düzeyini iletmek için (bir ısı haritasındaki gibi) gölgelendirilir

2. Kontur çizgileri, bir yuvalama seviyesinin ne zaman açıldığını veya kapandığını göstermek için açılıdır.

3. Bir kontur çizgisi, bir yuvalama seviyesinin başlangıcını ilgili uca bağlar.

4. Birleştirilmiş kontur çizgileri genişliği, ısı haritasına ek olarak yuvalama seviyesinin görsel bir izlenimini verir.

5. NestView'in genişliği manuel olarak yeniden boyutlandırılabilir olabilir, ancak kod değiştikçe değişmemelidir. Kontur çizgileri, bunu sürdürmek için sıkıştırılabilir veya kesilebilir.

6. Boş satırlar bazen metni daha sindirilebilir parçalara bölmek için kod kullanılır. Bu tür çizgiler NestView'da özel davranışları tetikleyebilir. Örneğin, ısı haritası sıfırlanabilir veya arka plan rengi kontur çizgisi veya her ikisi de sıfırlanabilir.

7. Seçili kodla ilişkilendirilmiş bir veya daha fazla kontür çizgisi vurgulanabilir. Seçilen kod seviyesi ile ilişkilendirilmiş kontur çizgisi en çok vurgulanır, ancak diğer iç kontur çizgileri de iç içe geçmiş grubun vurgulanmasına yardımcı olmak için ek olarak 'aydınlanabilir'

8. Farklı davranışlar (kod katlama veya kod seçimi gibi), bir Kontur Çizgisine tıklamak / çift tıklamakla ilişkilendirilebilir.

9. Bir kontur çizgisinin farklı bölümleri (ön, orta veya arka kenar) ilişkili farklı dinamik davranışlara sahip olabilir.

10. Bir ipucu hattı üzerindeki araç ipucuları bir fare gezdirme olayında gösterilebilir

11. NestView kodu düzenlendikçe sürekli güncellenir. Yuvalamanın iyi dengeli olmadığı durumlarda, yuva seviyesinin sona ermesi gereken yerlerde varsayımlar yapılabilir, ancak ilişkili geçici kontür çizgileri bir şekilde bir uyarı olarak vurgulanmalıdır.

12. Kontur Çizgilerinin sürükle ve bırak davranışları desteklenebilir. Davranış, kontür çizgisinin sürüklenmekte olan kısmına göre değişebilir.

13. Sol kenar boşluklarında yaygın olarak bulunan ve satır numaralandırması ve hatalar ve değişiklik durumu için renk vurgulama gibi özellikler NestView'ün üzerine yerleşebilir.

Ek İşlevsellik

Teklif bir dizi ek konuyu ele alıyor - çoğu orijinal sorunun kapsamı dışında, ancak yararlı bir yan etki.

Yuvalanmış bir bölgenin başlangıcını ve sonunu görsel olarak bağlayan

Kontur çizgileri, iç içe geçmiş her seviyenin başlangıcını ve bitişini bağlar

Seçili olan hattın içeriğinin vurgulanması

Kod seçildikten sonra, NestView'deki ilişkili yuva seviyesi vurgulanabilir

Aynı yuva seviyesindeki kod bölgeleri arasında ayrım

XML durumunda, farklı ad alanları için farklı tonlar kullanılabilir. Programlama dilleri (c # gibi) benzer şekilde kullanılabilecek adlandırılmış bölgeleri destekler.

Yuvalama alanı içindeki alanları farklı görsel bloklara ayırma

Ekstra satırlar genellikle okunabilirliği sağlamak için koda eklenir. Bu tür boş çizgiler, NestView'ın kontür çizgilerinin doygunluk seviyesini sıfırlamak için kullanılabilir.

Çoklu Sütun Kod Görünümü

Girintisiz kod, çok sütunlu görünümün kullanımını daha etkili kılar, çünkü sözcük kaydırma veya yatay kaydırmanın gerekme olasılığı daha düşüktür. Bu görünümde, kod bir sütunun altına ulaştığında, diğerine geçer:

Yalnızca görsel yardım sağlamanın ötesinde kullanım

Genel olarak önerildiği gibi, NestView olabilir TreeView denetimden beklenen büyük ölçüde uyumlu olacaktır düzenleme ve seçim bir dizi özellik sağlar. Temel fark, tipik bir TreeView düğümünün 2 bölümden oluşmasıdır: bir genişletici ve düğüm simgesi. Bir NestView kontur çizgisinde en fazla 3 parça olabilir: bir açıcı (eğimli), bir bağlayıcı (dikey) ve bir kapalı (eğimli).

Girintide

Girintili olmayan kod tamamlayıcılarla birlikte sunulan NestView, ancak geleneksel girintili kod görünümünü değiştirmesi muhtemel değildir.

Bir NestView uygulayan herhangi bir çözümün, beyaz boşluk karakterleri de dahil olmak üzere herhangi bir kod metnini etkilemeden girintili ve girintili olmayan kod görünümleri arasında sorunsuz bir şekilde geçiş yapma yöntemi sunması olasıdır. Girintili görünüm için bir teknik, sekme veya boşluk karakterleri yerine dinamik bir sol kenar boşluğunun kullanıldığı 'Sanal Biçimlendirme' olacaktır. NestView'ü dinamik olarak oluşturmak için kullanılan aynı iç içe geçmiş veriler, daha geleneksel görünümlü girintili görünüm için de kullanılabilir.

Baskı

Basılı kodun okunabilirliği için girinti önemli olacaktır. Burada, sekme / boşluk karakterlerinin ve dinamik bir sol kenar boşluğunun olmaması, metnin sağ kenarda sarılabileceği ve girintili görünümün bütünlüğünü koruyabileceği anlamına gelir. Satır numaraları, kodun kelime sarıldığı yeri ve ayrıca girintinin tam konumunu belirten görsel işaretler olarak kullanılabilir:

Ekran Emlak: Düz Vs Girintili

NestView'ün değerli ekran gayrimenkulünü kullanıp kullanamadığı sorusunu ele almak:

Kontur çizgileri, kod düzenleyicinin karakter genişliğiyle aynı genişlikte çalışır. Bu nedenle, 12 karakter genişliğindeki NestView genişliği, kontur çizgileri kesilmeden / sıkıştırılmadan önce 12 iç içe geçme düzeyi alabilir.

Girintili görünümde her iç içe geçme düzeyi için 3 karakter genişliği kullanılıyorsa, iç içe geçme 4 iç içe geçme düzeyine ulaşana kadar boşluk kaydedilir; bu iç içe geçme düzeyinden sonra düz görünümün her iç içe geçme düzeyiyle artan bir yer kazandıran avantajı vardır.

Not: Kod için genellikle en az 4 karakter genişliğinde bir girinti önerilir, ancak XML genellikle daha azıyla yönetir. Ayrıca, Sanal Formatlama hizalama sorunları olmadığından daha az girintiye izin verir

2 görünümün karşılaştırması aşağıda gösterilmiştir:

Yukarıdakilere dayanarak, görünüm stili seçiminin ekran gayrimenkulünden başka faktörlere bağlı olacağı sonucuna varılması muhtemelen adil. Bunun tek istisnası, örneğin bir Netbook / Tablet'te veya çok sayıda kod penceresi açıkken ekran alanının premium olduğu durumdur. Bu durumlarda, yeniden boyutlandırılabilir NestView açık bir kazanan gibi görünmektedir.

Durumlarda kullanın

NestView'ün kullanışlı bir seçenek olabileceği gerçek dünya örneklerine örnekler:

1. Ekran gayrimenkul bir prim olduğu yerde

   a. Tablet, not defteri ve akıllı telefon gibi cihazlarda

   b. Web sitelerinde kod gösterilirken

   c. Birden fazla kod penceresinin masaüstünde aynı anda görünmesi gerektiğinde

2. Kod içindeki metnin tutarlı boşluk boşluk girintisi öncelikli ise

3. İç içe geçmiş kodu incelemek için. Örneğin, alt dillerin (örneğin, C #'daki Linq veya XSLT'deki XPath) yüksek yuva düzeylerine neden olabileceği durumlarda.

Ulaşılabilirlik

Görme bozukluğu olan kişilere yardımcı olmak ve ayrıca çevresel koşullara ve kişisel tercihlere uyacak şekilde yeniden boyutlandırma ve renk seçenekleri sağlanmalıdır:

Düzenlenen kodun diğer sistemlerle uyumluluğu

Bir NestView seçeneğini içeren bir çözüm, ideal olarak, içe aktarılan koddan baştaki sekme ve boşluk karakterlerini (yalnızca biçimlendirme rolüne sahip olarak tanımlanır) çıkarabilir. Daha sonra, bir kez soyulduktan sonra, kod hem sola dayalı hem de girintili görünümlerde değişiklik yapılmadan düzgün bir şekilde oluşturulabilir. Beyaz boşluktan haberdar olmayan birleştirme ve farklı aletler gibi sistemlere dayanan birçok kullanıcı için bu büyük bir endişe kaynağı olacaktır (tam bir gösteri durdurucu değilse).

Diğer işler:

Örtüşen İşaretlemenin Görselleştirilmesi

2004'ten itibaren Wendell Piez tarafından yayınlanan araştırma , örtüşen işaretlemenin, özellikle LMNL'nin görselleştirilmesi sorununu ele almaktadır . Bu, NestView önerisine benzerlik gösteren SVG grafiklerini içerir, çünkü burada onaylanmıştır.

Görüntülerde (aşağıdaki) görsel farklar açıktır, temel işlevsel fark, NestView'ın yalnızca iyi yuvalanmış XML veya kod için tasarlandığından, Wendell Piez'in grafikleri örtüşen yuvalamayı temsil etmek üzere tasarlanmıştır.

Yukarıdaki grafikler, http://www.piez.org adresinden - izin alınarak - çoğaltılmıştır.

Kaynaklar:

1. Hermenutik İşarete Doğru
2. LMNL'ye doğru yarım adımlar

Burada kendi soruma cevap vermeye çalıştım, ancak bu, @jimp'in ısı haritası fikrini ve @Andrea'dan 'onu daha fazla XML-ish yap' fikrini içeriyor:

Umarım, ısı haritasındaki renkler, açısal çizgilerle birlikte başlangıç ​​ve bitiş etiketleri arasında göz çekmeye yardımcı olur; Yatay çizgi ayırıcılarının sökülmesi baştan sona “akışı” iyileştirir. Kullanıcı bir elemanla seçim yaparken, ısı haritasındaki eşleşen kısım bir şekilde vurgulanabilir - belki de parlayan bir sınırla (gösterildiği gibi).

Düzenleme Bununla devam etmeye karar verdik, muhtemelen renkler için kullanıcı seçenekleri olması gerekecek. 'Üretime hazır' ekran görüntüsü:

Ve karşılaştırma için ... alternatif girintili görünüm:

Şimdi Düzenleyin , daha yoğun bir şekilde iç içe geçmiş bir durum için - çizim becerilerimi test etmek ...

Bir fikir, metne 3D eklemeye çalışmak olabilir. Yazı tipi boyutunu, hangi düzeyde bulunduğuna bağlı olarak artırın / azaltın.

Örneğin, bu kod:

Bu gibi gözükürdü:

Farklı seviyelerde sabit metin-boyut uyumunu kaybettiği için çalışmak can sıkıcı olabilir. Diğer bir fikir; her seviyenin doygunluğunu değiştirin:

Bu gerçekten derin bir şeye ne kadar dayanıyor? Emin değil...

Aslında oluk görselleştirme fikrinizi çok seviyorum; şeyleri birlikte gruplamak kolaydır. Belki bu fikirlerden biriyle birleştiğinde, daha iyi görünecek ya da çok daha sarsıcı görünecektir. ;)

Kısa bir süre önce C'de kapsamı gösteren bir ısı haritası yaptım. Beyin fırtınası için bakmak eğlenceli olabilir:

Bağlantısızlar-sola:

Sadece orijinal fikrini değiştirip karelerden kapsüller arasında geçiş yap. Bence bu versiyonların (orijinaliniz dahil) okunması daha kolay, çünkü ekran elemanlarının iç içe geçmesini gösteren yuvalardan daha az karmaşık oldukları için. Ağaç unsurlarının bilgiyi daha basit ve sezgisel bir şekilde aktardığını düşünüyorum.

Bence sol doğrudan girintiyi göstermek için harika, sağında yuvalanmış bir ilişkiyi iletmek daha iyidir.

Benim fikrim:

İç içe geçme, iç içe geçmeye daha çok benzer Her katmanın yatay genişliğinin çok geniş olması gerekmez.

Bu fikri çok seviyorum. "Meşgul" ifadesini düşük tutmama önerim, kareler yerine degradeler kullanmak olacaktır. Hatları keserdi. Aşırı girinti için belki farklı renkler.

Sahip olduğun her şeyin harika olduğunu söyleyebilirim, zevklerim için birazcık blok olsa.

Yorumlarım: Visual Studio IDE'nin girintileme biçimiyle sürekli mücadele ediyorum. Böyle bir şey veya bir varyasyon kullanmayı çok isterim.

Öyleyse bu bağlantıyı çizgiler olmadan ve mevcut xml / kodunuzla aynı çizgide olduğunu hayal edin.

Görselleştirmenin düzenlenemeyen (sol?) Sınırda olması gerektiğini söylediğiniz için, görselleştirmenin kodun içindeyken veya arkasında olamayacağı anlamına geldiğine inanıyorum.

Belki de sol sütundaki ısı haritası, daha parlak renkler daha derin girintilere işaret ediyor? Marjı, DOM derinliği tarafından belirlenen maksimum girintiye göre verilen tüm boşluğu dinamik olarak kullanan (girintinin soldan sağa gitmesini bekleyin) gibi bir görselleştirmeyle sabit bir boyut yapın.

Editör bölgesine dallanmaya istekli olsaydınız, çok benzer bir şey öneririm, ancak belgenin arka planı olarak. Gölgeli alan, girintinin etkinleştirilmesi durumunda boşlukların olduğu yerde olacaktır . Bu durumda, vurgulanan metne zıt olan düz, açık bir renk kullanırdım.

jGRASP bunu kenar boşluğunda görsel bir işaretleyici kullanarak yapar:

Bir döngü kullandığınızı bile algılar ve bu iç döngüyü temsil etmek için farklı türde bir hat kullanır.

Sadece bir editörün bunu nasıl yaptığını göstereceğimi düşündüm.

Kötü bir fikir değil ama bloklarımı açıkça görebilmek için sol kenar boşluğuna atıfta bulunmak biraz can sıkıcı olabilir. Bu, ekran gayrimenkulünü veya yapının çok derinleşmesi halinde neye benzeyeceğini düşünmüyor bile.

Motivasyon, kullanıcıların girinti için kullandıkları boşluk karakterlerini 'görmelerine' yardımcı olmak olduğundan, onlara yalnızca boşluk karakterlerini gösterebilirsiniz.

Paragraf işaretleri gibi özel görsel karakterlerden bahsetmiyorum, sadece vurgulamaktadır. Sarı renkteki boşluklar, yeşil renkteki sekmeler (veya her neyse)

Kenar boşluğu / iç içe geçme sorunu için, her blok için kenar boşluğunu taşıyabilirsiniz. Kenar boşluğunun düz bir çizgi olması gerektiğini söyleyen hiçbir şey yoktur.

Bunun yeni bir fikir olmadığından eminim.

Bunun gibi bir şey:

Neden parantezleri açıp kapatmıyorsunuz?

1. Girinti, içerme anlamına gelir: (ve) tam olarak programcılar için olan anlamına gelir.
2. (ve) her biri tek bir karakterdir: sol çubuk çok ince kalacaktır.
3. Boş elemanlar kolayca farkedilebilir: aynı satırda () kullanın.
4. Bir elemanın içeriği görsel bir ipucuna ihtiyaç duymaz: bir boşluk daha iyidir.
5. Sağdaki imleç konumu soldaki içeren blok ile eşleştirilebilir: (ve) ile sütuntaki karakterlere dinamik olarak renk ekleme
6. Bir mesafeden daha iyi görünen <ve> kullanarak daha XML-ish yapabilirsiniz.

Vim çok da olmasa da benzer bir şey yapabilir.

Vim'de "kod katlama" yapmanın çeşitli yolları vardır. Bunlardan biri sözdizimi katlama kurallarına dayanır. Bu yapıldığında, kod iç içe geçmiş bir anahat yapısı kullanılarak katlanabilir ve "FoldColumn", "| .

Katlı sütun, kattofordan bağımsız olarak yuvalama gösterimi verebilir, ancak sözdizimi tabanlı yöntem, muhtemelen ne istemeniz için uygun olan yöntemdir. Bir yerde xml için önceden yapılmış sözdizimi tabanlı katlama kuralları olup olmadığından emin değilim, sanırım olabilir.

B ve C seçenekleriyle doğru yolda olduğunuzu düşünüyorum: hem genişlik hem de ısı haritası renklendirmesini ekleyin. Şu anda B seçeneğini C'den daha fazla seviyorum, çünkü daha az müdahalecidir (C'nin ortasındaki çok ağır bloktan ziyade geniş ve seyreltilmiş veya dar ve yoğun) Bir yere bir seviye eklerseniz grafiğin tamamını yeniden oluşturun. Bence blokları çok daha küçük yapabilirsin, 1 veya 2 px muhtemelen yeterli olacaktır. Çok olması gerekmiyor, sadece ayırt edilebilir olması gerekiyor. Özellikle insanların editörü birçok kez kullanması beklenirken, göze çarpmayan, daha ince efektlerle çalışmak daha kolaydır çünkü dikkatleri dağılmaz.

Bir tür editör kullanırken önemli olan şey şu anki kapsamı vurgulamaktır: editörde bir satır seçerken, hangi unsurları içerdiğini ve nerede durduğunu görmeniz gerekir. Ağacı bile vurgulayabilirsiniz (hangi unsurların bir çocuğu). Bunun, ele almayı ve düşünmeyi gerektiren ve kullanıcıların editörle olan deneyimlerini nasıl derecelendireceği konusunda daha fazla etkisi olacak ayrı bir konu olduğunu düşünüyorum.

Bahsetmediğim bir şey, üzerinde durmuş gibi göründüğünüz doygunluk etkisinin üstüne tonla yapabilecekleriniz. Önerim, işaretçinin bulunduğu yuvanın rengini değiştirmektir. Bu, kullanıcının hangi hatların yuvanın bir parçası olduğunu ayırt etmesini kolaylaştıracaktır.

Tona dayalı öğeleri uygularken, lütfen renk körlüğünün bilincinde olun ve evrensel olarak ayırt edilebilen renkleri seçin veya insanların seçmesi için birkaç seçenek sunun.

Şimdiye kadar diğer önerilerle birlikte kullanılabilecek seçeneklerden biri, XPath notasyonu kullanılarak çizgiye giden yolu gösteren sol kenarda bir araç ipucu kullanmak olacaktır. Tarayıcı "kontrol elemanı" araçları (örneğin, Chrome'da yerleşik olan Firebug) sık sık benzer bir şey yapar ancak durum çubuğundadır.

Muhtemelen, yalnızca bir renk sütunu ve derinlik sayıları ile ısı haritası için (orijinal yazıdan) daraltılmış bir görünüme sahip olabilirsiniz. Bu, onların ne kadar derin olduklarını bilmelerini ve xml için daha fazla ekranlı gayrimenkul vermelerini sağlar. Bana kazanmak gibi geliyor.

Her şeyi derinden yerleştirmek için yeterli renk farklılıkları olup olmayacağından endişe duyuyorum.