it-swarm-tr.com

Bir kod düzenleyici, girinti kullanmadan kod yerleştirme düzeyinde etkili bir şekilde nasıl ipucu verebilir?

Aynı XML metni için 2 görünüm seçeneği sunan bir XML metin düzenleyici yazdım, biri girintili (neredeyse), diğer sola dayalı. Sola yaslanmış görünümün amacı, kullanıcıların XML bağlamının 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ımcı olacak sola yaslanmış mod için (editörün düzenlenemeyen bölümünde) görsel ipuçları sağlamak istiyorum, ancak çok ayrıntılı olmadan.

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

code editor nesting level indication

[Düzenleme]

Isı haritası fikrini alarak (from: @jimp) Bunu ve a, b ve c olarak etiketlenmiş 3 alternatif alıyorum:

Initial ideas

Aşağıdaki bölüm, kabul edilen cevabı, bir dizi başka cevap ve yorumdan fikirleri bir araya getiren bir teklif olarak tanımlamaktadır. Bu soru artık topluluk wiki'si olduğundan, lütfen bunu güncellemekten çekinmeyin.


NestView

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

Kontur Çizgileri

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

enter image description here

Yukarıdaki resim, bir XML snippet'inin görselleştirilmesine yardımcı olmak için kullanılan NestView'u göstermektedir. Bu gösterim için XML kullanılmasına rağmen, bu gösterim için yuvalama kullanan başka herhangi bir kod sözdizimi kullanılmış olabilir.

Genel Bakış:

  1. Kontur çizgileri, iç içe geçme seviyesini iletmek için gölgeli (bir ısı haritasında olduğu gibi)

  2. Kontur çizgileri, bir iç içe yerleştirme seviyesi açıldığında veya kapatıldığında gösterilecek şekilde açılıdır.

  3. Bir kontur çizgisi, iç içe geçme seviyesinin başlangıcını ilgili uca bağlar.

  4. Kontur çizgilerinin birleşik 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, ancak kod değiştikçe değişmemelidir. Bunu sağlamak için kontur çizgileri sıkıştırılabilir veya kesilebilir.

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

  7. Seçili kodla ilişkilendirilmiş bir veya daha fazla kontur çizgisi vurgulanabilir. Seçilen kod seviyesiyle ilişkili kontur çizgisi en çok vurgulanacaktır, ancak içerilen iç içe grubun vurgulanmasına yardımcı olmak için diğer kontur çizgileri de 'yanabilir'

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

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

  10. Araç ipuçları bir fareyle üzerine gelme olayında kontur çizgisi üzerinde gösterilebilir

  11. Kod düzenlendikçe NestView sürekli olarak güncellenir. Yerleştirmenin iyi dengelenmediği yerlerde, iç içe yerleştirme düzeyinin bitmesi gereken yerlerde varsayımlar yapılabilir, ancak ilişkili geçici kontur çizgileri bir şekilde bir uyarı olarak vurgulanmalıdır.

  12. Kontur Çizgilerinin sürükleme ve bırakma davranışları desteklenebilir. Davranış, kontur çizgisinin sürüklenen kısmına göre değişebilir.

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

Ek İşlevler

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

Yuvalanmış bir bölgenin başlangıç ​​ve bitişini görsel olarak bağlama

Kontur çizgileri her iç içe seviyenin başlangıcını ve sonunu bağlar

Seçili satırın bağlamını vurgulama

Kod seçildikçe, NestView içindeki ilişkili yuva düzeyi vurgulanabilir

Aynı iç içe yerleştirme düzeyindeki kod bölgeleri arasında ayrım yapma

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

Bir yuvalama alanındaki alanları farklı görsel bloklara bölme

Ek satırlar okunabilirliğe yardımcı olmak için genellikle koda eklenir. Bu gibi boş çizgiler NestView'ün kontur çizgilerinin doygunluk seviyesini sıfırlamak için kullanılabilir.

Çok Sütunlu Kod Görünümü

Girintisiz kod, çok sütunlu görünüm kullanımını daha etkili hale getirir, çünkü Word-wrap veya yatay kaydırma gerekli değildir. Bu görünümde, kod bir sütunun altına ulaştığında, bir sonraki sütuna akar:

enter image description here

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

Genel bakışta önerildiği gibi, NestView could geniş bir TreeView denetiminden beklenenlerle uyumlu olacak bir dizi düzenleme ve seçim özelliği 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 çizgisi 3 kısma kadar olabilir: an açıcı (eğimli), a konektör (dikey) ve a kapat (eğimli).


Girinti Hakkında

NestView, girintisiz kod tamamlayıcılarının yanında sundu, ancak geleneksel girintili kod görünümünü değiştirmesi pek mümkün değil.

