Using and Extending  the DotNetNuke Widget Framework Nik Kalyani DotNetNuke Corporation Session Code:  NN.11
Agenda <ul><li>Widgets Overview </li></ul><ul><li>Widget Anatomy </li></ul><ul><li>Building and Deploying a Widget </li></ul>
Widgets Overview Widgets are mini apps that can be added to skins and modules to improve the user experience
Widgets Overview <ul><li>Template included for creating widgets </li></ul><ul><li>Simple Javascript code </li></ul><ul><li...
Widgets Overview <ul><li>Syntax </li></ul><ul><ul><li>HTML <object> element </li></ul></ul><ul><ul><li>Pass parameters usi...
Widget Anatomy <ul><li>Folder Location </li></ul><ul><ul><li>~/Resources/Widgets/DNN </li></ul></ul><ul><ul><li>~/Resource...
Widget Anatomy <ul><ul><li>Type.registerNamespace(&quot;YourCompany.Widgets&quot;); </li></ul></ul><ul><ul><li>YourCompany...
Widget Anatomy <ul><ul><li>YourCompany.Widgets.SampleWidget.prototype = </li></ul></ul><ul><ul><li>{ </li></ul></ul><ul><u...
Widget Anatomy <ul><ul><li>YourCompany.Widgets.SampleWidget.inheritsFrom(DotNetNuke.UI.WebControls.Widgets.BaseWidget); </...
Building and Deploying a Widget <ul><li>Demo </li></ul><ul><ul><li>Building a widget </li></ul></ul><ul><ul><li>Widget pac...
Evaluation form Vul je evaluatieformulier in en maak kans op een van de prachtige prijzen!! Fill out your evaluation form ...
Upcoming SlideShare
Loading in...5
×

Using And Extending The DotNetNuke Widget Framework

2,226

Published on

Slide deck from my talk at SDN/OpenForce in Amsterdam during Fall 2009

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,226
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
22
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Using And Extending The DotNetNuke Widget Framework

  1. 1. Using and Extending the DotNetNuke Widget Framework Nik Kalyani DotNetNuke Corporation Session Code: NN.11
  2. 2. Agenda <ul><li>Widgets Overview </li></ul><ul><li>Widget Anatomy </li></ul><ul><li>Building and Deploying a Widget </li></ul>
  3. 3. Widgets Overview Widgets are mini apps that can be added to skins and modules to improve the user experience
  4. 4. Widgets Overview <ul><li>Template included for creating widgets </li></ul><ul><li>Simple Javascript code </li></ul><ul><li>Uses Microsoft ASP.NET AJAX Library </li></ul><ul><li>Easily extend with jQuery </li></ul><ul><li>Package stand-alone or with skins/modules </li></ul>
  5. 5. Widgets Overview <ul><li>Syntax </li></ul><ul><ul><li>HTML <object> element </li></ul></ul><ul><ul><li>Pass parameters using <param> child element </li></ul></ul>
  6. 6. Widget Anatomy <ul><li>Folder Location </li></ul><ul><ul><li>~/Resources/Widgets/DNN </li></ul></ul><ul><ul><li>~/Resources/Widgets/User/<company name> </li></ul></ul><ul><li>File Naming Convention </li></ul><ul><ul><li><company name>.Widgets.<widget name>.js </li></ul></ul>
  7. 7. Widget Anatomy <ul><ul><li>Type.registerNamespace(&quot;YourCompany.Widgets&quot;); </li></ul></ul><ul><ul><li>YourCompany.Widgets.SampleWidget = function(widget) </li></ul></ul><ul><ul><li>{ </li></ul></ul><ul><ul><li>YourCompany.Widgets.SampleWidget.initializeBase(this, [widget]); </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>Define the widget </li></ul>
  8. 8. Widget Anatomy <ul><ul><li>YourCompany.Widgets.SampleWidget.prototype = </li></ul></ul><ul><ul><li>{ </li></ul></ul><ul><ul><li>render: </li></ul></ul><ul><ul><li>function() </li></ul></ul><ul><ul><li>{ </li></ul></ul><ul><ul><li>var params = this._widget.childNodes; </li></ul></ul><ul><ul><li>if (params != null) </li></ul></ul><ul><ul><li>{ </li></ul></ul><ul><ul><li>// Do something </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>YourCompany.Widgets.SampleWidget.callBaseMethod( </li></ul></ul><ul><ul><li>this, &quot;render&quot;, [div]); </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>Implement render() method </li></ul>
  9. 9. Widget Anatomy <ul><ul><li>YourCompany.Widgets.SampleWidget.inheritsFrom(DotNetNuke.UI.WebControls.Widgets.BaseWidget); </li></ul></ul><ul><ul><li>YourCompany.Widgets.SampleWidget.registerClass(&quot;YourCompany.Widgets.SampleWidget&quot;, DotNetNuke.UI.WebControls.Widgets.BaseWidget); </li></ul></ul><ul><ul><li>DotNetNuke.UI.WebControls.Widgets.renderWidgetType(&quot;YourCompany.Widgets.SampleWidget&quot;); </li></ul></ul><ul><li>Inheritance, registration and rendering </li></ul>
  10. 10. Building and Deploying a Widget <ul><li>Demo </li></ul><ul><ul><li>Building a widget </li></ul></ul><ul><ul><li>Widget packaging </li></ul></ul><ul><ul><li>Widget deployment </li></ul></ul>
  11. 11. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×