Written by:Will
1/18/2009 

There is a lot of power to be had in using the new widgets in DotNetNuke 5. However, I will write about that power in another post. For now, I will write about how to use the relocation widget.

What is a Widget in DotNetNuke?

The widget solution in DotNetNuke provides a client-side API to manage and implement alterations and injection of HTML mark-up. Think about things like injecting videos, flash, and images into HTML. Or perhaps fixing or changing existing HTML. Pretty much anything that can be managed using JavaScript or jQuery is up for grabs!

Relocation Widget

What is the Relocation Widget? This widget is simply a client-side solution to move HTML elements from one position to another in the rendered HTML output of the page. For instance, one of the most common things done with the ViewState, is to move it to the bottom of the page to decrease the code-to-content ratio on a web page. (While this is better implemented server-side, this is the example we will run with for this blog entry.)

As with most features of any software product, we will find out that using certain features will fit use cases that were not originally anticipated by those who wrote the code. In this release of the Relocator Widget, its main use case was to provide support to help make websites more SEO and Mobile friendly.

How to Use the Relocation Widget

I found that the Relocation Widget is probably the easiest DNN widget to use, especially for first-timers. Moving forward with the previous example, we are going to assume that this is something you want to do on the Skin level. While, you can implement widgets using the Text/HTML Module, most times it is better to do so in the Skin itself.

To begin, add the following DIV at the bottom of your existing skin. We will use this DIV as a container or placeholder to move the ViewState to.

<div id="divViewState"></div>

Now, we need to add the widget code. Realistically, we can add this particular widget anywhere in the mark-up of the page. We can just add it below the previous code snippet.

<object declare="declare" codebase="RelocationWidget" codetype="dotnetnuke/client" id="SEORelocator">
     <!-- ID of the HTML element to move -->
     <param value="__VIEWSTATE" name="SourceId" />
     <!-- ID of the HTML element to move previous element into -->
     <param value="divSeo" name="TargetId" />
</object>

Now, once the skin is updated to the site, the rendered page will be something like this:

This unfortunately takes a little bit of imagination without being able to see the entire page source. But this example should at least illustrate to you that the specified HTML element will be moved. You would need to repeat this method for every instance of HTML relocation that you would want to perform.

Summary

In all honesty, it really is better in many cases to move the HTML mark-up around before the mark-up is sent to the client. However, there are also many cases where this widget might prove powerful for things that you cannot manage server-side on your own. In this case, you probably do not have the necessary resources or skills to perform this kind of management server-side.

I hope that this little tutorial helps you to have a little more confidence in using the DNN 5 widgets.

Technorati Tags: DNN, DotNetNuke , DNN Blog , How To , Widgets , 5.00.00

Copyright ©2009 Will Strohl

TrackbackPrint

Tags:

Categories:DotNetNuke

Location: BlogsThe Mighty Blog

Your name:
Your email:
	(Optional) Email used only to show Gravatar.
Your website:
Comment:
Security Code Enter the code shown above in the box below
Add Comment   Cancel