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" />&nbsp;

          </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" />&nbsp;

          </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>