DNN登陆注册链接小变身(Skin Object定制开发)

dnnsun@gmail.com — Thu, 15 May 2008 09:50:01 GMT

上一篇文章简单解析了DNN多语言解决方案,其中提到了一个皮肤级别的本地化支持.这篇文章接着简单分析如何定制开发自己的皮肤对象(在dnn称之为Skin Objects),不妨来看看我们如何给DNN默认的登陆注册链接皮肤对象做个小变身.首先还是先描述一下需求,例如有客户需要在设计皮肤时可以在登陆注册这两个链接增加一个小图象提示,起到修饰美观的作用,最终效果如图:

如何开发呢?其实对我来说,开发DNN的原则就是如何节省代码量,同时可以让DNN物尽所用,但又不能影响以后的升级.我想这个理念在前几篇文章都阐述得淋漓尽致(比如浅谈如何做到dnn物尽所用(二), 浅谈如何做到dnn物尽所用).有兴趣者不妨回头看看,也许你也会得到些许提示的.回到正题,首先我想到就是利用原有的登陆注册这两个链接皮肤对象,再结合DNN自带的CommandButton(文章"再谈dnn的物尽所用(三)"对此有所解析)这一用户控件就可以实现我们的需求了.那我们就开始吧,还是我之前提到开发皮肤对象的步骤:

1) 在网站根目录下的admin/Skins文件夹里创建一个UserControl,比如现在新增dnnsunUser.ascx和dnnsunLogin.ascx(请注意该文件夹下的代码不需要重新编译,如果你是以站点形式发布的).

2) 创建对应的资源文件(dnnsunUser.ascx.resx, dnnsunUser.ascx.zh-CN.resx及其dnnsunLogin.ascx.resx,ascx.resx, dnnsunLogin.ascx.zh-CN.resx)

其中上述步骤你可以直接拷贝默认的登陆注册链接皮肤对象,然后重命名即可.接下来就是替代我们即将加入的CommandButton,在页面中注册并添加实例:

dnnsunLogin.ascx

<%@ Register TagPrefix="dnn" Assembly="DotNetNuke" Namespace="DotNetNuke.UI.WebControls" %>

<dnn:CommandButton ID="cmdLogin" runat="server" CssClass="SkinObject" CausesValidation="false"/>

或

dnnsunUser.ascx

<%@ Register TagPrefix="dnn" Assembly="DotNetNuke" Namespace="DotNetNuke.UI.WebControls" %>

<dnn:CommandButton ID="cmdRegister" runat="server" CssClass="SkinObject" CausesValidation="false"/>

接下来就是修改默认的属性及其Page_Load事件,以达到我们的需求,具体实现我就不细说,大家可以下载来看看,逻辑还是原来的逻辑,修改只是一些细微之处,需要注意的现在我们增加了一个属性ImageUrl以满足我们的需求.在该属性中你只要设置当前皮肤的图象路径,比如:

YourSkin.ascx

<%@ Register TagPrefix="dnn" TagName="DNNSUNLOGIN" Src="~/Admin/Skins/dnnsunLogin.ascx" %>

<%@ Register TagPrefix="dnn" TagName="DNNSUNNAV" Src="~/Admin/Skins/dnnsunNav.ascx" %>

<dnn:DNNSUNUSER runat="server" ID="dnnUSER" ImageUrl="register.gif"/> |

<dnn:DNNSUNLOGIN runat="server" ID="dnnLOGIN" ImageUrl="login.gif"/>

回过头来看代码如何实现的,你会比较清晰思路,那就是在Page_Load中获取当前皮肤的目录然后合并文件路径,我想大家一看代码就一清二楚了:

If Not String.IsNullOrEmpty(ImageUrl) Then
cmdRegister.ImageUrl = PortalSettings.ActiveTab.SkinPath & ImageUrl
End If

需要注意的是资源文件定义的键值对,如果你需要定制自己的提示信息,不妨打开对应的资源文件修改其中的定义.比如:

WelcomeInfo.Text -- Welcome to dnnsun,{0}

你可以修改成:

WelcomeInfo.Text -- Hi,{0} you are login incurrently!

这些都是很方便的,^_^
最后一点需要提的是你可能需要在skin.css定义以下类似样式,让提示图片跟文字对齐:

/* For The Login and Register Link */
.SkinObject input {vertical-align:bottom;}

就像我之前文章提到那样,定制开发自己的皮肤对象最大的优势就是满足定制的需求和支持本地化.这两个控件当然也不例外,本网站就是应用这些控件部分实现了多语言机制!
你可以从这里获取到这些皮肤对象, dnnsunUser and dnnsunLogin Skin-Objects
安装步骤如下:
1) 解压缩zip文件,拷贝dnnsunUser.ascx,dnnsunUser.ascx.vb,dnnsunUser.xml和dnnsunLogin.ascx,dnnsunLogin.ascx.vb,dnnsunLogin.xml到站点根目录下的admin/Skins
2) 拷贝dnnsunLogin.ascx.resx,dnnsunLogin.ascx.zh-CN.resx和dnnsunLogin.ascx.resx,dnnsunLogin.ascx.zh-CN.resx到站点根目录下的admin/Skins/App_LocalResources
使用方法上边已提到,在此就不再累赘了.

相关链接:

Fixing the DNN Breadcrumb Skin Object

Baldwin's DNN

DNN登陆注册链接小变身(Skin Object定制开发)