Developing and Implementing
DNN Skin Objects
What are Skin objects?
SkinObjects are simply user controls that are designed to run at the skin level. These are items that are configured via properties that are set in the skin file, and will be rendered at all times that your skin is displayed. Skin objects are very powerful tools that offer ways to add common UI uniformly to each page of the site.
Background Summary
DotNetNuke skin is a professional graphic design tool that is used to change the layout and design of the Web site without changing the existing content and application functionality of the Web site.
DotNetNuke's free-form skinning approach allows skin designers to organize the Web site layout in any form they desire. They can inject content modules by creating content panes, which can be associated to the placement of modules in the database.
Dot Net Nuke skin can be decorated with skin objects, which are used to produce dynamic user interface. These objects are included in the static HTML markup (or corresponding ASCX) of the skin file. A number of standard skin objects are available for common portal functions such as login, status, and navigation. In addition to the pre supplied skin object you can easily create your own objects. The purpose of this article is to give a quick overview on how to create dotnetnuke skin objects.
Creating Skin Object (Example: Hello User)
Step1:- Create a Webproject in visual studio.
Note: - It is important to select the location of the project inside the “DesktopModules” Folder of your DNN installation.
The skin object project should have following files: -
|
Required Files from creating Skin Object
|
|
/App_LocalResources/ HelloSkinObject.resx
|
|
/ HelloSkinObject.dnn
|
|
/ HelloSkinObject.ascx
|
|
/ HelloSkinObject.ascx (.cs or .vb)
|
Step 2:- Clean solution by deleting default.aspx and web.config file.
Step 3:- Add reference to DotNetNuke.dll to current project.
Step 4:- Add a Hello.ascx file and a HelloSkinObject.dnn XML file
Step 5:- Add following code in HelloSkinObject.dnn file.
|
<dotnetnuketype="Package"version="5.0">
<packages>
<packagename="Hello"type="SkinObject"version="1.0.0">
<friendlyName>Hello</friendlyName>
<description>Demo Apploication.</description>
<owner>
<name>yourcompany.com</name>
<organization>yourcompany</organization>
<url>http://www.yourcompany.com</url>
<email>contactus@yourcompany.com</email>
</owner>
<license />
<releaseNotes />
<components>
<componenttype="SkinObject">
<moduleControl>
<controlKey>Hello</controlKey>
<controlSrc>/DesktopModules/HelloSkinObject/Hello.ascx</controlSrc>
<supportsPartialRendering>False</supportsPartialRendering>
</moduleControl>
</component>
<componenttype="Assembly">
<assemblies>
<assembly>
<path>bin</path>
<name>HelloSkinObject.dll</name>
</assembly>
</assemblies>
</component>
<componenttype="File">
<files>
<basePath>DesktopModules\HelloSkinObject</basePath>
<file>
<name>Hello.ascx</name>
</file>
</files>
</component>
</components>
</package>
</packages>
</dotnetnuke>
|
Step 6: add following code in Hello.ascx file.
|
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Hello.ascx.cs" Inherits="HelloWorldSKinObject.Hello" %>
<asp:Label ID="lblHelloMsg" runat="server" CssClass="SubHead"></asp:Label>
|
Step7:- Add following code in Hello.ascx.cs file
|
using System;
using DotNetNuke.UI.Skins;
namespace HelloWorldSKinObject
{
public partial class Hello : SkinObjectBase
{
protected void Page_Load(object sender, EventArgs e)
{
if (this.PortalSettings.UserId != -1)
{
lblHelloMsg.Text = "Hello " + this.PortalSettings.UserInfo.FirstName;
}
else
{
lblHelloMsg.Text = "Please signin";
}
}
}
}
|
Step 8:- Change a skin file at path “\Website\Portals\_default\Skins\” path (in this case “MinimalExtropy\index_full.ascx”)
Register skin object-
|
<%@ Register TagPrefix="dnn" TagName="HELLO" Src="~/DesktopModules/HelloSkinObject/Hello.ascx" %>
|
Add skin object in skin –
|
<dnn:HELLO runat="server" id="dnnHELLO" />
|
Step 9:- Open project properties in Visual Studio and navigate to “Build” tab and set “output path” to “..\..\bin\” so that when ever building the application the dll goes directly to the dnn bin folder.
Step 10:- Go to DNN Admin\skin menu and apply modified skin (in this case “index full” skin).
Conclusion
This is a very simple example but it shows the basic functionality and can be easily extended to create practical skin objects like Google Analytics Script Injector." From the above steps, it is clear how you can quickly develop and add a skin object to your DNN site. You need to register in order to download the example source files.