Das Glossar-Objekt besteht analog dem oben dargestellten Konstrukt aus zwei Objekt-Definitionen: dem Referenz-Objekt und einer Datentabelle.

Glossary_PackDef_thumbnail_ger.jpg

Glossar-Package bestehend aus der Referenz-Klasse Glossary (Darstellungslogik) und einer Datentabelle (Inhalt)

Die Datentabelle strukturiert ein zweisprachiges Glossar für deutsche und englische Inhalte mit wahlfreier Sprach-Reichweite: heterolinguale Inhalte können optional übertragen werden. Sinnvoll ist dies bei technischen Begriffssammlungen, die teilweise englischsprachige Wörter unübersetzt übernehmen.

Glossary_DatatableDef_thumbnail_ger.jpg

Definition der Datentabelle des Glossar-Objektes

Bestimmte Werte wie Änderungsdatum oder Names des Redakteurs werden als unsichtbare Attribute (vorangestellter Unterstrich der Element-Id, z.B. _create_uid) mit in die Datentabelle geschrieben, indem die Werte per JavaScript in die Standard-Eingabe-Form form0 gesetzt werden (s. JS-Funktion form0Submit). Desweiteren kann die JavaScript-Funktion das Interface in Abhängigkeit von einem Wert für das Feld attr_dc_coverage verändern – je nach dem, welchen Wert der Redakteur für die sprachliche Reichweite auswählt.

Glossary_newItem_thumbnail_ger.jpg

Reduziertes Eingabe-Interface „Datensatz einfügen“, Das Interface klappt per JavaScript in Abhängigkeit von der Reichweiten-Auswahl in ein zweisprachiges Eingabe-Formular auf.

Beispiel-Code: Interface-Element für die Datentabellen-Definition

<script type="text/javascript">
<!--// 
    // Initialize variables.
var langs = new Array();
langs[ 0] = 'ger';
langs[ 1] = 'eng';

/**
 * OnSubmit-Event: form0
 */
function form0Submit( fm)
{
  var lang_attrs = new Array();
  lang_attrs[ 0] = 'titlealt';
  lang_attrs[ 1] = 'attr_dc_description';
  var b = true;
  for ( var i = 0; i < lang_attrs.length; i++) {
    for ( var l = 0; l < langs.length; l++) {
      var lang = langs[ l];
      var tr = document.getElementById( "tr_" + lang_attrs[ i] + "_" + lang);
      if ( tr.style.visibility == "visible") {
        var el = fm.elements[ lang_attrs[ i] + "_" + lang];
        if ( el) {
          for ( var c = 0; c < tr.childNodes.length; c++) {
            var div = tr.getElementsByTagName('td')[0].getElementsByTagName('div')[0];
            var imgs = div.getElementsByTagName('img');
            var img;
            if ( imgs.length == 0) {
              img = document.createElement( "img");
              img.setAttribute( "border", 0);
              img.setAttribute( "align", "absmiddle");
              div.appendChild( img);
            }
            else {
              img = imgs[ 0];
            }
            if ( el.value.length == 0) {
              img.setAttribute( "src", "<dtml-var MISC_ZMS>ico_error.gif");
              img.setAttribute( "title", "<dtml-var "getLangStr('ATTR_MANDATORY',manage_lang)">");
              b = false;
            }
            else {
              img.setAttribute( "src", "<dtml-var spacer_gif>");
              img.setAttribute( "title", "");
            }
          }
        }
      }
    }
  }
  return b;
}

/**
 * OnChange-Event: attr_dc_coverage
 */
function attr_dc_coverageChange( el)
{
  var lang_attrs = new Array();
  lang_attrs[ 0] = 'delimiter_local';
  lang_attrs[ 1] = 'titlealt';
  lang_attrs[ 2] = 'coverage_titlealt';
  lang_attrs[ 3] = 'attr_dc_description';
  lang_attrs[ 4] = 'synonyme';
  lang_attrs[ 5] = 'abrev';
  lang_attrs[ 6] = 'coverage_abrev';
  lang_attrs[ 7] = 'source';
  var i = el.selectedIndex;
  var v = el.options[ i].value;
  for ( var i = 0; i < lang_attrs.length; i++) {
    for ( var l = 0; l < langs.length; l++) {
      var lang = langs[ l];
      var tr = document.getElementById( "tr_" + lang_attrs[ i] + "_" + lang);
      if ( v == 'local.'+lang || v == 'global') {
        tr.style.visibility = "visible";
        tr.style.display = "";
      }
      else {
        tr.style.visibility = "hidden";
        tr.style.display = "none";
      }
    }
  }
}

var fm_form0 = document.forms['form0'];
fm_form0.onsubmit = function() { return form0Submit(this) };
var el_attr_dc_coverage = fm_form0.elements['attr_dc_coverage'];
el_attr_dc_coverage.onchange = function() { attr_dc_coverageChange(this) };
attr_dc_coverageChange( el_attr_dc_coverage);

//-->
</script>

Hinweis: Datentabellen können zwar Interface-Elemente enthalten und erlauben somit eine Datenvalidierung während der Dateneingabe per JavaScript. Jegliche Darstellungs-Logik sollte jedoch von der Datenstruktur getrennt werden und im Container definiert werden.

Siehe dazu auch die objChangeObjEvt-Methode im Anhang.

Glossary_ContainerDef_thumbnail_ger.jpg

Objektdefintion für den Glossar-Container (Referenztyp); diverse JavaScript-Methoden sorgen für ein gut bedienbares Darstellungs-Interface (Ajax-basierte Suche, inline-popups)

Folgende Methoden sind hervorzuheben:

  • browse_objs(): Objekt-Browser für die Auswahl der inline-Referenzen
  • f_css_defaults(): spezielle CSS-Definitionen, die konventionell vor den Strom des Standard-CSS geschrieben werden
  • getLinkHtml(): löst das inline-Konstrukt in HTML auf
  • standard_html_header() Diese primitive Methode, die Code-Ergänzung in die gleichnamige Standard-DTML-Methode: der Ansatz wird dazu genutzt, um JavaScript-Aufrufe im HTML-Header zu ergänzen. glossary_js erzeugt per DOM-Operation popups für inline-Glossar-Referenzen.
<!--// BO refGlossary.standard_html_header //-->
<script language="JavaScript" src="<dtml-var ZMS_ROOT>/glossary_js" type="text/javascript"></script>
<script type="text/javascript">window.onload=function(){enableTooltips()};</script>
<!--// EO refGlossary.standard_html_header //-->
Glossary_preview_thumbnail_ger.jpg

JavaScript basiertes mouseover-popup zeigt title-Attribut an

Der Glossar-Inhalt wird über einen inline-Methodenaufruf, z.B.

<dtml-var expr="getLinkHtml('GS1 Germany','refGlossary',REQUEST)"></dtml-var>

in das title-Attribut des a-Elements gerendert.

<p id="e37"><a href="http://127.0.0.1:8080/ content/e18/index_ger.html?selectedCh=G&selectedId=e19" title="GS1 Germany = Abk. für Centrale Coorganisation. Institut …." class="glossary">GS1 Germany</a> (vormals CCG…

Das glossary_js-JavaScript erzeugt durch entsprechende DOM-Operationen ein span-Element der Klasse tooltip, das letztlich per CSS entsprechend aufwändig formatiert wird.