NestView kullanan tüm çözümlerin, boşluk karakterleri de dahil olmak üzere kod metninin hiçbirini etkilemeden girintili ve girintili olmayan kod görünümleri arasında sorunsuz bir şekilde geçiş yapma yöntemi sunması muhtemeldir. 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'i dinamik olarak oluşturmak için kullanılan aynı iç içe yerleştirme düzeyi verileri, daha geleneksel görünen girintili görünüm için de kullanılabilir.

Baskı

Girinti yazdırılan kodun okunabilirliği için önemli olacaktır. Burada, sekme/boşluk karakterlerinin olmaması ve dinamik bir sol kenar boşluğu metnin sağ kenar boşluğuna sarılabileceği ve girintili görünümün bütünlüğünü koruyabileceği anlamına gelir. Satır numaraları, kodun nereye sarıldığını ve girintinin tam konumunu belirten görsel işaretçiler olarak kullanılabilir:

enter image description here

Ekran Emlak: Girintili Vs Düz

NestView'in değerli ekran mülkleri kullanıp kullanmadığı sorusunu ele almak:

Kontur çizgileri, kod düzenleyicinin karakter genişliğiyle aynı genişlikte iyi çalışır. Bu nedenle, 12 karakter genişliğinde bir NestView genişliği, kontur çizgileri kesilmeden/sıkıştırılmadan önce 12 düzey iç içe yerleştirmeyi barındırabilir.

Girintili bir görünüm her bir iç içe yerleştirme düzeyi için 3 karakter genişliği kullanıyorsa, iç içe yerleştirme 4 iç içe yerleştirme düzeyine ulaşıncaya kadar alan kaydedilir, bu iç içe yerleştirme düzeyinden sonra düz görünüm, her bir iç içe yerleştirme düzeyiyle birlikte artan yer tasarrufu avantajına sahiptir.

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

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

enter image description here

Yukarıdakilere dayanarak, görünüm stili seçiminin ekran gayrimenkulü dışındaki faktörlere dayanacağı sonucuna varmak muhtemelen adil olacaktır. Bunun tek istisnası, örneğin Netbook/Tablet'te veya birden çok kod penceresinin açık olduğu durumlarda ekran alanının önemli olduğu yerdir. Bu durumlarda, yeniden boyutlandırılabilir NestView açık bir kazanan gibi görünebilir.

Kullanım Örnekleri

NestView'in yararlı bir seçenek olabileceği gerçek dünya örneklerine örnekler:

  1. Ekran gayrimenkulünün önemli olduğu yerler

    a. Tabletler, not defterleri ve akıllı telefonlar gibi cihazlarda

    b. Web sitelerinde kod gösterirken

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

  2. Kod içindeki metnin tutarlı boşluk girintisi bir öncelik olduğunda

  3. Derin iç içe kodları gözden geçirmek için. Örneğin alt dillerin (ör. C #'daki Linq veya XSLT'deki XPath) yüksek düzeylerde yuvalanmaya neden olabilir.

Ulaşılabilirlik

Görme engelli kişilere yardımcı olmak ve çevresel koşullara ve kişisel tercihlere uymak için yeniden boyutlandırma ve renk seçenekleri sağlanmalıdır:

enter image description here

Düzenlenen kodun diğer sistemlerle uyumluluğu

Bir NestView seçeneği içeren bir çözüm, içe aktarılan koddan önde gelen sekme ve boşluk karakterlerini (yalnızca biçimlendirme rolüne sahip olarak tanımlanır) sıyırma yeteneğine sahip olmalıdır. Daha sonra, 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. Boşluğun farkında olmayan birleştirme ve fark araçları gibi sistemlere güvenen 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:

Çakışan İşaretlemenin Görselleştirilmesi

2004 tarihli Wendell Piez tarafından yayınlanan araştırma, özellikle LMNL olmak üzere çakışan işaretlemenin görselleştirilmesi konusunu ele almaktadır. Bu, NestView teklifiyle önemli benzerliklere sahip SVG grafiklerini de içerir, bu nedenle burada kabul edilir.

Görüntülerdeki görsel farklılıklar açıktır (aşağıda), temel fonksiyonel ayrım NestView'in sadece iyi iç içe XML veya kod için tasarlanmasıdır, oysa Wendell Piez'in grafikleri üst üste binen iç içe geçmeyi temsil edecek şekilde tasarlanmıştır.

enter image description here

Yukarıdaki grafikler tür izniyle çoğaltıldıhttp://www.piez.org

Kaynaklar:

  1. Hermenutik İşaretlemeye Doğr
  2. LMNL'ye doğru yarım adımlar
235
pgfearo

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

enter image description here

Umarım, ısı haritasındaki renkler angular çizgileri ile başlangıç ​​ve bitiş etiketleri arasında göz çizmeye yardımcı olur; yatay çizgi ayırıcılarının kaldırılması 'akışı' baştan sona geliştirir. kullanıcı bir öğe ile ısı haritasındaki eşleşen kısım bir şekilde vurgulanabilir - belki de parlayan bir kenarlıkla (gösterildiği gibi).

Düzenle Bununla gitmeye karar verdiniz, muhtemelen renkler için kullanıcı seçenekleri olması gerekecek. 'Prodüksiyona hazır' ekran görüntüsü:

enter image description here

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

enter image description here

Düzenle Şimdi, daha iç içe geçmiş durum için - çizim becerilerimi test ediyorum ...

enter image description here

104
pgfearo

Bir fikir metne 3D eklemek ve denemek olabilir. Hangi seviyeye bağlı olarak yazı tipi boyutunu büyütün/küçültün.

Örneğin, bu kod:

enter image description here

Şöyle görünür:

enter image description here

Farklı düzeylerde sabit metin boyutu hizalamasını kaybettiği için çalışmak sinir bozucu olabilir. Diğer bir fikir; her seviyenin doygunluğunu değiştirin:

enter image description here

Bu gerçekten derin bir şey için ne kadar iyi duruyor? Emin değil...

Aslında Oluk görselleştirme fikrinizi çok seviyorum; işleri gruplandırmak çok kolay. Belki bu fikirlerden biriyle birleştiğinde daha da iyi görünecek ya da çok daha dar görünecek. ;)


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

