umbraco入门（二、使用XSLT）——手把手教你做MP3 player module
Posted on 2012-12-13 15:02 Bowen Huang 阅读(4783) 评论(5) 编辑 收藏 举报上一篇文章介绍了umbraco的安装和简单的介绍，现在我将从开发一个小的公用插件开始逐步熟悉umbraco的操作，这也是我做的第一个umbraco的小插件。
需求：Umbraco MP3模块开发计划
1. 设计Document Type: Mp3 Document Type
Speaker:Textstring
Title:Textstring
Summary:Textstring
Series:Textstring
Media:Media Picker
2.设计Document Type: Mp3 List Document Type
将Mp3 Document Type设置为Child
3. 设计cshtml宏
展现Mp3 List Document Type的Content的所有Mp3文件，并通过Mp3播放JQuery插件进行播放
现在开始具体的开发工作了，我会边讲步骤边说明：
一、创建Document Types
进入****/umbraco/umbraco.aspx页面，点击Settings,然后右击Document Types；
现在可以新建也可以引入一个Document Type,我们选择Create(新建)，在右边的编辑页面的info页中，设置name为Mp3 Document Type(该Document Type其实就是一个MP3属性的集合，包含MP3的一些属性，也只包含属性)，它会自动生成alias(别名，这是umbraco 各项元素的标识，会自动保存于umbraco.config，我们在后面要操作Content的时候会用到)，选择Icon为mediaMovie.gif(这是为了表明我们要设置的是MP3)，在Generic Properties页，Add New Properties，下面用截图表示操作
例如添加属性Speaker，
用相同的方式，添加其它属性Speaker，Title，Summary，Series，Media
那么现在Document Type: Mp3 Document Type已经创建好了，现在开始创建Document Type: Mp3 List Document Type，和上一个一样的操作Create Mp3 List Document Type,这一个Document Type为了将所有的Mp3 Document Type组合起来的一个大的集合，Mp3 Document Type是它的子节点，他本身没有任何的属性，为什么这么做，就是因为一个音乐的播放列表含有很多的音乐个体。所以，这个Mp3 List Document Type只需要设置Structure就可以了，在Allowed child nodetypes中选择Mp3 Document Type。
二、创建Template
为什么要创建Template呢，因为我们有了Document Type，只相当于有了一些model,这些东西只是决定了有什么，而不会决定怎样展现，这里的template其实就是.NET中的master,它将会将我们需要展现的东西呈现给用户。我们要展现的是播放列表，右击Templates,然后Create一个Name为Mp3 List Document Type的template,会看到如下代码：
<%@ Master Language="C#" MasterPageFile="~/umbraco/masterpages/default.master" AutoEventWireup="true" %> <asp:Content ContentPlaceHolderID="ContentPlaceHolderDefault" runat="server"> </asp:Content>
这里，<asp:Content></asp:Content>就是我们编辑html代码的地方，为了实现代码的重用性，我将不会直接在这里面写播放列表的产生代码，我将使用到宏，然后在template中引用宏。
引用宏的操作在宏创建后，在继续这里面的操作。
三、创建XSLT Files
为什么要创建XSLT file呢，首先我们要知道macro(宏)是什么，什么是macro，我也给不出定义，就我自己的理解，在umbraco里面，macro就是一个平台，这个平台是干什么的呢，就是分离插件（指的就是xslt files / cshtml / .NET controls）和template的，让各插件可以独立开发,开发后可以通过macro插入到template也体现出重用性，macro必须要包含xslt files / cshtml / .NET controls里面的一个文件，而这些文件才是可以呈现在用户面前的内容。
XSLT是扩展样式表转换语言（Extensible Stylesheet Language Transformations）的简称，这是一种对XML文档进行转化的语言，XSLT中的T代表英语中的“转换”（transformation）。它是XSL（Extensiblestylesheetlanguage）规范的一部分。------摘自 百度百科
我将会在另一片博客中详细讲解xslt。这里就不说其用法，只是说一下这个模块涉及到的内容。
在这里，点击Developer,右击XSLT Files,Create 一个File name为Mp3Player，template为Clean的文件。
默认生成的代码如下：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp " "> ]>
<xsl:stylesheet
version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxml="urn:schemas-microsoft-com:xslt"
xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets"
exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets ">
<xsl:output method="xml" omit-xml-declaration="yes"/>
<xsl:param name="currentPage"/>
<xsl:template match="/">
<!-- start writing XSLT -->
</xsl:template>
</xsl:stylesheet>
其实就是XML标记，我将在<!-- start writing XSLT -->下面写代码。
现在先不写代码，我们先将必须的文件全部创建好了然后在写代码，现在先点击保存。
四、创建Macro
点击Developer,右击Macros，创建Name为Mp3 Player的macro，然后在Use XSLT file里面选择Mp3Player.xslt，点击保存。这样这个macro就创建好了，可以在template中使用了。
五、编辑模版
点击Mp3 List Document Type，进入编辑页面，在<asp:Content></asp:Content>里面加入如下代码：
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>这一行思维了正确解析xslt转换过来的html,<head runat="server"></head>是为了让在xslt文件中引入的css和jquery正常的执行。
然后将光标指向body里面，点击macro引入的图标，
然后选择Mp3 Player,点击OK。这样就自动生成macro引入代码，全部代码如下：
<%@ Master Language="C#" MasterPageFile="~/umbraco/masterpages/default.master" AutoEventWireup="true" %>
<asp:Content ContentPlaceHolderID="ContentPlaceHolderDefault" runat="server">
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
</head>
<body>
<umbraco:Macro ID="MacroMp3Player" Alias="Mp3Player" runat="server"></umbraco:Macro>
</body>
</html>
</asp:Content>
接下来，就是创建Content用来显示template里面的内容。
六、创建Content
进入Content节点,右击Content,点击Create,如下图创建,点击Create.
找到App_Data下面的umbraco.config,打开查看，会发现多了Mp3ListDocumentType节点，这个节点我们将在xslt文件中操作：
<Mp3ListDocumentType id="1058" parentID="-1" level="1" writerID="0" creatorID="0" nodeType="1055" template="1056" sortOrder="1" createDate="2012-11-30T14:49:42" updateDate="2012-12-05T15:05:10" nodeName="Music" urlName="music" writerName="admin" creatorName="admin" path="-1,1058" isDoc=""/>
右击刚才创建的Music,然后Create一个mp3文件，name可以随便写，然后填写properties，如下图：
Mp3这一项选择的是Media中添加的mp3文件。添加后查看umbraco.config,发现在Mp3ListDocumentType 节点下多了一个子节点，如下：
<Mp3DocumentType id="1063" parentID="1058" level="2" writerID="0" creatorID="0" nodeType="1053" template="0" sortOrder="0" createDate="2012-11-30T14:51:59" updateDate="2012-12-05T14:58:24" nodeName="Grillz" urlName="grillz" writerName="admin" creatorName="admin" path="-1,1058,1063" isDoc="">
<speaker>Ali & Gipp</speaker>
<title>Grillz</title>
<summary>A very famous song</summary>
<series>Billboard</series>
<mp3>1059</mp3>
</Mp3DocumentType>
按照这种方式多添加几个mp3文件。现在进入最重要的环节，就是如何显示Content中的内容。
七、编写XSLT文件
打开刚才创建的Mp3Player.xslt，然后在<!-- start writing XSLT -->后面添加如下内容：
<xsl:value-of select="umbraco.library:RegisterStyleSheetFile('uTubeCSS', '/css/mp3play/Mp3Player.css')"/>
<xsl:value-of select="umbraco.library:RegisterJavaScriptFile('jquery', '/scripts/jmp3/jquery-1.7.2.min.js')"/>
<xsl:value-of select="umbraco.library:RegisterJavaScriptFile('jquery_jmp3', '/scripts/jmp3/jquery.jmp3.js')"/>
<xsl:value-of select="umbraco.library:RegisterJavaScriptFile('jquery_control', '/scripts/jmp3/mp3playerControl.js')"/>
<div id="music-player">
<div id="music-list">
<ul>
<xsl:for-each select="$currentPage/ancestor-or-self::*[@level=1]/Mp3DocumentType">
<xsl:variable name="mediaId" select="mp3"/>
<xsl:variable name="media" select="umbraco.library:GetMedia($mediaId, 0)"/>
<a href="javascript:void(0);" ondblclick="playmedia('{$media/umbracoFile}')">
<li class="playerlist">
<table cellpadding="0" cellspacing="0" style="font-size:12px">
<tr>
<td class="playermini">
<img id="{$media/umbracoFile}" with="27" height="22" src="/css/mp3play/images/stop.png" onclick="playmediamini('{$media/umbracoFile}')"/>
</td>
<td>
<xsl:value-of select="title"/>---<xsl:value-of select="speaker"/>
</td>
</tr>
<tr class="hiddenlist">
<td></td>
<td>
<small>
<xsl:value-of select="series"/>
</small>
</td>
</tr>
<tr class="hiddenlist">
<td></td>
<td>
<small>
<xsl:value-of select="summary"/>
</small>
</td>
</tr>
</table>
</li>
</a>
</xsl:for-each>
</ul>
</div>
<div id="player-plugin-hidden" class="mp3player">
<iframe src="../scripts/jmp3/singlemp3player.swf?showDownload=false" id="mp3player-iframe" width="300px" height="30px" frameborder="0" scrolling="no"></iframe>
</div>
</div>
这里不详细的讲解XSLT的操作，我将在另一篇博客中详细的介绍，现在就针对该代码进行必要的说明。
先介绍代码中出现的xslt语法
<xsl:param>元素用于设计一个全局的参数变量。
<xsl:value-of>元素用于选取选择节点值。这里为了让css和jquery能在xslt中正常使用，将才用这种方式引入。
<xsl:for-each>元素允许在XSLT里使用循环语句。这里是遍历umbraco.config里面的Mp3DocumentType节点，为读取每个mp3文件的相关信息。
<xsl:variable>元素用于设置局部变量。
$ 获取变量的值
现在介绍代码中出现的xpath语法，该语法与XSLT配套使用
ancestor 选取当前节点的所有先辈（父、祖父等）
ancestor-or-self 选取当前节点的所有先辈（父、祖父等）以及当前节点本身
child::* 选取当前节点的所有子元素
//title[@lang='eng'] 选取所有 title 元素，且这些元素拥有值为 eng 的 lang 属性。
那么在这里，<xsl:for-each select="$currentPage/ancestor-or-self::*[@level=1]/Mp3DocumentType">就是遍历当前Content(即Music)下面的所有Mp3DocumentType，然后选出其属性值。
在这里，用于操作MP3播放和列表样式显示的jQuery和css我就不写出来了，感兴趣的可以在下面的网址中下载。
还是上两张截图：
文章中有什么错误请指出来，欢迎交流讨论，umbraco新手写的生涩的博客。
尊重原创，支持作者：http://www.codeplex.com/site/users/view/huang_bx
该模块详细介绍：http://mp3playerxsltplugin.codeplex.com/
该模块安装包下载：http://mp3playerxsltplugin.codeplex.com/releases/view/98701
该模块源代码：http://mp3playerxsltplugin.codeplex.com/SourceControl/changeset/view/001c55952893
