Written by:
7/7/2010 

I was asked today how to use the Text skin object in DotNetNuke.  Instead of writing a long tutorial or e-mail about it, I tried looking for an existing blog or article describing this.  I would’ve been happy to recommend such a resource, but I was unable to find one despite several web searches.  This leads me to the post you’re reading.

FYI – If you have such an article, feel free to let us know in the comments below, but also know that the site where your article is needs better SEO.  ;)

What is a Skin Object?

First of all, a skin object is an ASP.Net user control that is used in DNN skins to provide a limited feature.  For example, the search box, menu, login link, copyright statement, and more, are all skin objects.  They allow a skin designer to include dynamic content without having to know how to build the content itself, or knowing any programming.

Other than the previous description, this post will assume that you know how to create and package your own skin.

Text Skin Object

The Text skin object itself is a very useful feature in skinning, as it allows you to include localized text, while not having to create a copy of the skin for each language, or using any other number of workarounds.

For example, if you have static text next to your login skin object that says, “Welcome, “ then you might want to have alternatives for another language, if you plan to support it.

I am going to use that example for the rest of this post.

The Code

There is minimal code needed to implement the Text skin object.  If you’re using an HTML skin, then you would simply need to do the following:

<object id="dnnTEXT-Welcome" codetype="dotnetnuke/server" codebase="TEXT">

    <param name="Text" value="Welcome, " />

    <param name="CssClass" value="NormalBold" />

    <param name="ResourceKey" value="Welcome.Text" />

    <param name="ReplaceTokens" value="False" />

</object>

If you are using a ASCX skin, then you would need two updates.  First, put this line of code into the top section of the source:

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

Next, put this code into the appropriate spot of the source in the skin:

<dnn:TEXT runat="server" id="dnnTEXT-Welcome" Text="Welcome, " 

CssClass="NormalBold" ResourceKey="Welcome.Text" ReplaceTokens="False" />

Resource Files

Next, you need to make sure your skin has resource files.  In your skin package, you should have a folder named App_LocalResources.  This folder will contain the necessary files to tell your skin the appropriate text to use for the skin object when the specific language is asked for during page request life cycle.

If your skin file is named index.ascx or index.html, then your default resource file for English would be named index.ascx.resx.  If your additional supported language is French, your filename might be index.fr-FR.ascx.resx.

The English file code would be something like this:

<?xml version="1.0" encoding="utf-8"?>

<root>

  <data name="Welcome.Text">

    <value>Welcome, </value>

  </data>

</root>

The respective code for the French language file might look like this:

<?xml version="1.0" encoding="utf-8"?>

<root>

  <data name="Welcome.Text">

    <value>Accueil, </value>

  </data>

</root>

Text Skin Object Properties Explained

There are a few properties that you’ve seen in the previous examples that you might be wondering about.  Here is an explanation of those properties:

Runat – (required, ASCX only) The value must be ‘server’
Id – (required) This is a unique name for the tag, much like in standard HTML
Text – (optional) This value will be used as the default, should an appropriate resources file for the current language not be found
CssClass – (optional) This value is the name of a CSS class that will be available to the rendered HTML page to stylize the text in the web browser
ResourceKey – (required) This value references the id (name) of the text to retrieve from the resources file
ReplaceTokens – (optional) This true/false value will tell DNN to look for system tokens and replace them with the appropriate text

That’s it.  Everything should work!

Trackback Print

Tags:

Categories: DotNetNuke

Location: Blogs The Mighty Blog

Your name:
Your email:
	(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Add Comment   Cancel