enter image description here

Bağlantısızlar-sola:

enter image description here

24
Dave Gallagher

Sadece orijinal fikrinizi değiştirin ve karelerden kapsüllere geçin. Bu sürümlerin (orijinal sürümünüz dahil) okunması daha kolay olduğunu düşünüyorum, çünkü ekran öğelerini iç içe geçirerek yuvalamayı gösteren sürümden daha az karmaşık. Bence ağaç elemanları bilgiyi daha basit ve sezgisel bir şekilde aktarıyor.

capsules

Bence sol, doğrudan girinti göstermek için harika, sağ ise iç içe geçmiş bir ilişkiyi iletmekte daha iyi.

21
Jeremy Giberson

Benim fikrim:

Yuvalama yuvalanmaya daha çok benziyor. Her katmanın yatay genişliğinin çok geniş olması gerekmez.

9
broc7

Bu fikri seviyorum. "Meşgul" tutmak için benim önerim kareler yerine degradeleri kullanmak olacaktır. Çizgileri kesecekti. Aşırı girinti için belki de farklı renkler.

Zevklerim için biraz bloklu olsa da, sahip olduğunuz her şeyin harika olduğunu söyleyebilirim.

Yorumlarım: Visual Studio IDE girinti yapma yöntemiyle sürekli mücadele ediyorum. Böyle bir şey veya bir varyasyon kullanmak isterim.

Bu bağlantıyı çizgisiz düşünün ve mevcut xml/kodunuzla satır içi olarak düşünün.

8
Gauthier

Görselleştirmenin düzenlenemeyen (sol?) Marjda olması gerektiğini söylediğiniz için, görselleştirmenin iç içe geçemeyeceği veya kodun arkasında olamayacağına inanıyorum.

Belki sol sütundaki ısı haritası, daha parlak renkler daha derin girintileri gösterir? Kenar boşluğunu, DOM derinliği tarafından belirlenen maksimum girintiye göre verilen tüm alanı dinamik olarak kullanan, sahip olduğunuz gibi (girintinin soldan sağa gitmesini beklediğiniz gibi) görselleştirmeyle sabit bir boyut yapın.

Editör bölgesine dallanmak isteseydiniz, çok benzer bir şey öneririm, ancak belgenin arka planı olarak. Girintileme etkinleştirilmişse, gölgeli alan boşluk olurd olur. Bu durumda, metin vurgulamanın aksine düz, açık bir renk kullanırdım.

5
jimp

Kötü bir fikir değil ama bloklarımı açıkça görmek için sol kenar boşluğuna başvurmak biraz can sıkıcı olabilir. Bu, ekran gayrimenkulünü veya yapı çok derinleşirse nasıl görünmeye başlayabileceğini bile düşünmüyor.

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

Paragraf işaretleri gibi özel görsel karakterlerden bahsetmiyorum, sadece önemli noktalar. Sarı renkli alanlar, yeşil renkli sekmeler (veya her neyse)

Kenar boşluğu/yuvalama 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.

Eminim bu yeni bir fikir değildir.

Bunun gibi bir şey:

sample xml showing moving left margin and highlighted whitespace

