Session Code: NN.11

Using and Extending the DotNetNuke Widget Framework

Nik Kalyani

DotNetNuke Corporation

Agenda

• Widgets Overview

• Widget Anatomy

• Building and Deploying a Widget

Widgets Overview

Widgets are mini apps that can be added to skins and modules to improve the user experience

Widgets Overview

• Template included for creating widgets

• Simple Javascript code

• Uses Microsoft ASP.NET AJAX Library

• Easily extend with jQuery

• Package stand-alone or with skins/modules

Widgets Overview

• Syntax– HTML <object> element– Pass parameters using <param> child element

Widget Anatomy

• Folder Location~/Resources/Widgets/DNN

~/Resources/Widgets/User/<company name>

• File Naming Convention<company name>.Widgets.<widget name>.js

Widget Anatomy

Type.registerNamespace("YourCompany.Widgets");YourCompany.Widgets.SampleWidget = function(widget){ YourCompany.Widgets.SampleWidget.initializeBase(this,

[widget]);}

• Define the widget

Widget Anatomy

YourCompany.Widgets.SampleWidget.prototype ={

render: function() { var params = this._widget.childNodes; if (params != null) {

// Do something}

YourCompany.Widgets.SampleWidget.callBaseMethod(this, "render", [div]);

}}

• Implement render() method

Widget Anatomy

YourCompany.Widgets.SampleWidget.inheritsFrom(DotNetNuke.UI.WebControls.Widgets.BaseWidget);

YourCompany.Widgets.SampleWidget.registerClass("YourCompany.Widgets.SampleWidget", DotNetNuke.UI.WebControls.Widgets.BaseWidget);

DotNetNuke.UI.WebControls.Widgets.renderWidgetType("YourCompany.Widgets.SampleWidget");

• Inheritance, registration and rendering

Building and Deploying a Widget

• Demo

• Building a widget

• Widget packaging

• Widget deployment

Evaluation form

Vul je evaluatieformulier in en maak kans op een van de prachtige prijzen!!

Fill out your evaluation form and win one of the great prizes!!

Session Code: NN.11