DotNetNuke Client-Side Widget: Relocation Widget

I just finished the draft of the skinning chapter for the new DotNeNuke 5 book from Wrox that’s coming out early next year. I go back and forth on which feature is my favorite, but today it is client side widgets. Once I begin training my staff on the changes next week, it’s probably going to be super stylesheets because that is going to make our coding more consistent.

There’s not a lot of information out yet about client-side widgets, so if you haven’t seen Nik Kalyani give a presentation on it yet here’s a quick overview. A client-side widget is a mini application that is run in JavaScript and adds web 2.0-style interactivity and DOM manipulation to DotNetNuke skins. It uses the same HTML object syntax as skinobjects with the codetype set to dotnetnuke/client. If you haven’t read about the new skinobject (token) format, check out my last post here: https://dotnetnukeconsulting.wordpress.com/2008/10/11/new-token-format-for-dnn-5/

The following example adds a client-side widget to a DotNetNuke skin:

<object id=”RelocationWidget” codetype=”dotnetnuke/client” codebase=”RelocationWidget” declare=”declare”>
<param name=”sourceId” value=”dvMainContent” />
<param name=”targetId” value=”ContentPaneHolder” />
</object>
Like the skinobject parameter, client-side widgets use the HTML object syntax to add the functionality to a page. Unlike the server-side Skinobject, this HTML makes it to the client and JavaScript renders the functionaity here. I’ll get more into the “why” and “how” widgets work in future posts, this is more to whet the appetite and demonstrate the utility and purpose of a client-side widget.

The relocation widget is my favorite widget (so far) becaue it is functionality built with SEO in mind and I’m always excited to see new SEO functionality in DNN.

Let’s say you have a DotNetNuke skin with the typical kinds of things on it. Banners, links,  a navigation menu, logos, secondary navigation etc. Tom at SeaBlick will tell you that if you want search engines to know what your most relevant content is, you should put it first. This is where the relocation widget comes in handy.

By using the Relocation Widget, you can use JavaScript to move content when the page is loaded in the browser by the browser. So, your main content section that has your H1’s, H2’s and the content that you’re trying to get indexed can be wrapped in a div that is absolutely first in your markup and then you can inject it into the appropriate layout element for users.

Example HTML:

<div id=”dvMainContent”>

<h1>Main Topic</h1>

<p>exciting information that will be indexed as the main topic for this page</p>

</div>

<div id=”MainLayout”>

<div id=”banners”>

Less important information like banners, links, and all of the HTML for the menu.

<div/>

<div id=”ContentPaneHolder”>

</div>

</div>

By using the Relocation Widget, the div with id dvMainContent will be injected into the div with id ContentPaneHolder with JavaScript on the browser after the page is loaded in the browser.

Happy Nuking,

Ryan Morgan
Arrow Consulting & Design

Arrow Consulting & Design is a consulting firm based in West Palm Beach, Florida specializing in DotNetNuke, ASP.NET, SQL and WPF Development with a portfolio filled with local, national, government and global enterprise clients.

Case Studies: Click Here
Main Corporate Site: www.ArrowDesigns.com
DotNetNuke Community Site: www.ArrowNuke.com
Consulting Inquiries: Click Here
Skin Design/Conversion: Click Here
DotNetNuke Portfolio: Click Here

Advertisements

~ by dotnetnukeconsulting on October 20, 2008.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: