7
Tags:
asp.net
Skrevet af
Bruger #2730
@ 06.05.2005
Denne artikel viser en nem og hurtig måde at implementere en outlook bar ved hjælp at XML, CSS, XSLT og Javascript.
Indledning
Det første der skal gøres er at lave et xml dokument der skal bruges til at vise data med. Jeg har taget udgangspunkt i et projekt jeg lavede til at holde styr på alle mine forkellige kode stumper. Til dette formål manglede jeg et nem måde at præsentere mine "sprog" på, det vil sige de sprog, under hvilke jeg vil kunne oprette nye kode stumper, valget faldt på en outlook bar. I princippet er en outlook bar ikke andet end en HTML tabel, der kan lidt specielle ting.
Hele tricket til at få en tabel til at se ud som en outlookbar er bare en illusion. Jeg sætter højden på alle overskrift elementerne til 30 pixels, så skjuler jeg de element rækker der ikke skal vises, og sætter højden på de elementer der skal vises til 100%, så den maxer hele siden ud.
Trin 1 - Xml dokumentet
Min lille applikation henter sine data i en SQL Server 2000 og får SQL Serveren til at formatter det til XML inden jeg får det ud i min ASP.NET applikation. Det man måske lige skal tænke lidt over er hvordan man laver sit sql udtræk. Jeg arbejder med to tabeller en "Library" tabel der indeholder de forskellige Programmeringssprog jeg ønsker at oprette koder til, samt en "Snippet" tabel der indeholder mine kode fragmenter, og så en fremmednøgle til "Librarytabellen" således jeg kan knytte dem sammen. Dette gør så også, at når jeg trækker XML ud fra databasen ser det således ud.
<root>
<library>
<lib_id>1</lib_id>
<lib_name>C-Sharp</lib_name>
<snippet>
<snippet_id>1</snippet_id>
<snippet_name>test</snippet_name>
<snippet_code>test</snippet_code>
<snippet_created>2005-04-23T14:50:56.563</snippet_created>
<snippet_desc>test</snippet_desc>
</snippet>
<snippet>
<snippet_id>2</snippet_id>
<snippet_name>Kode 2</snippet_name>
<snippet_code>Dette er koden til kode 2</snippet_code>
<snippet_created>2005-04-23T19:21:02.983</snippet_created>
<snippet_desc>Dette er beskrivelsen af kode 2</snippet_desc>
</snippet>
</library>
<library>
<lib_id>2</lib_id>
<lib_name>C++</lib_name>
<snippet>
<snippet_id>3</snippet_id>
<snippet_name>Kode 3</snippet_name>
<snippet_code>Dette er koden til kode 3</snippet_code>
<snippet_created>2005-04-23T19:21:23.407</snippet_created>
<snippet_desc>Dette er beskrivelsen til kode 3</snippet_desc>
</snippet>
</library>
<library>
<lib_id>3</lib_id>
<lib_name>Delphi</lib_name>
<snippet>
<snippet_id>4</snippet_id>
<snippet_name>Kode 4</snippet_name>
<snippet_code>Dette er koden til kode 4</snippet_code>
<snippet_created>2005-04-23T19:21:55.970</snippet_created>
<snippet_desc>Dete er beskrivelsen til kode 4</snippet_desc>
</snippet>
</library>
<library>
<lib_id>4</lib_id>
<lib_name>SQL</lib_name>
<snippet>
<snippet_id>5</snippet_id>
<snippet_name>Kode 5</snippet_name>
<snippet_code>Dette er koden til kode 5</snippet_code>
<snippet_created>2005-04-23T19:22:14.720</snippet_created>
<snippet_desc>Dette er beskrivelsen til kode 5</snippet_desc>
</snippet>
</library>
</root>
Som det ses består XML filen af nogle "library" tags med tilhørende "snippet" tags. Og det er dette dokument vil vil have konverteret til en tabel.
Trin 2 - XSLT filen
Det næste skridt er så at få bygget den rigtige tabelstruktur ud fra dette XML dokument, og der er vel næppe nogen nemmere måde på dette end at transformere XML dokumentet med et stylesheet.
<?xml version="1.0" encoding="ISO-8859-1" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt"
xmlns:user="urn:my-scripts">
<xsl:param name="activetab" />
<xsl:output method="html" />
<xsl:template match="/">
<table border='0' width='100%' cellspacing='0' cellpadding='0' style='height:100%;'>
<xsl:for-each select="root/library">
<tr id='librarybar'>
<td class='plain' name='tab' id='tab' align='center' width='100%' valign='middle' onmouseover='hoverlib(this);'
onmouseout='deHoverlib(this);' onclick='ChangeTab(this)'>
<xsl:value-of select="lib_name" />
</td>
</tr>
<tr>
-----> <xsl:if test="$activetab!=lib_id">
<xsl:attribute name="style">display:none</xsl:attribute>
</xsl:if>
<td valign='top'>
<xsl:apply-templates select="snippet" />
</td>
</tr>
</xsl:for-each>
</table>
</xsl:template>
<xsl:template match="snippet">
<table border='0' width='100%' cellspacing='0' cellpadding='0'>
<tr>
<td class='libheader'>
<a href='javascript:ShowCode({snippet_id})'>
<xsl:value-of select="snippet_name" />
</a>
</td>
</tr>
</table>
</xsl:template>
</xsl:stylesheet>
Det man lige skal ligge mærke til er at vi har en paremeter der angiver hvilken tab der er den aktive tab. Denne parameter sætter vi fra vores kode, jeg har valgt altid at have den første som den der default er valgt når jeg bruger systemet. Det er simpelt at sætte denne parameter fra sin kode, se eksemplet i nedenstående kode.
DataHandler dh = new DataHandler();
XsltArgumentList xslArg = new XsltArgumentList();
xslArg.AddParam("activetab","",activetab);
libraryxml.TransformArgumentList=xslArg;
libraryxml.Document = dh.GetSnippetsAndLibraries();
libraryxml.TransformSource = "styles/library.xslt";
DataHandler er en klasse jeg bruger til alt mit database arbejde. Når denne parameter er sat på XSLT filen så er det ligetil at lave det der skal laves. Jeg har markeret oppe i XSLT filen med en ------> hvor det sjove sker. Det er her vi vælger hvilken den af tabellen der skal skjules, det er en simpel sammenligning på parametren der kommer ind i XSLT fra min kode, der afgør hvilket "Library" der bliver det aktive "Library" til at starte med. Det eneste der nu er tilbage er at lave lidt javascript til at skifte rundt på vores "Libraries" når der klikkes på dem, som i kan se i ovenstående XSLT har jeg et par hjælpe funktioner til at lave en hoover effekt på mine "Libraries", ellers er det bare lidt simpelt CSS til at formattere farver og borders. Når brugeren klikker på et "Library" skal jeg klappe det "Library" sammen der er valgt og folde den nye ud. Det er lidt vanskeligt at gøre på en fornuftig måde, så jeg klapper bare alle sammen sammen og klapper den ud der er blevet klikket på, det er nemmere og virker upåklageligt. Her er det JavaScript der bruges.
function hoverlib(tab)
{
tab.className="highlight";
}
function deHoverlib(tab)
{
tab.className="plain";
}
function ChangeTab(activetab)
{
var tabs = document.getElementsByName("tab");
var tal = 0;
for(var x=0;x<tabs.length;x++)
{
var tab = tabs[x];
tab.parentElement.nextSibling.style.display = "none";
}
activetab.parentElement.nextSibling.style.display = "block";
}
Og vupti så er det klaret.... Som sagt tidligere der er ikke noget svært i dette, det er bare en illusion. Når Min OutlookBar kører ser den således ud (jeg har lavet lidt ekstra eye candy i min css).
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:
Kommentarer (4)
Synes den her artikel har mere med javascript og xslt at gøre end ASP.NET.
Jepsen, hvis man fjerner alt ASP.NET koden er der kun XSLT og javascript tilbage :-)
Øh, tror du misforstår.
Jeg synes der er lagt meget vægt på andet end lige præcis ASP.NET i denne artikel.
Nope, jeg forstår din argumentation og kan også godt se fornuften i det du skriver. Denne artikel vil kunne fungere under XML/XSLT da det i princippet er den teknologi der benyttes - men jeg synes det også var relevant at vise hvordan man kunne kæde det sammen med ASP.NET.
Du skal være
logget ind for at skrive en kommentar.