W jaki sposób edytor kodu może skutecznie sugerować na poziomie zagnieżdżania kodu - bez użycia wcięć? [Zamknięte]

233

Napisałem edytor tekstowy XML, który oferuje 2 opcje widoku dla tego samego tekstu XML, jeden wcięty (praktycznie), drugi wyrównany do lewej. Motywacja dla widoku z wyrównaniem do lewej strony ma pomóc użytkownikom „zobaczyć” znaki białych znaków, których używają do wcięcia tekstu jawnego lub kodu XPath bez ingerencji w wcięcie, które jest automatycznym efektem ubocznym kontekstu XML.

Chcę podać wskazówki wizualne (w nieedytowalnej części edytora) dla trybu wyrównanego do lewej, który pomoże użytkownikowi, ale nie będzie zbyt skomplikowany.

Próbowałem po prostu użyć linii łączących, ale wydawało mi się to zbyt zajęte. Najlepsze, jakie do tej pory wymyśliłem, jest pokazane na fałszywym zrzucie ekranu edytora poniżej, ale szukam lepszych / prostszych alternatyw (które nie wymagają zbyt dużego kodu).

edytor kodów wskazujący poziom zagnieżdżenia

[Edytować]

Biorąc pomysł Heatmap (z: @jimp) otrzymuję to i 3 alternatywy - oznaczone jako a, b i c:

Wstępne pomysły

W poniższej sekcji opisano zaakceptowaną odpowiedź jako propozycję, łącząc pomysły z wielu innych odpowiedzi i komentarzy. Ponieważ to pytanie jest teraz wiki społeczności, prosimy o aktualizację.


NestView

Nazwa tego pomysłu, który zapewnia wizualną metodę poprawy czytelności zagnieżdżonego kodu bez użycia wcięć.

Linie konturowe

Nazwa różnie zacienionych linii w NestView

wprowadź opis zdjęcia tutaj

Powyższy obraz pokazuje NestView używany do wizualizacji fragmentu kodu XML. Chociaż do tej ilustracji użyto XML, w tej ilustracji można by zastosować inną składnię kodu, która wykorzystuje zagnieżdżanie.

Przegląd:

  1. Linie konturu są zacienione (jak w mapie termicznej), aby przenieść poziom zagnieżdżenia

  2. Linie konturu są ustawione pod kątem, aby pokazać, kiedy poziom zagnieżdżenia jest otwierany lub zamykany.

  3. Linia konturu łączy początek poziomu zagnieżdżenia z odpowiednim końcem.

  4. Połączona szerokość linii konturu daje wizualne wrażenie poziomu zagnieżdżenia, oprócz mapy cieplnej.

  5. Szerokość NestView może być ręcznie zmieniana, ale nie powinna się zmieniać wraz ze zmianą kodu. Linie konturu można kompresować lub obcinać, aby zachować ten efekt.

  6. Puste wiersze są czasem używane w kodzie do dzielenia tekstu na bardziej przyswajalne fragmenty. Takie linie mogą wyzwalać specjalne zachowanie w NestView. Na przykład mapa termiczna może zostać zresetowana, może zostać użyta linia konturu koloru tła lub jedno i drugie.

  7. Można zaznaczyć jedną lub więcej linii konturu związanych z aktualnie wybranym kodem. Linia konturowa powiązana z wybranym poziomem kodu zostałaby najbardziej podkreślona, ​​ale inne linie konturowe mogłyby również „świecić” dodatkowo, aby pomóc podświetlić zawierającą zagnieżdżoną grupę

  8. Różne zachowania (takie jak zwijanie kodu lub wybór kodu) mogą być powiązane z klikaniem / podwójnym klikaniem linii konturu.

  9. Różne części linii konturu (krawędź wiodąca, środkowa lub końcowa) mogą mieć różne zachowania dynamiczne.

  10. Podpowiedzi mogą być pokazywane podczas najechania kursorem myszy na linię konturu

  11. NestView jest aktualizowany w sposób ciągły podczas edycji kodu. Tam, gdzie zagnieżdżanie nie jest dobrze wyważone, można przyjąć założenia, gdzie powinien się kończyć poziom zagnieżdżenia, ale powiązane tymczasowe linie konturu muszą być w jakiś sposób podświetlone jako ostrzeżenie.

  12. Zachowanie przeciągania i upuszczania linii konturowych może być obsługiwane. Zachowanie może się różnić w zależności od części przeciąganej linii konturu.

  13. Funkcje powszechnie spotykane na lewym marginesie, takie jak numeracja linii i wyróżnianie kolorów pod kątem błędów i stanu zmiany, mogą nakładać się na NestView.

Dodatkowa funkcjonalność

