So it's time to do an article about how to integrate DotNetNuke 4.4 with ASP.NET AJAX & WPF/e are you ready?
First, make sure you have the WPF/e tools and the WPF/e SDK installed. The Visual Studio integrated tools are alright, but don't matter much if you know what you want to do.. they only help in a very limited fashion at the time being. Hopefully the final release will make VS a better tool by extending some more of the Design and Blend tools into its interface (I know they can do it).
Now, create a new solution using this zipfile. When you open it, make sure that, before you remove the bogus reference to KHZ.Utilities, you add a New Project to the solution. This new project should be a Web Application Project (WAP) using the Web Application Project Template, and setting the Project name to KHZ.SleekVideoPlayer and the path to point to your website/desktopmodules folder. Once you have created this WAP you can begin to add the files to it.
Start by removing the default.aspx and web.config files. You need to get rid of the web.config file completely, becuase it will interfere with compilation later.
Open the project preferences and on the application tab, remove the root namespace entry completely. Then go to the Compile tab and change the Configuration dropdownlist to All Configurations, and then enter "..\..\bin\" into the Build Output Path textbox.
Now create a player.ascx file and change then namespace references in the ascx and the ascx.designer.vb and the ascx.vb files.
Player.ascx:
<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="Player.ascx.vb" Inherits="KHZ.SleekVideoPlayer.Player" %>
Player.ascx.designer.vb:
Namespace
End
KHZ.SleekVideoPlayerPartial Public Class PlayerProtected WithEvents wpfeControlHost As System.Web.UI.HtmlControls.HtmlGenericControlEnd Class Namespace
Player.ascx.vb:
Namespace KHZ.SleekVideoPlayer
Partial Public Class Player
Inherits System.Web.UI.UserControl
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
End Sub
End Class
End Namespace
Now we want to add the code from SleekVideoPlayer example for WPF/e into the ascx file, make sure you include the runat=server tag in the DIV:
|
<div id='wpfeControlHost' style="background:white" runat=server>
<script type='text/javascript'>
new agHost("wpfeControlHost", // hostElementID (HTML element to put WPF/E
// ActiveX control inside of -- usually a <div>)
"wpfeControl", // ID of the WPF/E ActiveX control we create
"425", // Width
"350", // Height
"white", // Background color
null, // SourceElement (name of script tag containing xaml)
"xaml/sleekVideoPlayer.xaml", // Source file
"false", // IsWindowless
"90", // MaxFrameRate
null, // OnError handler (method name -- no quotes)
0, // Minimum major version required
8, // Minimum minor version required
5); // Minimum build required
</script>
</div>
|
Now copy the XAML, ASSETS and JS folders from the SleekVideoPlayer example into your new application folder at /desktopmodules/khz.sleekvideoplayer/ the easiest way to do this is to have your solution explorer window in VS open, then bring the Internet Explorer to the front and select the three folders from your hard disk, then drag them into the project in your solution explorer. VS will add the files to your solution and assign the proper relationships to them.
Now we need to change the ascx file, so that it recognizes the dnn control ID, becuase DNN changes the default control ID's based on moduleid:
Change the AGHOST declaration in your ascx file so it looks like this:
|
new
agHost("<%= Me.wpfeControlHost.ClientID %>", // hostElementID (HTML element to put WPF/E control into)
"wpfeControl1", // ID of the WPF/E ActiveX control we create
"425", // Width
"500", // Height
"black", // Background color
null, // SourceElement (name of script tag containing xaml)
"<%= TemplateSourceDirectory %>/xaml/Grid.xaml", // Source file
"false", // IsWindowless
"30", // MaxFrameRate
null // OnError handler
); |
Notice the agHost("<%= Me.wpfeControlHost.ClientID %>",andtag changes. These allow the objects to find themselves in the ecmascript.
new
"<%= TemplateSourceDirectory %>/xaml/SleekVideoPlayer.xaml"
Now we add a reference to the project for DotNetNuke.dll which you will find by browsing to the bin folder of your application.
Now we need to edit the Player.ascx.vb file Page_Load Event, adding a reference to DotNetNuke PortalModuleBase and for the JS files, so that they are injected into the DNN Skin Base as it's loaded:
|
Namespace
KHZ.SleekVideoPlayer
Partial Public Class Player
Inherits DotNetNuke.Entities.Modules.PortalModuleBase
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
LoadECMAScript()
End Sub
Private Sub LoadECMAScript()
Dim strDomain As String = DotNetNuke.Common.GetPortalDomainName(PortalSettings.PortalAlias.HTTPAlias, Request, True)
Page.ClientScript.RegisterClientScriptInclude("aghostscript", strDomain & "/desktopmodules/KHZ.WpfeGrid/scripts/agHost.js")
Page.ClientScript.RegisterClientScriptInclude("playerscript", strDomain & "/desktopmodules/KHZ.WpfeGrid/scripts/sleekVideoPlayer.js")
End Sub
End Class
End Namespace |
Now we build the project, and add a reference to Module Controls for DotNetNuke using Host > Module Definitions. Create new module, enter in folder name of khz.sleekvideoplayer and make your module definition and module control point to the new ascx file you just made.
When you add the module to a page in DNN, it should show you a video.