Show loading while downloading XAP modules in prism.

Show loading while downloading XAP modules in prism.

Scenario : To show progress bar when modules (xap’s) in prism are downloaded.

Problem : Currently in prism the default ModuleManager class does not expose a progress event that can be tracked to show some progressing of the modules (xap’s) being downloaded.

Solution : Prism’s ModuleManager internally uses instance of XapModuleTypeLoader to load modules (xap’s) asynchronously. Thanks to the community of prism for providing CreateDownloader() as virtual method.

Straight to the point I will jot down the steps to achieve the above mentioned goal.

Step 1 - Create an event and an event argument classes that will be used in custom class below

[sourcecode language="csharp"]

public class ModuleDownloadProgressEvent : CompositePresentationEvent<ModuleDownloadProgressArgs>
{
}

public class ModuleDownloadProgressArgs
{
public ModuleDownloadProgressArgs(int BytesReceived, bool IsComplete) { _BytesReceived = BytesReceived; _IsComplete = IsComplete; }
private int _BytesReceived;
public int BytesReceived { get { return _BytesReceived; } set { _BytesReceived = value; } }
private bool _IsComplete;
public bool IsComplete { get { return _IsComplete; } set { _IsComplete = value; } }
}

[/sourcecode]

Step 2 - Create a class that derives from IFileDownloader.

[sourcecode language="csharp"]

public class CustomFileDownloader : IFileDownloader
{
private readonly WebClient webClient = new WebClient();
private readonly IEventAggregator eventAgg;

public CustomFileDownloader()
{
eventAgg = ServiceLocator.Current.GetInstance<IEventAggregator>();
}

private event EventHandler<DownloadCompletedEventArgs> _downloadCompleted;
public event EventHandler<DownloadCompletedEventArgs> DownloadCompleted
{
add
{
if (this._downloadCompleted == null)
{
this.webClient.OpenReadCompleted += this.WebClient_OpenReadCompleted;
this.webClient.DownloadProgressChanged += this.DownloadProgressChanged;
}

this._downloadCompleted += value;
}

remove
{
this._downloadCompleted -= value;
if (this._downloadCompleted == null)
{
this.webClient.OpenReadCompleted -= this.WebClient_OpenReadCompleted;
this.webClient.DownloadProgressChanged -= this.DownloadProgressChanged;
}
}
}

void DownloadProgressChanged(object sender, DownloadProgressChangedEventArgs e)
{
RaiseDownloadProgressChanged(e.ProgressPercentage, false);
}

private void RaiseDownloadProgressChanged(int val, bool isComplete)
{
eventAgg.GetEvent<ModuleDownloadProgressEvent>().Publish(new ModuleDownloadProgressArgs(val, isComplete));
}

public void DownloadAsync(Uri uri, object userToken)
{
this.webClient.OpenReadAsync(uri, userToken);
}

private void WebClient_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
{
this._downloadCompleted(this, ConvertArgs(e));
RaiseDownloadProgressChanged(0, true);
}

private static DownloadCompletedEventArgs ConvertArgs(OpenReadCompletedEventArgs args)
{
return new DownloadCompletedEventArgs(args.Error == null ? args.Result : null, args.Error, args.Cancelled, args.UserState);
}
}

[/sourcecode]

Step 3 - Create a class that derives from XapModuleTypeLoader and override its virtual method CreateDownloader returning your class object prepared in step 1

[sourcecode language="csharp"]

public class CustomXapModuleTypeLoader : XapModuleTypeLoader
{
protected override IFileDownloader CreateDownloader()
{
return new CustomFileDownloader();
}
}

[/sourcecode]

Step 4 - Create a class that derives from ModuleManager and override its virtual method ModuleTypeLoaders replacing default XapModuleTypeLoader with your class object prepared in step 2.

[sourcecode language="csharp"]

public class CustomModuleManager : ModuleManager
{
public CustomModuleManager(IModuleInitializer moduleInitializer, IModuleCatalog moduleCatalog, ILoggerFacade loggerFacade)
: base(moduleInitializer, moduleCatalog, loggerFacade) { }
private System.Collections.Generic.IEnumerable<IModuleTypeLoader> typeLoaders;
public override System.Collections.Generic.IEnumerable<IModuleTypeLoader> ModuleTypeLoaders
{
get
{
if (this.typeLoaders == null)
{
this.typeLoaders = new List<IModuleTypeLoader>()
{
new CustomXapModuleTypeLoader()
};
}

return this.typeLoaders;
}
set
{
this.typeLoaders = value;
}
}
}

