XML Display

Raw XML files can be viewed in all major browsers.

Don't expect XML files to be displayed as HTML pages.

<?xml version="1.0" encoding="UTF-8"?>
- <note>
       <to>Tove</to>
       <from>Jani</from>
       <heading>Reminder</heading>
       <body>Don't forget me this weekend!</body>
   </note>

Look at the XML file above in your browser: note.xml

Most browsers will display an XML document with color-coded elements.

Often a plus (+) or minus sign (-) to the left of the elements can be clicked to expand or collapse the element structure.

To view raw XML source, try to select "View Page Source" or "View Source" from the browser menu.

Note: In Safari 5 (and earlier), only the element text will be displayed. To view the raw XML, you must right click the page and select "View Source".

Example 1 - breakfast.xml

<breakfast_menu>

<food>

<name>Belgian Waffles</name>

<description>Two of our famous Belgian Waffles with plenty of real maple syrup</description>

<food>

<name>Strawberry Belgian Waffles</name>

<description>Light Belgian waffles covered with strawberries and whipped cream</description>

<food>

<name>Berry-Berry Belgian Waffles</name>

<description>Light Belgian waffles covered with an assortment of fresh berries and whipped cream</description>

<food>

<name>French Toast</name>

<description>Thick slices made from our homemade sourdough bread</description>

<food>

<name>Homestyle Breakfast</name>

<description>Two eggs, bacon or sausage, toast, and our ever-popular hash browns</description>

</breakfast_menu>

Example 2 - cd_catalog.xml

<CD>

<TITLE>Empire Burlesque</TITLE>

<ARTIST>Bob Dylan</ARTIST>

<COMPANY>Columbia</COMPANY>

<CD>

<TITLE>Hide your heart</TITLE>

<ARTIST>Bonnie Tyler</ARTIST>

<COMPANY>CBS Records</COMPANY>

<CD>

<TITLE>Greatest Hits</TITLE>

<ARTIST>Dolly Parton</ARTIST>

<CD>

<TITLE>Still got the blues</TITLE>

<ARTIST>Gary Moore</ARTIST>

<COMPANY>Virgin records</COMPANY>

<CD>

<ARTIST>Eros Ramazzotti</ARTIST>

<CD>

<TITLE>One night only</TITLE>

<COMPANY>Polydor</COMPANY>

<CD>

<TITLE>Sylvias Mother</TITLE>

<CD>

<TITLE>Maggie May</TITLE>

<ARTIST>Rod Stewart</ARTIST>

<COMPANY>Pickwick</COMPANY>

<CD>

<TITLE>Romanza</TITLE>

<ARTIST>Andrea Bocelli</ARTIST>

<COMPANY>Polydor</COMPANY>

<CD>

<TITLE>When a man loves a woman</TITLE>

<ARTIST>Percy Sledge</ARTIST>

<COMPANY>Atlantic</COMPANY>

<CD>

<TITLE>Black angel</TITLE>

<ARTIST>Savage Rose</ARTIST>

<CD>

<TITLE>1999 Grammy Nominees</TITLE>

<COMPANY>Grammy</COMPANY>

<CD>

<TITLE>For the good times</TITLE>

<ARTIST>Kenny Rogers</ARTIST>

<COMPANY>Mucik Master</COMPANY>

<CD>

<TITLE>Big Willie style</TITLE>

<ARTIST>Will Smith</ARTIST>

<COMPANY>Columbia</COMPANY>

<CD>

<TITLE>Tupelo Honey</TITLE>

<ARTIST>Van Morrison</ARTIST>

<COMPANY>Polydor</COMPANY>

<CD>

<TITLE>Soulsville</TITLE>

<COUNTRY>Norway</COUNTRY>

<CD>

<ARTIST>Cat Stevens</ARTIST>

<COMPANY>Island</COMPANY>

<CD>

<ARTIST>Sam Brown</ARTIST>

<CD>

<TITLE>Bridge of Spies</TITLE>

<COMPANY>Siren</COMPANY>

<CD>

<TITLE>Private Dancer</TITLE>

<ARTIST>Tina Turner</ARTIST>

<COMPANY>Capitol</COMPANY>

<CD>

<TITLE>Midt om natten</TITLE>

<ARTIST>Kim Larsen</ARTIST>

<COMPANY>Medley</COMPANY>

<CD>

<TITLE>Pavarotti Gala Concert</TITLE>

<ARTIST>Luciano Pavarotti</ARTIST>

<COMPANY>DECCA</COMPANY>

<CD>

<ARTIST>Otis Redding</ARTIST>

<COMPANY>Stax Records</COMPANY>

<CD>

<TITLE>Picture book</TITLE>

