Inhalt
Die Inhalte der bisherigen Webseiten nach und nach übernommen. Mit einem * gekennzeichnete Bereiche sind noch nicht übernommen worden.
ÜBERBLICK
XSL | Vorbemerkungen
Die Extensible Stylesheet Language, XSL, ist ein in Verbindung mit XML, XSD, DTD und XQUERY um das Jahr 2001 herum bis heute gültiger W3C Standard für eine tatsächliche Skriptsprache welche im Gegensatz zu JavaScript nicht nur im Browser sondern vergleichbar SQL und LINQ innerhalb einer Vielzahl von Programmiersprachen funktioniert.
XSL Mindestwissen
Funktionsweise von XSL
Mit Hilfe von XSL Programmierung werden sogenannte XSL Templates programmiert welche mit Hilfe eines XSL-Prozessors XML- und andere XML-artige Dokumente in ein neues XML-Format oder auch damit HTML5 transformieren und damit umformen zu können.
XSL und C#, JAVA, PHP, JS etc.
Eine XSL-Transformation ist auch in mit C#, JAVA, JAVASCRIPT, PHP, NODEJS und weiteren Sprachen möglich.
Die zugehörigen Libraries für XSL Transformationen werden von Software-Unternehmen mit Open-Source-Versionen als auch mit kommerziellem Support angeboten.
Support für XSL 1.0, XSL 2.0, XSL 3.0
Eine Unterstützung des XSL 1.0 Standards ist bei vielen Programmiersprachen direkt gegeben, auch wenn es sein kann, dass man im PHP Webhosting in der Apache Konfiguration das Modul aktivieren muss.
Für XSL 2.0 und XSL 3.0 Standards müssen Sie im Regelfall die zugehörigen Libraries nachinstallieren.
XSL Programmierung
XSL | XSL Programmierung
Der nachfolgende Block ist ein Grobkonzept und listet als Diskussionsgrundlage für die weitere Abstimmung der Struktur von Volume, Chapter, Section nebst Article und HowTo Instanzen auf. Oder anders formuliert: Das ist ein Grobkonzept für eine Sitemap.
Hinweis: Schwerpunkt der obigen Themenstruktur ist die Einführung in XSL. Für eine Einführung in die Webentwicklung von Webseiten, Webservices und Apps und WebApps mit XSL sowie weitere Aspekte der Programmierung von XSL mit Blick auf Zugriffe auf das Filesystem und mehr gibt es eine Reihe vertiefender Themen, insbesondere im Zusammenhang mit neueren XSL 3.0 Features.
Unsere Einführung in XSL beschränkt sich bewusst bislang auf den XSL 1.0 Standard weil wir insbesondere im Kontext PHP-basierter Softwarelösungen, Webseiten und Webanwendungen hierbei voraussetzen können, dass Webhoster die zugehörigen XSL 1.0 Libraries über deren Server bereitstellen. Es kann aber sein, dass diese vor einer Nutzung über die Apache Konfiguration aktiviert werden müssen, weil die zugehörigen Module oftmals auskommentiert sind.
<xsl:template match="ce:ContentReference" name="ContentReference"><!-- ContentInstance -->
<xsl:param name="data" select="current()"></xsl:param>
<xsl:param name="language_chosen_key" select="$GLOBAL_language_key"></xsl:param>
<xsl:param name="contentRefID">-1</xsl:param>
<!-- <h4>ContentBlock Element erkannt</h4> -->
<xsl:variable name="refID_gelesen" select="@ref"/>
<!-- <h4>refID:<xsl:value-of select="$refID_gelesen"/></h4> -->
<xsl:variable name="ref_xmlFile" select="concat(.,substring-after($refID_gelesen, ''), '')"/>
<!-- <h4>ref_xmlFile:<xsl:value-of select="$ref_xmlFile"/></h4> -->
<xsl:variable name="uriPath_gelesen" select="@uri"/>
<!-- <h4>uriPath:<xsl:value-of select="$uriPath_gelesen"/></h4>-->
<xsl:variable name="uri_xmlFile" select="concat('',substring-after($uriPath_gelesen, ''), '')"/>
<!-- <h4>uri_xmlFile:<xsl:value-of select="$uri_xmlFile"/></h4> -->
<xsl:variable name="filepath_xmlFile" select="concat('../../../data/server',substring-after($uri_xmlFile, ''), '')"/>
<!-- <h4>filepath_xmlFile:<xsl:value-of select="$filepath_xmlFile"/></h4> -->
<xsl:variable name="ref_Content" select="document($filepath_xmlFile)"/>
<!-- Fehlerkontrolle hinzufügen -->
<xsl:choose>
<xsl:when test="not($ref_Content)">
<xsl:message terminate="no">Zieldokument nicht gefunden: <xsl:value-of select="$filepath_xmlFile"/></xsl:message>
</xsl:when>
<xsl:otherwise>
<xsl:apply-templates select="$ref_Content//ce:ContentInstance/ce:contents">
<xsl:with-param name="data" select="current()"></xsl:with-param>
<xsl:with-param name="contentRefID" select="$contentRefID"></xsl:with-param>
<xsl:with-param name="A" select="$data/ce:parameters/ce:A"></xsl:with-param>
<xsl:with-param name="B" select="$data/ce:parameters/ce:B"></xsl:with-param>
<xsl:with-param name="C" select="$data/ce:parameters/ce:C"></xsl:with-param>
<xsl:with-param name="D" select="$data/ce:parameters/ce:D"></xsl:with-param>
<xsl:with-param name="E" select="$data/ce:parameters/ce:E"></xsl:with-param>
<xsl:with-param name="F" select="$data/ce:parameters/ce:F"></xsl:with-param>
<xsl:with-param name="G" select="$data/ce:parameters/ce:G"></xsl:with-param>
<xsl:with-param name="H" select="$data/ce:parameters/ce:H"></xsl:with-param>
<xsl:with-param name="I" select="$data/ce:parameters/ce:I"></xsl:with-param>
<xsl:with-param name="J" select="$data/ce:parameters/ce:J"></xsl:with-param>
</xsl:apply-templates>
</xsl:otherwise>
</xsl:choose>
<xsl:value-of select="ce:parameters/ce:A"/>
<xsl:value-of select="ce:parameters/ce:B"/>
<xsl:value-of select="ce:parameters/ce:C"/>
</xsl:template>
<![CDATA[
libxml_use_internal_errors(true);
$xml = new DOMDocument();
$xsl = new DOMDocument();
$xml->load('data.xml');
$xsl->load('style.xsl');
$proc = new XSLTProcessor();
$proc->importStyleSheet($xsl);
$result = $proc->transformToXml($xml);
if (!$result) {
$errors = libxml_get_errors();
foreach ($errors as $error) {
echo display_xml_error($error);
}
libxml_clear_errors();
}
function display_xml_error($error) {
$return = "Error $error->code: ";
switch ($error->level) {
case LIBXML_ERR_WARNING:
$return .= "Warning $error->code: ";
break;
case LIBXML_ERR_ERROR:
$return .= "Error $error->code: ";
break;
case LIBXML_ERR_FATAL:
$return .= "Fatal Error $error->code: ";
break;
}
$return .= trim($error->message) .
" in " . $error->file .
" on line " . $error->line . "\n";
return $return;
}
echo $result;
ce:WebPage
Ein ce:WebPage Element entspricht einer Einzelseite innerhalb einer Webseite. Die Bezeichnung ce:WebPage basiert auf dem ce-Prefix für ContentElement Elemente und der aus schema.org abgeleiteten CamelCase-Schreibweise für WebPage zu Differenzierung von WebSite oder WebPageElement.
<?xml version="1.0" encoding="UTF-8"?>
<doc
xsi:schemaLocation="http://snewmedia.com/snm/uio3/specs/ce ce.xsd"
>
<ce:WebPage>
<ce:config>
<ce:name></ce:name>
<ce:title></ce:title>
<ce:description></ce:description>
<ce:isPartOf>
<ce:WebSite ref="/Realm/snewmedia.com/_nodes/WebSite__@snm__@_V24A.xml"></ce:WebSite>
</ce:isPartOf>
<ce:author></ce:author>
</ce:config>
<ce:contents>
<!-- @note 1 -->
<ce:WebPageHeader>...</ce:WebPageHeader>
<ce:WebPageMain>...</ce:WebPageMain>
<ce:WebPageFooter>...</ce:WebPageFooter>
</ce:contents>
</ce:WebPage>
</doc>
File: Beispielsweise RootNode.xml
Damit die WebPage weiß, zu welcher WebSite diese gehört, wird ein zugehöriges ce:WebSite Element mit Angabe der zugehörigen Adresse über den ref-Parameter adressiert.
Das ce:contents Element ist der Container für alle möglichen CEs welche die betreffende WebPage beinhaltet und auf die der Redakteur der zugehörigen WebPage einen Einfluss hat.
Das Carousel oder die Slideshow im Seitenkopf ist ein solches optionales CE welches ein Redakteur plazieren kann oder auch weglassen kann.
ce:WebPageHeader
ce:WebPage/ce:contents/ce:WebPageHeader beinhaltet die Deklaration des WebPageHeader Elements. Ein solches Element ist zuerst einmal auch nur ein Container welcher der visuellen Gestaltung des Seitenkopfes dient.
Das ce:WebPageHeader Element beinhaltet sein eigenen Child-Elements wiederum innerhalb eines eigenen ce:contents Elements.
<?xml version="1.0" encoding="UTF-8"?>
<doc
xsi:schemaLocation="http://snewmedia.com/snm/uio3/specs/ce ce.xsd"
>
<ce:WebPage>
<ce:config>
<ce:name>Willkommen</ce:name>
<ce:title>Willkommen</ce:title>
<ce:description></ce:description>
<ce:isPartOf>
<ce:WebSite ref="/Realm/snewmedia.com/_nodes/WebSite__@snm__@_V24A.xml"></ce:WebSite>
</ce:isPartOf>
<ce:language_key>de</ce:language_key>
<ce:author>T2M</ce:author>
</ce:config>
<ce:contents>
<ce:WebPageHeader>
<ce:config></ce:config>
<ce:contents>
<ce:HeaderCarousel>
<ce:config>
</ce:config>
<ce:contents>
<ce:HeaderCarouselSlide>
<comment>
////////////////
// SLIDE
////////////////
</comment>
<ce:config>
<ce:active>1</ce:active>
<!-- <ce:interval>4000</ce:interval> -->
<ce:image>
<ce:ImageObject>
<ce:src>
<text lang="de">img/_snm/location/de-wi/20240911_175119_L31BLR.jpg</text>
<!--<text lang="de">img/_snm/vendor-stuelken/slides/20211210_P1040564_L31x1920_stuelkencom.jpg</text>-->
<!--<text lang="de">img/_scom/slides/artwork/N240529T100801__fctry__FHD__stuelkencom-artwork.jpg</text>-->
</ce:src>
</ce:ImageObject>
</ce:image>
<ce:image_alt></ce:image_alt>
</ce:config>
<ce:contents>
<comment>
// ----------------
// --- SLIDE-INHALT
// ----------------
</comment>
<ce:PositionFrame>
<ce:config>
<ce:cssClass>
uio-slide-content-default
</ce:cssClass>
</ce:config>
<ce:contents>
<ce:SlideContentContainer>
<ce:config>
<ce:tags></ce:tags>
<ce:subheader>
<text lang="de">SNEWMEDIA | PORTAL</text>
</ce:subheader>
<ce:headline>
<text lang="de">Willkommen</text>
</ce:headline>
<ce:paragraph>
<text lang="de">
Willkommen auf der deutschensprachigen Startseite
von SNEWMEDIA. Wir sind ein in Wiesbaden ansässiges
STUDIO
</text>
</ce:paragraph>
<ce:actions>
</ce:actions>
</ce:config>
<ce:contents>
<ce:ViewActionButton shape="rounded" version="1.5.2.0">
<ce:config>
<ce:label>
<text lang="de">mehr erfahren</text>
</ce:label>
<ce:uri>
<text lang="de">
<ce:fn-get-uri-relative-actualpage/>#contentBegin</text>
</ce:uri>
</ce:config>
</ce:ViewActionButton>
<ce:OtherActionButton shape="rounded" version="1.5.2.0">
<ce:config>
<ce:label>
<text lang="de">mehr erfahren</text>
</ce:label>
<ce:uri>
<text lang="de">
<ce:fn-get-uri-relative-actualpage/>#contentBegin</text>
</ce:uri>
</ce:config>
</ce:OtherActionButton>
</ce:contents>
</ce:SlideContentContainer>
</ce:contents>
</ce:PositionFrame>
<!--
<ce:PositionFrame>
<comment>
//////////////////
// SLIDE-STICKER
//////////////////
</comment>
<ce:config>
<ce:cssClass>
uio-slide-sticker-default
</ce:cssClass>
</ce:config>
<ce:contents>
<ce:SlideSticker>
<ce:contents>
<ce:ImageObject>
<ce:config>
<ce:src>
<text lang="de">img/_scom/sticker/stuelken_N201A_QUAD.png</text>
</ce:src>
</ce:config>
</ce:ImageObject>
</ce:contents>
</ce:SlideSticker>
</ce:contents>
</ce:PositionFrame>
-->
</ce:contents>
</ce:HeaderCarouselSlide>
</ce:contents>
</ce:HeaderCarousel>
</ce:contents>
</ce:WebPageHeader>
WebSite
Ein typischer XML Code mit welchem eine ce:WebSite Instanz deklariert wird. Der Code für dieses Beispiel ist auf die Elemente reduziert welcher für die Konfiguration des Carousels bzw. der Slideshow im Seitenkopf benötigt wird.
<?xml version="1.0" encoding="UTF-8"?>
<doc
xsi:schemaLocation="http://snewmedia.com/snm/uio3/specs/ce ce.xsd"
>
<ce:WebSite version="1.5.2.32">
<ce:properties from="CreativeWork">
</ce:properties>
<ce:properties from="Thing">
<ce:theme>
<ce:use>example_32062352353</ce:use>
</ce:theme>
<ce:skin>
<ce:use>scom_32062352353</ce:use>
</ce:skin>
<ce:isPartOf-WebSite-File>
</ce:isPartOf-WebSite-File>
<ce:url-relative>
<text>@snm</text><!-- -->
</ce:url-relative>
</ce:properties>
<ce:config>
<ce:RevSliderConfig>
<ce:OverlayShader>
<ce:chosenType>
<text lang="de">osh-stuelken-20230821-v001</text>
<text lang="en">osh-stuelken-20230821-v001</text>
</ce:chosenType>
</ce:OverlayShader>
</ce:RevSliderConfig>
..
</ce:config>
</ce:WebSite>
</doc>
theme.xsl
Der XSL Prozessor beginnt die Verarbeitung von Templates mit dem Lesen und Parsen der theme.xsl Files, siehe theme.xsl.
Template get_RevSlider_chosenTyp
Innerhalb dieses theme.xsl Files wird eine Template "get_RevSlider_chosenType" referenziert oder direkt definiert. Diese Template läd aus dem aktuell referenzierten ce:WebSite Dokument die zugehörige Konfiguration.
xsl:param: language_chosen_key
xsl:param: uri_WebSite
<xsl:template name="get_RevSlider_chosenType">
<xsl:param name="language_chosen_key">de</xsl:param><!-- @todo Spracheinstellung übernehmen aus Daten oder Context -->
<xsl:param name="uri_WebSite"></xsl:param>
<xsl:value-of select="document($uri_WebSite)//ce:WebSite//ce:RevSliderConfig//ce:OverlayShader/ce:chosenType/df:text[@lang=$language_chosen_key]"/>
</xsl:template>
Rendering der WebPage
Eine Slideshow ist ein Content Element innerhalb eines ce:WebPage Elements. Ein Rendering der Slideshow erfordert es also, dass zuerst der Prozessor ein WebPage Element zu rendern versucht.
WebSite
template "df:HTMLBODY_MAIN_010_Slider" welche auf df:HTMLBODY_MAIN_010_Slider Elemente über match reagieren kann, wenn der zugehörige Mode render_WebPageMain ist.
<xsl:template match="df:HTMLBODY_MAIN_010_Slider" mode="render_WebPageMain">
<xsl:param name="language_chosen_key">de</xsl:param><!-- @todo Spracheinstellung übernehmen aus Daten oder Context -->
<xsl:param name="uri_WebSite"></xsl:param>
<!-- Der Slider benötigt den <RevSliderConfig> Knoten aus dem WebSite-XML-Dokument -->
<!--
VARIANTE 1: FUNKTIONIERT
<xsl:variable name="chosenType">
<xsl:value-of select="document($uri_WebSite)//WebSite//RevSliderConfig//OverlayShader/chosenType/text[@lang=$language_chosen_key]"/>
</xsl:variable>
<xsl:value-of select="$chosenType"/>
-->
<!--
VARIANTE 2: FUNKTIONIERT NICHT: XPATH RETURNED NO RESULT.
<xsl:value-of select="$WebSite_RevSliderConfig_NODE/OverlayShader/chosenType/text[@lang=$language_chosen_key]"/>
-->
<!--
VARIANTE 3: FUNKTIONIERT
-->
<xsl:variable name="WebSite_RevSliderConfig_chosenType">
<xsl:call-template name="get_RevSlider_chosenType">
<xsl:with-param name="uri_WebSite">
<xsl:copy-of select="$uri_WebSite"/>
</xsl:with-param>
</xsl:call-template>
</xsl:variable>
Fußnoten
Quellenangaben
- [1]↑ jQuery: jQuery: jQuery war eine in JavaScript programmierte Funktionsbibliothek welche im Schwerpunkt DOM-Operationen im Browser dort vereinfachte und vereinheitlichte, wo dieses mit den verschiedenen, abweichenden Standards der wirklichen Browser nicht gegeben war.
- [2]↑ XHTML: XHTML: Bei XHTML handelt es sich um einen HTML-Standard des W3C bei welchem HTML konsequent XML-konform programmiert werden muss. Der Standard hatte sich nicht durchsetzen können und wurde am Markt durch das in Bezug auf die Syntax laschere und nachlässigere HTML5 ersetzt weil schlussendlich viele Entwickler weltweit nicht in der Lage oder auch nicht interessiert daran waren, die XML Syntax einzuhalten.
- [3]↑ Flash ActionScript: Flash ActionScript ist eine Programmiersprache mit welcher Programme für das Browser-Plugin "Flash" von Adobe programmiert werden können. Browser-Plugins von Adobe hatten bis etwa 2006 eine immense Bedeutung. Mit der Einführung von HTML5 Standards und Akzeptanz von JavaScript als Skriptsprache im Web durch alle Browser-Hersteller wollten Anwender keine Plugins mehr installieren müssen.
UIO3 Es ist einfacher als Du denkst.
Stelle noch heute Deine Anfrage.