Dokumentation RSS Feed Widgets
RSS Feed Widget 2

Mit diesem Widget kann man die im Konfigurationsdialog des Adapters abonnierten RSS Feeds anzeigen lassen.
Um eine möglichste Darstellung gewährleisten zu können, wurde ein Template-System gewählt.
Beschreibung der Formatierung und Syntax finden sich auf den folgenden Seiten
https://ejs.co/ und https://github.com/mde/ejs
Attribute
Attribut rss_oid
Auswahl des Datenpunktes mit dem entsprechenden RSS Feed.
Attribut rss_template
Das Template bestimmt das Aussehen des RSS Feeds. Im Template können alle gültigen HTML-Tags (inklusive CSS-Attribute in Style-Tags) verwendet werden.
Darüber hinaus gibt es spezielle Tags, innerhalb derer die Feed-Daten angezeigt werden und Javascript-Anweisungen ausgeführt werden können.
Um die Daten und ihre verwendeten Attributnamen besser identifiziert werden können, existieren noch die beiden Widgets rssfeed Meta helper und rssfeed Article helper.
Das Templatesystem arbeitet mit bestimmten Tags.
Die verwendeten Tags bedeuten das folgenden
<%= Der Inhalt des enthaltenen Ausdrucks/Variable wird escaped ausgegenen.
<%- Der Inhalt des enthaltenen Ausdrucks/Variable wird unescaped ausgegenen.
<% Tag ohne Ausgabe, wird für javascriptanweisungen verwendet
%> ist generell ein schließender Tag um eines der vorherigen abzuschließen
Alles was außerhalb dieser Tags ist, wird genau so dann angezeigt bzw. wenn es HTML ist als HTML interpretiert ausgegeben. (siehe bspw das p-tag,div-tag,small-tag
Innerhalb des Templates habt ihr 2 vorgegebene variablen zur Verfügung
meta: Hier sind alle Metainformationen zum Feed enthalten. Die folgenden Inhalte stehen zur Verfügung. Ich denke die Bezeichner sind selbst erklärend. In der Hilfe werde ich diese noch genauer Beschreiben. bzw den Inhalt spezifizieren (manche sind Arrays)
meta.title
meta.description
meta.link
meta.xmlurl
meta.date
meta.pubdate
meta.author
meta.language
meta.image
meta.favicon
meta.copyright
meta.generator
meta.categories
articles: Ist ein Array mit einzelnen Elementen (javascript array). Jedes Element hat die folgenden Eigenschaften.
Damit es zum Beispiel passt mache ich hier mal das Prefix item davor. Aber wenn ihr wollt könnt ihr das selbst wählen. Es muss dann nur in der Schleife (forEach) entsprechend benannt werden. Auch hjier sind die Bezeichner erst einmal selbst erklärend. Nicht in jedem Feed sind alle attribute auch gefüllt. Die wichtigsten sind im obigen Template bereits enthalten.
item.title
item.description
item.summary
item.link
item.origlink
item.permalink
item.date
item.pubdate
item.author
item.guid
item.comments
item.image
item.categories
item.source
item.enclosures
Beispiele eines Template, welches für viele RSS Feeds als Start verwendet werden kann:
<%= meta.title %>
<% articles.forEach(function(item){ %>
<p><small><%- vis.formatDate(item.pubdate, "TT.MM.JJJJ SS:mm") %></small></p>
<h3><%- item.title %></h3>
<p><%- item.description %></p>
<div style="clear:both;" />
<% }); %>
Kurze Beschreibung was in den einzelnen Zeilen passiert
Z1: Der Feed-titel wird ausgegeben
Z2: Ohne Ausgabe. Schleife über alle articles, bei jedem Durchgang wird das aktuelle Element der variable item zugewiesen.
Z3: Datum und Uhrzeit wird ausgegeben und wird in einem p/small-Tag eingeschlossen zur Formatierung. Zur Formatierung wird die vis-eigene Datumsformatfunktion verwendet. Beschreibung ist im adapter vis zu finden.
Z4: Der Titel des Artikels wird ausgegeben. Zur Formatierung wird der Tag für Überschrift 3 verwendet
Z5: Der Inhalt des Artikels wird ausgegeben und in einem p-Tag eingeschlossen. Hier ist, zumindest bei den beiden Beispielen, HTML-code enthalten, der meist ein Bild, sowie beschreibenden Text mitbringt
Z6: Ein div-Tag, das ausgegeben werden muss, um eine spezielle Formatierung im Feed wieder aufzuheben.
Z7: Ohne Ausgabe. Hier wird die Schleife geschlossen. Alles was zwischen Z2 und Z7 definiert wurde, wird für jeden einzelnen Artikel wiederholt.
Attribut rss_maxarticles
Die maximal angezeigte Anzahl von einzelnen Artikeln aus dem RSS Feed
Attribut rss_filter
Für die Filter-Funktion kann in das Feld ein oder mehrere Filterkriterien mit Semikolon (;) getrennt eingegeben werden.
Für die Suche werden die folgenden Artikel-Attribute durchsucht: titel, description, categories.
Es werden nur Artikel angezeigt, die einen dieser Begriffe enthält.
Templatebeipiele
Standardtemplate
Diese Template wird intern verwendet, auch wenn in der Widgetkonfiguration nichts erfasst wurde.
<%= meta.title %>
<% articles.forEach(function(item){ %>
<p><small><%- vis.formatDate(item.pubdate, "TT.MM.JJJJ SS:mm") %></small></p>
<h3><%- item.title %></h3>
<p><%- item.description %></p>
<div style="clear:both;" />
<% }); %>
Template Slideshow
Mit diesem Template werden die Artikel der Reihe nach ein und wieder ausgeblendet.
Am Anfang des Templates können die Zeiten für das Ein/Ausblenden, sowie die Anzeigedauer konfiguriert werden. Die Werte werden in Millisekunden notiert.
Vielen Dank an Sebastian-IO für deinen Beitrag
<script>
// Konfigurationsbereich Anfang
var fadeTime = 1000; //Zeit in Millisekunden zum Ein und Ausblenden eines Artikels
var showTime = 4000; //Zeitdauer, wie lange ein Artikel angezeigt werden soll
// Konfigurationsbereich Ende
</script>
<style>
#{wname} .slideshow {
position: relative;
}
#{wname} .slideshow > div {
position: absolute;
display: none;
}
#{wname} .slideshow > div:nth-child(0n+1) {
display: block;
}
</style>
<script>
setInterval(function() {
$('#{wname} .slideshow > div:first')
.fadeOut(fadeTime)
.next()
.fadeIn(fadeTime)
.end()
.appendTo('#{wname} .slideshow');
}, showTime);
</script>
<%= meta.title %>
<div class="slideshow">
<% articles.forEach(function(item){ %>
<div>
<p><small><%- vis.formatDate(item.pubdate, "TT.MM.JJJJ SS:mm") %></small></p>
<h3><%- item.title %></h3>
<p><%- item.description %></p>
<div style="clear:both;" />
</div>
<% }); %>
</div>
RSS Feed Multi Widget

