uio--WebPageMain-Module

DataTree

Informationen zur DataTree Component in UDS.

Overview

Die ce:DataTree Komponente dient dazu, abstrakt Baumstrukturen von Daten zu beschreiben, um diese anschließend redaktionell mit Hilfe der Angabe eines Renderers in verschiedenen Varianten einer Ansicht darstellen lassen zu können.

Die Bezeichnung DataTree bezieht sich mit Data auf Daten und mit Tree auf Baum. Es handelt sich hierbei um eine übliche Bezeichnung von baumartigen Datenstrukturen in der Informatik.

Bisherige Typen

Der artige baumartige Datenstrukturen gibt es in einer Vielzahl von Varianten, wobei viele Varianten eine semantische Bedeutung haben.

Eine häufige Variante bei Text in UDS ist eine unsortierte, unnummerierte Liste mit ce:UnorderedList Strukturen: ce:UnorderedList, ce:items, ce:ListItem, ce:contents, *.

Als Content erwarten diese Items jeweils ein Absatzelement wie z. B. ce:Paragraph-02.

Alpha
Alpha
Alpha

Dieser Typ von Listen dient primär der Auflistung von Begriffen oder auch Absätzen, dh. ein Listenelement kann hier auch mal zwei Absätze umfassen.

Für die Visualisierung der Verzeichnisstruktur in Dateisystemen oder aber auch der Zuordnung von Eigenschaften zu Datentypen und dergleichen sind diese Listen nur bedingt zu gebrauchen weil die Bedeutung dessen, was man vermitteln ist, eigentlich etwas anderes ist.

1.5.2.94 DataTree

UDS 1.5.2.94

DataTree rendern

Für die Visualisierung vom Baumstrukturen wird normalerweise mit verschachtelten Aufzählungslisten gearbeitet, darunter der ce:UnorderedList Komponente.

Gesucht war eine Variante, mit welcher wir abstrakte Baumstrukturen (engl. DataTree) formulieren und diese anschließend in Abhängigkeit von einem zusätzlichen Parameter („Renderer“) in verschiedenen Varianten rendern und gestalten lassen können.

Rendering, Theme, Style, Skin, ThemeVarition, StyleVariation.

Idee und Prototyp

Solche Baumstrukturen lassen sich bislang über die CESoftwareSourceCode Komponente ausgeben die normalerweise für Programmcode verwendet wird.




ce:HeaderCarousel
├─ ce:config 
├─ ce:contents
│  ├─ ce:HeaderCarouselSlide
│  │  ├─ ce:config
│  │  │  ├─ ce:image ...
│  │  │  ├─ ...
│  │  │  
│  │  └─ ce:contents
│  │     ├─ ce:PositionFrame
│  │     │  ├─ ce:config
│  │     │  │  ├─ ce:cssClass ...
│  │     │  └─ ce:contents
│  │     │     ├─ ce:SlideContentContainer
│  │     │     │  ├─ ce:config
│  │     │     │  └─ ce:contents
│  │     │     └─        ...
│  │     ├─ ce:PositionFrame
│  │     └─ ce:PositionFrame
│  ├─ ce:HeaderCarouselSlide
│  ├─ ce:HeaderCarouselSlide
│  ├─ ce:HeaderCarouselSlide
└─ ...

Demo / Prototyp

Hinweis: Klicken Sie mal zum Testen auf die ce:DataTreeBranch Elemente, also die Einträge, welche dieses Dreieck als Icon haben.

Root Node
- Branch 1
  - Leaf 1.1
  - Leaf 1.2
- Branch 2
  - Leaf 2.1

Root Node
├─ Branch 1
│  ├─ Leaf 1.1
│  ├─ Leaf 1.2
│  ├─ Leaf 1.3
│  └─ Branch 1.4
│     └─ Leaf 1.4.1
└─ Branch 2
   └─ Leaf 2.1

Status: Prototype

Die Komponente befindet sich noch in der Entwicklung und ist noch etwas verbuggt.

Wunschliste