3
Justin Ohms

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

enter image description here

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

Sadece mevcut bir editörün bunu nasıl yapacağına dikkat çekeceğimi düşündüm.

3
ash

Vim, çok da güzel olmasa da, benzer bir şey yapabilir.

Vim'de "kod katlama" yapmanın çeşitli yolları vardır. Bunlardan biri sözdizimi katlama kurallarına dayanmaktadır. Bu yapıldığında kod, iç içe geçmiş bir anahat yapısı kullanılarak katlanabilir ve "FoldColumn", "foldlevel" in grafiksel (aslında "karakter tabanlı" ile "|" ve "-" karakter) temsilini vermek için kullanılabilir .

Foldcolumn, foldmethod'dan bağımsız olarak yuvalama temsili verebilir, ancak sözdizimi tabanlı yöntem, muhtemelen istediğiniz şey için uygun olan yöntemdir. Bir yerde xml için önceden hazırlanmış sözdizimi tabanlı katlama kuralları olup olmadığından emin değilim, sanırım olabilir.

2
Herbert Sitz

Neden parantezleri açıp kapatmıyorsunuz?

  1. Girinti sınırlama 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 tespit edilir: Aynı satırda () kullanın.
  4. Bir öğenin içeriği görsel bir ipucu gerektirmez: boşluk çok daha iyidir.
  5. Sağdaki imleç konumu soldaki içeren blokla eşleştirilebilir: sütundaki karakterlere (ve) dinamik olarak bir renk ekleyin
  6. Uzaktan daha iyi görünen <ve> kullanarak daha fazla XML-ish yapabilirsiniz.
2
Ando

Bahsetmediğim bir şey, yerleşmiş gibi görünen doygunluk etkisinin üzerine tonla neler yapabileceğinizdir. Benim önerim, işaretçinin bulunduğu yuvanın rengini değiştirmek. Bu, kullanıcının hangi satırların yuvanın bir parçası olduğunu ayırt etmesini kolaylaştırabilir, yol boyunca kardeşlerine karşı.

Ton tabanlı şeyler uygularken, lütfen renk körlüğünün bilincinde olun ve evrensel olarak ayırt edilebilir renkleri seçin veya insanların seçebileceği birkaç seçenek sunun.

1
Phil Miller

Bence B ve C seçenekleriyle doğru yoldasınız: hem genişlik hem de ısı haritası renklendirmesini ekleyin. Şu anda B seçeneğini C'den daha çok seviyorum, çünkü daha az müdahaleci (C'nin ortasındaki çok ağır bloktan ziyade geniş ve seyreltilmiş veya dar ve yoğun) Bir dezavantaj, bu seçenekle bir yere seviye eklerseniz tüm grafiği yeniden oluşturun. Blokları çok daha küçük yapabileceğinizi düşünüyorum, 1 veya 2 piksel muhtemelen yeterli olacaktır. Çok fazla olması gerekmiyor, sadece ayırt edilebilir olması gerekiyor. Özellikle insanların editörü birçok kez kullanması beklendiğinde, dikkat dağıtıcı olmayan, daha ince efektlerle çalışmak daha kolaydır, çünkü dikkatlerini dağıtmazlar.

Bir tür düzenleyici kullanırken önemli olan bir şey, mevcut kapsamı vurgulamaktır: düzenleyicide bir çizgi seçerken, tam olarak hangi öğeleri içerdiğini ve nerede durduğunu görmeniz gerekir. Ağacı bile vurgulayabilirsiniz (hangi unsurların çocuğu olduğu). Bunun ele alınması ve düşünülmesi gereken ayrı bir konu olduğunu ve kullanıcıların editörle olan deneyimlerini nasıl derecelendirecekleri üzerinde daha fazla etkisi olacağını düşünüyorum.

1
Inca

Muhtemelen sadece bir renk sütunu ve derinlik sayılarıyla ısı haritası (orijinal yazıdan) için daraltılmış bir görünümünüz olabilir. Bu onların ne kadar derin olduklarını bilmelerini ve onlara xml için daha fazla ekran emlak vermelerini sağlayacaktır. Bana bir galibiyet galibiyeti gibi geliyor.

Bir şeyleri derinlemesine yuvalamak için yeterli renk farkı olup olmayacağından endişe duyuyorum.

0
m4tt1mus

Şimdiye kadar diğer önerilerle birlikte kullanılabilen bir seçenek, sol kenar boşluğunda XPath gösterimini kullanarak çizginin yolunu gösteren bir ipucu kullanmak olacaktır. Tarayıcı "inceleme öğesi" araçları (ör. Chrome'da yerleşik olan Firebug), genellikle durum çubuğunda benzer bir şey yapar.

0
Peter Taylor