Sławomir Czerwiński

Pracując nad nowym artykułem, po raz kolejny doszedłem do momentu, gdzie powinienem przedstawić strukturę plików i katalogów w projekcie. Do tej pory radziłem sobie przy pomocy znacznika pre oraz odpowiednio umieszczonych spacji. Problem polega na tym, że przy większej liczbie plików lub większym zagnieżdżeniu katalogów, lista staje się nieczytelna.

Uznałem, że najlepszym wyjściem będzie dodanie do bloga arkusza stylów oraz odpowiednich ikonek, z pomocą których utworzę całkiem zgrabne drzewko. Zanim dorobię się własnych obrazków, skorzystam z udostępnionego na licencji GPL zestawu Gnome Crystal Diamond Icons 1.0b.

W pliku CSS dodaję styl całej listy. Chciałbym, aby nazwy plików i katalogów napisane były stałym krojem pisma:

.dir-tree {
  font-family: monospace;
}

Następnie wskazuję ikony użyte przy wypunktowaniu różnych elementów listy. W tej chwili rozróżniam katalogi, pakiety oraz pliki: Java, XML i pozostałe:

.dir {
  list-style: url("dir.png");
}

.package {
  list-style: url("package.png");
}

.file {
  list-style: url("file.png");
}

.file-java {
  list-style: url("file-java.png");
}

.file-xml {
  list-style: url("file-xml.png");
}

Na samym końcu postanowiłem dodać kropkowane linie, w celu zwiększenia czytelności:

.dir-tree ul {
  border-left: 1px dotted #ccc;
}

Przykładowa struktura katalogów w pliku HTML wygląda następująco:

<ul class="dir-tree">
  <li class="dir">src
    <ul>
      <li class="dir">main
        <ul>
          <li class="dir">java
            <ul>
              <li class="package">pl.info.czerwinski
                <ul>
                  <li class="file-java">FooClass.java</li>
                  <li class="file-java">FooEntity.java</li>
                </ul>
              </li>
            </ul>
          </li>
          <li class="dir">resources
            <ul>
              <li class="file">project.properties</li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="dir">test
        <ul>
          <li class="dir">java
            <ul>
              <li class="package">pl.info.czerwinski
                <ul>
                  <li class="file-java">FooTest.java</li>
                </ul>
              </li>
            </ul>
          </li>
          <li class="dir">resources
            <ul>
              <li class="file">testing.properties</li>
              <li class="file-xml">testng.xml</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="file-xml">pom.xml</li>
</ul>

W rezultacie otrzymuję drzewo podobne do poniższego:

• src
  • main
    • java
      • pl.info.czerwinski
        • FooClass.java
        • FooEntity.java
    • resources
      • project.properties
  • test
    • java
      • pl.info.czerwinski
        • FooTest.java
    • resources
      • testing.properties
      • testng.xml
• pom.xml

Od tej pory każdą strukturę plików w projekcie będę przedstawiał za pomocą powyższego rozwiązania. Mam nadzieję, że opisany przykład przysłuży się też komuś poza mną.