Wniosek dotyczy szeregu dodatkowych kwestii - wiele z nich nie wchodzi w zakres pierwotnego pytania, ale jest użytecznym efektem ubocznym.

Łączenie wizualne początku i końca zagnieżdżonego regionu

Linie konturowe łączą początek i koniec każdego zagnieżdżonego poziomu

Podświetlanie kontekstu aktualnie wybranej linii

Po wybraniu kodu można podświetlić powiązany poziom gniazda w NestView

Rozróżnianie regionów kodu na tym samym poziomie zagnieżdżenia

W przypadku XML można zastosować różne odcienie dla różnych przestrzeni nazw. Języki programowania (takie jak c #) obsługują nazwane regiony, których można użyć w podobny sposób.

Dzielenie obszarów w obszarze zagnieżdżenia na różne bloki wizualne

Dodatkowe wiersze są często wstawiane do kodu, aby poprawić czytelność. Takich pustych linii można użyć do zresetowania poziomu nasycenia linii konturowych NestView.

Widok kodu wielokolumnowego

Kod bez wcięcia sprawia, że ​​użycie widoku wielokolumnowego jest bardziej skuteczne, ponieważ zawijanie słów lub przewijanie w poziomie jest mniej prawdopodobne. W tym widoku, gdy kod osiągnie dolną część jednej kolumny, przechodzi do następnej:

wprowadź opis zdjęcia tutaj

Wykorzystanie wykraczające poza zwykłą pomoc wizualną

Jak zaproponowano w przeglądzie, NestView może zapewnić szereg funkcji edycji i wyboru, które byłyby zasadniczo zgodne z oczekiwaniami względem kontrolki TreeView. Kluczową różnicą jest to, że typowy węzeł TreeView ma 2 części: ekspander i ikonę węzła. Linia konturowa NestView może składać się z 3 części: otwieracza (nachylenie), łącznika (pion) i zamknięcia (nachylenie).


Wgłębienie

NestView prezentowany wraz z kodem bez wcięcia uzupełnia, ale raczej nie zastąpi konwencjonalnego widoku kodu z wcięciem.

Jest prawdopodobne, że wszelkie rozwiązania przyjmujące NestView zapewnią metodę płynnego przełączania między widokami kodu z wcięciem i bez wcięcia bez wpływu na sam tekst kodu - w tym na białe znaki. Jedną z technik dla wcięcia jest „Formatowanie wirtualne” - gdzie zamiast znaków tabulacji lub spacji stosuje się dynamiczny lewy margines. Te same dane na poziomie zagnieżdżenia użyte do dynamicznego renderowania NestView mogą być również wykorzystane do bardziej konwencjonalnego widoku wcięcia.

Druk

Wcięcie będzie ważne dla czytelności drukowanego kodu. W tym przypadku brak znaków tabulacji / spacji i dynamicznego lewego marginesu oznacza, że ​​tekst może się zawijać na prawym marginesie i nadal zachowywać integralność wcięcia. Numery linii mogą być używane jako wizualne znaczniki wskazujące miejsce, w którym kod jest zawijany, a także dokładne położenie wcięcia:

wprowadź opis zdjęcia tutaj

Nieruchomość ekranowa: wcięcie Flat Vs

Odpowiedź na pytanie, czy NestView wykorzystuje cenne nieruchomości ekranowe:

Linie konturu działają dobrze z szerokością taką samą, jak szerokość znaków edytora kodu. Dlatego NestView o szerokości 12 znaków może pomieścić 12 poziomów zagnieżdżenia, zanim linie konturu zostaną obcięte / skompresowane.

Jeśli wcięty widok używa 3 szerokości znaków dla każdego poziomu zagnieżdżenia, wówczas przestrzeń jest oszczędzana, aż zagnieżdżenie osiągnie 4 poziomy zagnieżdżenia, po tym poziomie zagnieżdżenia płaski widok ma zaletę oszczędzania miejsca, która wzrasta z każdym poziomem zagnieżdżenia.

Uwaga: W przypadku kodu często zalecane jest minimalne wcięcie o szerokości 4 znaków, jednak XML często radzi sobie z mniejszą liczbą znaków. Ponadto formatowanie wirtualne pozwala na stosowanie mniej wcięć, ponieważ nie ma ryzyka problemów z wyrównaniem

Porównanie 2 widoków pokazano poniżej:

wprowadź opis zdjęcia tutaj

W związku z powyższym należy prawdopodobnie stwierdzić, że wybór stylu widoku będzie oparty na czynnikach innych niż nieruchomości ekranowe. Jedynym wyjątkiem jest sytuacja, w której przestrzeń ekranu jest na wagę złota, na przykład na netbooku / tablecie lub gdy otwartych jest wiele okien kodu. W takich przypadkach NestView, którego rozmiar można zmienić, wydaje się wyraźnym zwycięzcą.

Przypadków użycia

Przykłady rzeczywistych przykładów, w których NestView może być przydatną opcją:

  1. Gdzie nieruchomości ekranowe są na wagę złota

    za. Na urządzeniach takich jak tablety, notatniki i smartfony

    b. Podczas wyświetlania kodu na stronach internetowych

    do. Gdy wiele okien kodu musi być jednocześnie widocznych na pulpicie

  2. Tam, gdzie spójne wcięcie białych znaków w kodzie jest priorytetem

  3. Do przeglądania głęboko zagnieżdżonego kodu. Na przykład, gdy podjęzyki (np. Linq w C # lub XPath w XSLT) mogą powodować wysokie poziomy zagnieżdżania.

Dostępność

Należy zapewnić opcje zmiany rozmiaru i koloru, aby pomóc osobom z wadami wzroku, a także by dostosować się do warunków otoczenia i osobistych preferencji:

wprowadź opis zdjęcia tutaj

Kompatybilność edytowanego kodu z innymi systemami

Rozwiązanie zawierające opcję NestView powinno idealnie być w stanie usunąć wiodące znaki tabulacji i spacji (zidentyfikowane jako mające tylko rolę formatującą) z importowanego kodu. Następnie, po usunięciu kodu, można go bez problemu renderować zarówno w widokach wyrównanych do lewej, jak i wcięciach. Dla wielu użytkowników polegających na systemach takich jak narzędzia do łączenia i porównywania, które nie są świadome białych znaków, będzie to poważny problem (jeśli nie kompletny program zatrzymujący wyświetlanie).


Inne prace:

Wizualizacja nakładających się znaczników

Opublikowane badania Wendella Pieza , datowane na rok 2004, dotyczą problemu wizualizacji nakładających się znaczników, w szczególności LMNL . Obejmuje to grafikę SVG o znacznych podobieństwach do propozycji NestView, dlatego są one tutaj potwierdzane.

Różnice wizualne są wyraźne na obrazach (poniżej), kluczowe rozróżnienie funkcjonalne polega na tym, że NestView jest przeznaczony tylko dla dobrze zagnieżdżonego XML lub kodu, podczas gdy grafika Wendell Piez jest zaprojektowana tak, aby reprezentować nakładające się zagnieżdżenie.

wprowadź opis zdjęcia tutaj

Powyższe grafiki zostały odtworzone - za uprzejmym pozwoleniem - z http://www.piez.org

Źródła:

  1. Ku Hermenutic Markup
  2. Pół kroku w kierunku LMNL
pgfearo
źródło
6
Nie mam dla ciebie prawdziwej odpowiedzi, tylko opinię. Patrząc na twoje przykłady, B jest moim preferowanym wyborem. Wyróżnia się dla mnie, ponieważ „mapa cieplna” faktycznie podąża za wcięciem, zamiast odzwierciedlać ją jak w pierwszym przykładzie i C. A również następuje po faktycznym wcięciu, ale B bardziej przypomina to, co zobaczysz, gdy rzeczywiste xml zostanie wcięte. Drugi przykład jest po prostu zbyt „solidny” dla moich upodobań.
Marjan Venema
4
Sam wolałbym kod wcięty. Nie wiesz, jaka byłaby z tego korzyść? Czy brakuje mi czegoś oczywistego? (Naprawdę nie zamierzam, aby to zabrzmiało negatywnie.)
Chris
9
Nie rozumiem, w jaki sposób zwiększenie marży na 100% linii jest lepsze niż tylko tyle marży, ile potrzebuje każda linia.
John Gietzen
1
@John Gietzen. Celem nie jest zapisywanie nieruchomości na ekranie (choć może to być efekt w wielu przypadkach). Ma to na celu ściślejszą kontrolę nad białymi znakami, gdy jest to ważne - nadal będzie dostępny wcięty widok (ale wirtualny, bez użycia znaków dopełniających).
pgfearo
3
Głosuję za zamknięciem tego pytania jako nie na temat, ponieważ jest to pytanie UX, ale jest ono zbyt stare, aby przeprowadzić migrację.
maniak zapadkowy

Odpowiedzi:

104

Próbowałem tutaj odpowiedzieć na własne pytanie, ale zawiera on pomysł mapy cieplnej z @jimp, a także pomysł „zrób to bardziej XML” z @Andrea:

wprowadź opis zdjęcia tutaj

Mamy nadzieję, że kolory na mapie ciepła wraz z liniami kątowymi pomagają przyciągnąć uwagę między znacznikami początkowym i końcowym; usunięcie poziomych separatorów linii poprawia „przepływ” od początku do końca. Gdy użytkownik wybiera za pomocą elementu, pasującą część na mapie ciepła można w jakiś sposób wyróżnić - być może świecącą ramką (jak pokazano).

Edytuj Zdecydowałem się pójść z tym, prawdopodobnie będą musiały być opcje użytkownika dla kolorów. Zrzut ekranu „gotowy do produkcji”:

wprowadź opis zdjęcia tutaj

I dla porównania ... alternatywny widok wcięcia:

wprowadź opis zdjęcia tutaj

Edytuj teraz, dla bardziej zagnieżdżonego przypadku - testowanie moich umiejętności rysowania ...

wprowadź opis zdjęcia tutaj

pgfearo
źródło
1
Wygląda świetnie ! Dobra robota. Ale jak to będzie wyglądać, gdy będzie więcej wcięć?
Loïc Lopes,
1
@Louhike Thanks! Tak, jest maksymalny na 4 poziomach i nie chcę rozciągać lewego marginesu o więcej - więc będę kompresował szerokość pionowych pasków coraz bardziej na wyższych poziomach zagnieżdżania - trochę jak mapa konturowa.
pgfearo
2
@Louhike. Dodałem dodatkowy obraz, aby pokazać, jak może wyglądać sytuacja z 9 poziomami zagnieżdżenia - po około 15 poziomach prawdopodobnie konieczne będzie scalenie środkowych pasków, być może przy użyciu wypełnienia gradientowego.
pgfearo
10
To jest po prostu niesamowite. +1 za przeniesienie edycji kodu i interfejsu użytkownika na wyższy poziom. Ktoś z kontem powinien opublikować to w Hacker News /.lub r / programowanie.
Konrad Rudolph
2
Zastanawiałem się, jak by to wyglądało z odchylonym w
chanux
24

Jednym z pomysłów może być próba dodania 3D do tekstu. Zwiększ / zmniejsz rozmiar czcionki w zależności od poziomu.

Na przykład ten kod:

wprowadź opis zdjęcia tutaj

Wyglądałby tak:

wprowadź opis zdjęcia tutaj

Praca z tym może być denerwująca, ponieważ traci ustalone wyrównanie rozmiaru tekstu na różnych poziomach. Inny pomysł; zmień nasycenie każdego poziomu:

wprowadź opis zdjęcia tutaj

Jak dobrze to wytrzymuje coś naprawdę głębokiego? Niepewny...

Bardzo podoba mi się twój pomysł wizualizacji rynny; łatwo jest grupować rzeczy razem. Może w połączeniu z jednym z tych pomysłów będzie wyglądał jeszcze lepiej lub znacznie bardziej crappier. ;)


Jakiś czas temu zrobiłem mapę termiczną pokazującą zakres w C. Może być fajnie patrzeć na burzę mózgów:

wprowadź opis zdjęcia tutaj

Wyrównany do lewej:

wprowadź opis zdjęcia tutaj

Dave Gallagher
źródło
2
Kusi, aby zrobić coś z tekstem, ale trudno to zrobić bez rozpraszania programisty podczas pisania lub tuż po nim. Zmiany, które wpływają na wysokość czcionki, powodują problemy - być może tolerujemy patrzenie, jak nasz kod przesuwa się w górę i w dół nawet mniej niż na boki. Podoba mi się twój pomysł cieniowania kodu, ale musiałoby to być subtelne, ponieważ chcę zachować porządek.
pgfearo
2
ale byłoby to idealne do środowisk nauczania!
jcolebrand
Sugerowana wielkość czcionki jest dziwnie atrakcyjna - widzę jednak jej wady. Dlaczego nie zmniejszyć czcionki, ponieważ zakres jest głębiej zagnieżdżony - pomogłoby to zniechęcić do głębokiego zagnieżdżania (chociaż spowodowałoby problemy, w których głębokie zagnieżdżanie jest właściwie rozsądnym rozwiązaniem)
Peter
2
mapa termiczna jest znacznie lepsza w wizualizacji zakresu niż wizualizacja zakresu wyrównanego do lewej (rozwiązanie @ pfgearo)
Sandeep
@ Sandeep. Zgadzam się, że w wielu przypadkach jest to lepsze rozwiązanie - zwłaszcza podczas przeglądania kodu, a nie jego edycji. Ograniczenia techniczne (jak mam nadzieję wyjaśnione w pytaniu) utrudniają mi modyfikację koloru tła za pomocą bieżącej kontrolki, której używam. W tej odpowiedzi skutecznie wykorzystałem lewą stronę mapy termicznej - ale z krawędziami nachylonymi w kierunku edytowanego obszaru, aby pomóc przyciągnąć uwagę. Jednym z problemów z kolorowym tłem tekstowym jest utrata czytelności / kontrastu przy wyższej poziomy zagnieżdżenia.
pgfearo
21

Po prostu popraw swój oryginalny pomysł i przełącz się z kwadratów na kapsułki. Myślę, że te wersje (w tym oryginalna) są łatwiejsze do odczytania, ponieważ są mniej złożone niż ta, która pokazuje zagnieżdżanie poprzez zagnieżdżanie elementów wyświetlanych. Myślę, że elementy drzewa przekazują informacje w prostszy i bardziej intuicyjny sposób.

kapsułki

Myślę, że lewica jest świetna do bezpośredniego pokazania wcięcia, podczas gdy prawica jest lepsza w przekazywaniu zagnieżdżonego związku.

Jeremy Giberson
źródło
2
Wolę miękkość twoich kapsułek, choć wydają się zbyt oderwane od tekstu, potrzebuję czegoś bardziej spójnego i dającego wyraźniejszy obraz tego, co zawierają części.
pgfearo
9

Mój pomysł:

Zagnieżdżanie wygląda bardziej jak zagnieżdżanie. Pozioma szerokość każdej warstwy nie musi być tak szeroka.

broc7
źródło
Myślę, że to, co proponujesz, jest zasadniczo takie samo jak odpowiedź (zainspirowana przez innych), którą dałem, ale bez nachylonych linii. Myślę, że pochyłe linie pomagają lepiej przyciągać wzrok między otwarciem a zamknięciem. Szerokość nie jest prawdziwym problemem, ponieważ (jak pokazano na 9-poziomowym obrazie) szerokość linii pionowej jest niezależna od szerokości linii pochyłej, więc linie pionowe można kompresować.
pgfearo
Tak, pg- zauważyłem to po opublikowaniu. Są topograficznie identyczne - żeby się o tym przekonać. Przypuszczam, że to kwestia gustu, ale moja wersja po prostu krzyczy „zagnieżdżanie” mnie w sposób, w jaki Twoja wersja nie. Być może ta funkcja może korzystać z obu funkcji i pozwolić użytkownikowi na wybór.
broc7
8

Uwielbiam ten pomysł. Moją sugestią, aby utrzymać „zajęty” na dole, byłoby użycie gradientów zamiast kwadratów. Zmniejszy to linie. Być może różne kolory dla skrajnego wcięcia.

Powiedziałbym, że wszystko, co masz, jest świetne, choć trochę blokujące jak na mój gust.

Moje komentarze: Ciągle zmagam się ze sposobem, w jaki Visual Studio IDE robi wcięcia. Chciałbym użyć czegoś takiego lub tej odmiany.

Wyobraź sobie więc ten link bez linii i zgodny z bieżącym kodem xml /.

Gauthier
źródło
Tak, pomysły wciąż ewoluują. Obrazy w odpowiedzi, którą przedłożyłem (a nie moje pytanie), są mniej blokowe, ponieważ mają nachylenie początkowe / końcowe, rozważam użycie gradientów (ale nieco inaczej) również do nieco stonowania. Jestem z tobą w różnych kolorach, dla wysokiego wcięcia, ale także, aby podkreślić takie rzeczy, jak komentarze lub błędy. A potem jest dynamiczne podświetlanie, aby pokazać bieżący kontekst / debugowanie ... trudność będzie polegać na ocenie, kiedy przestać.
pgfearo
5

Ponieważ powiedziałeś, że wizualizacja musi istnieć na marginesie nieedytowalnym (po lewej?), Uważam, że oznacza to, że wizualizacji nie można przeplatać ani kryć za kodem.

Być może mapa ciepła w lewej kolumnie z jaśniejszymi kolorami wskazującymi głębsze wcięcia? Ustaw margines na stały rozmiar, z wizualizacją taką, jaką masz (spodziewaj się przejścia od lewej do prawej tak, jak zrobiłoby to wcięcie), która dynamicznie wykorzystuje całą podaną przestrzeń zgodnie z maksymalnym wcięciem określonym przez głębokość DOM.

Jeśli chciałbyś przejść do regionu edytora, sugerowałbym coś bardzo podobnego, ale jako tło dokumentu. Zacieniony obszar byłby tam, gdzie byłyby białe znaki , gdyby włączono wcięcia. W tym przypadku użyłbym jednolitego, jasnego koloru, który kontrastuje z podświetlaniem tekstu.

jimp
źródło
@jimp Tak, wizualizacja nie może być z kodem ani za nim - tak bardzo, jak bardzo chciałbym tego spróbować, moje umiejętności / platforma kodowania sprawiłyby, że byłoby to zbyt skomplikowane. Kolory tła w samym edytorze są znowu trudne, ale to daje mi pomysł, że mogę wypróbować różne odcienie kolorów na pierwszym planie. Wypróbuję pasek od lewej do prawej i mapę cieplną, tak jak sugerujesz.
pgfearo
+1 za pomysł mapy ciepła (Y) .. i mogę zasugerować, aby poziom zagnieżdżenia był w kolorze dla osób ze specjalnymi potrzebami wizualnymi (np. Ślepota na kolory).
M.Sameer,
@jimp. Zaktualizowany moje pytanie zilustrować swój pomysł termiczna, która mi się podoba, ale myślę, że mam lewy-prawy coś złego ...
pgfearo
@pgfearo Cieszę się, że moje pomysły były pomocne! W oparciu o to, co zrobiłeś, myślę, że bardziej podoba mi się L&F od prawej do lewej. Przepraszam, że nie miałem okazji sprawdzić wcześniej (pracowity weekend). Ponieważ poczyniłeś tak duże postępy, skomentuję odpowiedź, którą zamieściłeś powyżej.
jimp
@pgfearo Ups, nie mam wystarczającej reputacji, aby skomentować twoją odpowiedź! Opublikuję kilka przemyśleń na temat twojej odpowiedzi, kiedy zdobędę ten przywilej, mam nadzieję, że wkrótce!
jimp
3

jGRASP robi to za pomocą markera wizualnego na marginesie:

wprowadź opis zdjęcia tutaj

Rozpoznaje nawet, kiedy używasz pętli i używa innego rodzaju linii do reprezentowania tej wewnętrznej pętli.

Pomyślałem, że zwrócę uwagę na to, jak robi to istniejący edytor.

popiołu
źródło
5
Moim zdaniem zbyt głośny, ale nadal dobry pomysł.
Konrad Rudolph
Sprawdziłem to, a dokumentacja witryny sugeruje, że zrzut ekranu pochodzi z przeglądarki kodu, jest to diagram, a nie edytor kodu. Oczywiście nie ma znaków wypełniających, ale nadal jest to wcięcie. Szukam prostych rozwiązań, które nie wymagałyby wcięcia kodu, z powodów podanych w pytaniu. To powiedziawszy, JGrasp wygląda jak doskonałe narzędzie do poprawy zrozumiałości kodu.
pgfearo
JGrasp ma być edytorem kodu w mojej szkole, którego użyliśmy w naszym wprowadzeniu do zajęć z informatyki, był to zalecany edytor kodu. Ma narzędzia pomagające w kompilacji i uruchomieniu programu, ale nie jest tak fantazyjne jak Eclipse czy Netbeans. Ale to nieco odbiega od tego, co opisałeś jako niezbyt ogólny cel i jest naprawdę świadomy składni języka Java.
popiół
3

Nie jest to zły pomysł, ale konieczność odniesienia się do lewego marginesu, aby wyraźnie zobaczyć, że moje bloki mogą być trochę denerwujące. To nawet nie myśli o nieruchomościach ekranowych ani o tym, jak mogą wyglądać rzeczy, gdy struktura się bardzo zagłębi.

Ponieważ motywacją jest pomóc użytkownikom „zobaczyć” białe znaki, których używają do wcięcia, możesz po prostu pokazać im białe znaki.

Nie mówię o specjalnych znakach wizualnych, takich jak znaczniki akapitów, tylko wyróżnienia. Spacje w kolorze żółtym, tabulatory w kolorze zielonym (lub cokolwiek innego)

W przypadku problemu z marginesem / zagnieżdżeniem można po prostu przesunąć margines dla każdego bloku. Nic nie mówi, że margines musi być linią prostą.

Jestem pewien, że to nie jest nowy pomysł.

Coś takiego:

próbka xml pokazująca ruchy lewego marginesu i podświetlone białe znaki

Justin Ohms
źródło
W widoku wcięcia plan polega na dynamicznym podświetlaniu białych znaków, podobnie jak w Twoim pomyśle. Pamiętaj też, że w płaskim widoku 30 poziomów zagnieżdżania zajmuje tyle samo miejsca co 1 poziom, wcięcie byłoby poza krawędzią ekranu, to jeden z powodów, dla których programiści mają wybór widoków.
pgfearo,
1
Tak, dlatego powiedziałem, że to nie był nowy pomysł. Jednak jeśli poziom wcięcia jest logarytmiczny lub dynamiczny w oparciu o poziom, który aktualnie edytuję, nie miałbyś problemu, o którym mówisz. Nawet jeśli byłby po prostu naprawiony na 1 miejscu, nie byłby poza ekranem. Nie byłbyś nawet w połowie drogi nawet do starego 80-znakowego wyświetlacza. Tak, z niektórymi z tych pomysłów 30 poziomów zajmuje tyle samo miejsca co 1 poziom, ale kiedy spojrzysz na niektóre z nich, nie oszczędzasz miejsca na samym wcięciu, po prostu wcięcia i dodają fantazyjną grafikę.
Justin Ohms
Ohmy W pytaniu jest teraz sekcja na temat nieruchomości na ekranie (jest to wiki społeczności i wszystkie), w tym porównanie zrzutów ekranu. Gdybyś mógł zaktualizować tę sekcję własnymi spostrzeżeniami, byłoby świetnie. Zaakceptuj, że jestem wielkim fanem widoków z wcięciami (pracuję w świecie XML i wszystkim), dlatego ostatnie 6 miesięcy lub więcej doskonaliłem technikę wirtualnego formatowania, w której wcięcie jest zarządzane przez system. Jeśli jest jedna rzecz, której się nauczyłem, to, że programiści lubią wybór - stąd płaski widok.
pgfearo
Przy pierwszym czytaniu brakowało mi twoich pomysłów na dynamiczne szerokości wcięć - może to być potężna funkcja. Zwiększa to nawet możliwość wcięcia kodu, podczas gdy reszta jest płaska, nie jestem pewien, jak to by działało w praktyce, ale można go łatwo przetestować - w moim projekcie logika wcięcia jest nadal wywoływana nawet dla widoku płaskiego, tyle że mnożnik jest ustawiony na 0. Więc to tylko ten mnożnik, który wymaga dostosowania. Dobra decyzja.
pgfearo,
2

Dlaczego nie otwierać i zamykać nawiasów?

  1. Wcięcie oznacza ograniczenie: (i) oznacza dokładnie to dla programistów.
  2. (i) są pojedynczymi znakami: lewy pasek pozostanie bardzo cienki.
  3. Puste elementy można łatwo dostrzec: użyj () w tym samym wierszu.
  4. Zawartość elementu nie wymaga wizualnej wskazówki: puste miejsce jest znacznie lepsze.
  5. Pozycja kursora po prawej stronie może być dopasowana do bloku zawierającego po lewej stronie: dynamicznie dodaj kolor do znaków w kolumnie za pomocą (i)
  6. Możesz uczynić go bardziej XML-owym, używając <i>, które wyglądają lepiej z dystansu.
Ando
źródło
Kilka przydatnych pomysłów - spróbuję je włączyć, szczególnie bit XML. Poza tym dzieje się coś dynamicznego i prawdopodobnie mógłbym dodać coś więcej - bez nadmiernego narzucania się.
pgfearo
2

Vim może już zrobić coś podobnego, choć nie tak ładnie.

Istnieją różne sposoby wykonywania „zwijania kodu” w Vimie. Jedna z nich oparta jest na regułach składania składni. Po wykonaniu tej czynności kod można złożyć za pomocą zagnieżdżonej struktury konspektu, a „FoldColumn” można wykorzystać do przedstawienia graficznej (w rzeczywistości „opartej na znakach” z „|” i „-” znakami) „foldlevel” .

Kolumna foldowa może przedstawiać reprezentację zagnieżdżania niezależnie od metody fold, ale metoda oparta na składni jest prawdopodobnie taka, która byłaby odpowiednia do tego, czego chcesz. Nie jestem pewien, czy istnieją gdzieś gotowe reguły składania oparte na składni dla xml, chyba tak.

Herbert Sitz
źródło
Edytor, który projektuję, ma zostać zintegrowany z dużo większym systemem z graficznym interfejsem użytkownika, w którym Vim lub jakiekolwiek narzędzie innej firmy nie jest brane pod uwagę ze względów technicznych i licencyjnych. Interesuje mnie jednak sposób, w jaki Vim sobie z tym radzi, więc to zbadam - mam nadzieję, że mają zrzuty ekranu w dokumentacji. Tak, grafika oparta na postaciach może do pewnego stopnia działać - wyśmiewałem ją do badań. Składanie kodu można wykonać z lewego marginesu, ale zapewniono również zsynchronizowany widok drzewa konspektu.
pgfearo
@pgfearo: Możesz spojrzeć na protokół NetBeans Vima. Ma on służyć do osadzania Vima w środowisku IDE, bez żadnych problemów z licencjonowaniem.
greyfade
@greyfade - Obawiam się, że istnieją problemy z licencjonowaniem, przynajmniej w moim obecnym projekcie, ponieważ jego zamknięte źródło i potrzebowałbym ułatwienia (nawet jeśli go nie użyłem), aby zmodyfikować źródło Vima bez obaw o licencję GPL. Poza tym protokół wygląda interesująco.
pgfearo
1

Myślę, że jesteś na dobrej drodze z opcjami B i C: uwzględnij zarówno szerokość, jak i kolorystykę mapy cieplnej. W tej chwili podoba mi się opcja B bardziej niż C, ponieważ jest mniej ingerująca (albo szeroka i rozcieńczona, albo wąska i intensywna, a nie bardzo ciężki blok w środku C). Jedną wadą jest to, że z tą opcją musisz odbuduj cały wykres, jeśli gdzieś wstawisz poziom. Myślę, że możesz zmniejszyć bloki, prawdopodobnie wystarczy 1 lub 2 piksele. Nie musi to być wiele, wystarczy je odróżnić. Zwłaszcza, gdy ludzie mają wiele razy korzystać z edytora, dyskretne, bardziej subtelne efekty są łatwiejsze w obsłudze, ponieważ nie rozpraszają tak bardzo.

Jedną z rzeczy, która jest ważna podczas korzystania z edytora rodzajów, jest podkreślenie bieżącego zakresu: wybierając linię w edytorze, musisz dokładnie zobaczyć, jakie elementy zawiera i gdzie się kończy. Możesz nawet podświetlić drzewo (z jakich elementów jest ono potomkiem). Myślę, że to osobny problem, który wymaga rozwiązania i przemyślenia, i będzie miał większy wpływ na to, jak użytkownicy ocenią swoje wrażenia z pracy z edytorem.

Inka
źródło
Przedłożyłem odpowiedź, która moim zdaniem skrzyżowała się z twoją, ale przypadkowo wiąże się z twoim pomysłem podkreślenia obecnego zakresu (ze świecącą ramką) ?. Zgadzam się, że bloki powinny być mniej natrętne, efekty są tutaj przesadzone, aby pomóc w moim rysowaniu, a także, aby renderowały się dobrze na zmniejszonym zrzucie ekranu.
pgfearo
1

Jednej rzeczy, o której nie wspomniałem, to to, co możesz zrobić z odcieniem oprócz efektu nasycenia, na którym się wydajesz. Moją sugestią jest zmiana koloru gniazda, w którym znajduje się wskaźnik. Ułatwi to użytkownikowi rozróżnienie, które linie są częścią gniazda, w porównaniu z rodzeństwem po drodze.

Wdrażając rzeczy oparte na odcieniach, należy pamiętać o ślepocie kolorów i albo wybrać kolory, które są powszechnie rozpoznawalne, albo zaoferować kilka opcji do wyboru.

Phil Miller
źródło
Wydaje mi się, że to podkreśla, że ​​można jeszcze wiele zrobić, aby dodać szczegóły do ​​wdrożenia tego wzorca. Tak, wygodniej jest mi używać tonów, aby uniknąć problemów z rozpoznawaniem kolorów, ale pod warunkiem, że dostępne są opcje, zgadzam się, że pomoże to dodać dodatkowy wymiar. Ponieważ to pytanie jest teraz wiki społeczności, spróbuję przesłać szkielet, aby sprawdzić, czy inni chcą udostępniać obrazy będące odmianami motywu - preferencje prawdopodobnie będą się różnić w zależności od różnych klas użytkowania, składni języka i kontekstu dynamicznego.
pgfearo
0

Jedną z opcji, która mogłaby być użyta w połączeniu z innymi dotychczasowymi sugestiami, byłoby użycie podpowiedzi na lewym marginesie, która pokazuje ścieżkę do linii za pomocą notacji XPath. Narzędzia „sprawdzające element” przeglądarki (np. Firebug, ten wbudowany w Chrome) często robią coś podobnego, ale na pasku stanu.

Peter Taylor
źródło
Właśnie koncentrowałem się na tej kontrolce, ale „Pasek lokalizacji XPath” z nawigatorem „breadcrumb” działa i jest włączony do edytora, podobnie jak widok drzewa elementów zsynchronizowanych.
pgfearo
0

Możliwe, że możesz mieć zwinięty widok mapy termicznej (z oryginalnego postu) z tylko jedną kolumną kolorów i liczbami głębokości. To pozwoliłoby im dowiedzieć się, jak głębokie są i dać im więcej nieruchomości na ekranie dla xml. Wydaje mi się, że wygrana wygrana.

Martwię się, czy różnice w kolorach będą wystarczające, aby głęboko zagnieżdżać rzeczy.

mattimus
źródło
Wsparcie dla wysokiego poziomu zagnieżdżania jest priorytetem. Ale jest tylko tyle rzeczy, które oko musi zobaczyć (i może przyjąć) w danym momencie, więc poza pewnym poziomem rozważam mieszanie kolorów razem, aby dać wrażenie głębi i tylko wyróżnione kluczowe poziomy. Sprawdzę twój pomysł, kiedy poziomy zagnieżdżania są wysokie.
pgfearo