<ARTIST>Simply Red</ARTIST>

<COMPANY>Elektra</COMPANY>

<CD>

<ARTIST>The Communards</ARTIST>

<COMPANY>London</COMPANY>

<CD>

<TITLE>Unchain my heart</TITLE>

<ARTIST>Joe Cocker</ARTIST>

</CATALOG>

Example 3 - plant.xml

<PLANT>

<COMMON>Bloodroot</COMMON>

<BOTANICAL>Sanguinaria canadensis</BOTANICAL>

<LIGHT>Mostly Shady</LIGHT>

<PLANT>

<COMMON>Columbine</COMMON>

<BOTANICAL>Aquilegia canadensis</BOTANICAL>

<LIGHT>Mostly Shady</LIGHT>

<PLANT>

<COMMON>Marsh Marigold</COMMON>

<BOTANICAL>Caltha palustris</BOTANICAL>

<LIGHT>Mostly Sunny</LIGHT>

<PLANT>

<COMMON>Cowslip</COMMON>

<BOTANICAL>Caltha palustris</BOTANICAL>

<LIGHT>Mostly Shady</LIGHT>

<PLANT>

<COMMON>Dutchman's-Breeches</COMMON>

<BOTANICAL>Dicentra cucullaria</BOTANICAL>

<LIGHT>Mostly Shady</LIGHT>

<PLANT>

<COMMON>Ginger, Wild</COMMON>

<BOTANICAL>Asarum canadense</BOTANICAL>

<LIGHT>Mostly Shady</LIGHT>

<PLANT>

<COMMON>Hepatica</COMMON>

<BOTANICAL>Hepatica americana</BOTANICAL>

<LIGHT>Mostly Shady</LIGHT>

<PLANT>

<COMMON>Liverleaf</COMMON>

<BOTANICAL>Hepatica americana</BOTANICAL>

<LIGHT>Mostly Shady</LIGHT>

<PLANT>

<COMMON>Jack-In-The-Pulpit</COMMON>

<BOTANICAL>Arisaema triphyllum</BOTANICAL>

<LIGHT>Mostly Shady</LIGHT>

<PLANT>

<COMMON>Mayapple</COMMON>

<BOTANICAL>Podophyllum peltatum</BOTANICAL>

<LIGHT>Mostly Shady</LIGHT>

<PLANT>

<COMMON>Phlox, Woodland</COMMON>

<BOTANICAL>Phlox divaricata</BOTANICAL>

<LIGHT>Sun or Shade</LIGHT>

<PLANT>

<COMMON>Phlox, Blue</COMMON>

<BOTANICAL>Phlox divaricata</BOTANICAL>

<LIGHT>Sun or Shade</LIGHT>

<PLANT>

<COMMON>Spring-Beauty</COMMON>

<BOTANICAL>Claytonia Virginica</BOTANICAL>

<LIGHT>Mostly Shady</LIGHT>

<PLANT>

<COMMON>Trillium</COMMON>

<BOTANICAL>Trillium grandiflorum</BOTANICAL>

<LIGHT>Sun or Shade</LIGHT>

<PLANT>

<COMMON>Wake Robin</COMMON>

<BOTANICAL>Trillium grandiflorum</BOTANICAL>

<LIGHT>Sun or Shade</LIGHT>

<PLANT>

<COMMON>Violet, Dog-Tooth</COMMON>

<BOTANICAL>Erythronium americanum</BOTANICAL>

<LIGHT>Shade</LIGHT>

<PLANT>

<COMMON>Trout Lily</COMMON>

<BOTANICAL>Erythronium americanum</BOTANICAL>

<LIGHT>Shade</LIGHT>

<PLANT>

<COMMON>Adder's-Tongue</COMMON>

<BOTANICAL>Erythronium americanum</BOTANICAL>

<LIGHT>Shade</LIGHT>

<PLANT>

<COMMON>Anemone</COMMON>

<BOTANICAL>Anemone blanda</BOTANICAL>

<LIGHT>Mostly Shady</LIGHT>

<PLANT>

<COMMON>Grecian Windflower</COMMON>

<BOTANICAL>Anemone blanda</BOTANICAL>

<LIGHT>Mostly Shady</LIGHT>

<PLANT>

<BOTANICAL>Monarda didyma</BOTANICAL>

<LIGHT>Shade</LIGHT>

<PLANT>

<COMMON>Bergamot</COMMON>

<BOTANICAL>Monarda didyma</BOTANICAL>

<LIGHT>Shade</LIGHT>

<PLANT>

<COMMON>Black-Eyed Susan</COMMON>

<BOTANICAL>Rudbeckia hirta</BOTANICAL>

<ZONE>Annual</ZONE>

