Tags:    xml

XML og CSS

Når man arbejder med XML og CSS er fremgangsmåden den samme som i forbindelse med HTML og CSS. Så hvis du kender HTML og CSS vil det ikke være svært for dig at følge med.
Hvis du derimod ikke kender CSS kan jeg anbefale dig, at besøge min HP
http://cws-webservice.dk og læse lidt om CSS under menupunktet CSS.

Hvis du har læst den artikel jeg har lavet her på Udvikleren der hedder start på XML vil begrebet XML dokumenter sikkert være kendt for dig, hvis du ikke har læst den eller slet ikke kender noget til XML, bør du læse artiklen start på XML før du kaster dig over denne artikel.

Hvis man vælger at formatere sine XML dokumenter med "kun" CSS skal man være klar over, at det er ikke alle browsere der understøtter XML. Med hensyn til hvilke browsere der understøtter XML'en i denne artikel kan nævnes: Internet Explorer 5+, Netscape 6+, Mozilla og Opera 6+.
I denne sammenhæng har man så også alle de lidt mere avancerede CSS egenskaber tilrådighed, da alle de nævnte browsere understøtter CSS ganske godt.

For at jeg kan vise hvordan man laver sin formatering af XML dokumenter med CSS, har jeg i kodeboksen herunder, lavet et XML dokument med en beskrivelse af nogle af mine familie medlemmer. Dokumentet er gemt med navnet xml-css-eks.xml.

<?xml version="1.0" encoding="iso-8859-1"?>

<stamtrae>

<overskrift>Mit Stamtræ</overskrift>

  <familemedlem id="001">
    <fornavn>Susanne</fornavn>
      <efternavn>Hansen</efternavn>
        <roller>
          <rolle>Mor til marc, </rolle>
          <rolle>Claus kone, </rolle>
          <rolle>Faster til Julie og Mathias, </rolle>
          <rolle>Tante til Rasmus og Mads</rolle>
        </roller>
      <koen>Kvinde</koen>
      <alder>38 år</alder>
      <hoejde>167 cm</hoejde>
    <vaegt>Må jeg ikke oplyse (men den er lav ;o)</vaegt>
  </familemedlem>

  <familemedlem id="002">
    <fornavn>Claus</fornavn>
      <efternavn>Pryds</efternavn>
        <roller>
          <rolle>Far til Marc, </rolle>
          <rolle>Susannes mand, </rolle>
          <rolle>Farbror til Rasmus og Mads, </rolle>
          <rolle>Onkel til Julie og Mathias</rolle>
        </roller>
      <koen>Mand</koen>
      <alder>37 år</alder>
      <hoejde>175 cm</hoejde>
    <vaegt>74 kg.</vaegt>
  </familemedlem>

  <familemedlem id="003">
    <fornavn>Marc</fornavn>
      <efternavn>Hansen</efternavn>
        <roller>
          <rolle>Vores søn, </rolle>
          <rolle>Fætter til Rasmus, Mads, Julie og Mathias</rolle>
        </roller>
      <koen>Dreng</koen>
      <alder>10 år</alder>
      <hoejde>152 cm</hoejde>
    <vaegt>41 kg</vaegt>
  </familemedlem>

  <familemedlem id="004">
    <fornavn>Ellen</fornavn>
      <efternavn>Pryds</efternavn>
        <roller>
          <rolle>Mor til Claus, </rolle>
          <rolle>Svigermor til Susanne, </rolle>
          <rolle>Farmor til marc, </rolle>
          <rolle>Mormor til Rasmus og Mads</rolle>
        </roller>
      <koen>Kvinde</koen>
      <alder>61 år</alder>
      <hoejde>158 cm</hoejde>
    <vaegt>Ikke oplyst</vaegt>
  </familemedlem>

  <familemedlem id="005">
    <fornavn>Ib</fornavn>
      <efternavn>Pryds</efternavn>
        <roller>
          <rolle>Far til Claus, </rolle>
          <rolle>Svigerfar til Susanne, </rolle>
          <rolle>Farfar til Marc, </rolle>
          <rolle>Morfar til Rasmus og Mads</rolle>
        </roller>
      <koen>Mand</koen>
      <alder>67 år</alder>
      <hoejde>168 cm</hoejde>
    <vaegt>67 kg</vaegt>
  </familemedlem>

</stamtrae>

Som du kan se er ovenstående et helt almindeligt XML dokument så det er jo ingen ben i :o)
Men når man benytter XML og CSS sammen skal man huske på, at XML indeholder ingen formatering overhovdet, desuden er XML et tekst format og vil derfor af en browser blive betragtet som kun tekst og derfor som inline elementer.