[/sourcecode]

Step 5 - Register your custom ModuleManager class prepared in step 4, in overridden method ConfigureContainer() of your Bootstrapper class.

[sourcecode language="csharp"]

base.RegisterTypeIfMissing(typeof(IModuleManager), typeof(CustomModuleManager), true);

[/sourcecode]

Step 6 – Create a method in Shell that will respond to the ModuleDownloadProgressEvent event when published

[sourcecode language="csharp"]

public void ShowHide(ModuleDownloadProgressArgs e)
{
// Your Dream Goes Here
}

[/sourcecode]

Step 7 – Finally in the Shell subscribe to the ModuleDownloadProgressEvent event prepared in Step 1.

[sourcecode language="csharp"]

eventAggregator.GetEvent<ModuleDownloadProgressEvent>().Subscribe(ShowHide, ThreadOption.UIThread);

[/sourcecode]

That’s it!!!

Enjoy Prism.

Packing and Deploying Custom Templates in Visual Studio.

Packing and Deploying Custom Templates in Visual Studio.

Once you have created your own template (Creating project templates for Visual Studio) its time for its distribution.
To make the template appear into the “New Project” window it is important to place the zip file of the template to correct location. This can be done manually and through .vsi (Visual Studio Installer) file. Also .vsi file will be helpful for distribution of your template to different community or users.

To create the .vsi file for your template follow the below steps
1)Create a file in the project folder with .vscontent extension having the below code

[sourcecode language="html"]

<VSContent xmlns="http://schemas.microsoft.com/developer/vscontent/2005">
<Content>
<FileName>MyFirstWebProjectTemplate.zip</FileName>
<DisplayName>My First Web Project Template</DisplayName>
<Description>A project template created for this example.</Description>
<FileContentType>VSTemplate</FileContentType>
<ContentVersion>1.0</ContentVersion>
<Attributes>
<Attribute name="ProjectType" value="Visual C#"/>
<Attribute name="ProjectSubType" value="CSharp"/>
<Attribute name="TemplateType" value="Project"/>
</Attributes>
</Content>
</VSContent>

[/sourcecode]

File Name: Name of the file that needs to be deployed. Here it is our custom template zip file.

DisplayName: Name that appears in the deployment wizard

Description: Small description regarding the component that is being deployed. It appears as tooltip for the Display Name

FileContentType: Type of the file being deployed. It can be Toolbox Control, Code Snippet, VSTemplate etc.

ContentVersion: Version of the content being deployed. Let be 1.0

ProjectType: Type of the project. It can be Visual Basic, Visaul C#, Visual J# etc

ProjectSubType: Type of subcategory to which the template would be placed. It can be CSharp, JSharp, Visual Basic etc

TemplateType: Type of the template that is being deployed. It can be Project, Item.

2)Select all the files to be included in your template (including the .vscontent file) and compress it to prepare a standard zip file. In above case it will produce MyFirstWebProjectTemplate.zip.

3)Rename the extension of the .zip file to .vsi.

Alternate Approach

1)Select all the files to be included in your template (including the .vstemplate file) and compress it to prepare a standard zip file.

2)Create a file in the project folder with .vscontent extension as shown in the above scenario

3)Select the zip file created in step 1 and .vscontent file created in step 2. Right click and click “Add to archive”. In the Archive name give MyTemplate.vsi and zip it. It will create a new MyTemplate.vsi file.

That’s it distribute the .vsi file.

Note: In order to avoid the “No Signature Found” warning and to display the publisher information into the .vsi package you must sign your .vsi file

[sourcecode language="html"]

<VSTemplate Version="2.0.0" xmlns="http://schemas.microsoft.com/developer/vstemplate/2005" Type="Project">
<TemplateData>
<Name>ASP.NET AJAX Control Project</Name>
<Description>Create new ASP.NET AJAX Control Extenders and Behaviors</Description>
<ProjectType>CSharp</ProjectType>
<SortOrder>1000</SortOrder>
<CreateNewFolder>true</CreateNewFolder>
<DefaultName>AjaxControlExtender</DefaultName>
<ProvideDefaultName>true</ProvideDefaultName>
<LocationField>Enabled</LocationField>
<EnableLocationBrowseButton>true</EnableLocationBrowseButton>
<Icon>__TemplateIcon.ico</Icon>
</TemplateData>
<TemplateContent>
<CustomParameters>
<CustomParameter Name="$baseitemname$" Value="$safeprojectname$"/>
<CustomParameter Name="$rootnamespace$" Value="$safeprojectname$"/>
</CustomParameters>
<Project TargetFileName="AjaxControlExtender.csproj" File="AjaxControlExtender.csproj" ReplaceParameters="true">
<ProjectItem TargetFileName="$safeprojectname$Behavior.js" ReplaceParameters="true">Behavior.js</ProjectItem>
<ProjectItem TargetFileName="$safeprojectname$Extender.cs" ReplaceParameters="true">Extender.cs</ProjectItem>
<ProjectItem TargetFileName="$safeprojectname$Designer.cs" ReplaceParameters="true">Designer.cs</ProjectItem>
<Folder Name="bin" TargetFolderName="bin">
<ProjectItem>AjaxControlToolkit.dll</ProjectItem>
</Folder>
</Project>
</TemplateContent>
</VSTemplate>

<VSTemplate Version="2.0.0" Type="Project" xmlns="http://schemas.microsoft.com/developer/vstemplate/2005">
<TemplateData>
<Name>MyFirstWebProjectTemplate</Name>
<Description>A simple Web template</Description>
<Icon>icon.ico</Icon>
<ProjectType>Web</ProjectType>
<ProjectSubType>CSharp</ProjectSubType>
<DefaultName>WebSite</DefaultName>
</TemplateData>
<TemplateContent>
<Project File="MyFirstWebProjectTemplate.webproj" TargetFileName="MyFirstWebProjectTemplate.webproj">
<ProjectItem>web.config</ProjectItem>
<ProjectItem OpenInEditor="true">Default.aspx</ProjectItem>
<ProjectItem>Default.aspx.cs</ProjectItem>
<Folder Name="App_Code" TargetFolderName="App_Code">
<Folder Name="BAL" TargetFolderName="BAL">
</Folder>
<Folder Name="DAL" TargetFolderName="DAL">
<ProjectItem>DataAccess.cs</ProjectItem>
</Folder>
</Folder>
<Folder Name="App_Data" TargetFolderName="App_Data">
</Folder>
</Project>
</TemplateContent>
</VSTemplate>

[/sourcecode]

Creating project templates for Visual Studio

Creating project templates for Visual Studio

Reusability though heard thousands of times, ranges from a small code snippet to the entire enterprise level framework. This article will demonstrate the word reusable in terms of – Reusing the company framework or code through a fantastic feature of Visual Studio called Templates.

Templates

A group of packaged files that help to accelerate the development process by eliminating the need to start the project from scratch. Templates are divided into two parts

Project Templates : This category appears into “New Project” dialog box when one is starting a fresh new project. It is further divided into Project Templates and Website Templates.

Item Templates : This category appears into “Add Item” dialog box when one wants to add a new item to the project.

Ways to create template: There are two ways in which one can create the desired template manually or by using the export template wizard of Visual Studio.

I will stick to the process of manually creating a Website Template.
Steps to create a new website template.
1)Create a new Web site.

2)Prepare the framework (files to be included in your website template)

3)Create a file with .vstemplate as extension in the same directory of your project.

4)Alter the .vstemplate file to provide template metadata as given below.

[sourcecode language="html"]

<VSTemplate Version="2.0.0" Type="Project" xmlns="http://schemas.microsoft.com/developer/vstemplate/2005">
<TemplateData>
<Name>MyFirstWebProjectTemplate</Name>
<Description>A simple Web template</Description>
<Icon>icon.ico</Icon>
<ProjectType>Web</ProjectType>
<ProjectSubType>CSharp</ProjectSubType>
<DefaultName>WebSite</DefaultName>
</TemplateData>
<TemplateContent>
<Project File="MyFirstWebProjectTemplate.webproj" TargetFileName="MyFirstWebProjectTemplate.webproj">
<ProjectItem>web.config</ProjectItem>
<ProjectItem OpenInEditor="true">Default.aspx</ProjectItem>
<ProjectItem>Default.aspx.cs</ProjectItem>
<Folder Name="App_Code" TargetFolderName="App_Code">
<Folder Name="BAL" TargetFolderName="BAL">
</Folder>
<Folder Name="DAL" TargetFolderName="DAL">
<ProjectItem>DataAccess.cs</ProjectItem>
</Folder>
</Folder>
<Folder Name="App_Data" TargetFolderName="App_Data">
</Folder>
</Project>
</TemplateContent>
</VSTemplate>

[/sourcecode]

The above vstemplate XML file includes three major sections

VSTemplate: Identifies the template as a project or item template and provides the template version number

Template Data: Includes all the metadata that defines the display characteristics related to the Add New Website Screen.

Name: Name of the template that appear under the My Template section

Description: Small description that is depicted in the status bar of the New website screen.

Icon: Name of the Icon file that is shown as the preview icon for the newly created template.

Project Type: Type of the project template. This is one of the main attributes as it decides under which section the template will appear. Specifically mention “Web” for creating web site project template.

Project Sub Type: Type of the language for the template. It can be CSharp, VisualBasic, JSharp etc.

DefaultName: The default name of the website

Template Content: Includes the definition for all the files and folder structure that would be created when the template is imported.

Project File: This is the name of the project file that is used internally by visual studio to refer files while extracting the template. So incase of project template it will be the name of the projet file Eg “MyFirstWebProjectTemplate.csproj”
As website donot produce project files just create a file with .webproj extension Eg MyFirstWebProjectTemplate.webproj

ProjectItem: This attributes includes all the files that need to be extracted.

Folder: Used to organize files into specific folder structure just incase. In the above example template will create App_Code foler, BAL and DAL folder under App_Code folder and place DataAccess.cs file into DAL folder.

5)Now navigate to the project folder. Select all the files to be included in your template (including the .vstemplate file) and compress it to prepare a standard zip file. In above case it will produce MyFirstWebProjectTemplate.zip.

6)Now simply move the zip file to My Documents\Visual Studio 2005\Templates\ProjectTemplates folder.

7)To validate Open Visual Studio and goto File >> New >> Website. The newly created template will appear into My Templates section of the “New Website Screen”. That’s it you have created your own first template.

Conclusion
To save time with scratch projects prepare template with a framework including UI aspects like Basic Layout(Login.aspx,DefaultMaster.aspx, etc), Architectural aspects like Authentication,Authorization,Security,Utility classes etc
and save your time and money.

Templates can be used locally as well as can be distributed to others users. To prepare a .vsi deployment package for your template refer

Packing and Deploying Custom Templates in Visual Studio.

Note: Though the template creation seems to be easy but in reality its not. Above was the simplest type of the template that we have created. Visual Studio has great amount of flexibility to produce different types of templates like, project templates, website templates (the one above), item templates and wizard base templates.

Document generation in C#

Document generation in C#

Why document?
One of the most famous nightmares among the developers is generating the detailed documentation of the code they have already done. But this notion should be changed as one should always detail each and every aspect of the code they have produced. Proper documentation not only helps others to understand the code but also brings down the maintenance cost of the project if properly utilized.

When to document?
I usually prefer to document things but it depends on the following factors Size of Project, Complexity of Code, Client Need etc. One should not consider the Cost of the project as a factor affecting the decision you know why?

What to document?
No matter whatever the piece of code is you can comment it and latter when needed can produce the required document for that particular section. Namespace, Class, Structure, Interface, Enum, Property, Method, Event and all other stuff can be documented. Always follow the practice of commenting your code as and when you finalize with that particular section.

 Solution

C# has an inbuilt feature than one can take the advantage to generate the document automatically. You just need to be aware of the attributes used for placing and formatting the comments. Some of them are mentioned below

[sourcecode language="csharp"]
<c> Use to depict a code into a single line.
E.g.: <c> int i = 0 ; </c>

<code> Use to depict a code snippet into a multiple lines
E.g.: <code>
for (int i = 0; i < 10; i++)
{
//Code
}
</code>
<example>
Use to depict a code example of how to utilize particular type or member.
<example> This sample shows how to call the GetEmployee method.
<code>
class Employee
{
public static int Main()
{
return GetEmployee();
}
}
</code>
</example>

<list>
Use to depict a bulleted, numbered, tabled list.

<param>
Use to depict the parameters of the method, events etc
E.g.: <param name='name'>description</param>

<paramref>
Use to depict the name of the parameter.
E.g.: <paramref name=’name’/>

<remarks>
Use to depict additional information about the type or member.
E.g: <remarks>Additional information goes here</remarks>

<returns>
Use to depict the return value of a method.
E.g: <returns>Returns List<Employee></returns>

<see>
Use to depict links to similar topics from within the text or highlights the text in the page.
E.g: <see href="www.google.com">Google</see>
<see langword="true | false"/>

<seealso>
Use to depict links to similar topics at the very end of the documented page similar to 'See also' section of the MSDN help.
E.g: <seealso href=" www.google.com">Google</seealso>

<summary>
Use to depict a small description of the type or the member.
E.g: <summary>description</summary>

<value>
Use to describe the value of the property.
E.g: <value> description</value>
[/sourcecode]

Taking into consideration that you have beautifully commented each and every piece of your code you can generate the document with just few clicks.

Practice Lesson

Step 1) Create a class library project named Document
Step 2) Add a class named Employee to the project.
Step 3) Copy past the code below

[sourcecode language="csharp"]

using System;
using System.Collections.Generic;
using System.Web;

namespace Document
{

/// <summary>
/// Summary description for Employee
/// </summary>
public class Employee
{
/// <summary>
/// Employee Class default constructor
/// </summary>
public Employee()
{

}

/// <summary>
/// Employee Class constructor
/// <c>Employee objEmployee = new Employee('dhaval',25)</c>
/// </summary>
/// <param name="name">Name of the employee</param>
/// <param name="age">Age of the employee</param>
public Employee(string name, int age)
{

}

}

}

[/sourcecode]

Step 4) Go to project properties >> build section and check XML Document file section under output group as shown below
Step 5) Build the project and go to bin\debug folder. Document.Xml file would have been generated containing all the details required to generate the document
Step 6) Open NDOC and click on add button
Step 7) Provide path of Document.dll in the assembly file name and Document.XML path in XML Doc Filename and click Ok
Step 8 Finally click Build from the ndoc toolbar or select build from documentation menu

To view the output document click View icon from ndoc toolbar or select view from documentation menu.

That’s It. You’re done

Note: Above are the very few sample tags related to the visual aspect of the document generation there are number of tags that can handle various other aspect of the document generation like permission, threading, include, exclude etc.

As the internal architecture of the NDOC is based on XML and XSLT one can also generate the Custom Tags of their own.

To play around more you can take the reference of the below official site of NDOC

http://ndoc.sourceforge.net/usersguide.html

How to load latest image uploaded with the file upload control without hitting refresh button?

How to load latest image uploaded with the file upload control without hitting refresh button?

Problem Scenario:

When we use fixed image url and upload an image file with the same name than the image displayed in the browser remains the same as the old one till we go and refresh the page.

The below depicted code will perform according to the above explained scenario.

[sourcecode language="html"]
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="FileUpload_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Image Test</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" />
<br />
<asp:Image ID="Image1" ImageUrl="~/FileUpload/file1.jpg" runat="server" />
</div>
</form>
</body>
</html>
[/sourcecode]
[sourcecode language="csharp"]
using System;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

public partial class FileUpload_Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}

protected void btnUpload_Click(object sender, EventArgs e)
{
string filePath = string.Concat(Server.MapPath("file1.jpg"));

if (FileUpload1.HasFile)
{
FileUpload1.SaveAs(filePath);
}
}
}
[/sourcecode]

Solution:

Now to approach this kind of situation their are basically two thing that can be done.

1) Rather than just fixing the image url path of image in .aspx page make the path associated to it in the code behind page as well. Like shown in the below sample code.

[sourcecode language="csharp"]

protected void btnUpload_Click(object sender, EventArgs e)
{
string filePath = string.Concat(Server.MapPath("file1.jpg"));

if (FileUpload1.HasFile)
{
FileUpload1.SaveAs(filePath);
}

Image1.ImageUrl = filePath;
}

[/sourcecode]

OR

2) If you are changing the image url from javascript than just append time or any random number as a part of query string to the image url. Appending the time after the image path will make it treat as a separate request in IIS and the image will be perfectly loaded.

[sourcecode language="html"]

<a href="http://localhost/MyArticles/FileUpload/file1.jpg?t=11/7/2009%204:25:23%20PM">http://localhost/MyArticles/FileUpload/file1.jpg?t=11/7/2009%204:25:23%20PM</a>

[/sourcecode]

or

[sourcecode language="html"]

http://localhost/MyArticles/FileUpload/file1.jpg?t=63245

[/sourcecode]