<LIGHT>Sunny</LIGHT>

<PLANT>

<COMMON>Buttercup</COMMON>

<BOTANICAL>Ranunculus</BOTANICAL>

<LIGHT>Shade</LIGHT>

<PLANT>

<COMMON>Crowfoot</COMMON>

<BOTANICAL>Ranunculus</BOTANICAL>

<LIGHT>Shade</LIGHT>

<PLANT>

<COMMON>Butterfly Weed</COMMON>

<BOTANICAL>Asclepias tuberosa</BOTANICAL>

<ZONE>Annual</ZONE>

<LIGHT>Sunny</LIGHT>

<PLANT>

<COMMON>Cinquefoil</COMMON>

<BOTANICAL>Potentilla</BOTANICAL>

<ZONE>Annual</ZONE>

<LIGHT>Shade</LIGHT>

<PLANT>

<COMMON>Primrose</COMMON>

<BOTANICAL>Oenothera</BOTANICAL>

<LIGHT>Sunny</LIGHT>

<PLANT>

<COMMON>Gentian</COMMON>

<BOTANICAL>Gentiana</BOTANICAL>

<LIGHT>Sun or Shade</LIGHT>

<PLANT>

<COMMON>Blue Gentian</COMMON>

<BOTANICAL>Gentiana</BOTANICAL>

<LIGHT>Sun or Shade</LIGHT>

<PLANT>

<COMMON>Jacob's Ladder</COMMON>

<BOTANICAL>Polemonium caeruleum</BOTANICAL>

<ZONE>Annual</ZONE>

<LIGHT>Shade</LIGHT>

<PLANT>

<COMMON>Greek Valerian</COMMON>

<BOTANICAL>Polemonium caeruleum</BOTANICAL>

<ZONE>Annual</ZONE>

<LIGHT>Shade</LIGHT>

<PLANT>

<COMMON>California Poppy</COMMON>

<BOTANICAL>Eschscholzia californica</BOTANICAL>

<ZONE>Annual</ZONE>

<PLANT>

<COMMON>Shooting Star</COMMON>

<BOTANICAL>Dodecatheon</BOTANICAL>

<ZONE>Annual</ZONE>

<LIGHT>Mostly Shady</LIGHT>

<PLANT>

<COMMON>Snakeroot</COMMON>

<BOTANICAL>Cimicifuga</BOTANICAL>

<ZONE>Annual</ZONE>

<LIGHT>Shade</LIGHT>

<PLANT>

<COMMON>Cardinal Flower</COMMON>

<BOTANICAL>Lobelia cardinalis</BOTANICAL>

<LIGHT>Shade</LIGHT>

</CATALOG>

Why Does XML Display Like This?

XML documents do not carry information about how to display the data.

Since XML tags are "invented" by the author of the XML document, browsers do not know if a tag like <table> describes an HTML table or a dining table.

Without any information about how to display the data, the browsers can just display the XML document as it is.

Displaying XML Files with CSS?

Below is an example of how to use CSS to format an XML document.

We can use an XML file like cd_catalog.xml and a style sheet like cd_catalog.css

cd_catalog.css :

CATALOG {
    background-color: #ffffff;
    width: 100%;
}
CD {
    display: block;
    margin-bottom: 30pt;
    margin-left: 0;
}
TITLE {
    display: block;
    color: #ff0000;
    font-size: 20pt;
}
ARTIST {
    display: block;
    color: #0000ff;
    font-size: 20pt;
}
COUNTRY, PRICE, YEAR, COMPANY {
    display: block;
    color: #000000;
    margin-left: 20pt;
}

Below is a fraction of the XML file. The second line links the XML file to the CSS file:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="cd_catalog.css"?>
<CATALOG>
  <CD>
    <TITLE>Empire Burlesque</TITLE>
    <ARTIST>Bob Dylan</ARTIST>
    <COUNTRY>USA</COUNTRY>
    <COMPANY>Columbia</COMPANY>
    <PRICE>10.90</PRICE>
    <YEAR>1985</YEAR>
  </CD>
  <CD>
    <TITLE>Hide your heart</TITLE>
    <ARTIST>Bonnie Tyler</ARTIST>
    <COUNTRY>UK</COUNTRY>
    <COMPANY>CBS Records</COMPANY>
    <PRICE>9.90</PRICE>
    <YEAR>1988</YEAR>
  </CD>
.
.
.
</CATALOG>

Formatting XML with CSS is not recommended. Use JavaScript or XSLT instead.

SFDC - DOTNET TUTORIALS

Pages

Monday, 26 March 2018

XML Display

Why Does XML Display Like This?

Displaying XML Files with CSS?

No comments:

Post a Comment