2008 13 Augusti 2008

Tokenizing Avgränsad String inne i en XSL

Om dina krav är att dela en nod värde i ett XML, som innehåller en avgränsad sträng av värde, till enskilda poster, så har du kommit rätt ... ta en titt på exemplet nedan. Om du är bekant med en liten bit av XML och XSL ... Jag tror inte du skulle behöva någon förklaring.
Även detta exempel användning av XSL funktioner som xsl: call-mall, xsl: delsträng-före, xsl: delsträng-efter, om det är vad du är ute efter.

XML för att omvandlas (food.xml): -
Antag att uppgiften är att tokenize strängen avgränsas med kommatecken, i taggen "sökord"

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="food.xsl"?>
<food>
<date>July 2008</date>
<description>All about things we eat everyday</description>
<keywords>Fruits, Vegetables, Pulses, Meat, Cereals </keywords>
</food>

XSL (food.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" encoding="utf-8" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>XSL 1.0 Delimited String Tokeniser</title>
</head>
<body>
<xsl:value-of select="food/meta"/>
<div >
<xsl:call-template name="tokenize">
<xsl:with-param name="string" select="food/keywords" />
<xsl:with-param name="delimitr" select="','" />
</xsl:call-template>

</div>
</body>
</html>
</xsl:template>
<xsl:template name="tokenize">
<xsl:param name="string" />
<xsl:param name="delimitr" />
<xsl:choose>
<xsl:when test="contains($string, $delimitr)">
<div style="border:1px solid red;">
<h3><xsl:value-of select="substring-before($string,$delimitr)" /></h3>
<xsl:variable name="data" select="substring-before($string,$delimitr)"/>
</div>
<xsl:call-template name="tokenize">
<xsl:with-param name="string" select="substring-after($string, $delimitr)" /><xsl:with-param name="delimitr" select="$delimitr" /></xsl:call-template>
</xsl:when>
<xsl:otherwise>
<div style="border:1px solid red;">
<h3><xsl:value-of select="$string" /></h3>
</div>
</xsl:otherwise>
</xsl:choose>
</xsl:template>
</xsl:stylesheet>

Resultat utgång HTML: -

<div>
<div style="border: 1px solid red;">
<h3>Fruits</h3>
</div>
<div style="border: 1px solid red;">
<h3> Vegetables</h3>
</div>
<div style="border: 1px solid red;">
<h3> Pulses</h3>
</div>
<div style="border: 1px solid red;">
<h3> Meat</h3>
</div>
<div style="border: 1px solid red;">
<h3> Cereals </h3>
</div>
</div>

Onödigt att säga ... bara ändra parametern "delimitr" till avgränsare du vill


2008 11 Augusti 2008

Ladda Detta Faux Placerad WordPress mall

Om du är en av de där killarna (som mig), som ofta kontrollera CSS väl gjorde HTML-sida, för att få inspiration eller vad, så du kanske har märkt att vi har använt FAUX positionering (som redan nämnts i min tidigare artikel Vi är med Faux Absolut positionering: A Brilliant CCS layout )

Vi gjorde en del bra arbete på den här mallen, så tänkte att det skulle trevligt att dela det .... Ladda ner denna WordPress Theme (nedladdade 200 gånger)


2008 7 augusti 2008

ANIMOTO: Really Nice "Rich User Interface" utan Flash!

Har du sett animoto.com? Tja! detta inte är ett AD, tyckte jag verkligen det! och det är Kiss ASS UI faktiskt

Jag kom över denna webbplats för några veckor sedan. Såg den första sidan, uppkomsten bry mycket. För mig var det bara en plats med en rik Flash-innehåll, så att användarna kan ladda upp bilder, välja några spår och omvandla den till en fin bild bildspel. Ladda ner FLV, och satte den på någon plats som du väljer (YouTube, Metacafe, Facebook och de gillar) ... PERIOD.

Igår när jag såg de interna flödet sidor, som tog användaren genom skapandet av det här bildspelet .... Jag gick OH WOW! När jag insåg att det inte fanns lite blixt används. Det var verkligen ett rikt användargränssnitt. Alla UI utvecklare måste sträva efter att skapa eller åtminstone en del av det team som har gjort detta gränssnitt .... Absolutely brilliant! Och inspirerande!

TA EN TITT ... http://animoto.com/ ... och registrera sig och leka med den ... bara då kan du uppskatta geni.


2008 4 augusti 2008

Ett problem med position () i XSL ... eller är det?

Jag hade lever i en märklig problem när du skapar en XSL idag. Tittade efter svar hela nätet, men kunde inte hitta några .... Egentligen Jag antar! Jag uppkomsten vet vad mitt problem var, så vad ser jag för?

Ändå! Bara om du har detta mycket samma problem också och på något sätt genom kraften i kraft du lyckats landa på denna sida ... du skulle tacka mig massor ... Och om du har råkat hamnat på denna sida av någon underlig öde och du råkar vara en XSL utvecklare, GÖR En anteckning om NU, för framtiden orsak, om en dag, du möter det här problemet, då FORCE kanske inte med dig.

Problem uttalande:
Jag har denna XML, där det finns två noder med flera objekt i den och de poster mellan dessa två noder har en 1-1 korrespondens. I exemplet nedan varje post i noden <array name="PLAYURL" /> avser (motsvarande position) till ett objekt i noden <array name="SITENAME" />

<?xml version="1.0" encoding="utf-8"?>
<myplaylists>
<playlist>
<title>Best of Rest </title>
<array name="SITENAME">
<str>www.musicindiaonline.com</str>
<str>www.dhingana.com</str>
<str>www.raaga.com</str>
<str>www.smashits.com</str>
<str>www.desimusic.com</str>
<str>www.musicplug.in</str>
</array>
<array name="PLAYURL">
<str>http://www.musicindiaonline.com/123/</str>
<str>http://www.dhingana.com/play/123</str>
<str>http://www.raaga.com/123</str>
<str>http://ww.smashits.com/123</str>
<str>http://www.desimusic.com/123</str>
<str>http://www.musicplug.in/123</str>
</array>
</playlist>
</myplaylists>

Nu har jag en slinga, där jag loop through <array name="SITENAME">, och jag vill få den relaterade posten (vid motsvarande position) i <array name="PLAYURL">,

Vad du skulle Normalt försöker göra är ...

<xsl:for-each select="myplaylists/playlist/array[@name='SITENAME']/str">
play from : <a href="{../../array[@name='PLAY']/str[position()]}"/> <xsl:value-of select="." /></a>
</xsl:for-each>

SORRY! DENNA brukar fungera ... Ah!! Surpised ...

Nu skulle du förmodligen vill prova, ungefär så här ...

<xsl:for-each select="myplaylists/playlist/array[@name='SITENAME']/str">
<xsl:variable name="pos"> <xsl:value-of select="position()"/></xsl:variable>
play from : <a href="{../../array[@name='PLAY']/str[$pos]}"/> <xsl:value-of select="." /></a>
</xsl:for-each>

Och Återigen brukar fungera ... Nu kliar huvudet, försöker kontakta alla som du tror känner till några XSL och kan vara till någon hjälp ... du försöker alla andra alternativ ... och ändå brukar fungera ... Tja! Thats vad som hände mig iallafall ...

DONT förtvivlan!! Try This

<xsl:for-each select="myplaylists/playlist/array[@name='SITENAME']/str">
<xsl:variable name="pos-int" select="position()" />
play from : <a href="{../../array[@name='PLAY']/str[$
<xsl:for-each select="myplaylists/playlist/array[@name='SITENAME']/str">
<xsl:variable name="pos-int" select="position()" />
play from : <a href="{../../array[@name='PLAY']/str[$ pos-int ]}"/> <xsl:value-of select="." /></a>
</xsl:for-each>
]}"/> <xsl:value-of select="." /></a>
</xsl:for-each>

