You have to begin somewhere. The goal of this tutorial is to walk you through creating a simple Silverlight module in DotNetNuke. While it is possible to create Silverlight modules using Visual Web Developer Express 2008, this tutorial will use Visual Studio 2008 because it offers a level of integration with Expression Blend (a tool that is vital for easily creating XAML) that makes development very easy.
What you need for this tutorial
Setting things up
You will first need to set up a DotNetNuke development environment. You will want to use this environment to develop your DotNetNuke Silverlight modules. You can later create a module package for installation in another DotNetNuke production web site.
Follow the appropriate link to set up your DotNetNuke development environment:
Note: If you are using IIS you also need to add the MIME Type to your web server.
Create The Silverlight Application
First you will open Visual Studio and use it to open your DotNetNuke website. Next, you will create a Silverlight project. You will then open the .XAML file of the Silverlight project in Expression Blend. You will use Expression Blend and Visual Studio to create the Silverlight application. You will then create a DotNetNuke module that will display the Silverlight application in the DotNetNuke web site.
Upgrade your DotNetNuke website to ASP.NET 3.5
Use Visual Studio 2008 to open the DotNetNuke site (File then Open Web Site...):
If the site has not already been upgraded to ASP.NET 3.5 you may get a message like this:
Click Yes. This will add needed changes to the web.config.
The DotNetNuke site is now open. From the toolbar, select File then Add then New Project...
- Select the Silverlight Application template
- Enter DNNSilverlightHelloworld for the Name
- Click the OK button
- Select Link this Silverlight control into an existing Web site
- Check Enable Silverlight debugging
- Click the OK button
The Silverlight project will open up.
Right-click on Page.xaml and select Open in Expression Blend...
The project will open in Expression Blend. Click the Project tab in the upper right-hand corner of the screen to see the file listing.
Double-click on the Button control
The button will appear on the page.
Click the Properties tab to switch to the properties for the button
Change the Name to btnClickHere, the Height (under Layout) to 50, and the Content (under the Miscellaneous section) to Click Here.
The button should look like the image above.
Double-Click on the TextBox control to add it to the page.
Click on the Direct Selection tool and click on the TextBox (that was just added to the page) to select it
In it's Properties, enter HelloWorld for it's Name. Also, enter Hello World! for it's Text.
Drag the HelloWorld TextBox so that it is outside and to the left of the main canvas.
From the menu bar select Window then Active Workspace then Animation Workspace.
Ensure that the Interaction tab is selected and in the Objects and Timeline menu, click the " " button to create a new storyboard.
Name the Storyboard Storyboard1 and click OK.
Ensure the HelloWorld box is selected.
Click the Record Keyframe button.
A key frame will appear for the HelloWorld control.
Drag the yellow time line bar to 0:01.000 and move the HelloWorld box to the center of the main canvas. Click the Record Keyframe button.
In the Properties for the HelloWorld box, select Scale in the Transform section.
Enter 4 for the X and the Y.
The HelloWorld box will appear larger.
Drag the yellow time line bar to 0:02.000. Click the Record Keyframe button.
Drag the yellow time line bar to 0:00.000
Drag the HelloWorld so that it is outside and to the left of the main canvas.
Click the ">" button to preview the animation.
From the toolbar select File then Save All. Close Expression Blend.
Return to Visual Studio. You will see a box asking if you want to reload the project. Click Yes to All.
You will also see a yellow bar asking you to update the designer. Click on the yellow bar to update the design surface.
In the XAML for Page.xaml, find x:Name="btnClickHere". Click immediately after it and press the space bar. An intellesense menu will appear. Double-click on Click.
New Event Handler will appear. Press the Tab button.
btnClickHere_Click will appear.
Right-click on on btnClickHere_Click and select Navigate to Event Handler.
The screen will automatically switch to the Page.xaml.cs page and create a btnClickHere_Click method. Enter "This.Storyboard1.Begin();" in the method.
From the toolbar, select Build then Build DNNSilverlightHelloworld. The project should build without errors.
Inside the DotNetNuke site the DNNSilverlightHelloworld.xap file will appear in the ClientBin directory. This file contains the Silverlight application that was just created. You now need to create a DotNetNuke module to launch the Silverlight application.
Creating the DotNetNuke Module
In Visual Studio, in the DotNetNuke website, right-click on the DesktopModules folder and select New Folder. Name the folder DNNSilverlightHelloworld.
Right-click on the DNNSilverlightHelloworld.xap file in the ClientBin directory and select Copy. Paste a copy of the file in the DNNSilverlightHelloworld folder.
Right-click on the DNNSilverlightHelloworld folder and select Add New Item.
From the Add New Item box, select the Web User Control template, enter View.ascx for the Name, select Visual C# for the Language, and check the box next to Place code in separate file.
When the View.ascx page opens, switch to source view and replace all the code with the following code:
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="View.ascx.cs" Inherits="DotNetNuke.Modules.DNNSilverlightHelloworld.View" %>
<%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls" TagPrefix="asp" %>
Version="2.0" ToolTip="Silverlight Application"
Enabled="true" EnableHtmlAccess="true"
Visible="true" Height="300px" Width="400px" />
Click the plus icon next to the View.ascx file in the Solution Explorer (under the DNNSilverlightHelloworld directory) Double-click on the View.ascx.cs file to open it.
Replace all the code with the following code and save the page:
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using DotNetNuke;
namespace DotNetNuke.Modules.DNNSilverlightHelloworld
{
public partial class View : DotNetNuke.Entities.Modules.PortalModuleBase
{
protected void Page_Load(object sender, EventArgs e)
{
}
}
}
Create The Module Definition
While logged into your DotNetNuke site as "host", in the web browser, from the menu bar select "Host". Then select "Module Definitions".
Click the black arrow that is pointing down to make the fly-out menu to appear. On that menu select "Create Module Definition".
In the Edit Module Definitions menu:
- Enter "DNNSilverlightHelloworld" for MODULE NAME
- Enter "DNNSilverlightHelloworld" for FOLDER TITLE
- Enter "DNNSilverlightHelloworld" for FRIENDLY NAME
- Enter "DNNSilverlightHelloworld" for DESCRIPTION
- Enter "01.00.00" for VERSION
Then click CREATE
Enter "DNNSilverlightHelloworld" for NEW DEFINITION
Then click "Add Definition"
Next, click "Add Control"
In the Edit Module Control menu:
- Enter "DNNSilverlightHelloworld" for TITLE
- Use the drop-down to select "DesktopModules/DNNSilverlightHelloworld/View.ascx" for SOURCE
- Use the drop-down to select "View" for TYPE
Then click UPDATE
Click on the first page of the website and from the MODULE drop-down select "DNNSilverlightHelloworld".
Then click ADD.
The module will now appear.