Tags:    xml Hvis du har læst de artikkeler jeg har skrevet om XML, har du sikkert bemærket, at man kan lave en masse ting med XML og CSS, dog er der nogle begrænsninger, man kan f.eks ikke undlade at lave formatering for et element fordi det så vil blive vist som en XML tag i browseren og det er jo ikke meningen.
Man kan heller ikke bestemme hvilke elementer der skal vises og hvilke der ikke skal vises.

Men det kan man til gengæld med den teknik som du kan lære om i denne artikel. Tekninken hedder Data Island (en slags data ø).
Måske sidder du efter at have læst indledningen og tænker, hvorfor skal jeg dog bruge en Data Island når jeg med XSLT har ubegrænsede muligheder for at præsentere XML data på lige den måde jeg vil og i lige det format jeg vil ?

Så er svaret, at med en Data Islands kan man indlæse et helt XML dokument som en ø af XML data på klienten (i browseren) og derefter lave en binding imellem XML data og nogle bestemte HTML elementer (tags).
Det giver nogle fordele præsentations mæssigt men man kan også lave nogle ret smarte redigerings moduler.

I denne artikkel vil jeg vise to ting:

1. Hvordan man laver nogle anderledes tabel opstillinger.
2. Hvordan man laver en redigeringsside.

Html elementer der kan bindes til XML data.

Principet i Data Islands er at man laver en binding imellem XML data og nogle bestemte HTML elementer (tags).

Inden jeg går i krig med det første eksempel, vil jeg i tabellen herunder vise de HTML elementer, der kan bindes til XML data, hvilken egenskab ved elementet der bindes og om elementet kan opdaterer XML eller kun vise XML.

Det er ikke alle HTML elementer der kan bindes til XML og af de HTML elementer der kan, er der nogle af dem der "kun" kan vise XML data men nogle HTML elementer kan også bruges til at ændre XML data via deres tekst indhold. Det er kun data der kan ændres ikke selve XML noden.



Hvis du kigger lidt nærmere på tabellen vil du se at der er nogle af HTML elementerne der hverken kan opdater XML eller vise XML data i et HTML element.
Det virker måske en smule ulogisk at binde XML data til et element der umidelbart ikke er i stand til at stille noget op med Xml data.

Men forstil dig at du f.eks har en menu på en HTML side som der bliver opdateret ofte.
Hvis man så gemmer sine URL'er i et XML dokument og at URL'erne er lagt i nogle noder f.eks:
<url-1>menu1.htm</url-1>, <url-2>menu2.htm</url-2> osv. vil du kunne vedligeholde hele menuen via XML og en Data Island.

I den HTML fil der indeholder menuen vil du så kunne referere URL'erne i et A element på denne måde:

<a datafld="url-1">menu1</a>
<a datafld="url-2">menu2</a>

Som du ser bliver den bundene egenskab i dette tilfælde href erstattet med en datafld attribut, browseren vil automatisk opfatte A elementets datafld attribut som en href der indeholder værdien af <url-1> tekst-node som jo i det første tilfælde vil være menu1.htm. Hvis menuen bliver brugt på alle sider på et website der indeholder mange sider er fordelen åbenlys.

Det er de samme fordele man opnår, som man f.eks kan opnå ved at generer menupunkter med Javascript, ASP osv.

Nu hvor en del af teorien bag Data Islands er på plads er det vist på tide at komme i gang med et eksempel, men der er lige en lille smule mere teori først.

Man laver en Data Island i et HTML dokument med et XML element der ser sådan her ud:

<xml id="hentdata" src="visfamilie.xml"></xml>

Elementet fortæller browseren at den skal gøre 3 ting:

1. Indlæse en ø af XML data (Data Island)
2. Bruge et id som henvisning til Data Islanden
3. Læse XML data fra filen visfamilie.xml

I de fleste tilfælde men langt fra alle vil man opbygge en side som indeholder en Data Island i en tabel, for at kunne bruge Data Islanden skal tabellen have et par attributter som du måske ikke har set før:

<table border="0" datasrc="#hentdata" datapagesize="4">

Attributten datasrc="#hentdata" referere til id'et der indeholder Data Islanden.
Attributten datapagesize="4" fortæller hvor mange elementer der skal vise ad gangen.

Inden vi går i gang med det første eksempel er der lige en ting mere.
For at bindingen imellem XML og HTML kan laves SKAL det XML dokument man vil bruge være struktureret som en liste.
Her løber jeg så ind i det problem at den XML fil (familie.xml) jeg har arbejdet med i de tre andre artikler jeg har skrevet om XML, indeholder et element der gør at filen ikke er at betragte som en liste, elementet er dette:

<overskrift>stamtræ</overskrift>

Så derfor har jeg lavet en fil der hedder visfamilie.xml hvor det nævnte element ikke optræder.
Herefter er kravende til liste formen opfyldt og jeg kan begynde at lave en HTML fil med en Data Island.

Ud over at jeg har fjernet overskrifts elementet har jeg tilføjet XML dokumentet disse to nye elementer: <job-titel> og <beskrivelse> for at have nogle flere elementer at arbejde med.
De nye elementer indgår i alle familiemedlem elementer og bryder derfor ikke liste strukturen.

Eksempel 1. Stamtræ vist med Data Island og Html tabeller.

Eksemplet herunder viser hvordan man kan opbygge en HTML fil der henter data fra en XML fil og præsentere dem i en tabel.

Hvis du tænker på at den XML fil jeg arbejder med indeholder 14 familiemedlem elementer som igen indeholder mindst 8 child-elementer og at jeg skulle lave td'er til alle de elementer der er indeholdt i XML filen som ren HTML, ville jeg være nødt til at skrive 8 td'er med tilhørende tr'er til hvert familiemedlem.

Med en Data Island kan jeg spare en masse HTML kode samt få en lidt anderledes visning af familiemedlem elementerne end jeg kan med almindelig HTML.

<html>

  <head>

    <title>Udsnit af mit stamtræ</title>

    <style type="text/css">
        body {font-family: verdana; font-size:11px;}
        th {color:#CC7002;font-size:12px;border:solid 1px black;}
        td {padding:3px;font-size:10px;}
        input {background-color:#FFBC54;font-size:11px;}
    </style>

  </head>

  <body>
  <h2>Udsnit af mit stamtræ</h2>
  <p>Her er en oversigt over nogle af mine 
    familiemedlemmer vist med en Data Island
    - Skift side med knapperne.</p>

  <xml id="hentdata" src="visfamilie.xml"></xml>

<input type="button" onClick="naeste.previousPage();" value="Tilb">
<input type="button" onClick="naeste.nextPage();" value="Frem">

<table border="0" id="naeste" datasrc="#hentdata"   datapagesize="4">

  <thead>
    <tr bgcolor="#FFBC54" cellpadding="1">
      <th>Fornavn</th>
      <th>Efternavn</th>
      <th>Id</th>
      <th>Køn</th>
      <th>Alder</th>
      <th>Højde</th>
      <th>Vægt</th>
      <th>Beskrivelse</th>
    </tr>
  </thead>

  <tbody>
    <tr valign="top" bgcolor="#bfbfbf">
      <td><span datafld="fornavn"></span></td>
      <td><span datafld="efternavn"></span></td>
      <td><span datafld="id"></span></td>
      <td><span datafld="koen"></span></td>
      <td><span datafld="alder"></span></td>
      <td><span datafld="hoejde"></span></td>
      <td><span datafld="vaegt"></span></td>
      <td><span datafld="beskrivelse"></span></td>
    </tr>
  </tbody>

</table>

</body>
</html>

Som du kan se hvis du "tygger" dig igennem hele koden er ovenstående et helt normalt HTML dokument, på nær de elementer der har med Data Islanden at gøre.

De eneste ting jeg ikke har beskrevet før er de to <input> elementer.
Hvert <input> element indeholder en onclick event der kalder hver sin javascript metode som udføres på det id jeg har givet table elementet (naeste).
de 2 metoder er ansvarlig for at vise henholdsvis de 4 næste XML elementer og
de 4 foregående XML elementer.

Xml data bliver bundet til <span> elementerne med attributten datafld og hvis du husker på tabellen der viser elementer der kan bindes vil du se, at det er <span> elementernes innerText egenskab der er blevet bundet til XML'en.

Hvis du kigger lidt nærmere på span elementerne vil du også se at i modsætning til eksemplet XML og CSS på foregående side er det ikke alle XML dokumentes elementer der bliver vist.
Med en Data Island bestemmer man selv hvilke XML elementer der skal med i visningen.

Du kan se det færdige eksempel hvis du klikker på linket herunder.
For at få en fornemmelse af teknikken, så start med at tjekke kildekoden for at se hvordan koden ser ud. Skift derefter side med knapperne og tjek koden igen.
Du vil se at selvom at indholdet i tabellen bliver udskiftet forbliver HTML koden den samme.
Med andre ord der bliver ikke skiftet til en ny side, det er kun span elementernes innerText egenskab der bliver opdateret.

http://cws-webservice.dk/xml/vis-stamtrae.htm

Eksempel 2. Redigering af stamtræ med Data Island og formular elementer.

Som du så i første eksempel kan man præsentere XML data i HTML elementer, men man kan også bruge en Data Island som et redigerings modul.
Det vil sige at man kan redigere en XML nodes tekstværdi i en browser.
Det man gør er, at man binder XML data til nogle af HTML's form elementer, den egenskab man binder er henholdsvis value for input/textarea elementer og for et select element er det value egenskaben i de option elementer der er indeholdt i select boksen der bindes.
Dog er det for input elementer af typen radio/checkbox egenskaben checked der bindes til XML data.

Hvis du kigger lidt på den HTML fil der står i kode boksen herunder vil du se, at de eneste forskelle på dette eksempel og det foregående er, at span elementerne fra før er udskiftet med nogle form elementer, samt at der er kommet et XML element med i visningen der hedder job-titel.
Elementet job-titel er indsat i et select element og alle de forskellige jobtitler der findes i XML filen vis-familie.xml er blevet "hardcodet" i hvert sit option element.

Det har den betydning, at når/hvis du klikker på linket efter eksemplet vil der være en selectbox knyttet til hvert familiemedlem element og den specifikke job-titel for et familiemedlem vil være den selected option hos de enkelte familiemedlemmer.

Det vil så være muligt at give de enkelte familiemedlemmer en ny job-titel ved at vælge en anden option i selectboxen, du vil også kunne redigere et familiemedlems øvrige egenskaber fornavn, beskrivelse osv.
De ændringer man laver vil blive husket selvom at man skifter til visning af 4 nye familiemedlemmer.

Jeg må lige understrege at:

1. Det er kun Data Islanden der bliver opdateret.

2. De ændringer man laver bliver IKKE gemt i den XML fil man læser data fra.

Hvis man vil gemme de ændringer man laver, kan det ret let gøres med f.eks et ASP script, som først indlæser den opdaterede XML og laver en ny XML fil ved hjælp af ASP komponenten FileSystemObject. Efter eksemplet vil jeg vise hvordan laver sådan et ASP script.

<html>

  <head>

    <title>Udsnit af mit stamtræ</title>

    <style type="text/css">
        body {font-family: verdana; font-size:11px;}
        th {color:#CC7002;font-size:12px;border:solid 1px black;}
        td {font-size:10px;}
        input {background-color:#FFBC54;border:solid 1px;}
        select {background-color:#FFBC54;font-size:10px;}
        textarea {background-color:#FFBC54;font-size:12px;}
    </style>

  </head>

  <body>
  <h2>Udsnit af mit stamtræ</h2>
  <p>Her er en oversigt over nogle af mine 
    familiemedlemmer vist med en Data Island
    - Skift side med knapperne.</p>

  <xml id="hentdata" src="visfamilie.xml"></xml>

<input type="button" onClick="naeste.previousPage();" value="Tilb">
<input type="button" onClick="naeste.nextPage();" value="Frem">

<table border="0" id="naeste" datasrc="#hentdata"   datapagesize="4">

  <thead>
    <tr bgcolor="#FFBC54" cellpadding="1">
      <th>Fornavn</th>
      <th>Efternavn</th>
      <th>Id</th>
      <th>Køn</th>
      <th>Alder</th>
      <th>Højde</th>
      <th>Vægt</th>
      <th>Jobtitle</th>
      <th>Beskrivelse</th>
    </tr>
  </thead>

  <tbody>
    <tr valign="top" bgcolor="#bfbfbf">
      <td><input datafld="fornavn"></td>
      <td><input datafld="efternavn"></td>
      <td><input datafld="id"></td>
      <td><input datafld="koen"></td>
      <td><input datafld="alder"></td>
      <td><input datafld="hoejde"></td>
      <td><input datafld="vaegt"></td>
      <td>
       <select datafld="job-titel">
        <option value="Sosu-Assistent">Sosu-Assistent</option>
        <option value="Web-programmør">Web-programmør</option>
        <option value="Skole Elev">Skole Elev</option>
        <option value="EDB-Assistent">EDB-Assistent</option>
        <option value="Vognmand">Vognmand</option>
        <option value="Frisør">Frisør</option>
        <option value="Rengørings Assistent">Rengørings Assistent</option> 
        <option value="VVS Teknikker">VVS Teknikker</option>
        <option value="Børnehave Gog">Børnehave Gog</option> 
        <option value="Børnehave Elev">Børnehave Elev</option> 
        <option value="Fortovs besudler">Fortovs besudler</option>
       </select>
      </td>
      <td>
       <textarea datafld="beskrivelse" rows="2" cols="18" ></textarea>
      </td>
    </tr>
  </tbody>

</table>

</body>
</html>

http://cws-webservice.dk/xml/rediger-stamtaer.htm

Som du ser er fordelen i dette eksempel den samme som i eksemplet med span elementerne.
Nemlig den at man sparer en masse indtastning af HTML kode. Men den helt store fordel er, at de samme XML data genbruges i flere forskellige visninger.

Som før beskrevet er det kun Data Islanden der bliver opdateret og ikke selve XML filen, men det er ganske nemt at gemme en XML fil med de opdaterede data med et ASP script.
I kode boksen herunder kan du se et script der gemmer de nye XML data på serveren.

<SCRIPT LANGUAGE="JSCRIPT" RUNAT="SERVER">

//
// 1. Skaf xml fra querystring. Tilføj encoding-attribut til header.
//
var strXML = Request("strXML") + "";
strXML = strXML.replace("<?xml version=\\"1.0\\"?>", "<?xml version=\\"1.0\\" encoding=\\"ISO-8859-1\\"?>");

//
// 2. Skriv XML til fil. 
//
skrivTilFil(Server.MapPath("visfamilie.xml"), strXML);

//
// 3. Skift til redigerings-siden igen. 
//
Response.Redirect ("rediger-stamtaer.htm");

//
// funktion der laver den nye XML fil
//
function skrivTilFil(strFilNavn, strTekst)
{
var fso = Server.CreateObject("Scripting.FileSystemObject");
var f = fso.OpenTextFile(strFilNavn, 2, true);
f.Write (strTekst);
}

</SCRIPT>

8 linjer ASP kode det er alt hvad der skal til !

Men for at scriptet virker skal filen rediger-stamtaer.htm have tilføjet en HTML form der sender de opdaterede XML data til scriptet, formen skal se sådan her ud:

<form name="formSave" action="opdaterxmldata.asp" method="post">
   <input type="hidden" name="strXML">
   <input type="submit" onclick="formSave.strXML.value=hentdata.xml;" value="Gem Familie">
</form>

Det der sker er:
Når en bruger klikker på Gem Familie knappen kaldes ASP scriptet med en querystring parameter (strXML), strXML indeholder en fil der hedder hentdata.xml og hvis du kan huske det så hed det id jeg gav Data Islanden "hentdata", så det er altså de opdaterede XML data fra filen rediger-stamtaer.htm der bliver sendt til ASP scriptet som så klarer resten.

Der er en grund til at jeg ikke har lavet et redigerbart eksempel:

Da scriptet retter direkte i filen visfamilie.xml vil det bliver noget rod hvis alle og enhver kan ændere i mine XML filer, med mindre der bliver lavet en opdatering tilbage til visfamilie.xml igen.
Det vil selvfølgelig også være muligt, at lave nye xml filer i stedet for, at overskrive den, man vil også kunne tilføje data til en xml fil det er kun et spørgsmål om, hvilken tilstand man benytter på FSO objektet og på OpenTextFile metoden.

Det var så lidt om Data Islands, hvis du ikke helt kan så fidusen med en Data Island så prøv, at forestille dig følgende:

Hvis du laver et database udtræk og sender data til et ASP script, der på grundlag af data udtrækket laver en xml fil og sender hele filen til klienten i form af en Data Island. Så vil man kunne arbejde med data i rent tekst format, hviklet som bekendt er del hurtigere end, at opdatere en database hver gang en brugere laver en ændring af data, tilsidst kan de redigerede xml data sendes til et ASP script der så indsætter data i datbasen igen.

Og så lige tilsidst en lille ting til inspirationen og kreativteten da et XSLT stylesheet også er XML vil et stylesheet også kunne sendes til klienten som en Data Island.
Det giver nogle helt andre muligheder som f.eks at indlæse flere forskellige stylesheets og bruge et af dem alt efter hvad en bruger foretager sig !

Håber at du har fået lidt nyttig viden ud af denne artikel.

MVH
Claus Pryds.


Hvad synes du om denne artikel? Giv din mening til kende ved at stemme via pilene til venstre og/eller lægge en kommentar herunder.

Del også gerne artiklen med dine Facebook venner:  

Karma barometer (30 dage)

IT jobs | Kontakt | Om Udvikleren.dk | Om karma | IT nyheds arkiv | Annoncering

X