Parameter für die Konfiguration von Icons fehlt. Diese Darstellung ließe sich aber über einen PostProcessor und damit User-PostProcessing-Templates lösen.

Structure

XML Aufbau von DataTree Elementen

ce:DataTree Strukturen werden in UDS mit ce:DataTree, ce:DataTreeRoot, ce:DataTreeBranch und ce:DataTreeLeaf Elementen abgebildet welche jweils eine eigene ce:config Eigenschaft haben. Der Sinn und Zweck bestand hierbei darin, das Prinzip von Ordner und Datei bzw. von Directory und File bzw. von Container und Containee als Inhalt klar zu formulieren, um hierbei optional auch nachträglich Icons und/oder Gestaltungskonzepte zuordnen zu können.

Das ce:DataTree Element verfügt als eines der ersten UDS Komponenten über eine neue renderer-Eigenschaft mit deren Hilfe der Redakteur sich für eine Variante entscheiden kann, wie die Struktur visuell sowie aber auch funktionell für die Ansicht berechnet werden soll.

PreCodeMono führt zu einer reinen Text-Ansicht mit Verwendung von Unicode-Zeichen.

TextAndIcon: Dieser Renderer stellt die Baumstruktur als ausgeklappte Menüstruktur mit Icons dar. Die Besonderheit ist hier, dass man die ce:DataTreeBranch Elemente hierbei zuklappen und wieder aufklappen kann.

DataTree mit renderer="PreCodeMono"

Der nachfolgende XML Code zeigt, wie man eine Baumstruktur formulieren kann, welche mit dem Renderer PreCodeMono dargestellt wird.

PreCodeMono bedeutet, dass das PRE-HTML-ELement gefolgt von CODE-HTML-Element im Rendering verwendet wird und man als Schrift eine monotype-artige Schrift einsetzt, bei welcher jedes Zeichen exakt die selbe Länge hat. Damit ist sichergestellt, dass alle Zeichen in an der jeweiligen Position in einer Zeile in allen Zeilen korrekt übereinander bzw. untereinander stehen.





<ce:DataTree renderer="PreCodeMono"> 
  <ce:config> 
    <ce:title>Data Tree Example</ce:title> 
  </ce:config> 
  <ce:contents> 
    <ce:DataTreeRoot> 
      <ce:config> 
        <ce:name>Root Node</ce:name> 
      </ce:config> 
      <ce:contents> 
        <ce:DataTreeBranch> 
          <ce:config> 
            <ce:name>Branch 1</ce:name> 
          </ce:config> 
          <ce:contents> 
            <ce:DataTreeLeaf> 
              <ce:config> 
                <ce:name>Leaf 1.1</ce:name> 
              </ce:config> 
            </ce:DataTreeLeaf> 
            <ce:DataTreeLeaf> 
              <ce:config> 
                <ce:name>Leaf 1.2</ce:name> 
              </ce:config> 
            </ce:DataTreeLeaf> 
            <ce:DataTreeLeaf> 
              <ce:config> 
                <ce:name>Leaf 1.3</ce:name> 
              </ce:config> 
            </ce:DataTreeLeaf> 
                                  
            <ce:DataTreeBranch> 
              <ce:config> 
                <ce:name>Branch 1.4</ce:name> 
              </ce:config> 
              <ce:contents> 
                <ce:DataTreeLeaf>
                  <ce:config> 
                    <ce:name>Leaf 1.4.1</ce:name> 
                  </ce:config>
                </ce:DataTreeLeaf>
              </ce:contents>
            </ce:DataTreeBranch>
                                  
          </ce:contents> 
        </ce:DataTreeBranch> 
        <ce:DataTreeBranch> 
          <ce:config> 
            <ce:name>Branch 2</ce:name> 
          </ce:config> 
          <ce:contents> 
            <ce:DataTreeLeaf> 
              <ce:config> 
                <ce:name>Leaf 2.1</ce:name> 
              </ce:config> 
            </ce:DataTreeLeaf> 
          </ce:contents> 
        </ce:DataTreeBranch> 
      </ce:contents> 
    </ce:DataTreeRoot> 
  </ce:contents> 
</ce:DataTree>