It's not being stupid to ask Dan,
Of course I can give you an example.
First a bit of theory...
Rather than outputting HTML to the browser, this class focus of outputting XML, and associate a style sheet to that xml to style it on the browser.
Think CSS, but on steroids, and that applies to the HTML element, and not just the visual formatting.
The XML generation is simple, here is a sample file code:
PHP Code:
$objXml->setRenderingSet('html'); //select the HTML output version of the style sheets
$objXml->setXsl('com.dating.signup'); //set the xsl file to associate to the xml datas
$objXml->start(); //open the xml document
$objXml->general(); //put a <GENERAL> section
$objXml->open('DATAS'); //open an <DATAS> node
$objXml->open('countryList'); //open an <countryList> node
$GLOBALS['objDb']->q("SELECT iso, printable_name FROM country ORDER BY printable_name ASC");
while($o=$GLOBALS['objDb']->fo()){
$objXml->open('country'); //open a <country node>
$objXml->data('iso',$o->iso); //add a <iso>$o->iso</iso> element
$objXml->data('name',$o->printable_name); //the name
$objXml->close('country'); //close the country node
}
$objXml->close('countryList');//close the country list
$objXml->open('gndrList');
$GLOBALS['objDb']->q("SELECT * FROM genders");
while($o=$GLOBALS['objDb']->fo()){
$objXml->open('gender');
$objXml->data('code',$o->gendercode);
$objXml->data('trad',$GLOBALS['objTrad']->getTrad($o->gendercode));
$objXml->data('order',$o->ordr);
$objXml->close();
}
$objXml->close();
$objXml->close('DATAS'); //close the document
This is what I use to gather the datas needed on signup page on a demo dating site. By the way, the demo site (which is far from being finished) is visible on
http://dating.webalis.com. Try to look at the source of the pages, you'll see the XML.
So, this in PHP result in this XML document:
Code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE HTML>
<?xml-stylesheet href="/xsl/com.dating.signup" type="text/xsl"?>
<ROOT>
<GENERAL>
<title>XMLDate</title>
<lng>fr</lng>
<iso>CH</iso>
<languages>
<lang>
<code>de</code>
<trad>Allemand</trad>
</lang>
<lang>
<code>en</code>
<trad>Anglais</trad>
</lang>
<lang>
<code>fr</code>
<trad>Francais</trad>
</lang>
<lang>
<code>it</code>
<trad>Italien</trad>
</lang>
</languages>
<user>
<uid></uid>
<userName/>
<email/>
<gndr/>
<gndrSearch/>
<zodiac>CAPRICORN</zodiac>
<country/>
<aboutMe/>
</user>
</GENERAL>
<DATAS>
<countryList>
<country>
<iso>AF</iso>
<name>Afghanistan</name>
</country>
<country>
<iso>AL</iso>
<name>Albania</name>
</country>
<!-- ... cutted out a really long list ... -->
<country>
<iso>ZW</iso>
<name>Zimbabwe</name>
</country>
</countryList>
<gndrList>
<gender>
<code>MALE</code>
<trad>Un homme</trad>
<order>0</order>
</gender>
<gender>
<code>FEMALE</code>
<trad>Une femme</trad>
<order>1</order>
</gender>
</gndrList>
</DATAS>
</ROOT>
<!-- Generation time: 0.479296922684 -->
At the top of the XML document, you can see a
instruction.
It tells the browser where to find the XSL to format those datas on screen.
Here is the XSL sheet:
Code:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:js="/js">
<xsl:output method="html" encoding="UTF-8" indent="yes"
doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
standalone="yes" omit-xml-declaration="yes"
/>
<!--com.webalis.open_html
08.11.2007, ts, Init
doctype-public="-//W3C//DTD HTML 4.01//EN"
doctype-system="http://www.w3.org/TR/html4/strict.dtd"
-->
<xsl:template match="/">
<html>
<head>
<title><xsl:value-of select="/ROOT/GENERAL/title"/></title>
<link rel="stylesheet" type="text/css" href="/css/base.css"/>
<link rel="stylesheet" type="text/css" href="/css/profiles.css"/>
<link rel="stylesheet" type="text/css" href="/css/tabs.css"/>
<link rel="stylesheet" type="text/css" href="/css/header.css"/>
<link rel="stylesheet" type="text/css" href="/js/calendar/calendar-win2k-cold-1.css" />
<script type="text/javascript" src="/js/X.js"/>
<script type="text/javascript" src="/js/rounded.js"/>
<script type="text/javascript" src="/js/webJs.js"/>
<script type="text/javascript" src="/js/global.js"/>
<script type="text/javascript" src="/js/calendar/calendar.js"/>
<script type="text/javascript" src="/js/calendar/lang/calendar-{/ROOT/GENERAL/lng}.js"/>
<script type="text/javascript" src="/js/calendar/calendar-setup.js"/>
<script type="text/javascript">
</script>
<xsl:call-template name="SCRIPTS"/>
<xsl:call-template name="LINKS"/>
</head>
<body>
<xsl:apply-templates select="ROOT"/>
</body>
</html>
</xsl:template>
<xsl:template match="ROOT">
<xsl:apply-templates />
</xsl:template>
<xsl:template match="GENERAL"/>
<!-- FROM INCLUDE com.dating.utils -->
<!-- com.dating.utils
5.12.2007 init
17.12.2007, Added template profile
Used by => browse profiles
-->
<xsl:variable name="lcletters">abcdefghijklmnopqrstuvwxyz</xsl:variable>
<xsl:variable name="ucletters">ABCDEFGHIJKLMNOPQRSTUVWXYZ</xsl:variable>
<xsl:template name="profile">
<div class="userCont">
<xsl:attribute name="class">
userCont
<xsl:choose>
<xsl:when test="gender='Un homme'">
userM
</xsl:when>
<xsl:otherwise>
userF
</xsl:otherwise>
</xsl:choose>
</xsl:attribute>
<a href="/user/{uid}"><xsl:value-of select="username"/></a>
<xsl:choose>
<xsl:when test="pic!=''">
<img src="/img/user/{pic}" alt="trad key userPic not existant" title="trad key userPic not existant"/>
</xsl:when>
</xsl:choose>
<p>
Sexe: <xsl:value-of select="gender"/><br/>
Cherche: <xsl:value-of select="gendersearch"/>
</p>
<p>
<xsl:value-of select="aboutme" />
</p>
</div>
</xsl:template>
<!-- END INCLUDE com.dating.utils-->
<!-- com.dating.signup
028.11.2007, ts, init
-->
<xsl:template name="SCRIPTS"/>
<xsl:template name="LINKS"/>
<xsl:template match="DATAS">
<!-- FROM INCLUDE com.dating.header -->
<!-- com.dating.header
028.11.2007, ts, init
-->
<div id="divHeader">
<!-- FROM INCLUDE com.dating.loginBox -->
<!--com.dating.loginBox.xsl
28.11.2007, ts, init
19.12.2007, ts, removed the bottom <br>
-->
<div id="divLogin" class="rounded" style="float:left">
<xsl:variable name="User" select="/ROOT/GENERAL/user"/>
<xsl:choose>
<xsl:when test="$User/uid>0">
<xsl:variable name="Zodiac"><xsl:value-of select="translate($User/zodiac,$ucletters,$lcletters)"/></xsl:variable>
<p style="padding:0 5px;">
Bonjour <xsl:value-of select="$User/userName"/>.<br/>
Bienvenue sur XMLDATE!<br/>
<img src="/img/zodiac/{$Zodiac}_small.gif" width="32" alt="{$Zodiac}" title="{$Zodiac}"/>
</p>
<ul>
<li>
<a href="/my/">Votre page perso.</a>
</li>
<li>
<a href="/actions/logout">Vous déconnecter.</a>
</li>
</ul>
</xsl:when>
<xsl:otherwise>
<form id="frmLogin" method="post" action="/actions/login" js:ajax="on" onsubmit="return false;">
<table>
<tr>
<th>
Pseudo:
</th>
<td>
<input type="text" name="inpTxtUserLog" id="inpTxtUserLog" />
</td>
</tr>
<tr>
<th>
Mot de passe:
</th>
<td>
<input type="password" name="inpPwdPassLog" id="inpPwdPassLog" />
</td>
</tr>
</table>
<p>
<input type="submit" value="GO!" style="float:rigth"/>
<span style="clear:both"/>
</p>
</form>
</xsl:otherwise>
</xsl:choose>
</div>
<!-- END INCLUDE com.dating.loginBox-->
<!-- FROM INCLUDE com.dating.nav -->
<div class="rounded" id="divNav">
<ul>
<li>
<a href="/">Page d'acceuil</a>
</li>
<li>
<a href="/browse/">Profils d'utilisateurs</a>
</li>
<li>
<a href="/ads/">Annonces</a>
</li>
</ul>
</div>
<!-- END INCLUDE com.dating.nav-->
<!-- FROM INCLUDE com.dating.langSwitcher -->
<!--com.dating.langSwitcher
28.11.2007, ts, init
-->
<div id="divLngSwitch" class="rounded">
<xsl:for-each select="/ROOT/GENERAL/languages/lang">
<xsl:sort select="code"/>
<div class="lang">
<xsl:if test="code=/ROOT/GENERAL/lng">
<xsl:attribute name="class">lang selected</xsl:attribute>
</xsl:if>
<a href="?LNG={code}" title="{trad}"><xsl:value-of select="code"/></a>
</div>
</xsl:for-each>
<br style="clear:both" />
</div>
<span style="clear:both" />
<!-- END INCLUDE com.dating.langSwitcher-->
<br style="clear:both"/>
</div>
<br/>
<!-- END INCLUDE com.dating.header-->
<form method="post" action="/actions/signup" js:check="on">
<div js:tab="Main">
<table cellpadding="0" cellspacing="0" width="50%">
<tbody>
<tr>
<th>
Ton pseudo:
</th>
<td>
<input type="text" name="inpTxtUser" id="inpTxtUser" js:check="^[a-zA-Z]((1))[a-zA-Z0-9]((5,));Votre nom d'utilisateur doit commencer par une lettre, et avoir une longueur de 6 charactères minimums.;5000" />
</td>
</tr>
<tr>
<th>
Ton mot de passe:
</th>
<td>
<input type="password" name="inpPwdPass" id="inpPwdPass" js:check=".((6,));Votre mot de passe doit faire 6 charactères minimums.;5000" />
</td>
</tr>
<tr>
<th>
Répéte ton mot de passe stp:
</th>
<td>
<input type="password" name="inpPwdPassRep" id="inpPwdPassRep" js:check=".((6,));Votre mot de passe doit faire 6 charactères minimums.;5000"/>
</td>
</tr>
<tr>
<th>
Ton email:
</th>
<td>
<input type="text" name="inpTxtEmail" id="inpTxtEmail" js:check="^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9]+)$;Votre adresse email semble invalide.;5000"/>
</td>
</tr>
</tbody>
</table>
</div>
<div js:tab="Prec">
<table cellpadding="0" cellspacing="0" width="50%">
<tbody>
<tr>
<th>
Ta date de naissance:
</th>
<td>
<input type="text" name="inpTxtBirth" id="inpTxtBirth" value="dd.mm.yyyy" js:check="[0-9]((2)).[0-9]((2)).[0-9]((4));Veuillez vérifier que la date entrée soit sous la forme jj.mm.yyyy;5000"/>
<script type="text/javascript">
Calendar.setup({
inputField : "inpTxtBirth",
ifFormat : "%d.%m.%Y",
showsTime : false,
timeFormat : "24",
firstDay : 1
});
</script>
</td>
</tr>
<tr>
<th>
Ton pays:
</th>
<td>
<select name="inpSelCntry" id="inpSelCntry">
<xsl:for-each select="countryList/country">
<option value="{iso}">
<xsl:if test="iso=/ROOT/GENERAL/iso">
<xsl:attribute name="selected">selected</xsl:attribute>
</xsl:if>
<xsl:value-of select="name"/>
</option>
</xsl:for-each>
</select>
</td>
</tr>
<tr>
<th>
Tu es:
</th>
<td>
<select name="inpSelGndr" id="inpSelGndr">
<xsl:for-each select="gndrList/gender">
<xsl:sort select="order" />
<option value="{code}"><xsl:value-of select="trad"/></option>
</xsl:for-each>
</select>
</td>
</tr>
<tr>
<th>
Tu cherches:
</th>
<td>
<select name="inpSelGndrSrch" id="inpSelGndrSrch">
<xsl:for-each select="gndrList/gender">
<xsl:sort select="order" />
<option value="{code}"><xsl:value-of select="trad"/></option>
</xsl:for-each>
</select>
</td>
</tr>
</tbody>
</table>
</div>
<div js:tab="About">
<table cellpadding="0" cellspacing="0" width="50%">
<tbody>
<tr>
<th>
Descris-toi en quelques lignes
</th>
</tr>
<tr>
<td>
<textarea name="inpTaAbout" id="inpTaAbout" cols="50" rows="10" js:check=".((20,));Veuillez donner au moins 20 charactères svp... C'est pas beaucoup...;5000"/>
</td>
</tr>
</tbody>
</table>
</div>
<p>
<input type="submit" value="GO!"/>
</p>
</form>
<!-- FROM INCLUDE com.dating.footer -->
<!-- com.dating.header
028.11.2007, ts, init
-->
<div id="divFooter">
<p>
© webalis.com
-
<a href="/signup.php">Inscription</a>
</p>
</div>
<!-- END INCLUDE com.dating.footer-->
</xsl:template>
<!--com.webalis.close_html
08.11.2007, ts, Init
-->
</xsl:stylesheet><!-- CACHED ON 2008-01-21 19:45:18.507501 -->
As you can see, this is almost an HTML file.
In fact, this style sheet is more to be considered like a template.
You can put XSL and XPATH instructions in it, to tell the XSL engine where it should replace datas taken from the XML.
For instance:
Code:
<title><xsl:value-of select="/ROOT/GENERAL/title"/></title>
Tells the engine that it must put the value contained in
/ROOT/GENERAL/title between the <title> tags.
You can define templates too, in the XSL, that you can call upon specific elements in the XML
Code:
<xsl:template name="profile">
<div class="userCont">
<xsl:attribute name="class">
userCont
<xsl:choose>
<xsl:when test="gender='Un homme'">
userM
</xsl:when>
<xsl:otherwise>
userF
</xsl:otherwise>
</xsl:choose>
</xsl:attribute>
<a href="/user/{uid}"><xsl:value-of select="username"/></a>
<xsl:choose>
<xsl:when test="pic!=''">
<img src="/img/user/{pic}" alt="trad key userPic not existant" title="trad key userPic not existant"/>
</xsl:when>
</xsl:choose>
<p>
Sexe: <xsl:value-of select="gender"/><br/>
Cherche: <xsl:value-of select="gendersearch"/>
</p>
<p>
<xsl:value-of select="aboutme" />
</p>
</div>
</xsl:template>
This is used in conjunction with an XML block like that one:
Code:
<profiles>
<profile>
<uid>3</uid>
<username>thierry</username>
<creadt>2008-01-09 23:55:30.626826</creadt>
<lastlogin>2008-01-09 23:55:30.636639</lastlogin>
<prevlogin/>
<birthday>1975-03-30 00:00:00</birthday>
<zodiac></zodiac>
<aboutme>blah blah blah blah blah blah blah blah </aboutme>
<email>tmo@webalis.com</email>
<pic/>
<countryiso>CH</countryiso>
<gender>Un homme</gender>
<gendersearch>Une femme</gendersearch>
</profile>
</profiles>
To generate a user profile.
This, for instance:
Code:
<select name="inpSelCntry" id="inpSelCntry">
<xsl:for-each select="countryList/country">
<option value="{iso}">
<xsl:if test="iso=/ROOT/GENERAL/iso">
<xsl:attribute name="selected">selected</xsl:attribute>
</xsl:if>
<xsl:value-of select="name"/>
</option>
</xsl:for-each>
</select>
Create a select with every values contained into the <countryList> node, and preselect the drop down onthe detected country.
The main advantage, is that you can delegate a bit of the work to the client.
What is great too, is that with this method, as
you have a total separation between datas and visual informations, you can define several sets of SL style sheets, and switching from one to the other changes what is displayed.
Don't think just HTML here, but PDF too, or WAP, and mobile HTML.
The switch can be done via a simple
PHP Code:
$objXml->setRendering('wap');
for instance, and an alternate set of xsl file stored in a subdirectory "wap" will be used.
Thus, without touching your logic files, you can adapt a site to another format.
PDF can be generated from XML in a very similar way using an FOP engine. The apache project has released one (
http://xmlgraphics.apache.org/fop/ ), and it works perfectly.
Thrue, it's basedon java, but it does an excellent job nonetheless.
It's already a long post, and I'll stay here.
I hope this answer your question.
