Wie kann ein Code-Editor effektiv auf die Ebene der Code-Verschachtelung hinweisen - ohne Einrückung? [geschlossen]

233

Ich habe einen XML-Texteditor geschrieben , der zwei Ansichtsoptionen für denselben XML-Text bietet, einen eingerückt (virtuell), den anderen linksbündig. Die Motivation für die linksbündige Ansicht besteht darin, den Benutzern zu helfen, die Whitespace-Zeichen, die sie zum Einrücken von Klartext- oder XPath-Code verwenden, ohne Beeinträchtigung durch Einrückungen, die ein automatischer Nebeneffekt des XML-Kontexts sind, zu "sehen".

Ich möchte visuelle Hinweise (im nicht bearbeitbaren Teil des Editors) für den linksbündigen Modus geben, die dem Benutzer helfen, ohne jedoch zu aufwendig zu werden.

Ich habe versucht, nur Verbindungsleitungen zu verwenden, aber das schien zu beschäftigt zu sein. Das Beste, was ich bisher gefunden habe, ist in einem Screenshot des Editors unten dargestellt, aber ich suche nach besseren / einfacheren Alternativen (die nicht zu viel Code erfordern).

Anzeige der Verschachtelungsebene des Code-Editors

[Bearbeiten]

Ausgehend von der Heatmap-Idee (von: @jimp) erhalte ich diese und 3 Alternativen - bezeichnet mit a, b und c:

Erste Ideen

Im folgenden Abschnitt wird die akzeptierte Antwort als Vorschlag beschrieben, in dem Ideen aus einer Reihe anderer Antworten und Kommentare zusammengefasst werden. Da diese Frage jetzt Community-Wiki ist, können Sie sie gerne aktualisieren.


NestView

Der Name für diese Idee, die eine visuelle Methode zur Verbesserung der Lesbarkeit von verschachteltem Code ohne Einrückung bietet.

Umriss

Der Name für die unterschiedlich schattierten Linien in NestView

Bildbeschreibung hier eingeben

Das obige Bild zeigt das NestView, das zur Visualisierung eines XML-Snippets verwendet wird. Obwohl für diese Abbildung XML verwendet wird, könnte für diese Abbildung jede andere Codesyntax verwendet werden, die Verschachtelung verwendet.

Ein Überblick:

  1. Die Konturlinien sind (wie in einer Heatmap) schattiert, um die Verschachtelungsebene anzuzeigen

  2. Die Konturlinien sind abgewinkelt, um anzuzeigen, wann eine Verschachtelungsebene geöffnet oder geschlossen wird.

  3. Eine Konturlinie verbindet den Anfang einer Verschachtelungsebene mit dem entsprechenden Ende.

  4. Die kombinierte Breite der Konturlinien gibt zusätzlich zur Heatmap einen visuellen Eindruck der Verschachtelungsebene.

  5. Die Breite von NestView kann manuell geändert werden, sollte sich jedoch nicht ändern, wenn sich der Code ändert. Konturlinien können entweder komprimiert oder abgeschnitten werden, um dies zu erreichen.

  6. Leerzeilen werden manchmal als Code verwendet, um Text in besser verdauliche Teile aufzuteilen. Solche Zeilen können im NestView ein spezielles Verhalten auslösen. Beispielsweise könnte die Heatmap zurückgesetzt werden oder eine Konturlinie mit Hintergrundfarbe verwendet werden oder beides.

  7. Eine oder mehrere Konturlinien, die dem aktuell ausgewählten Code zugeordnet sind, können hervorgehoben werden. Die Konturlinie, die der ausgewählten Codeebene zugeordnet ist, wird am stärksten hervorgehoben. Es können jedoch auch andere Konturlinien aufleuchten, um die enthaltene verschachtelte Gruppe hervorzuheben

  8. Mit dem Klicken / Doppelklicken auf eine Konturlinie können unterschiedliche Verhaltensweisen (z. B. Falzen von Code oder Auswahl von Code) verknüpft werden.

  9. Unterschiedliche Teile einer Konturlinie (Vorder-, Mittel- oder Hinterkante) können unterschiedliche dynamische Verhalten aufweisen.

  10. QuickInfos können angezeigt werden, wenn Sie den Mauszeiger über eine Konturlinie bewegen

  11. Das NestView wird kontinuierlich aktualisiert, während der Code bearbeitet wird. Wenn die Verschachtelung nicht ausbalanciert ist, können Annahmen getroffen werden, wo die Verschachtelungsebene enden soll, aber die zugehörigen temporären Konturlinien müssen in gewisser Weise als Warnung hervorgehoben werden.

  12. Drag & Drop-Verhalten von Konturlinien kann unterstützt werden. Das Verhalten kann je nach dem Teil der Konturlinie variieren, der gezogen wird.

  13. Funktionen, die häufig am linken Rand zu finden sind, wie Zeilennummerierung und farbige Hervorhebung bei Fehlern und Statusänderungen, können das NestView überlagern.

Zusätzliche Funktionalität

Der Vorschlag befasst sich mit einer Reihe zusätzlicher Probleme - viele liegen außerhalb des Rahmens der ursprünglichen Frage, sind jedoch ein nützlicher Nebeneffekt.

