Diesen Tipp in Originalversion zeigen.

Newsbox mit XML

Dieser Artikel zeigt wie eine einfache News-Anzeige mit Hilfe von XML realisiert werden kann. Die XML-Datei wird dabei extern geladen, sodass Änderungen nur noch an dieser Datei vorgenommen werden müssen.

Benötigt werden zwei Textfelder: date_txt für die Datumanzeige und content_txt für den News-Text. Außerdem werden zwei Mcs next_btn und back_btn zum Durchsuchen der News benötigt.

Die XML-Datei:

<?xml version='1.0' encoding='utf-8' ?>
<mynews>
     <news>
          <date>21.03.05</date>
          <text>Das Laden einer XML-Datei ist ganz einfach!</text>
     </news>
     <news>
          <date>01.04.05</date>
          <text>Das Navigieren ist auch kein Problem.</text>
     </news>
     <news>
          <date>07.04.05</date>
          <text>Dies ist die DRITTE Meldung.</text>
     </news>
     <news>
          <date>21.03.05</date>
          <text>Dies ist die VIERTE Meldung.</text>
     </news>
     <news>
          <date>21.03.05</date>
          <text>Diese Meldung ist die letzte, also die aktuelleste Meldung. Viel Spaß!</text>
     </news>
</mynews>

Der Code:

System.useCodePage = true; // Latin-1, damit Zeichen, wie ü ö ß etc richtig angezeigt werden.

var aktNews = 0; // Nummer der aktuellen News
var news_arr = []; // Array, welches die News verwalten wird.

var news_xml = new XML();
news_xml.ignoreWhite = true;
news_xml.load("news.xml");

news_xml.onLoad = function(korrektGeladen)
{
     if(korrektGeladen)
     {
          news_arr = news_xml.firstChild.childNodes;
          zeigeNews();
     }
     else // wenn z.B. die XML-Datei nicht gefunden wurde.
          content_txt.text = "Die XML-Datei konnte nicht geladen werden.";
};


//====================================================
// Navigation - Buttons
//====================================================
next_btn.onRelease = function()
{
     if(aktNews < news_arr.length - 1)
     {
          aktNews = aktNews + 1;
          zeigeNews();
     }
};
back_btn.onRelease = function()
{
     if(aktNews > 0)
     {
          aktNews = aktNews - 1;
          zeigeNews();
     }
};


/* Methode zeigeNews
* Beschr.: Gibt die News in den beiden Textfeldern aus.
*/
function zeigeNews ()
{
     date_txt.text = news_arr[aktNews].firstChild.firstChild;
     content_txt.text = news_arr[aktNews].childNodes[ 1 ].firstChild;
}

Autor: P. Nazari ()


Copyright (c) 2002-2005 by Andreas Schroth

URL: www.computer-tipps.net/webdesign149.html