Dont frågar mig varför det fungerar. För jag dont har en rätt anledning ... om du gör! Var snäll och släppa en kommentar. Det kan vara ganska användbar. Också! om du har bättre rätt för det här inlägget, gör släpp mig en linje :)


2008 2 augusti 2008

Ställa in DOCTYPE i XSL

Förra veckan skapade jag en progessive HTML / CSS layout för en klient, testade den i IE6, IE7 och FF 3, verkade väl bra ... tills! layouten gick längre ner i manufacting cykeln. Det misslyckades. Sidlayout element gick bara överallt när HTML layouten omvandlades till XSL och XML tillämpas på det ... Bummer!

Kunde inte sova ok under helgen, i väntan på måndag morgon, när jag måste fixa detta SH **. Men nu har lite experince att hantera denna typ av situationer (Webbläsare Quirks, jag menar), jag visste det hade att göra med inget annat än DOCTYPE .... och det var ...

Problem:
Du vill ha kontroll över DOCTYPE, eftersom din förvandling kommer att innehålla en standard DOCTYPE explicit, och du layout kommer att vara borta ett dugg.

Lösningen:
XSLT specs ger utgående metoder för att ställa in en DOCTYPE för val. Även för oss UI utvecklare skulle intresseområden är HTML-utdata metoder och XML metoder produktion .

Tja! innan du blir uttråkad, här är den fix.

För t.ex. Om du hade följande DOCTYPE i din HTML-versionen. -

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Sedan i XSL du måste ha följande: -

<xsl:output method="html" doctype-system="http://www.w3.org/TR/html4/loose.dtd" doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN" indent="yes" />

och slutligen! gör att din XSLT utgång lyder DOCTYPE du har valt.


NDK hem | Att uttrycka IT | uttrycka Palate | uttrycka Penmenship | uttrycka Awe | uttrycka mig