Support of Team Communications (SuTeCo) – Darstellung von visuellen Hierarchien

10 Okt

Nach dem langen Überlegen habe ich mich endlich entschieden das von mir zu entwickelnde Tool zu benennen. Es wird „Support of Team Communication“ heißen. Der Name lässt sich auch ziemlich gut abkürzen, und zwar „SuTeCo“. In meinen weiteren Blogs werde ich diese Abkürzung jetzt immer benutzen.

Wie in meinem zweiten Post schon bereits erwähnt wurde, habe ich mich für die Darstellung der visuellen Hierarchien (Organigramm)  für das jQuery-Basiertes Plug-In  „jOrgChart“  entschieden. Dieses Plug-In wird benutzt, um die hierarchische Struktur einer Organisation, die im LDAP  abgebildet ist, darzustellen.

Dieses Plug-In wurde von Wesley Nolte [http://twitter.com/wesnolte] entwickelt und wird nach dem GPL- und  MIT-Lizenz verbreitet.  Es besteht aus zwei Dateien: einer JavaScript-Datei (das eigentliche Plug-In) und einer CSS-Datei (Style).

Die Funktionsweise des Plug-Ins ist ziemlich einfach. Es bekommt als Eingabe eine ziemlich einfache  verschachtelte HTML-Struktur, die aus UL und LI-Tags besteht. Ein kleines Beispiel solcher Struktur wäre:

<ul id="org" style="display:none">
 <li>
 Leiter HNI<p>Prof. Dr.-Ing. Ansgar Trächtler</p>
 <ul data-content-theme="Leitung">
 <li>Fachgruppe DDI<p>Prof. Dr. Johannes Magenheim</p>
 <ul>
 <li>Sekretariat<p>Klaudia Jakob</p></li>
 </ul>
 </li>
 <li>Fachgruppe MMW<p>Prof. Dr. gerd Szwillus</p>
 </li>
 <li class="fruit">Fachgruppe PE<p>Prof. Dr.-Ing. Jürgen Gausemeier</p>
 <ul>
 <li>Team EM<p>Dipl.-Wirt.-Ing. Tobias Gaukstern</p>
 </li>
 <li>Team IM<p>Dipl.-Wirt.-Ing. Niklas Echterhoff</p>
 </li>
 <li>Team VE<p>Dipl.-Wirt.-Ing. Tobias Bensiek</p>
 </li>
 </ul>
 </li>
 </ul>
 </li>
 </ul>

Durch die Styles-Einstellungen (style=“display:none“) in der ersten Zeile wird verhindert, dass die vordefinierte Struktur als eine Aufzählungsliste ausgegeben wird, sondern vom Plug-In als Eingabe benutzt wird.

Abbildung 1.  Organigramm, das mit jOrgChart generiert wurde

Das Plug-In wandelt diese Struktur in eine Tabelle mit mehreren Untertabellen um, die aus TR-und TD-Tags besteht.  Je nachdem, ob eine Zelle der Tabelle ein Knoten ist oder ein Blatt, wird diese mit der dazu passenden CSS-Klasse versehen (Abbildung 2).

Abbildung 2. Table basierte HTML-Struktur, die vom jOrgChart Plug-In generiert wurde

Geplanter Umbau des Plug-Ins

Das Plug-In jOrgChart entspricht aber nicht allen Anforderungen, die im Rahmen dieser Masterarbeit implementiert werden sollen. Aus diesem Grund soll das Plug-In durch folgende Funktionen erweitert werden:

  1. Darstellung von Ebenen, mit der Möglichkeit die ganze Ebene in die Empfängerliste zu setzen (Abbildung 3),
  2. Darstellung der einzelnen Organisationseinheiten mit zusätzlichen Informationen wie Name, Vorname, Fotos etc.,
  3. Drag&Drop Funktionalität,
  4. PopUp-Menü Fenster,
  5. Datenübertragung im JSON-Format

Abbildung 3. Geplante Umbau des Plug-Ins  jOrgChart

Eingaben für jOrgChart

Als Eingabe für das o.g. Plug-In wird ursprünglich eine ziemlich einfache HTML-Struktur benutzt, was das Plug-In ziemlich einfach und übersichtlich macht. Das Problem taucht erst dann auf, wenn die Organisationsstruktur, die dargestellt werden soll, größer als ein paar Ebenen mit 20 oder 30 Organisationseinheiten wird.  Dann sollen ziemlich große Datenmengen vom Server an den Client übertragen werden (persönliche Daten mit Fotos).

Um die Wartezeit zu verkürzen, werden die Daten im JSON Format übertragen. Die zweite Möglichkeit die Wartezeit zu verkürzen, ist die Beschränkung von sofort anzeigenden Ebenen. Das bedeutet, dass nach dem Öffnen des Fensters beispielweise nur die ersten zwei Ebenen angezeigt werden. Um weitere Ebenen anzuzeigen, sollen sie manuell per Mausklick geöffnet (expandiert) werden.

Eine Antwort to “Support of Team Communications (SuTeCo) – Darstellung von visuellen Hierarchien”

Trackbacks/Pingbacks

  1. noch Temp « Studentenblogs DDI@UPB - 25. Oktober 2012

    […] in meinem letzten Blog bereits erwähnt wurde, wird für die Darstellung des Organigramms das jQuery basierte jOrgChart […]

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

%d Bloggern gefällt das: