Sharker Khaleed Mahmud's Blog

ASP.NET, MVC, BLEND, Silverlight, AJAX and JQuery

  • Me

    Sharker Khaleed Mahmud
  • Visit my recent blog silverlightips.wordpress.com

Silverlight Prism Part 1 : Get Started

Posted by Sharker Khaleed Mahmud | shamrat231 on November 15, 2009

Before starting with this tutorial, you should download the latest Prism. Prism 2.1 has been released to support Silverlight 3. You can download Prism 2.1 here

This will be for now two part series.

1. Silverlight Prism Part 1 : Get Started
2. Silverlight Prism Part 2 : Model View View Model (MVVM) Concept

So first of all lets create a simple web project in Silverlight 3. Add a Silverlight usercontrol page named as Shell.xaml. Think of shell as the top level where the view will be shown. Delete the built in mainpage.xaml. Ok now to use prism, you need to connect the project to prism or add reference of the prism dll. To do that goto add reference and add the prism libraries. 

a2pic2 

Open the folder, where u have unpack the exe file. Run the bat file with name [Desktop & Silverlight – Open Composite Application Library.bat]. Compile the project . According to the readme file, the Composite Application Library assemblies for a Silverlight application will be placed in the CAL\Silverlight\ (look in all debug folder)

Put all the dll file in a folder(eg. Prism). There will be total 7 dll files. 

  1. Microsoft.Practices.Composite.dll
  2. Microsoft.Practices.Composite.Presentation.dll
  3. Microsoft.Practices.Composite.UnityExtensions.dll
  4. Microsoft.Practices.ServiceLocation.dll
  5. Microsoft.Practices.Unity.dll
  6. Microsoft.Silverlight.Testing.dll
  7. Microsoft.VisualStudio.QualityTools.UnitTesting.Silverlight.dll

Ok, now before we add a simple class called BootStrapper.cs, lets talk more about the Shell. Shell.xaml is more like your ASP.NET Masterpage. In here, we define the placeholders as regions. We can show a view on the shell by assigning a view to a particular region. You can design your shell page and apply styles as u like. So basically u will have a single shell page where u can apply mutiple designs according to the styles you create to give different outlook.

Ok we will now add code to BootStrapper.cs

 a2pic3  

BootStrapper.cs

    public class BootStrapper : UnityBootstrapper
    {
        protected override DependencyObject CreateShell()
        {
            Shell main = new Shell();
            Application.Current.RootVisual = main;
            return main;
        }

        protected override Microsoft.Practices.Composite.Modularity.IModuleCatalog GetModuleCatalog()
        {
            ModuleCatalog modules = new ModuleCatalog();
            // in here we add modules 
           return modules;
        }
    }

At code level, inherit the UnityBootstrapper from using Microsoft.Practices.Composite.UnityExtensions; In has a abstract class called CreateShell(). In this method we will return the Shell user control we have created . Now we have to connect the Bootstrapper to our application. For that, lets go to app.xaml and remove the line from Application_Startup and add the new line

App.xaml

        private void Application_Startup(object sender, StartupEventArgs e)
        {
            new BootStrapper().Run();
        }

Ok, lets talk about bootstrapper class.  Here we are assign the RootVisual of the SL application and register modules. We have finished with our shell part, so lets create a module. We add now a second project and name it SimplePrismApplication.Search. Same as before, we add the Prism dll to this project. Now create the files listed below

  1. SearchModuleResultView.xaml in Views [folder]
  2. SearchModule.cs
  3. SearchResult.cs
  4. and SearchModuleResultViewModel.cs

The output should be as shown below  

a2pic4 

What do we mean by Module?

Module can be views, collection of related components, such as features, views, or business logic.  GetModuleCatalog() in our BootStrapper.cs we are adding the modules that our application will be using. So lets define a module.

SearchModule.cs

using Microsoft.Practices.Composite.Modularity;
using Microsoft.Practices.Composite.Regions;
using Microsoft.Practices.Unity;

 namespace SimplePrismApplication.Search
{
    public class SearchModule : IModule
    {
        #region IModule Members

        private IRegionManager regionManager;
        IUnityContainer container;

        public SearchModule(IRegionManager regionManager, IUnityContainer container)
        {
            this.regionManager = regionManager;
        }

        public void Initialize()
        {
            this.regionManager.RegisterViewWithRegion(“ResultRegion”, typeof(SearchModuleResultView));
        }

         #endregion
    }
}

Our module class is inheriting the IModule interface. Here we are registering a view in the region manager. We are assigning our SearchModuleResultView view with a particular region name “ResultRegion” in our Shell.xaml. In our Shell.xaml we add a region as shown below.

Shell.xaml

 <UserControl x:Class=”SimplePrismApplication.Shell”
    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation
    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml
    xmlns:d=”http://schemas.microsoft.com/expression/blend/2008
    xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006
    mc:Ignorable=”d”
    xmlns:Desings=”clr-namespace:Microsoft.Practices.Composite.Presentation.Regions;assembly=Microsoft.Practices.Composite.Presentation”
    >
    <Grid x:Name=”LayoutRoot” Background=”Silver”>
        <StackPanel>
            <ItemsControl Desings:RegionManager.RegionName=”ResultRegion” Width=”800″ Height=”600″ ></ItemsControl>
        </StackPanel>
    </Grid>
</UserControl>

Look at the bold part, you have to add the region namespace to define a particular region. We will show our current view to this itemcontrol having the region name “ResultRegion”. So lets add some text in our view and run the project.

SearchModuleResultView.xaml

<UserControl x:Class=”SimplePrismApplication.Search.SearchModuleResultView”
    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation
    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml
    xmlns:d=”http://schemas.microsoft.com/expression/blend/2008
    xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006
    mc:Ignorable=”d”
    d:DesignHeight=”300″ d:DesignWidth=”400″>
    <Grid x:Name=”LayoutRoot” Background=”Beige”>
        <TextBlock Text=”end of part 1, will continue in part 2″ />
    </Grid>
</UserControl>

For the view to show in the given region, first you have to add the reference SimplePrismApplication.Search in your SimplePrismApplication. Then on the bootstrapper.cs add the module in our GetModuleCatalog()

            ModuleCatalog modules = new ModuleCatalog();
            modules.AddModule(typeof(SearchModule)); //using SimplePrismApplication.Search;
            return modules;

Hit F5 and see the output.

a2pic5

Guess I will finish here. Any comments welcome. Next week I will continue with part 2.

Thanks
Sharker Khaleed Mahmud
MCTS, MCPD
DHAKA, BANGLADESH

Advertisements

2 Responses to “Silverlight Prism Part 1 : Get Started”

  1. Brandon said

    Great blog its very helpful and easy to understand. For more ideas or just to add links check out http://www.mofikiworldwide.com/blog.php There are blogs there about website design, development, Search engine optimization, and hosting. Most of these blogs are tutorials that you can repost just be sure to reference the page you get them from if adding them to your blog. Again thank you for this blog.

  2. Hugh said

    Can you please help? In my Silverlight program when I try to add a reference to any of the Prism DLL’s it always says:

    “You can’t add a reference to Microsoft.Practices.Composite.Presentation.dll as it was not built against the Silverlight runtime. Silverlight projects will only work with Silverlight assemblies.”

    Thanks,
    Hugh

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: