Also see: DNN Silverlight
This tutorial demonstrates how you can show default module content when a visitor does not have Silverlight.
When a website visitor has Silverlight installed they will see this toolbar:
If they do not have Silverlight installed they will see this one:
We will start by installing Silverlight ToolBar 01.00.00 and placing an instance of it on a page in our DotNetNuke website.
Open the DotNetNuke site in Visual Studio. In the Solution Explorer, expand the DesktopModules directory and the SilverlightToolBar directory.
The first task is to create the user interface for the non-Silverlight toolbar. First, you will need to download the following 2 images and place them in the images directory that is located in the SilverlightToolBar directory:
Next, open the View.ascx file and switch to Source view. The screen will look like this:
Place the following code below </asp:Panel>:
<asp:Panel ID="noSilverlight" runat="server" Height="100px" Width="100%">
<br />
<asp:Table ID="Table1" runat="server" BorderStyle="None" CellPadding="4">
<asp:TableRow runat="server">
<asp:TableCell runat="server" Width="10%">
<asp:ImageButton ID="ltbtn" runat="server" ImageUrl="~/DesktopModules/SilverlightToolBar/images/ltbutton.gif"
OnClick="ltbtn_Click" /></asp:TableCell>
<asp:TableCell HorizontalAlign="Center" Width="80%" runat="server">
<asp:DataList ID="DataList1" runat="server" RepeatColumns="5" RepeatDirection="Horizontal"
ShowFooter="False" ShowHeader="False" CellPadding="4" CellSpacing="4" RepeatLayout="Table">
<ItemTemplate>
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl='<%# Bind("Picture") %>'
PostBackUrl='<%# Bind("Url") %>' />
</ItemTemplate>
</asp:DataList></asp:TableCell>
<asp:TableCell runat="server" Width="10%">
<asp:ImageButton ID="rtbtn" runat="server" ImageUrl="~/DesktopModules/SilverlightToolBar/images/rtbutton.gif"
OnClick="rtbtn_Click" /></asp:TableCell>
</asp:TableRow>
</asp:Table>
<br />
<asp:Label ID="lblTotalPages" runat="server" Visible="False"></asp:Label>
<asp:Label ID="lblCurrentPage" runat="server" Visible="False"></asp:Label>
</asp:Panel>
<script type="text/javascript">
<asp:Literal ID="lrlSilverlightDetection" runat="server"></asp:Literal>
</script>
(The code above may be difficult to copy due to the formatting. Copy the code from the download file instead)
When you switch to Design view for the View.ascx file it will now appear like this:
We have simply created a DataList that we will bind to the same data source that is populating the Silverlight toolbar. A left and right button are placed on either side. All three elements are wrapped in a ASP.NET table. An ASP.NET table is used rather than a normal table because it's width is easily adjusted programmatically based on the number of elements that are to be shown. In addition, hidden labels to track the number of pages and the current page are placed on the form.
Now we will switch to the View.ascx.cs file:
Add the following code:
#region ShowNonSilverlightToolbar
private void ShowNonSilverlightToolbar(int intCurrentPageIndex)
{
PagedDataSource pagedData = new PagedDataSource();
pagedData.DataSource = Edit_DAL.GetPictures(ModuleId);
pagedData.AllowPaging = true;
pagedData.PageSize = NumberOfButonsToShow;
pagedData.CurrentPageIndex = intCurrentPageIndex - 1;
this.lblTotalPages.Text = Convert.ToString(pagedData.PageCount);
this.lblCurrentPage.Text = Convert.ToString(pagedData.CurrentPageIndex + 1);
DataList1.DataSource = pagedData;
DataList1.DataBind();
DataList1.RepeatColumns = NumberOfButonsToShow;
//Hide or show navigation
if (pagedData.PageCount == 1)
{
this.ltbtn.Visible = false;
this.rtbtn.Visible = false;
}
else
{
if (intCurrentPageIndex == 1)
{
this.ltbtn.Visible = false;
}
else
{
this.ltbtn.Visible = true;
}
if (intCurrentPageIndex == pagedData.PageCount)
{
this.rtbtn.Visible = false;
}
else
{
this.rtbtn.Visible = true;
}
}
}
protected void ltbtn_Click(object sender, EventArgs e)
{
CurrentPageIndex = Convert.ToInt32(this.lblCurrentPage.Text) - 1;
ShowNonSilverlightToolbar(CurrentPageIndex);
}
protected void rtbtn_Click(object sender, EventArgs e)
{
CurrentPageIndex = Convert.ToInt32(this.lblCurrentPage.Text) + 1;
ShowNonSilverlightToolbar(CurrentPageIndex);
}
#endregion
This code consists of three methods:
ShowNonSilverlightToolbar - This method calls the same "Edit_DAL.GetPictures(ModuleId)" method that the Silverlight toolbar uses to retrieve the pictures and urls's used for this instance of the module. It places the results in a PagedDataSource control and then binds the PagedDataSource to the DataList.
ltbtn_Click and rtbtn_Click - Are methods attached to the navigation buttons.
Now add the following code:
#region ClientsideJavaScriptSilverlightDetection
private string ClientsideJavaScriptSilverlightDetection()
{
StringBuilder sb = new System.Text.StringBuilder();
sb.Append("<script type='text/javascript'> ");
sb.Append(string.Format("function ShowHideSilverlight{0}() ", Convert.ToString(ModuleId)));
sb.Append("{ ");
sb.Append("Silverlight.isInstalled(this); ");
sb.Append("if (Silverlight.available) ");
sb.Append("{ ");
sb.Append(string.Format("showhide('dnn_ctr{0}_View_noSilverlight'); ", Convert.ToString(ModuleId)));
sb.Append("}else{ ");
sb.Append(string.Format("showhide('dnn_ctr{0}_View_SilverlightControlHost'); ", Convert.ToString(ModuleId)));
sb.Append("} ");
sb.Append(" ");
sb.Append("function showhide(id) ");
sb.Append("{ ");
sb.Append("if (document.getElementById) ");
sb.Append("{ ");
sb.Append("obj = document.getElementById(id); ");
sb.Append(" ");
sb.Append("if (obj.style.display == 'none') ");
sb.Append("{ ");
sb.Append("obj.style.display = ''; ");
sb.Append("}else{ ");
sb.Append("obj.style.display = 'none'; ");
sb.Append("} ");
sb.Append("} ");
sb.Append("} ");
sb.Append("} ");
sb.Append("</script> ");
return sb.ToString();
}
#endregion
This code creates a JavaScript method that will detect if Silverlight is enabled and will hide the DIV containing the Silverlight plug-in and show a DIV that will display the non-Silverlight toolbar if Silverlight is not installed. Notice the ModuleId is attached to the script, this prevents JavaScript collisions.
Add the following global variable below "int NumberOfButonsToShow;"
int CurrentPageIndex;
The code should appear like this:
Finally, add the following code below "SilverlightControlHost.Width = (70 * NumberOfButonsToShow);" :
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), string.Format("SilverlightDetection{0}", Convert.ToString(ModuleId)), ClientsideJavaScriptSilverlightDetection());
lrlSilverlightDetection.Text = string.Format("ShowHideSilverlight{0}() ", Convert.ToString(ModuleId));
Table1.Width = (85 * NumberOfButonsToShow);
if (!IsPostBack)
{
// Show Buttons when Silverlight is not installed
ShowNonSilverlightToolbar(1);
}
This code registers the Silverlight detection script and then triggers the script by filling the Literal control with a call to the ShowHideSilverlight method. The code also sets the width of the table containing the non-Silverlight toolbar. Finally it calls the ShowNonSilverlightToolbar method when the page first loads.
The code should appear like this:
Save the page and from the Visual Studio toolbar select Build, then Build Page. The page should build without errors.
When you view the page on a computer that does not have Silverlight installed you will see the non-Silverlight toolbar.
Download the module here: Silverlight ToolBar_02.00.00_Install.zip
Michael Washington is a Website
developer and an ASP.NET, C#, and Visual Basic programmer. He has
extensive knowledge in process improvement, billing systems, and credit
card transaction processing. He is a DotNetNuke Core member and has been
involved with DotNetNuke for nearly 3 years. He is the author of
numerous DotNetNuke modules and tutorials. He is one of the founding
members of the Southern California DotNetNuke Users group (http://socaldug.org).
He has a son, Zachary and resides in Los Angeles with his wife Valerie.
About the Author:
[Back to: The ADefWebserver DotNetNuke HELP WebSite]