hallo allemaal,

Ik ben opzoek naar een manier om de gegevens en de afbeeldingen uit xml documenten
zichtbaar te maken in html.

Een voorbeeld xml ziet er als volgd uit:

<?xml version="1.0" encoding="UTF-8"?>
<profilephotos>
<photo>
<file>
<![CDATA[http://server.com/images/image01.jpg]]>
</file>
<caption/
><link>
<![CDATA[http://server.com/image01]]>
</link>
</photo>
</profilephotos>


Nu kunnen sommige xml's meerdere afbeeldingen bevatten.

Iemand een idee hoe ik dit kan koppelen aan html?
Aangezien ik meerdere xml's heb wil ik in de xml
geen aanpassingen maken.

alvast super bedankt

(Bewerkt door Timmy om 23:07, 13-11-2007)

Het magische antwoord is XSLT (eXtentable Stylesheet Language Transformations). Op deze pagina van het W3C wordt een mooi voorbeeld gegeven. XSLT is een stylesheet (nee, verwar het zeker niet met css) waarin diverse conversie regels staan om XML nodes om te zetten in bv HTML.

Ik ben ook op zoek naar hoe je het toe kan passen op Mac OSX met name in PHP. De website van Marc Lynage (Entropy.ch) heeft een mooi Mac OS X programma'tje TestXSLT waarmee je met XSLT kunt spelen. Je neemt een XML file past er een XSLT stylesheet aan toe en er komt HTML uit. Echt heel gaaf en hij heeft er sample files (xml en HTML) bij gedaan.

Met XSLT kun je zelfs van een XML file een PDF maken!!

Als je er achter ben hoe het werkt met PHP enzo zou ik graag een voorbeeldje willen mee pikken.  

Mac OS X zelf gebruikt ontiegelijk veel XML files voor bv configuratie settings, iPhoto en iTunes gebruiken allemaal XML als flat file databases.

(Bewerkt door denn88 om 10:38, 11-11-2007)

(Bewerkt door denn88 om 10:39, 11-11-2007)

Ok dat programma ziet er top uit!

maar nu moet ik nog


<![CDATA[http://server.com/images/image01.jpg]]>

of

<file>
<![CDATA[http://server.com/images/image01.jpg]]>
</file>


omzetten naar een "img src"

Klopt dat en hoe doe ik dat?

Helaas heb ik ook geen verstand van XSLT. Ik zou het ook graag willen leren. Op mijn werk gebruiken ze het veel om XML data van reis organisatie systemen om te zetten naar HTML (websites). Heel erg tof. Als ik wist hoe het werkte zou ik er zo ook wel wat toepassingen in zien in m'n eigen webdesign praktijken.

Misschien anders op dit forum?

Ik heb wel een ideetje (bij mij werkt het in elk geval).
Ik kan dat helaas alleen laten zien als ik weet hoe ik xml of html code kan weergeven.
Dat is mij namelijk tot nu toe nog niet gelukt: de openingstag valt telkens weg.

XSLt is zeker niet de enige en de meest eenvoudige methode. Alle scripttalen op een webserver (php, asp, asp.net, cfm, jsp ...) kunnen xml bronnen gebruiken en naar andere platte tekst zoals html omzetten. Het kan ook met javascript in de browser (Ajax). Voor Ajax toepassingen zijn er veel voorbeelden te vinden (spry bij adobe labs of via framework sites zoals mootools.net)
Voor serverside scripting zijn er ook talloze voorbeelden bij de betreffende sites te vinden. Wil je het zelf eens proberen met Dreamweaver (8 of 9) dan kun je in een site een nieuwe XSLt pagina aanmaken. DW vraagt dan om een xml bron. Vervolgens kun je de velden uit de xml bron in je pagina opmaak plaatsen en vormgeven. Ook de src van een image kun je koppelen aan xml gegevens. Mogelijkheden te over dus. Heb je een voorkeur? Dan kan ik je vast wel een voorbeeldje laten zien...

Je xml voorbeeld is overigens geen valide xml...

(Bewerkt door Spinsels om 21:27, 12-11-2007)

Ok, boven aan staat een bijna (op url na) stuk uit de xml.
In de xml staan soms dertig records (of afbeeldingen dus ^^).

Deze gegevens wil ik dus linken aan html. Veel kennis heb ik niet
en weet alleen dat ik het wil zien. Stijlen ed. vind ik in eerste instantie
nog niet zo belangrijk (wel tof).

Of moet ik iest anders aangeven? ^^'
(DW aanwezig)

Nadeel is alleen dat alle processing/rendering via XML dient te gebeuren,
wat niet altijd de snelste route is. Rauwe verwerking door database-scripts,
die (snel en net zo correct) inhoud aan vorm koppelen is dan vaak sneller.
Maar het is mooi dat je zo ver en zo 'schoon' met XML kan werken.

Ok, zijn hier voorbeelden van?

Wat zou een letterlijke code kunnen zijn
die bij mijn toepassing werkt?

(Bewerkt door Timmy om 22:01, 12-11-2007)

Ok, ik zal het proberen.
De CDATA manier zal niet werken, heb ik ergens gelezen (sorry dat ik de link kwijt ben)
Ik doe het zo:
Mijn xml-bestand (test.xml):

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="test.xsl"?>
<plaatjes>
<plaatje uri="plaatje.jpg" breedte="150" />
</plaatjes>

Mijn xsl-bestand (test.xsl):

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" />
<xsl:template match="/plaatje">
<html>
<head>
</head>
<body>
<xsl:for-each select="plaatje">
<xsl:element name="img">
<xsl:attribute name="src"><xsl:value-of select="@uri" /></xsl:attribute>
<xsl:attribute name="width"><xsl:value-of select="@breedte" /></xsl:attribute>
</xsl:element>
</xsl:for-each>
</body>
</html>


Ik weet 't, ik weet 't, het ziet er erg vreemd uit, maar als ik een "<" typ, dan verdwijnt de hele tag.
Verander de &lt; door <
en de &gt; door >

Er is trouwens nog een manier, door geen attributen bij de elementen te gebruiken in je xml bestand, maar child-elementen. In je xsl-bestand krijg je dan geen "@": select="uri" ipv select="@uri".

Werkt bij mij wel...

mkay dit is wat ik krijg:

"SAXParseException: The input ended before all started tags were ended. Last tag started was 'xsl:template' (test.xsl, line 17, column 9)"

Ah dat is gefixt

</xsl:template>
</xsl:stylesheet>


om te sluiten ^^
Maar nu heb ik een witte pagina... zonder afbeelding

(Bewerkt door Timmy om 22:32, 12-11-2007)

Heb je een plaatje met de naam "plaatje.jpg" in dezelfde map staan?

En hoe heb je de xml-code in je code blok gekregen? Bij mij lukt dat dus echt niet  

Al eerder in de berichten is aangegeven dat de code

< file>< ![CDATA[http://server.com/images/image01.jpg]]></file>
niet voldoet aan een gebruikelijk XML schema.
Als de aangeleverde XML niet meer kan worden gewijzigd, dan is de volgende code een optie.

< a>< xsl:attribute name="href">
< xsl:value-of select="profilephotos/photo/link" disable-output-escaping="yes"/></xsl:attribute>
< xsl:element name="img">
< xsl:attribute name="src">< xsl:value-of select="profilephotos/photo/file" disable-output-escaping="yes"/></xsl:attribute>
< /xsl:element></a>

Haal wel even alle returns uit de XML code.

< file>< ![CDATA[http://server.com/images/image01.jpg]]>< /file>
ipv
< file>
< ![CDATA[http://server.com/images/image01.jpg]]>
< /file>

In de code staan spatie's achter < haal deze spatie weg.

Succes.

Hmm dit wordt interessant... maar testen jullie dit nog steeds met dat TestXSLT programmat'je, waar ik het over had. Of wordt dit bv al in PHP geparsed?

Whoa! vet! bedankt AndreRelink, ik heb al 1 afbeelding
uit de xml zichtbaar.

Maar hoe krijg ik nu alle records te zien? (dus alle
afbeeldingen?)

denn88, nej ik gebruik nu weer dreamweaver.
Hier werk ik altijd al in en is voor mij een handeling minder.
(het is een tester en geen bouw ding ^^ )

In DW zit de optie Herhalingsgebied.
Voeg een herhalingsgebied toe aan de code.

Succes

Ok werk nu met spry's

Dit is wat ik nu heb:

<!-- DWXMLSource="photosXML.ashx.xml" --><!DOCTYPE xsl:stylesheet  [
<!ENTITY nbsp   "&#160;">
<!ENTITY copy   "&#169;">
<!ENTITY reg    "&#174;">
<!ENTITY trade  "&#8482;">
<!ENTITY mdash  "&#8212;">
<!ENTITY ldquo  "&#8220;">
<!ENTITY rdquo  "&#8221;">
<!ENTITY pound  "&#163;">
<!ENTITY yen    "&#165;">
<!ENTITY euro   "&#8364;">
]><xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

<xsl:output method="html"/>
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry/">
<script src="SpryAssets/xpath.js" type="text/javascript"></script>
<script src="SpryAssets/SpryData.js" type="text/javascript"></script>
<script type="text/javascript">
<xsl:text disable-output-escaping="yes">
<![CDATA[
var ds1 = new Spry.Data.XMLDataSet("photosXML.ashx.xml", "profilephotos/photo/file",{sortOnLoad:"file",sortOrderOnLoad:"ascending"});
ds1.setColumnType("file", "image");
]]>
</xsl:text>
</script>
<body>

<div spry:region="ds1">
 <table>
   <tr>
     <th>File</th>
   </tr>
   <tr spry:repeat="ds1">
     <td><img src="{file}"/></td>
   </tr>
 </table>
</div>

</body>
</html>
</xsl:template>
</xsl:stylesheet>


Nu heb ik allemaal x'jes waar hij geen afbeelding toont.
Repeat werkt wel.

(Bewerkt door Timmy om 20:50, 13-11-2007)

(Bewerkt door Timmy om 20:52, 13-11-2007)

Timmy,

hoe krijg je de code in je code-blok?

geetje, Ik volg je niet helemaal,
welke code in welke codeblok?

Mijn eerste interpertatie is copy-paste
in Dreamweaver. Maar dat is vast niet wat
jij bedoeld.

Ik heb trouwens:

< img src="{file}"/>
Vervangen door:
 <xsl:element name="img">
 <xsl:attribute name="src"><xsl:value-of select="profilephotos/photo/file" disable-output-escaping="yes"/></xsl:attribute>
 </xsl:element>
Zoals mij dat eerder werd aangegeven, nu heb ik wel
het juiste aantal afbeeldingen. Maar alleen wel de zelfde (eerste uit record)

(Bewerkt door Timmy om 21:12, 13-11-2007)

Probeer deze code eens...

<xsl:for-each select="profilephotos/photo">
<a><xsl:attribute name="href">
<xsl:value-of select="link" disable-output-escaping="yes"/></xsl:attribute>
<xsl:element name="img">
<xsl:attribute name="src"><xsl:value-of select="file" disable-output-escaping="yes"/></xsl:attribute>
</xsl:element></a>
</xsl:for-each>

<?xml version="1.0" encoding="UTF-8"?>
<profilephotos>
<photo>
<file><![CDATA[http://server.com/images/image01.jpg]]></file>
<caption/>
<link><![CDATA[http://server.com/image01]]></link>
</photo>
<photo>
<file><![CDATA[http://server.com/images/image02.jpg]]></file>
<caption/>
<link><![CDATA[http://server.com/image01]]></link>  
</photo>
</profilephotos>

Timmy, ik bedoel bijvoorbeeld de xml code in je laatste berichtje tussen 'Vervangen door:' en 'Zoals mij dat eerder...'
Bij mij vallen de tags weg.
Als ik jouw code gebruik (via copy-paste) krijg ik:


<xsl:element name="img">
<xsl:attribute name="src"><xsl:value-of select="profilephotos/photo/file" disable-output-escaping="yes"/></xsl:attribute>
</xsl:element>


Alleen de sluit-tags blijven staan.

He vreemd!

Het eerder genoemde effect van de wegvallende tags komt alleen voor bij Voorvertoning.
Niets aan de hand dus.

Sorry!

Ow ja!
AndreRelink je bent de bomb!
It works like a charm!

Zo, opgelost. Iedereen bedankt!

Nog eens de opossing:

XML:


<?xml version="1.0" encoding="UTF-8"?>
<profilephotos>
<photo>
<file><![CDATA[http://server.com/images/image01.jpg]]></file>
<caption/>
<link><![CDATA[http://server.com/image01]]></link>
</photo>
<photo>
<file><![CDATA[http://server.com/images/image02.jpg]]></file>
<caption/>
<link><![CDATA[http://server.com/image01]]></link>  
</photo>
</profilephotos>


xsl:

<!-- DWXMLSource=&quot;photosXML.ashx.xml&quot; --><!DOCTYPE xsl:stylesheet  [
<!ENTITY nbsp   "&#160;">
<!ENTITY copy   "&#169;">
<!ENTITY reg    "&#174;">
<!ENTITY trade  "&#8482;">
<!ENTITY mdash  "&#8212;">
<!ENTITY ldquo  "&#8220;">
<!ENTITY rdquo  "&#8221;">
<!ENTITY pound  "&#163;">
<!ENTITY yen    "&#165;">
<!ENTITY euro   "&#8364;">
]><xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

<xsl:output method="html"/>
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry/">
<script src="SpryAssets/xpath.js" type="text/javascript"></script>
<script src="SpryAssets/SpryData.js" type="text/javascript"></script>
<script type="text/javascript">
<xsl:text disable-output-escaping="yes">
<![CDATA[
var ds1 = new Spry.Data.XMLDataSet("photosXML.ashx.xml", "profilephotos/photo/file",{sortOnLoad:"file",sortOrderOnLoad:"ascending"});
]]>
</xsl:text>
</script>

<body>

<xsl:for-each select="profilephotos/photo">
<a><xsl:attribute name="href">
<xsl:value-of select="link" disable-output-escaping="yes"/></xsl:attribute>
<xsl:element name="img">
<xsl:attribute name="src"><xsl:value-of select="file" disable-output-escaping="yes"/></xsl:attribute>
</xsl:element></a>
</xsl:for-each>

</body>
</html>
</xsl:template>
</xsl:stylesheet>

Misschien wat off-topic, gezien jullie echt de code induiken. Maar ik ben thans m'n site naar xhtml + css aan het omzetten. En ik lees vaak dat xhtml de overgangsfase aangeeft tussen html en xml. Xml is dus de toekomst. En nu ook Explorer 8 zich netjes aan w3c-normen houdt, mag ik nu verwachten de toekomstige Dreamweaver er meer bv Indesign werkt? Zal het kunnen coden overbodig worden?

Met belangstelling zie ik uit naar jullie antwoord.

Groet, Marco (die af en toe ook wel eens hoofdpijn heeft, waarom de website-voorvertoning in de browser maar niet op het ontwerp wil gaan lijken... $#@&^*@# )

P.S. Overigens ik gebruik geen Dreamwever, maar Aptana om xhtml + css te coden. Freeware, en helemaal fantastisch; het heeft een foutmeldings-tool. Als ik iets niet-w3c valid intik, wordt ik daar meteen op gewezen. Ideaal!