Skip to content

Code structure of EditMOM3

Jump to bottom Edit New page
GVogeler edited this page Nov 7, 2020 · 6 revisions

Datenmodell

Im Editor-Widget (XRX/src/mom/app/collection/widget/my-collection-charter-edit.widget.xml) sind eine XRX-Instanz (Datenlieferant) und ein Binding zwischen HTML-div und XPath aus der XRX-Instanz definiert:

Eine XRX-instance,

<xrx:instances>
    <xrx:instance id="icharter">{ $entry-as-string }</xrx:instance>
</xrx:instances>

deren Eigenschaften und Methoden in XRX/res/xml/src/model/instance.js (class) beschrieben werden. Die XRX-Instance ist der Datenlieferant für die angebundenen Controlls. Diese beinhaltet das XML-Objekt (<cei:text>) einer Urkunde in Textform. Alle Änderungen, die während der Laufzeit des Editors vorgenommen werden, werden demnach nicht direkt in die korrespondierende XML-Datei in der Datenbank geschrieben. Sondern es erfolgt eine Änderung innerhalb der Variable $entry-as-string. Erst während der Speicherung werden die Änderungen serialisiert und in die XML-Datei zurück geschrieben.

XRX-bind (data-binding),

     <xrx:binds>
         <!-- abstract -->
          <xrx:bind id="bidno" nodeset="/descendant::cei:body/child::cei:idno"/>
     </xrx:binds>
     <xrx:view>
        <xrx:layout>
           <xrx:center>
              <div data-demoid="26331a1b-46ff-40f0-b0d0-5208019bc30a">
                    <xrx:visualxml attributes="no" bind="bidno" elements="no"/>
              </div>
           </xrx:center>
       </xrx:layout>
     </xrx:view>

dessen Eigenschaften und Methoden werden in XRX/res/xml/src/model/bind.js (class) beschrieben. Über <XRX:bind> werden Referenzen zu den Daten in der <XRX:instance> geschaffen. Über eine Zuordnung der Controls zu den Bindings erhalten die Controls schließlich den Zugriff auf die Daten und sind darüber in der Lage, Änderungen an die korrekten CEI-Felder zu übertragen.

Programmsteuerung

Mit XRX/res/xml/src/model/controller.js werden xml-Daten synchronisiert.

Präsentation

CODEMIRROR-Bibliothek und JQuery UI-Features werden in das Widget eingebunden:

   <xrx:resource>tag:www.monasterium.net,2011:/xrx/resource/js/codemirror/lib/codemirror</xrx:resource>
   <xrx:resource>tag:www.monasterium.net,2011:/xrx/resource/jquery/ui/draggable</xrx:resource>