Mit diesem Widget können mehrere Feeds in einem widget aggregiert dargestellt werden.
Aufgrund der mehreren Feed, gibt es hier ein paar Unterschiede zur Datenverfügbarkeit im Template im Vergleich zum normalen RSS Feed widget.
Die Variable meta ist im template nicht verfügbar. Allerdings sind 3 Meta-attrribute title und description in jedem einzelnen Artikel unter den Bezeichnungen meta_title und meta_description verfügbar.
Darüber Hinaus kann in den Einstellungen für jeden Feed ein Allgemeiner Name vergeben werden, der innerhalb des templates unter der Bezeichung meta_name in jedem Artikel zur Verfügung steht, damit die Herkunft eines Artikels jeweils gekennzeichnet werden.
Ansonsten gelten für das Template die selben Regeln wie bei RSS Feed widget.
Beschreibung der Formatierung und Syntax finden sich auf den folgenden Seiten
https://ejs.co/ und https://github.com/mde/ejs
Attribute
Attribut rss_feedCount - Gruppe Allgemein
Hier kann die Anzahl der zu konfigurierenden Feeds eingestellt werden. Für jeden Feed wird in vis eine separate Gruppe zur Konfiguration erzeugt.
Attribut rss_template - Gruppe Allgemein
Das Template bestimmt das Aussehen des RSS Feeds. Im Template können alle gültigen HTML-Tags (inklusive CSS-Attribute in Style-Tags) verwendet werden.
Darüber hinaus gibt es spezielle Tags, innerhalb derer die Feed-Daten angezeigt werden und Javascript-Anweisungen ausgeführt werden können.
Um die Daten und ihre verwendeten Attributnamen besser identifiziert werden können, existieren noch die beiden Widgets rssfeed Meta helper und rssfeed Article helper.
Für dieses Feld gelten, bis auf die Verfügbarkeit der Variablen, die selben Regeln wie für das Feld Template im widget RSS Feed Widget
Innerhalb des Templates habt ihr 2 vorgegebene Variable zur Verfügung
articles: Ist ein Array mit einzelnen Elementen (javascript array). Jedes Element hat die folgenden Eigenschaften.
Damit es zum Beispiel passt mache ich hier mal das Prefix item davor. Aber wenn ihr wollt könnt ihr das selbst wählen. Es muss dann nur in der Schleife (forEach) entsprechend benannt werden. Auch hier sind die Bezeichner erst einmal selbst erklärend. Nicht in jedem Feed sind alle attribute auch gefüllt. Die wichtigsten sind im obigen Template bereits enthalten.
Wie Eingangs bereits beschrieben gibt es in jedem Artikel noch 3 ergänzende Attibute, aus den Meta-Informationen des Feeds (meta_title und meta_description.
meta_name stammt aus dem Attribut rss_name aus der vis Konfiguration zum jeweiligen Feed.
item.title
item.description
item.summary
item.link
item.origlink
item.permalink
item.date
item.pubdate
item.author
item.guid
item.comments
item.image
item.categories
item.source
item.enclosures
meta_title
meta_description
meta_name
dp: Ist ein Objekt, mit den einzelnen konfigurierten Datenpunkten, die innerhalb des Template verfügbar gemacht werden sollen.
Ein Datenpunkt kann innerhalb des Templates wie folgt abgerufen werden
dp['ID des Datenpunktes']
Attribut rss_dpCount - Gruppe Allgemein
Hier kann die Anzahl der weiteren Datenpunkte angegeben werden, die innerhalb des Templates verfügbar gemacht werden sollen.
Attribut rss_dp[zahl] - Gruppe Allgemein
Hier kann der jeweilige Datenpunkt ausgewählt werden. Der Datenpunk ist innerhalb des Templates unter der Variable dp verfügbar. d.h. ein Datenpunkt kann innerhalb des Templates wie folgt abgerufen werden
dp['ID des Datenpunktes']
Attribut rss_oid - Gruppe Feeds[zahl]
Auswahl des Datenpunktes mit dem entsprechenden RSS Feed.
Attribut rss_name - Gruppe Feeds[zahl]
Hier kann eine Bezeichnung eingegeben werden, die im Template je Artikel unter dem Attributnamen meta_name verfügbar gemacht wird.
Attribut rss_maxarticles - Gruppe Feeds[zahl]
Die maximal angezeigte Anzahl von einzelnen Artikeln aus dem RSS Feed
Attribut rss_filter - Gruppe Feeds[zahl]
Für die Filter-Funktion kann in das Feld ein oder mehrere Filterkriterien mit Semikolon (;) getrennt eingegeben werden.
Für die Suche werden die folgenden Artikel-Attribute durchsucht: titel, description, categories.
Es werden nur Artikel angezeigt, die einen dieser Begriffe enthält.
RSS Feed Meta Helper

Mit diesem Widget können die Meta-Attribute eines bestimmten Feeds angezeigt werden.
Es dient lediglich als Hilfs-Widget zur Erstellung eines Templates um sich schnell und einfach die Inhalte der RSS Feed-Daten anzeigen zu lassen.
Attribute
Attribut rss_oid
Auswahl des Datenpunktes mit dem entsprechenden RSS Feed.
RSS Feed Article Helper 2

Mit diesem Widget können die Artikel-Attribute eines bestimmten Feeds angezeigt werden.
Es dient lediglich als Hilfs-Widget zur Erstellung eines Templates um sich schnell und einfach die Inhalte der RSS Feed-Daten anzeigen zu lassen.
Attribute
Attribut rss_oid
Auswahl des Datenpunktes mit dem entsprechenden RSS Feed.
Attribut rss_prefix
Zum leicheteren Verwendung der Attributnamen per Copy/Paste, kann hier der im Template für einen Artikel verwendete Variablenname angegeben werden.
Attribut rss_article
Über dieses Attribut kann durch die verschiedenen vorhandenen Artikeln im RSS Feed geschaltet werden.
RSS Feed Title marquee 3

Mit diesem Widget werden alle Titel-Attribute als Laufschrift ausgegeben werden.
Im Rahmen der Umstellung von marquee widget 2 auf 3, ist diese widget nun ein Multi widget, in dem man auch mehr wie ein RSS feed zusammen aggregieren kann.
Attribute
Attribut rss_feedCount - Gruppe Allgemein
Hier kann die Anzahl der zu konfigurierenden Feeds eingestellt werden. Für jeden Feed wird in vis eine separate Gruppe zur Konfiguration erzeugt.
Attribut rss_speed - Gruppe Allgemein
Die Scrollgeschwindigkeit der Laufschrift
Attribut rss_divider - Gruppe Allgemein
Hier können die Zeichen eingegeben werden, mit dem die Schlagzeilen getrennt werden. Als Standardwert is +++ voreingestellt.
Attribut rss_pauseonhover - Gruppe Allgemein
Wenn diese Option angeschaltet ist, dann hält die Laufschrift an, sobald man mit der Maus über dem Text schwebt.
Attribut rss_link - Gruppe Allgemein
Wenn diese Option angeschaltet ist, werden die Schlagzeilen als Link ausgegeben. Bei Klick oder Touch auf eine Schlagzeile, wird der Link zum Artikel in einem neuen Fenster oder Tab geöffnet.
Attribut rss_withtime - Gruppe Allgemein
Wenn diese Option angeschaltet ist, wird vor der jeweiligen Schlagzeile die Uhrzeit ausgegeben.
Attribut rss_withdate - Gruppe Allgemein
Wenn diese Option angeschaltet ist, wird vor der jeweiligen Schlagzeile das Datum ohne Jahreszahl und die Uhrzeit ausgegeben.
Attribut rss_withyear - Gruppe Allgemein
Wenn diese Option angeschaltet ist, wird vor der jeweiligen Schlagzeile das Datum mit Jahreszahl und die Uhrzeit ausgegeben.
Attribut rss_oid - Gruppe Feeds[zahl]
Auswahl des Datenpunktes mit dem entsprechenden RSS Feed.
Attribut rss_maxarticles - Gruppe Feeds[zahl]
Die maximal angezeigte Anzahl von einzelnen Artikeln aus dem RSS Feed
Attribut rss_filter - Gruppe Feeds[zahl]
Für die Filter-Funktion kann in das Feld ein oder mehrere Filterkriterien mit Semikolon (;) getrennt eingegeben werden.
Für die Suche werden die folgenden Artikel-Attribute durchsucht: titel, description, categories.
Es werden nur Artikel angezeigt, die einen dieser Begriffe enthält.
RSS Feed Title marquee 2

Dieses Widget nicht mehr verwenden.
JSON Template2

Über dieses Widget, kann ein beliebiger Datenpunkt mit JSON-Daten nach eigenem belieben dargestellt werden.
Die Darstellung erfolgt über ein Template-Format, welches man sich als kombinierte Form von Html-code + Javascript + spezielle Tags, die die Anzeige der JSON-Attribute steuern.
Attribute
Attribut json_oid
Auswahl des Datenpunktes mit den entsprechenden JSON-Daten.
Attribut rss_template
Über das Template kann das Aussehen der JSON-Daten bestimmt werden. Im Template können alle gültigen HTML-Tags (inklusive CSS-Attribute in Style-Tags) verwendet werden.
Darüber hinaus gibt es spezielle Tags, innerhalb derer die JSON-Daten angezeigt werden und Javascript-Anweisungen ausgeführt werden können.
Das Templatesystem arbeitet mit bestimmten Tags.
Die verwendeten Tags bedeuten das folgenden
<%= Der Inhalt des enthaltenen Ausdrucks/Variable wird escaped ausgegenen.
<%- Der Inhalt des enthaltenen Ausdrucks/Variable wird unescaped ausgegenen.
<% Tag ohne Ausgabe, wird für javascriptanweisungen verwendet
%> ist generell ein schließender Tag um eines der vorherigen abzuschließen
Alles was außerhalb dieser Tags ist, wird genau so dann angezeigt bzw. wenn es HTML ist als HTML interpretiert ausgegeben. (siehe bspw das p-tag,div-tag,small-tag
An das Template werden die JSON-Daten mit dem prefix data übergeben. Darüber hinaus steht die aktuelle widgetID ebenfalls als Variable zur Verfügung um diese in individuellen CSS-Anweisungen mit angeben zu können.
Beispielobjekt
{
"einarray": ["eins", "zwei"],
"einobjekt": {
"attribut1": 1,
"attribut2": 2
},
"einezahl": 123,
"eintext": "einszweidrei"
}
dp: Ist ein Objekt, mit den einzelnen konfigurierten Datenpunkten, die innerhalb des Template verfügbar gemacht werden sollen.
Ein Datenpunkt kann innerhalb des Templates wie folgt abgerufen werden
dp['ID des Datenpunktes']
Attribute
Innerhalb des Templates sind alle Attribute über das prefix data erreichbar.
Am obigen Beispiel wären die beiden folgenden Attribute wie folgt ausgebbar
<%- data.einezahl %>
<%- data.eintext %>
Innerhalb von Datenobjekten kann es wiederum verschachtelt Objekte und auch Arrays geben.
Objekte sind an geschweiften Klammern {} zu erkennen und Arrays [] an eckigen Klammern erkennbar
Arrays
Arrays können über einen Index angesprochen werden. Der Index beginnt immer mit 0. allerdings gibt es auch unechte Arrays, bei denen der Index nicht mit 0 beginnt oder gar aus Text besteht. Hier gelten die Regeln für Objekte
am obigen Beispiel wäre dies
<%- data.einarray[0] %>
<%- data.einarray[1] %>
versucht man direkt ein Array ohne index auszugeben, gibt das template alle Elemente mit Komma getrennt aus
<%- data.einarray %>
Arrays können ebenfalls auf einer Auflistung von Objekten bestehen. Das hier vorliegende Beispiel enthält nur ein einfaches Array. Ein Beispiel zu Array mit Objekten erfolgt zu einem späteren Zeitpunkt.
Um ein Array von Anfang bis Ende abzuklappern benötigt man eine Schleife
<% for (var i = 0; i
<%- data.einearray[i] %>
<% } %>
Zeile 1: Start der Schleife und initialisierung der Zählervariable mit 0, dann wird bei jedem Druchgang geprüft, ob Schleife zuende ist, hier wird geprüft, ob die Zählervariable kleiner der Anzahl der Elemente im Array (hier 2), dann wird die Zählervariable nach jedem Durchgang mit i++ um eins erhöht, dann Start eines Blocks mit einer geschweiften Klammer, alles was innerhalb der geschweiften Klammer ist, wird in einem Schleifendurchgang ausgeführt.
Zeile 2: Ausgabe des Elements
Zeile 3: Schließen der Schleife mit einer geschweiften Klammer
Objekte
Objekte konnen einzelne Attribute, Arrays oder wiederum wieder Objekte enthalten. Dadurch können JSON-Daten in beliebieger Tiefe verschachtelt sein.
Attribute eines Objektes können über eine Punktnotation oder Klammernotation angesprochen werden.
Die Punktnotation funktioniert nur, wenn das Attribut bestimmten Namenskonventionen entspricht (Erstes Zeichen muss Buchstabe sein, Rest Zahlen oder Buchstaben oder Unterstrich).
Die Klammernotation funktioniert auch bei Attributen, die nicht der Namenskonvention entspricht.
Punktnotation
<%- data.einobjekt.attribut1 %>
Klammernotation
<%- data.einobjekt["attribut1"] %>
Auch hier kann in einem Attribut nicht nur einer der einfachen Datentypen (text,zahl,bool,etc) gespeichert sein sondern auch wieder ein Array und wieder ein Objekt
Schleife über die Attribute eines Objekts
<% for (var prop in data.einobjekt) { %>
<%- "data.einobjekt." + prop + " = " + data.einobjekt[prop] %>
<% } %>
Zeile 1: Schleife über alle Attribute eines Objektes, hier data.einobjekt und eine geschweifte Klammer für den Start eines Blocks. Alles was innerhalb dieses Blocks steht wird bei jedem Durchlauf ausgeführt und ausgegeben
Zeile 2: Ausgabe eines Textes (innerhalb der Anführungszeichen, sowie den Inhalt des Attributs
Beispiel einer Ausgabenzeile:
data.einobjekt.attribut1 = 1
Zeile 3: Schließen der Schleife mit einer geschweiften Klammer
Fortgeschrittene Anwendung
In den obigen Beispielen wurde nur die reine Ausgabe behandelt. Das Template kann nun auch mit HTML-Tags angereichert werden, um ein bestimmtes Layout zu erreichen. Hier ein Beispiel:
<h3>Datenausgabe</h3>
<style>
.meinecssklasseproperty {
color:green;
}
.meinecssklassedata {
color:red;
}
</style>
<% for (var prop in data.einobjekt) { %>
<span class="meinecssklasseproperty"><%- "data.einobjekt." + prop + " = " %></span><span class="meinecssklassedata"><%- data.einobjekt[prop] %></div>
<% } %>