For lige at uddybe begrebet så tænk på, at Html elementer (tags) har enten inline egenskaber (F.eks <b></b> og <i></i> ) eller block egenskaber (F.eks <div></div> <tr></tr> , men det har XML elementer netop ikke fordi de opfattes som rene tekst strenge af en browser.

Så for at jeg kan udføre den formatering af xml-css-eks.xml som jeg har tænkt mig, skal jeg bruge en bestemt CSS egenskab der hedder Display.
Display egenskaben er i dette tilfælde ansvarlig for at vise XML elementerne:
overskrift, fornavn, efternavn, roller, koen, hoejde, vaegt og alder med værdien Block.

Block har to egenskaber:

1. Block tvinger elementer til at starte under hinanden.
2. Block viser et element i hele skærmbredden.

Elementet rolle bliver erklæret med en display egenskab med værdien inline.
Som viser alle rolle elementerne på en linje, uanset hvor mange rolle elementer der er knyttet til et familemedlem.

Ovennævnte er også årsagen til, at alle rolle elementer i familie.xml undtagen det sidste element indeholder et komma i deres tekst indhold.
Så selvom at XML kun skal bruges til at præsentere data, skal man alligevel tænke lidt på hvordan et elements tekst skal præsenteres.

I den kodeboksen herunder kan du se det færdige stylesheet som er gemt med navnet xml-css-eks.css.

stamtrae
{
  background-color: rgb(78,77,75);
  display: block;
}

familemedlem
{
  font-family:verdana, arial;
}

overskrift
{
  background-color: #FFBC54;
  display: block;
  font-family: verdana, arial;
  font-size: 25px;
  font-weight: bolder;
  padding: 5px;
  padding-left: 10px;
  margin-bottom:25px;
  text-align:center;
  border:solid 2px rgb(190,202,200);
}

fornavn
{
  background-color: #FFBC54;
  color: white;
  display: block;
  font-family: verdana, arial;
  font-size: 18px;
  font-weight: bolder;
  padding: 5px;
  padding-left: 10px;
  margin-bottom:5px;
  border:solid 1px rgb(190,202,200);
}

efternavn 
{
  background-color: #CC7002;
  color: white;
  display: block;
  font-family: verdana, arial;
  font-size: 18px;
  font-weight: bolder;
  padding: 5px;
  padding-left: 10px;
  border:solid 1px rgb(190,202,200);
}

roller, koen, hoejde, vaegt, alder
{
  font-size:12px;
  display: block;
  font-family: verdana, arial;
  margin-left: 60px;
  color:rgb(190,202,200);
}

rolle 
{
  display: inline;
  font-family: verdana, arial;
  position:relative;
}

Som du kan se er der ingen forskel på den måde man laver et stylesheet til XML og HTML.
Man bruger bare de navne man har givet sine XML tags som selector, i stedet for som man ville gøre i HTML, at bruge HTML tags som selector.

Der er dog en lille forskel på den måde man henter sit stylesheet i xml.
I HTML bruger man denne link tag:

<link rel=stylesheet href="navn-på-stylesheet.css" type="text/css">
i head delen af sit HTML dokument.

Men når man skal hente et stylesheet i et XML dokument skal man bruge et
PI element der ser sådan her ud:

<?xml-stylesheet type="text/css" href="navn-på-stylesheet.css"?>

Referencen til stylesheetet skal stå lige efter XML PI'en, XML dokumentet vil derfor se ud på denne måde nu.

<?xml version="1.0" encoding="iso-8859-1"?>

<?xml-stylesheet type="text/css" href="xml-css-eks.css"?>

<stamtrae>

<overskrift>Mit Stamtræ</overskrift>

  <familemedlem id="001">
    <fornavn>Susanne</fornavn>
      <efternavn>Hansen</efternavn>
        <roller>

Og her kommer resten af dokumentet.

Hvis du vil se hvordan dokumentet ser ud i en browser, efter det har fået tilknyttet et stylesheet så klik på linket her under, husk også at tjekke kildekoden så du kan se hvordan XML'en ser ud i sin helhed.

http://udvikleren.dk/articlefiles/2086/xml-css-eks.xml

Designet er måske ikke den helt store men jeg håber, at du kan se de muligheder som XML og CSS tilbyder.

I stylesheetet kunne man f.eks også have lavet noget ekstra formatering til attributten id, som man i CSS referere til med en #, dette faktum er da også en af grundende til at jeg valgt at kalde mine attributter for id.

En erklæring til familiemedlem nr 4 ville se ud på denne måde:
#004 skarpt forfulgt af nogle CSS erklæringer.

Man kan sammenfattet sige at det er kun fantasien der sætter grænsen for layoutet.
Men selvom at man kan lave en masse ting med XML og CSS så er der nogle begrænsninger, man kan f.eks ikke undlade at lave formatering for et element, fordi det så vil blive vist som rå XML data i browseren og det er jo ikke meningen.
Man kan heller ikke bestemme hvilke elementer der skal vises og hvilke der ikke skal vises.

Så jeg vil ikke anbefale dig kun, at bruge XML og CSS medmindre, at du kender dine brugeres browsere på forhånd, men f.eks på en virksomheds Intranet, hvor man ved hvilke browsere der benyttes er fremgangsmåden efter min mening ret smart og ganske let at bruge.






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