Durch das JQUERY UI Widget aus XRX/jquery.ui.visualxml.js wird codemirror initialsiert.

  _create: function() {
      	var self = this, textarea = self.element[0];
       	if(self.options.repeatflag) {
		var ref = $(textarea).attr('data-xrx-ref');
		var index = $(textarea).attr('data-xrx-index');

		$(textarea).val(self._transformXml(self.options.xml));
		self._codemirrorInstance(textarea);
		$(self.codemirror.getInputField()).attr('data-xrx-ref', ref);
		$(self.codemirror.getInputField()).attr('data-xrx-index', index);
    		…
      	}

Anlegen einer Urkunden-Instanz durch Charter New Service

Durch Service my-collection-charter-new.service.xml wird eine neue Urkunde in der Datenbank in db/mom-data/xrx:user/[userl]/metadata.charter/[ID-Collection]/[ID-Urkunde] angelegt.

<xrx:variable>
    <xrx:name>$charter-name</xrx:name>
        <xrx:expression>i18n:translate(<xrx:i18n><xrx:key>new-charter</xrx:key><xrx:default>New Charter</xrx:default></xrx:i18n>)
        </xrx:expression>
   </xrx:variable>
<xrx:variable>
    <xrx:name>$entry</xrx:name>
    <xrx:expression>mycollection:charter-new-empty($atomid, $uuid, $charter-name)</xrx:expression>
</xrx:variable>
<xrx:body>
    {
        let $post := atom:POST($feed, $entryname, $entry)
        return
        $post
     }
 </xrx:body>

Zusammensetzung von $entry:

In mycollection.xqm gibt es eine Funktion ´my-collection-charter-new-empty´ wird Template einer leeren (Urkunden)-Instanz angefragt:

let $template := template:get('tag:www.monasterium.net,2011:/mom/template/mycollection-charter', false())

Aktualisieren der Urkunden-Instanz durch Autosave im EDITOR-Widget

my-collection-charter-edit.widget.xml

Benutze ich den Editor werden alle Änderungen mit der Funktion autosave() über POST dem Server übermittelt.

PROGRAMMABLAUF

z.B. ein Attribut wird eingefügt:

Drag and drop durch JQuery UI aus xrx/js/jquery.ui.xrxAttribute.js: _attributeDroppable: function(droppableAttribute) 

{… $('.xrx-instance').xrxInstance().insertAttributes(contextId, attributes);}

Das JQuery UI widget Objekt ruft die Funktion aus xrx/js/xrxinstance.js auf

$.fn.insertAttributes = function(contextId, attributes) {
    $(this).text(window.XML.insertAttributes($(this).text(), contextId, attributes));
	autosave();
};
  function autosave() {
clearTimeout(onautosave);
    $("#autoSaveStatus").text("Saving ...");
	onautosave = setTimeout( function() {
	// TODO: replace with event handler
	$(document).xmleditor("save");
	$(".xrx-report").xrxReport("validate");
	$("#autoSaveStatus").text("All changes saved.");
	}, 1000);
};

xmleditor/js/jquery.ui.xmleditor.js

    save: function() {
    var self = this;
    $.ajax({url: self.options.requestRoot + serviceMyCollectionSave,
		type: "POST",
		contentType: "application/xml",
		data: $(".xrx-instance").text()
	});

KOMPILIERUNG UND LAUFZEIT

Das XRX-Framework ist eine Kodierungsform, die lediglich zum Zeitpunkt der Kompilierung relevant ist. Während des Kompilierungsprozesses werden alle XRX-Tags in HTML-konforme Anweisungen umgesetzt. Dies bedeutet, dass während der Kompilierung der Aufbau des Editors etc. bereits statisch festgelegt worden ist, während der Inhalt dynamisch über die Instanzen geladen wird (seit EditMOM3.1; siehe >Aufbau des Editors<).

Zentrale Stelle für die Umsetzung ist die Datei widget.xqm.

Für eine Übersicht der umgesetzten XRX-Tags und deren Entsprechungen, siehe: Translation of XRX-Tags

Die kontextbezogenen Element-Menüs in EditMOM3

https://github.com/icaruseu/mom-ca/blob/master/my/XRX/src/mom/app/xmleditor/xsd/cei-collection-editor.xsd.xml definiert, welche Elemente in welchen Menüs aufscheinen. Elemente, die hier nicht aufgelistet werden, sind über unbezeichnete Menüs zugänglich.

Aufbau des Editors

Seit dem Commit #9009b29 zum Issue #340 ist der Editor in seinem Aufbau nicht länger statisch. Dieses wurde notwendig, da der Editor zwangsläufig davon ausging, dass alle Urkundenobjekte ein Mindestmaß an Daten beinhalten. Insbesondere Altdaten oder Importe über die Schnittstellen weisen allerdings oft weniger Inhalt aus. Das hatte zur Folge, dass der Editor für solche Urkunden nicht mehr nutzbar war.
Der Editor folgt nun folgendem Aufbau:

    1. Bei dem ersten Aufruf der Urkunde im Editor werden fehlende Felder aus dem Template (XRX/src/mom/app/collection/template/mycollection-charter.template.xml) in die Urkunde integriert.
    1. Der Aufbau des Editors ergibt sich aus der Beschreibungsdatei XRX/src/mom/app/collection/template/mycollection-charter-editor.template.xml.

  • 2.1) In der mycollection-charter-editor.template.xml müssen nun alle Felder hinterlegt werden, die im Editor angezeigt werden sollen. Der Aufbau erfolgt nach folgendem Muster:
    <id> contains the XML-Node as a key : string
    <mult_occurence> triggers if <xrx:repeat> or not : bool
    <target_field> Just important, if <mult_occurence> is true. Contains Name of Childnode for Textarea : string
    <tab_page> contains the number of the Tabpage to which the Node belongs to : string
    <active> contains the current status of the Node : bool
    <message> contains the field which is important for the i18n-Module ("self" / "target") : string
    <groups> contains the groups for which the Field should be enabled : element group with string

    Als Beispiel: <editor_field> <id>cei:idno</id> <parent>cei:body</parent> <mult_occurence>false</mult_occurence> <target_field></target_field> <tab_page>1</tab_page> <active>true</active> <message>self</message> <groups> <group>full</group> <group>transcription</group> <group>google</group> <group>date</group> </groups> </editor_field>

    Dem Editor wird ein Feld "cei:idno" hinzugefügt. Das Parent-Element hierzu ist cei:body. Dieses Feld kommt maximal einmal in der Urkunde vor (<mult_occurence>). Im Editor soll die Eingabe auf der ersten Tabpage erlaubt werden. Das Feld ist aktiv und als Anzeige für die Feldübersetzung soll die Übersetzung von idno angezeigt werden (<message>self</message>).

    Weiterhin ist es noch immer möglich auch Mehrfachvorkommen zu verarbeiten. Beispiel: <editor_field> <id>cei:sourceDescVolltext</id> <parent>cei:sourceDesc</parent> <mult_occurence>true</mult_occurence> <target_field>cei:bibl</target_field> <tab_page>3</tab_page> <active>true</active> <message>self</message> <groups> <group>full</group> <group>frontEditor</group> <group>google</group> </groups> </editor_field> Im folgenden Beispiel ist es nun möglich mehrfache Eingaben zu der Bibliografie von Volltexten zu hinterlegen. Der Unterschied zu dem vorherigen Beispiel liegt darin, dass der Parameter <mult_occurence> jetzt auf true gesetzt worden ist. Zusätzlich ist noch angegeben worden, auf welches Feld sich das Mehrfachvorkommen bezieht <target_field>. Im Editor wird also auf das Feld <cei:sourceDescVolltext> referenziert, was mehrfach das Feld <cei:bibl> enthalten kann. Als Bezeichnung des Feldes soll auch wieder die Überschrift aus dem <id>-Element, also die Übersetzung zu sourceDescVolltext herangezogen werden (<message>self</message>).

  • 2.2) Eine weitere Erneuerung des Editors ist, dass dieser je nach Anforderung nur einen bestimmten Teil der Anzeige einblenden kann. Die Steuerung hierüber erfolgt über den Aufrufparameter mode. Standardmäßig erfolgt die volle Anzeige aller Eingabemöglichkeiten. Sollen aber zum Beispiel nur alle Felder, die wichtig für eine Transkription sind, angezeigt werden, kann der Aufruf mit dem Parameter mode=transcription erfolgen. Im Folgenden werden nur die Felder eingeblendet, bei denen in der Kategorie <groups> der entsprechende Wert hinterlegt worden ist. Je Feld können beliebig viele Gruppen hinterlegt werden.

  • 2.3) Sollen Felder zu einer Gruppe gebündelt werden, erfolgt die Gruppierung innerhalb der Datei XRX/src/mom/app/collection/template/mycollection-charter-editor-fieldset.template.xml. Der Aufbau hier sieht wie folgt aus:

    <fieldset> <tab_page>4</tab_page> <legend>cei_auth</legend> <fields> <field>cei:notariusDesc</field> <field>cei:sealDesc</field> </fields> </fieldset> Die Eingabe der Tabpage, auf welchem die Gruppierung erscheinen soll, ist als Erstes einzutragen. Schließlich erfolgt die Angabe über die Legende der Gruppierung. Hier wird kein Feldname, sondern der korrespondierende i18n-Schlüssel erwartet. Schließlich müssen noch alle Felder, die in der Gruppierung angezeigt werden sollen, eingetragen werden. Hierbei ist zu beachten, dass es sich hierbei um die Angaben aus <id> handelt. Weiterhin müssen sich auch die Felder auf einer Tabpage befinden, da ansonsten eine Ansicht an der gewünschten Stelle nicht möglich ist.

  • 2.4) Veränderungen am Editor, die in den beschriebenen Templates gemacht worden sind, sind nach Eingabe über eXide sofort wirksam. Es muss keine neue Kompilierung erfolgen. Zu beachten ist lediglich, dass die Änderungen auch im lokalen Sourcecode gemacht werden müssen. Ansonsten werden bei einem späteren Kompilierungsvorgang alle eingetragenen Änderungen auf dem Server überschrieben. Sollten bei einer Veranstaltung o.a. spontan ein Feld in der Eingabe ergänzt werden müssen, ist dieses nun ohne großen Mehraufwand schnell realisierbar.

Wiki-Home | User Guide | Developer's Guide | Site search on Google

Add a custom sidebar
Clone this wiki locally