Visuelles Verknüpfen von Anfang und Ende einer verschachtelten Region

Die Konturlinien verbinden den Anfang und das Ende jeder verschachtelten Ebene

Hervorheben des Kontexts der aktuell ausgewählten Zeile

Wenn Code ausgewählt ist, kann die zugehörige Verschachtelungsebene in der NestView hervorgehoben werden

Unterscheidung zwischen Coderegionen auf derselben Verschachtelungsebene

Im Fall von XML können für verschiedene Namespaces unterschiedliche Farbtöne verwendet werden. Programmiersprachen (wie c #) unterstützen benannte Regionen, die auf ähnliche Weise verwendet werden könnten.

Unterteilen von Bereichen innerhalb eines Sammelbereichs in verschiedene visuelle Blöcke

Zusätzliche Zeilen werden häufig in den Code eingefügt, um die Lesbarkeit zu verbessern. Solche leeren Zeilen könnten verwendet werden, um den Sättigungsgrad der NestView-Konturlinien zurückzusetzen.

Mehrspaltige Codeansicht

Code ohne Einrückung macht die Verwendung einer mehrspaltigen Ansicht effektiver, da ein Zeilenumbruch oder horizontales Scrollen weniger wahrscheinlich ist. In dieser Ansicht fließt der Code, sobald er das Ende einer Spalte erreicht hat, in die nächste:

Bildbeschreibung hier eingeben

Verwendung, die über die bloße Bereitstellung einer visuellen Hilfe hinausgeht

Wie in der Übersicht vorgeschlagen, könnte NestView eine Reihe von Bearbeitungs- und Auswahlfunktionen bieten , die im Großen und Ganzen den Erwartungen eines TreeView-Steuerelements entsprechen. Der Hauptunterschied besteht darin, dass ein typischer TreeView-Knoten aus zwei Teilen besteht: einem Expander und dem Knotensymbol. Eine NestView-Konturlinie kann bis zu drei Teile haben: einen Öffner (abfallend), einen Verbinder (vertikal) und einen Schließer (abfallend).


Einrückung

Das NestView wird zusammen mit nicht eingerückten Code-Ergänzungen angezeigt, wird jedoch wahrscheinlich die herkömmliche eingerückte Code-Ansicht nicht ersetzen.

Es ist wahrscheinlich, dass alle Lösungen, die NestView verwenden, eine Methode bieten, mit der nahtlos zwischen eingerückten und nicht eingerückten Codeansichten gewechselt werden kann, ohne dass sich dies auf den Codetext selbst auswirkt - einschließlich Leerzeichen. Eine Technik für die eingerückte Ansicht wäre "Virtuelle Formatierung", bei der ein dynamischer linker Rand anstelle von Tabulator- oder Leerzeichen verwendet wird. Dieselben Verschachtelungsebenendaten, die zum dynamischen Rendern von NestView verwendet werden, können auch für die herkömmlichere Ansicht mit eingerückten Rändern verwendet werden.

Drucken

Einrückungen sind wichtig für die Lesbarkeit des gedruckten Codes. In diesem Fall bedeutet das Fehlen von Tabulator- / Leerzeichen und einem dynamischen linken Rand, dass der Text am rechten Rand umgebrochen werden kann und trotzdem die Integrität der eingerückten Ansicht erhalten bleibt. Zeilennummern können als visuelle Markierungen verwendet werden, die angeben, wo der Code in Worte gefasst ist, und auch die genaue Position der Einrückung:

Bildbeschreibung hier eingeben

Screen Real-Estate: Flat Vs Indented

Beantwortung der Frage, ob der NestView wertvolle Bildschirmfläche verbraucht:

Konturlinien funktionieren gut mit einer Breite, die der Zeichenbreite des Code-Editors entspricht. Eine NestView-Breite von 12 Zeichen kann daher 12 Verschachtelungsebenen aufnehmen, bevor Konturlinien abgeschnitten / komprimiert werden.

Wenn eine eingerückte Ansicht 3 Zeichenbreiten für jede Verschachtelungsebene verwendet, wird Platz gespart, bis die Verschachtelung 4 Verschachtelungsebenen erreicht. Nach dieser Verschachtelungsebene hat die flache Ansicht einen platzsparenden Vorteil, der mit jeder Verschachtelungsebene zunimmt.

Hinweis: Für Code wird häufig ein Einzug von mindestens 4 Zeichen empfohlen, XML kann jedoch häufig mit weniger Zeichen auskommen. Durch die virtuelle Formatierung kann außerdem weniger Einrückung verwendet werden, da kein Risiko für Ausrichtungsprobleme besteht

Ein Vergleich der beiden Ansichten ist nachfolgend dargestellt:

Bildbeschreibung hier eingeben

Auf der Grundlage der obigen Ausführungen ist es wahrscheinlich gerechtfertigt, den Schluss zu ziehen, dass die Auswahl des Ansichtsstils auf anderen Faktoren als Bildschirmimmobilien basiert. Die einzige Ausnahme ist, wenn der Platz auf dem Bildschirm knapp ist, z. B. auf einem Netbook / Tablet oder wenn mehrere Codefenster geöffnet sind. In diesen Fällen scheint das in der Größe veränderbare NestView ein klarer Gewinner zu sein.

Anwendungsfälle

Beispiele für Beispiele aus der Praxis, bei denen NestView eine nützliche Option sein kann:

  1. Wo Bildschirmimmobilien an erster Stelle stehen

    ein. Auf Geräten wie Tablets, Notizblöcken und Smartphones

    b. Beim Anzeigen von Code auf Websites

    c. Wenn mehrere Codefenster gleichzeitig auf dem Desktop angezeigt werden sollen

  2. Wo konsistente Leerzeichen Einrückung von Text im Code eine Priorität ist

  3. Zum Überprüfen von tief verschachteltem Code. Zum Beispiel, wenn Untersprachen (z. B. Linq in C # oder XPath in XSLT) einen hohen Verschachtelungsgrad verursachen können.

Barrierefreiheit

Anpassungs- und Farboptionen müssen bereitgestellt werden, um Sehbehinderten zu helfen und um den Umgebungsbedingungen und persönlichen Vorlieben gerecht zu werden:

Bildbeschreibung hier eingeben

Kompatibilität des bearbeiteten Codes mit anderen Systemen

Eine Lösung mit einer NestView-Option sollte idealerweise in der Lage sein, führende Tabulator- und Leerzeichen (die nur eine Formatierungsrolle haben) aus importiertem Code zu entfernen. Sobald der Code entfernt wurde, konnte er ohne Änderungen sowohl in der linksbündigen als auch in der eingerückten Ansicht sauber gerendert werden. Für viele Benutzer, die sich auf Systeme wie Mergen und Diff-Tools verlassen, die keine Whitespace-Kenntnisse haben, ist dies ein großes Problem (wenn nicht sogar ein kompletter Show-Stopper).


Andere Arbeiten:

Visualisierung überlappender Markups

Die veröffentlichte Studie von Wendell Piez aus dem Jahr 2004 befasst sich mit der Visualisierung von überlappenden Markups , insbesondere LMNL . Dies beinhaltet SVG-Grafiken mit signifikanten Ähnlichkeiten zum NestView-Vorschlag. Sie werden hier als solche anerkannt.

Die visuellen Unterschiede sind in den Bildern (unten) deutlich zu erkennen. Der wichtigste funktionale Unterschied besteht darin, dass NestView nur für gut verschachteltes XML oder Code gedacht ist, während Wendell Piez Grafiken so gestaltet sind, dass sie überlappende Verschachtelungen darstellen.

Bildbeschreibung hier eingeben

Die obigen Grafiken wurden - mit freundlicher Genehmigung - von http://www.piez.org reproduziert

Quellen:

  1. Auf dem Weg zu Hermenutic Markup
  2. Halbschritte in Richtung LMNL
pgfearo
quelle
6
Ich habe keine wirkliche Antwort für dich, nur eine Meinung. Wenn ich mir Ihre Beispiele anschaue, ist B meine bevorzugte Wahl. Es fällt mir auf, weil die "Heatmap" tatsächlich der Einrückung folgt, anstatt sie wie im ersten Beispiel zu spiegeln und C zu tun. A folgt auch dem tatsächlichen Einzug, aber B entspricht eher dem, was Sie sehen würden, wenn der tatsächliche XML-Code eingerückt würde. Das zweite Beispiel ist einfach zu "solide" für meinen Geschmack.
Marjan Venema
4
Ich würde eingerückten Code selbst vorziehen. Sie sind sich nicht sicher, welchen Nutzen dies haben würde? Vermisse ich etwas Offensichtliches? (Wirklich nicht beabsichtigen, dass dies negativ klingt.)
Chris
9
Ich verstehe nicht, dass es besser ist, auf 100% der Zeilen einen großen Spielraum zu beanspruchen, als nur so viel Spielraum zu beanspruchen, wie jede Zeile benötigt.
John Gietzen
1
@ John Gietzen. Das Ziel ist nicht, Bildschirmgrundstücke zu speichern (obwohl dies in vielen Fällen der Effekt sein kann). Es soll eine genauere Kontrolle über Leerzeichen ermöglichen, wenn dies wichtig ist - eine eingerückte Ansicht wird weiterhin bereitgestellt (aber virtuell, ohne Füllzeichen).
pgfearo
3
Ich stimme dafür, diese Frage als "Off-Topic" zu schließen, da es sich um eine UX-Frage handelt, die jedoch zu alt für eine Migration ist.
Ratschenfreak

Antworten:

104

Ich habe versucht, meine eigene Frage hier zu beantworten, aber dies bezieht die Heatmap-Idee von @jimp und auch die Idee von @Andrea mit ein, dass es XML-gerechter wird:

Bildbeschreibung hier eingeben

Hoffentlich helfen die Farben in der Heatmap zusammen mit den eckigen Linien dabei, das Auge zwischen den Start- und End-Tags zu ziehen. Das Entfernen der horizontalen Linientrenner verbessert den Durchfluss von Anfang bis Ende. Wenn der Benutzer ein Element auswählt, kann der entsprechende Teil in der Heatmap auf irgendeine Weise hervorgehoben werden - möglicherweise mit einem leuchtenden Rand (wie gezeigt).

Bearbeiten hat beschlossen , mit diesem zu gehen, es wird wahrscheinlich Benutzeroptionen für die Farben sein. Ein 'produktionsbereiter' Screenshot:

Bildbeschreibung hier eingeben

Und zum Vergleich ... die alternative eingerückte Ansicht:

Bildbeschreibung hier eingeben

Edit Now, für den stärker verschachtelten Fall - Testen meiner Zeichenfähigkeiten ...

Bildbeschreibung hier eingeben

pgfearo
quelle
1
Das sieht großartig aus ! Gut gemacht. Aber wie wird es aussehen, wenn es mehr Einrückungen gibt?
Loïc Lopes
1
@ Louhike Danke! Ja, es ist auf 4 Ebenen maximal und ich möchte den linken Rand nicht mehr dehnen - daher werde ich die Breite der vertikalen Balken bei höheren Verschachtelungsebenen zunehmend komprimieren - hoffentlich ein bisschen wie bei einer Konturenkarte.
pgfearo
2
@ Louhike. Ich habe ein zusätzliches Bild hinzugefügt, um zu zeigen, wie die Dinge mit 9 Verschachtelungsebenen aussehen könnten. Nach etwa 15 Ebenen wäre es wahrscheinlich erforderlich, die mittleren Balken zusammenzuführen, möglicherweise mit einer Verlaufsfüllung.
pgfearo
10
Das ist einfach unglaublich. +1 für die Code-Bearbeitung und Benutzeroberfläche auf die nächste Ebene. Jemand mit einem Account sollte dies an Hacker News /.oder an r / programming senden.
Konrad Rudolph
2
Ich habe mich gefragt, wie es aussehen würde, wenn die Seitenleiste horizontal gekippt
wäre
24

Eine Idee könnte sein, zu versuchen, dem Text 3D hinzuzufügen. Erhöhen / verringern Sie die Schriftgröße basierend auf der Stufe, auf der sie sich befindet.

Zum Beispiel dieser Code:

Bildbeschreibung hier eingeben

Würde so aussehen:

Bildbeschreibung hier eingeben

Das ist möglicherweise ärgerlich, da die feste Ausrichtung der Textgröße über verschiedene Ebenen hinweg verloren geht. Eine andere Idee; ändere die Sättigung jedes Levels:

Bildbeschreibung hier eingeben

Wie gut hält das für etwas wirklich Tiefes aus? Nicht sicher...

Ich mag Ihre Idee zur Rinnenvisualisierung sehr. Es ist einfach, Dinge zu gruppieren. Vielleicht sieht es in Kombination mit einer dieser Ideen sogar noch besser oder viel schlechter aus. ;)


Vor einiger Zeit habe ich eine Heatmap erstellt, die den Umfang von C zeigt. Vielleicht macht es Spaß, sie für ein Brainstorming anzusehen:

Bildbeschreibung hier eingeben

Linksbündig:

Bildbeschreibung hier eingeben

Dave Gallagher
quelle
2
Es ist verlockend, etwas mit dem Text zu tun, aber dies ist schwierig, ohne den Entwickler während der Eingabe oder kurz danach abzulenken. Änderungen, die sich auf die Schriftgröße auswirken, verursachen Probleme. Möglicherweise tolerieren wir, dass unser Code noch weniger hin- und herbewegt wird als nebeneinander. Ich mag Ihre Idee, den Code zu schattieren, aber dies müsste subtil sein, da ich versuchen möchte, die Dinge übersichtlich zu halten.
pgfearo
2
Aber das wäre großartig für die Unterrichtsumgebung!
Jcolebrand
Der Vorschlag zur Schriftgröße ist seltsam überzeugend - ich kann jedoch seine Nachteile erkennen. Verkleinern Sie die Schrift, da der Bereich stärker verschachtelt ist. Dies würde dazu beitragen, die Verschachtelung zu unterbinden (obwohl dies Probleme verursachen würde, bei denen die Verschachtelung tatsächlich eine sinnvolle Lösung darstellt).
Peter
2
Die Heatmap ist tatsächlich viel besser in der Visualisierung des Bereichs als die linksbündige Bereichsvisualisierung (@pfgearos Lösung)
Sandeep
@Sandeep. Ich stimme zu, dass dies in vielen Fällen eine bessere Lösung ist - insbesondere, wenn Code überprüft und nicht bearbeitet wird. Technische Einschränkungen (wie in der Frage hoffentlich erklärt) erschweren es mir, die Hintergrundfarbe mit dem aktuell verwendeten Steuerelement zu ändern. Tatsächlich habe ich in dieser Antwort die linke Seite der Wärmekarte verwendet - jedoch mit Kanten, die zum bearbeiteten Bereich hin geneigt sind, um das Auge besser in Szene zu setzen Ebenen der Verschachtelung.
pgfearo
21

Optimieren Sie einfach Ihre ursprüngliche Idee und wechseln Sie von Quadraten zu Kapseln. Ich denke, diese Versionen (einschließlich Ihrer Originalversion) sind einfacher zu lesen, da sie weniger komplex sind als die, bei der das Verschachteln durch Verschachteln der Anzeigeelemente angezeigt wird. Ich denke, Baumelemente vermitteln die Informationen auf einfachere und intuitivere Weise.

Kapseln

Ich denke, die linke Seite eignet sich hervorragend, um Einrückungen direkt anzuzeigen, während die rechte Seite eine verschachtelte Beziehung besser vermitteln kann.

Jeremy Giberson
quelle
2
Ich bevorzuge die Weichheit Ihrer Kapseln, obwohl sie vom Text zu distanziert zu sein scheinen. Ich brauche etwas, das mehr Zusammenhalt und eine klarere Sicht auf die enthaltenen Teile bietet.
pgfearo
9

Meine Idee:

Die Verschachtelung ähnelt eher einer Verschachtelung. Die horizontale Breite jeder Schicht muss nicht so breit sein.

broc7
quelle
Ich denke, was Sie vorschlagen, ist im Wesentlichen dasselbe wie die Antwort (inspiriert von anderen), die ich gegeben habe, aber ohne die abfallenden Linien. Ich denke, schräge Linien helfen dabei, den Blick zwischen Öffnen und Schließen besser zu lenken. Die Breite ist kein wirkliches Problem, da (wie im 9-Ebenen-Bild gezeigt) die vertikale Linienbreite unabhängig von der abfallenden Linienbreite ist, sodass die vertikalen Linien komprimiert werden können.
pgfearo
Ja, pg- Ich habe das bemerkt, nachdem ich gepostet habe. Sie sind topografisch identisch - um sich ein Bild davon zu machen. Ich nehme an, das ist Geschmackssache, aber meine Version ruft mir nur "Nesting" zu, so wie es Ihre Version nicht tut. Möglicherweise könnte diese Funktion beides bieten und dem Benutzer die Auswahl ermöglichen.
Broc7
8

Ich liebe die Idee. Mein Vorschlag, um die "beschäftigt" zu halten, wäre, Farbverläufe anstelle von Quadraten zu verwenden. Es würde die Anzahl der Leitungen verringern. Vielleicht verschiedene Farben für extreme Eindrücke.

Ich würde sagen, dass alles, was Sie haben, großartig ist, auch wenn es für meinen Geschmack etwas blockig ist.

Meine Kommentare: Ich habe ständig mit der Art und Weise zu kämpfen, wie die Visual Studio-IDE Einrückungen ausführt. Ich würde gerne so etwas oder eine Variation verwenden.

Stellen Sie sich diesen Link ohne die Zeilen vor und fügen Sie ihn in Ihre aktuelle XML / Ihren aktuellen Code ein.

Gauthier
quelle
Ja, die Ideen entwickeln sich weiter. Die Bilder in der Antwort, die ich eingereicht habe (und nicht meine Frage), sind weniger blockartig, da sie Steigungen und Gefälle aufweisen. Ich bin mit Ihnen auf den verschiedenen Farben, um hoch einzurücken, aber auch um Dinge wie Kommentare oder Fehler hervorzuheben. Und dann gibt es die dynamische Hervorhebung, um den aktuellen Kontext / das Debuggen anzuzeigen ... die Schwierigkeit wird darin bestehen, zu beurteilen, wann aufzuhören ist.
pgfearo
5

Da Sie sagten, dass die Visualisierung im nicht bearbeitbaren (linken?) Rand vorhanden sein muss, glaube ich, dass die Visualisierung nicht vermischt werden kann oder sich hinter dem Code befindet.

Vielleicht eine Heatmap in der linken Spalte, deren hellere Farben eine tiefere Einrückung anzeigen? Stellen Sie den Rand auf eine feste Größe ein, mit einer Visualisierung wie der, die Sie haben (von links nach rechts gehen, wie es der Einzug tun würde), die dynamisch den gesamten angegebenen Raum gemäß dem maximalen Einzug verwendet, der durch die DOM-Tiefe bestimmt wird.

Wenn Sie bereit wären, in den Editorbereich zu verzweigen, würde ich etwas sehr Ähnliches vorschlagen, aber als Hintergrund des Dokuments. Der schattierte Bereich würde sich dort befinden, wo Leerzeichen wären, wenn die Einrückung aktiviert wäre. In diesem Fall würde ich eine feste, helle Farbe verwenden, die sich von der Hervorhebung des Texts abhebt.

jimp
quelle
@jimp Ja, die Visualisierung kann nicht mit oder hinter dem Code sein - so sehr ich dies auch gerne ausprobieren würde, meine Codierungsfähigkeiten / -plattform würden dies zu komplex machen. Hintergrundfarben im Editor selbst sind wieder schwierig, aber das bringt mich auf die Idee, dass ich verschiedene Vordergrundfarbtöne ausprobieren könnte. Ich probiere auch einen Balken und eine Heatmap von links nach rechts aus, wie Sie vorschlagen.
pgfearo
+1 für die Heatmap-Idee (Y) .. und ich kann vorschlagen, dass die Verschachtelungsebene für Menschen mit besonderen visuellen Bedürfnissen (wie Farbenblindheit) innerhalb der Farbe liegt.
M.Sameer
@jimp. Meine Frage wurde aktualisiert, um Ihre Heatmap-Idee zu veranschaulichen, die mir gefällt, aber ich glaube, ich habe das von links nach rechts falsch verstanden ...
pgfearo
@pgfearo Ich bin froh, dass meine Ideen hilfreich waren! Aufgrund dessen, was ich sehe, was Sie getan haben, finde ich, dass mir das L & F von rechts nach links besser gefällt. Es tut mir leid, dass ich bis jetzt keine Gelegenheit hatte, mich umzusehen (an einem anstrengenden Wochenende). Da Sie so viele Fortschritte gemacht haben, werde ich nur die Antwort kommentieren, die Sie oben gepostet haben.
28.
@pgfearo Hoppla, ich habe nicht genug Ruf, um deine Antwort zu kommentieren! Ich werde einige Gedanken zu Ihrer Antwort veröffentlichen, sobald ich dieses Privileg erhalte, hoffentlich bald!
28.
3

jGRASP verwendet dazu einen visuellen Marker am Rand:

Bildbeschreibung hier eingeben

Es erkennt sogar, wenn Sie eine Schleife verwenden, und verwendet einen anderen Linientyp, um diese innere Schleife darzustellen.

Ich dachte nur, ich würde darauf hinweisen, wie es ein existierender Editor macht.

Asche
quelle
5
Meiner Meinung nach zu laut, aber trotzdem eine gute Idee.
Konrad Rudolph
Ich habe dies nachgeschlagen und die Site-Dokumentation impliziert, dass der Screenshot von einem Code-Viewer stammt, einem Diagramm, nicht einem Code-Editor. Zugegeben, es gibt keine Füllzeichen, aber es ist immer noch eine eingerückte Ansicht. Ich suche einfache Lösungen, die aus den in der Frage genannten Gründen keine Einrückung des Codes erfordern. JGrasp scheint jedoch ein hervorragendes Tool zur Verbesserung der Codeverständlichkeit zu sein.
pgfearo
JGrasp soll ein Code-Editor an meiner Schule sein, den wir in unserer Einführung in den Informatikunterricht verwendet haben. Es war der empfohlene Code-Editor. Es verfügt über Tools zum Kompilieren und Ausführen Ihres Programms, ist jedoch nicht so ausgefallen wie Eclipse oder Netbeans. Aber es weicht ein wenig von dem ab, was Sie als nicht wirklich allgemeinen Zweck beschrieben haben, und ist sich nur der Syntax von Java wirklich bewusst.
Asche
3

Keine schlechte Idee, aber auf den linken Rand verweisen zu müssen, um meine Blöcke deutlich zu sehen, könnte etwas nervig werden. Dabei geht es nicht einmal um Bildschirmimmobilien oder darum, wie die Dinge aussehen könnten, wenn die Struktur sehr tief wird.

Da die Motivation darin besteht, den Benutzern zu helfen, die Leerzeichen, die sie zum Einrücken verwenden, zu "sehen", können Sie ihnen einfach die Leerzeichen anzeigen.

Ich spreche nicht von speziellen visuellen Zeichen wie Absatzmarken, sondern nur von Hervorhebungen. Leerzeichen in Gelb, Tabulatoren in Grün (oder was auch immer)

Für das Rand- / Verschachtelungsproblem können Sie einfach den Rand für jeden Block verschieben. Es gibt nichts, was besagt, dass der Rand eine gerade Linie sein muss.

Ich bin sicher, das ist keine neue Idee.

Etwas wie das:

Beispiel-XML mit bewegtem linken Rand und hervorgehobenem Leerzeichen

Justin Ohms
quelle
Mit der eingerückten Ansicht soll das Leerzeichen dynamisch aufleuchten, ähnlich wie bei Ihrer Idee. Denken Sie auch daran, dass in einer flachen Ansicht 30 Verschachtelungsebenen den gleichen Platz einnehmen wie 1 Ebene, eingerückt, es wäre außerhalb Ihres Bildschirms, das ist ein Grund, warum Entwicklern die Wahl der Ansichten gegeben wird.
pgfearo
1
Ja, deshalb habe ich gesagt, dass es keine neue Idee ist. Wenn die Ebene des Einzugs jedoch logarithmisch oder dynamisch ist, basierend auf der Ebene, die ich gerade bearbeite, hätten Sie nicht das Problem, über das Sie sprechen. Selbst wenn es nur auf 1 Feld festgelegt wäre, würde es nicht vom Bildschirm verschwinden. Sie wären noch nicht einmal auf halbem Weg über eine alte 80-Zeichen-Anzeige hinweg. Ja, mit einigen dieser Ideen nehmen 30 Ebenen den gleichen Platz ein wie 1 Ebene, aber wenn Sie einige davon betrachten, sparen Sie keinen Platz durch einfaches Einrücken, sie rücken das Ganze einfach ein und fügen einige ausgefallene Grafiken hinzu.
Justin Ohms
Ohm. In der Frage gibt es jetzt einen Abschnitt über Bildschirmimmobilien (dies ist ein Community-Wiki und alles), einschließlich eines Screenshot-Vergleichs. Wenn Sie diesen Abschnitt mit Ihren eigenen Beobachtungen aktualisieren könnten, wäre das großartig. Bitte akzeptieren Sie, dass ich ein großer Fan von eingerückten Ansichten bin (in der XML-Welt und allen anderen). Deshalb habe ich die letzten 6 Monate oder mehr damit verbracht, die Technik für die virtuelle Formatierung zu perfektionieren, bei der die Einrückung vom System verwaltet wird. Wenn es eine Sache gibt, die ich gelernt habe, ist es, dass Entwickler eine Wahl mögen - daher die flache Ansicht.
pgfearo
In der ersten Lesung habe ich Ihre Ideen zu dynamischen Einzugsbreiten übersehen - dies könnte ein leistungsstarkes Feature sein. Es gibt die Möglichkeit, dass sogar Code eingerückt wird, während der Rest flach ist. Wir sind uns nicht sicher, wie dies in der Praxis funktionieren würde, aber es ist einfach zu testen. Bei meinem Projekt wird die Einrückungslogik immer noch aufgerufen, selbst für die flache Ansicht, es ist nur der Multiplikator wird auf 0 gesetzt. Es ist also nur dieser Multiplikator, der angepasst werden muss. Guter Anruf.
pgfearo
2

Warum nicht Klammern öffnen und schließen?

  1. Einrückung bedeutet Einschluss: (und) bedeuten genau das für Programmierer.
  2. (und) sind jeweils ein einzelnes Zeichen: Der linke Balken bleibt sehr dünn.
  3. Leere Elemente lassen sich leicht erkennen: Verwenden Sie () in derselben Zeile.
  4. Der Inhalt eines Elements benötigt keinen visuellen Hinweis: Ein Leerzeichen ist viel besser.
  5. Die Cursorposition auf der rechten Seite kann mit dem enthaltenen Block auf der linken Seite abgeglichen werden: Fügen Sie den Zeichen in der Spalte mit (und) dynamisch eine Farbe hinzu.
  6. Mit <und> können Sie das XML-isch machen, was aus der Ferne besser aussieht.
Ando
quelle
Einige nützliche Ideen - werden versuchen, sie zu integrieren, insbesondere das XML-Bit. Außerdem geht einiges dynamisch vor sich, und ich könnte wahrscheinlich noch etwas hinzufügen - ohne dass es zu anstrengend wird.
pgfearo
2

Vim kann schon etwas Ähnliches, wenn auch nicht ganz so hübsch.

In Vim gibt es verschiedene Möglichkeiten, Code zu falten. Einer von ihnen basiert auf Syntaxfaltregeln. In diesem Fall kann der Code mithilfe einer verschachtelten Gliederungsstruktur gefaltet werden, und die "FoldColumn" kann verwendet werden, um eine grafische (tatsächlich "zeichenbasierte" Darstellung des "Foldlevel" mit "|" und "-" Zeichen zu erhalten. .

Die Fold-Spalte kann unabhängig von der Fold-Methode die Verschachtelungsdarstellung liefern, aber die syntaxbasierte Methode ist wahrscheinlich diejenige, die für das, was Sie wollen, geeignet ist. Ich bin mir nicht sicher, ob es vorgefertigte syntaxbasierte Faltregeln für XML gibt.

Herbert Sitz
quelle
Der Editor, den ich entwerfe, soll in ein viel größeres System mit einer grafischen Benutzeroberfläche integriert werden, in der Vim oder Tools von Drittanbietern aus technischen und lizenzrechtlichen Gründen nicht berücksichtigt werden. Ich bin jedoch daran interessiert, wie Vim dies angeht, und werde dies untersuchen. Hoffentlich enthält die Dokumentation Screenshots. Ja, charakterbasierte Grafiken können bis zu einem gewissen Grad funktionieren - ich habe eine für die Forschung herausgesucht. Das Falzen des Codes kann vom linken Rand aus erfolgen, es wird jedoch auch eine synchronisierte Gliederungsbaumansicht bereitgestellt.
pgfearo
@pgfearo: Vielleicht sehen Sie sich das NetBeans-Protokoll von Vim an. Es soll verwendet werden, um Vim ohne Lizenzprobleme in eine IDE einzubetten.
greyfade
@greyfade - Ich befürchte, es gibt Lizenzprobleme, zumindest bei meinem aktuellen Projekt, da es sich um eine geschlossene Quelle handelt und ich die Funktionalität benötigen würde (auch wenn ich sie nicht verwendet hätte), um die Vim-Quelle ohne GPL-Bedenken zu modifizieren. Abgesehen davon sieht das Protokoll interessant aus.
pgfearo
1

Ich denke, Sie sind mit Option B und C auf dem richtigen Weg: Fügen Sie sowohl die Breite als auch die Heatmap-Farbe hinzu. Ich mag Option B im Moment mehr als C, weil es weniger aufdringlich ist (entweder breit und verdünnt, oder schmal und intensiv, anstatt des sehr schweren Blocks in der Mitte von C). Ein Nachteil ist, dass man das mit dieser Option tun muss Erstellen Sie das gesamte Diagramm neu, wenn Sie irgendwo eine Ebene einfügen. Ich denke man könnte die Blöcke viel kleiner machen, 1 oder 2 px wären wahrscheinlich genug. Es muss nicht viel sein, es muss nur unterscheidbar sein. Insbesondere, wenn erwartet wird, dass die Benutzer den Editor häufig verwenden, ist es einfacher, mit unauffälligen, subtileren Effekten zu arbeiten, da sie nicht so sehr ablenken.

Wenn Sie einen Editor verwenden, ist es wichtig, den aktuellen Bereich hervorzuheben: Wenn Sie eine Zeile im Editor auswählen, müssen Sie genau sehen, welche Elemente darin enthalten sind und wo sie aufhören. Sie können den Baum sogar hervorheben (von welchen Elementen ist er ein Kind). Ich denke, das ist ein separates Thema, das angesprochen und überlegt werden muss und mehr Einfluss darauf haben wird, wie die Benutzer ihre Erfahrungen mit dem Editor bewerten.

Inca
quelle
Ich habe jetzt eine Antwort eingereicht, die meiner Meinung nach mit Ihrer übereinstimmt, aber zufällig mit Ihrer Idee in Verbindung steht, den aktuellen Bereich hervorzuheben (mit einem leuchtenden Rand). Ich bin damit einverstanden, dass die Blöcke weniger aufdringlich sein sollten. Die Effekte sind hier übertrieben dargestellt, um das Zeichnen zu erleichtern. Außerdem werden sie auf einem verkleinerten Screenshot in Ordnung gebracht.
pgfearo
1

Eine Sache, die ich nicht erwähnt habe, ist, was Sie mit dem Farbton zusätzlich zu dem Sättigungseffekt tun können, auf den Sie sich eingestellt zu haben scheinen. Mein Vorschlag ist, die Farbe des Nestes zu ändern, in dem der Zeiger liegt. Dies würde es dem Benutzer erleichtern, zu unterscheiden, welche Linien Teil des Nestes sind, und welche Geschwister sich auf dem Weg dorthin befinden.

Achten Sie beim Implementieren von farbtonbasiertem Material auf Farbenblindheit und wählen Sie entweder Farben aus, die allgemein unterscheidbar sind, oder bieten Sie ein paar Optionen zur Auswahl an.

Phil Miller
quelle
Dies unterstreicht meines Erachtens, dass noch viel getan werden kann, um die Implementierung dieses Musters detaillierter zu gestalten. Ja, ich bin mit der Verwendung von Tönen zufriedener, um Probleme mit der Farberkennung zu vermeiden. Wenn jedoch Optionen verfügbar sind, kann ich dem zustimmen, dass dies dazu beitragen wird, eine zusätzliche Dimension hinzuzufügen. Da es sich bei dieser Frage nun um ein Community-Wiki handelt, werde ich versuchen, ein Drahtmodell einzureichen, um zu prüfen, ob andere Bilder beitragen möchten, bei denen es sich um Variationen des Themas handelt. Die Einstellungen variieren wahrscheinlich je nach Verwendungsklasse, Sprachsyntax und dynamischem Kontext.
pgfearo
0

Eine Möglichkeit, die bisher in Verbindung mit den anderen Vorschlägen verwendet werden könnte, wäre die Verwendung eines Tooltips am linken Rand, der den Pfad zur Linie in XPath-Notation anzeigt. Browser-Tools zum Überprüfen von Elementen (z. B. Firebug, das in Chrome integrierte Tool) führen häufig ähnliche Aktionen aus, jedoch in einer Statusleiste.

Peter Taylor
quelle
Ich habe mich nur auf dieses Steuerelement konzentriert, aber eine 'XPath-Adressleiste' mit 'Breadcrumb'-Navigator funktioniert und ist in den Editor integriert, ebenso wie eine synchronisierte Elementbaumansicht.
pgfearo
0

Möglicherweise könnten Sie eine komprimierte Ansicht für die Heatmap (aus dem ursprünglichen Beitrag) mit nur einer Farbspalte und den Tiefenzahlen haben. Dies würde es ihnen ermöglichen, zu wissen, wie tief sie sind, und ihnen mehr Platz auf dem Bildschirm für die XML-Datei geben. Scheint mir ein Gewinn zu sein.

Ich mache mir Sorgen, ob es genügend Farbunterschiede gibt, um die Dinge tief zu verschachteln.

Mattimus
quelle
Die Unterstützung hoher Verschachtelungsebenen hat Priorität. Aber es gibt immer nur so viel, was das Auge sehen muss (und aufnehmen kann). Ab einer bestimmten Ebene überlege ich mir, Farben zu mischen, um nur einen Eindruck von Tiefe zu vermitteln und nur hervorgehobene Schlüsselebenen. Ich werde Ihre Idee prüfen, wenn die Verschachtelungsstufen hoch sind.
pgfearo