DotNetNuke Skinning Whitepaper 翻译记录(附录 C – 容器转换)

附录 C – 容器转换

原来的DotNetNuke容器使用简单的HTML为内容模块提供自定一个边框。HTML通常包含在一个container.txt文件中，含有几个每次请求都要进行转换的标志符号[TOKENS]。

<table border="0" cellspacing="0" cellpadding="0" width="100%" Summary="Module Design Table">

<tr>

<td width="23"><img border="0" src="top-left.gif" WIDTH="23" HEIGHT="31" Alt="Module Border"></td>

<td background="top-tile.gif"></td>

<td width="23"><img border="0" src="top-right.gif" WIDTH="23" HEIGHT="31"Alt="Module Border"></td>

</tr>

<tr>

<td width="23" background="left-tile.gif"></td>

<td[ALIGN]>

[MODULE]

</td>

<td width="23" background="right-tile.gif"></td>

</tr>

<tr>

<td width="23"><img border="0" src="bottom-left.gif" WIDTH="23" HEIGHT="31"Alt="Module Border"></td>

<td background="bottom-tile.gif"></td>

<td width="23"><img border="0" src="bottom-right.gif" WIDTH="23" HEIGHT="31"Alt="Module Border"></td>

</tr>

</table>

将原有的容器转换到新的皮肤框架中来需要对HTML内容作些简单的修改。

<table border="0" cellspacing="0" cellpadding="0" width="100%" Summary="Module Design Table">

<tr>

<td width="23"><img src="top-left.gif"  border="0" WIDTH="23" HEIGHT="31" Alt="Module Border"></td>

<td background="top-tile.gif"></td>

<td width="23"><img src="top-right.gif" border="0" WIDTH="23" HEIGHT="31" Alt="Module Border"></td>

</tr>

<tr>

<td background="left-tile.gif" width="23"></td>

<td runat="server" id="ContentPane">

<table cellSpacing="0" cellPadding="0" width="98%" summary="Module Title Table">

<tr>

<td vAlign="bottom" nowrap align="left" height="34">

<dnn:Actions runat="server" id="dnnActions" />

<dnn:Icon runat="server" id="dnnIcon" />

  </td>

<td vAlign="bottom" nowrap align="left" width="100%" height="34">

<dnn:Title runat="server" id="dnnTitle" /> 

  </td>

<td vAlign="bottom" nowrap align="right" height="34">

<dnn:Visibility runat="server" id="dnnVisibility" />

  </td>

</tr>

<tr>

<td colspan="3" width="100%">

<hr noshade size="1">

  </td>

</tr>

</table>

</td>

<td background="right-tile.gif" width="23"></td>

</tr>

<tr>

<td width="23"><img src="bottom-left.gif" border="0" WIDTH="23" HEIGHT="31" Alt="Module Border"></td>

<td background="bottom-tile.gif"></td>

<td width="23"><img src="bottom-right.gif" border="0" WIDTH="23" HEIGHT="31" Alt="Module Border"></td>

</tr>

</table>

Appendix C – Container Conversion

The original DotNetNuke containers contained basic HTML for providing a custom border for content modules. The HTML was typically included in a container.txt file containing a few key [TOKENS] which were parsed on every request.

<table border="0" cellspacing="0" cellpadding="0" width="100%" Summary="Module Design Table">

<tr>

<td width="23"><img border="0" src="top-left.gif" WIDTH="23" HEIGHT="31" Alt="Module Border"></td>

<td background="top-tile.gif"></td>

<td width="23"><img border="0" src="top-right.gif" WIDTH="23" HEIGHT="31"Alt="Module Border"></td>

</tr>

<tr>

<td width="23" background="left-tile.gif"></td>

<td[ALIGN]>

[MODULE]

</td>

<td width="23" background="right-tile.gif"></td>

</tr>

<tr>

<td width="23"><img border="0" src="bottom-left.gif" WIDTH="23" HEIGHT="31"Alt="Module Border"></td>

<td background="bottom-tile.gif"></td>

<td width="23"><img border="0" src="bottom-right.gif" WIDTH="23" HEIGHT="31"Alt="Module Border"></td>

</tr>

</table>

Converting an original DotNetNuke container to the new skinning architecture involves making some simple modifications to the HTML:

<table border="0" cellspacing="0" cellpadding="0" width="100%" Summary="Module Design Table">

<tr>

<td width="23"><img src="top-left.gif"  border="0" WIDTH="23" HEIGHT="31" Alt="Module Border"></td>

<td background="top-tile.gif"></td>

<td width="23"><img src="top-right.gif" border="0" WIDTH="23" HEIGHT="31" Alt="Module Border"></td>

</tr>

<tr>

<td background="left-tile.gif" width="23"></td>

<td runat="server" id="ContentPane">

<table cellSpacing="0" cellPadding="0" width="98%" summary="Module Title Table">

<tr>

<td vAlign="bottom" nowrap align="left" height="34">

<dnn:Actions runat="server" id="dnnActions" />

<dnn:Icon runat="server" id="dnnIcon" />

  </td>

<td vAlign="bottom" nowrap align="left" width="100%" height="34">

<dnn:Title runat="server" id="dnnTitle" /> 

  </td>

<td vAlign="bottom" nowrap align="right" height="34">

<dnn:Visibility runat="server" id="dnnVisibility" />

  </td>

</tr>

<tr>

<td colspan="3" width="100%">

<hr noshade size="1">

  </td>

</tr>

</table>

</td>

<td background="right-tile.gif" width="23"></td>

</tr>

<tr>

<td width="23"><img src="bottom-left.gif" border="0" WIDTH="23" HEIGHT="31" Alt="Module Border"></td>

<td background="bottom-tile.gif"></td>

<td width="23"><img src="bottom-right.gif" border="0" WIDTH="23" HEIGHT="31" Alt="Module Border"></td>

</tr>

</table>