HBD.Mef.Mvc Enhancement For WebApi

Like the previous post, I have introduced a Workspace for Web Mvc and along with the post, AzureNotes Module was provided as an example.

Now in this post, I would like to update you the new version 1.0.5 of HBD.Mef.Mvc. From this version, it will support the WebApi technology that allows developing a similar Workspace for Web API.

The HBD.Api.Shell

Similarly to HBD.Mvc.Shell, the HBD.Api.Shell is the Workspace allowing to develop a WebApi module in the different project and deploy to the Workspace lately.

Develop a WebApi module is simpler than develop a module for Wb Mvc because WebApi doesn’t have any resources (views, CSS files, and JavaScript files) other than controllers. Hence, deployment a module into the Shell is just copying the binaries and config files only.

To simplify the life, I have provided a general routing for all Modules including the Workspace as below.

public static class WebApiConfig 
{ 
    private const string ShellName = "Shell"; 

    public static void Register(HttpConfiguration config) 
    { 
         // Web API configuration and services 
         // Web API routes 
         config.MapHttpAttributeRoutes(); 

         config.Routes.MapHttpRoute(
             "DefaultApi",
             "api/{area}/{controller}/{id}", 
             new {area = ShellName, controller = "About", id = RouteParameter.Optional} );
         }
}

public static class WebApiConfig

{

private const string ShellName = "Shell";

public static void Register(HttpConfiguration config)

{

// Web API configuration and services

// Web API routes

config.MapHttpAttributeRoutes();

config.Routes.MapHttpRoute(

"DefaultApi",

"api/{area}/{controller}/{id}",

new {area = ShellName, controller = "About", id = RouteParameter.Optional} );

}

This route is applying for all modules and all controllers. Hence, the pathway to access to a controller is api/{area}/{controller}{id} which {area} is Module’s name, {controller} is the controller name and {id} is optional.

The module registration also simplified instead of providing the Module Name and custom routing. Promptly with API module requires the name only. Below is sample code to register an API module.

public class AzureNoteApiRegister : MefApiRegistration 
{ 
    public override string AreaName => "AzureNote"; 
}

public class AzureNoteApiRegister : MefApiRegistration

{

public override string AreaName => "AzureNote";

}

The HBD.Mef.Mvc will base on the registered named and select the appropriate controller for the request. If there is no controller found for an appropriate request the HttpResponseException with 404 status code will be thrown.

Please note that this registration is for Api modules only. There is nothing changed on the Mvc module registration that had been introduced on the previous post.

The AzureNoteApi

I would like to show you a similar module for HBD.Api.Shell called AzureNoteApi; this module is just exposing all actions of AzureNote in the previous post as WebApi. Below is the details information the Apis. You can use Postman to try out with my live demo.

Live Demo

The HBD.Api.Shell is also published on to Azure you might have a try by using Postman with the following API.

HBD.Api.Shell API

public class AboutController : ApiController 
{
    /// Get http://hbdapishell.azurewebsites.net/api/Shell/About 
    [HttpGet] public AboutInfo Get(); 
}

public class AboutController : ApiController

{

/// Get http://hbdapishell.azurewebsites.net/api/Shell/About

[HttpGet] public AboutInfo Get();

}

AzureNote API

public class AboutController : ApiController 
{ 
    /// Get http://hbdapishell.azurewebsites.net/api/AzureNote/About 
    [HttpGet] 
    public string Get(); 
}

public class NotesController : ApiController 
{ 
    /// Get http://hbdapishell.azurewebsites.net/api/AzureNote/Notes 
    [HttpGet] 
    public Task<IList<Note>> Get(); 

    /// Get http://hbdapishell.azurewebsites.net/api/AzureNote/Notes/084cfe33-f487-4ae9-8b28-c2e2566e1e48 
    [HttpGet] 
    public async Task<Note> Get(string id);

    /// Post http://hbdapishell.azurewebsites.net/api/AzureNote/Notes 
    /// Create a new Note which body is Json of Note object. 
    [HttpPost]
    public Task<IHttpActionResult> Post([FromBody] Note note);
   
    /// Put http://hbdapishell.azurewebsites.net/api/AzureNote/Notes/084cfe33-f487-4ae9-8b28-c2e2566e1e48 
    /// Update an existing Note which body is Json of Note object. 
    [HttpPut] 
    public Task<IHttpActionResult> Put(string id, [FromBody] Note note); 

    /// Delete http://hbdapishell.azurewebsites.net/api/AzureNote/Notes/084cfe33-f487-4ae9-8b28-c2e2566e1e48 
    [HttpDelete] 
    public async Task<IHttpActionResult> Delete(string id); 
}

public class AboutController : ApiController

{

/// Get http://hbdapishell.azurewebsites.net/api/AzureNote/About

[HttpGet]

public string Get();

}

public class NotesController : ApiController

{

/// Get http://hbdapishell.azurewebsites.net/api/AzureNote/Notes

[HttpGet]

public Task<IList<Note>> Get();

/// Get http://hbdapishell.azurewebsites.net/api/AzureNote/Notes/084cfe33-f487-4ae9-8b28-c2e2566e1e48

[HttpGet]

public async Task<Note> Get(string id);

/// Post http://hbdapishell.azurewebsites.net/api/AzureNote/Notes

/// Create a new Note which body is Json of Note object.

[HttpPost]

public Task<IHttpActionResult> Post([FromBody] Note note);

/// Put http://hbdapishell.azurewebsites.net/api/AzureNote/Notes/084cfe33-f487-4ae9-8b28-c2e2566e1e48

/// Update an existing Note which body is Json of Note object.

[HttpPut]

public Task<IHttpActionResult> Put(string id, [FromBody] Note note);

/// Delete http://hbdapishell.azurewebsites.net/api/AzureNote/Notes/084cfe33-f487-4ae9-8b28-c2e2566e1e48

[HttpDelete]

public async Task<IHttpActionResult> Delete(string id);

}

Source Code

The latest source codes had been uploaded to Github you can download here.

Why Workspace? Why Mef? What HBD?

As recently, I’d shared a few libraries that allow developing a Workspace, and many people asked me, What is Workspace and Why should We care about it?

So, I come up with this post to share a few advantages of the Workspace. I’m not talking about disadvantage here because every Framework has the pros and cons itself. However, We choice it because it was suitable for our company, our departments and our teams or in other words is our customers choice it.

The Advantages Of the Workspace

When developing a new application, we need to build the framework, define the project’s structure, the theme and layout in the IDE and beside of that we need to implement the services that will be used in the application as authentication service, workflow service, input, and output services. What happen if there are so many applications are developing on the different teams in your department, and eventually, each team come up with an application that has difference theme, layout, and components. Just consider Workspace is a Framework and it will help to manage the layout, theme, services consistently between the development teams. It also advises removing the duplication efforts when two or three teams are implementing the similar components.
The other case. In your department, there are a hundred websites are operating and now your company just released a new logo and requested to replace the logo on all application. So, how many teams need to involve and how long it take? As you know re-branding is not only a logo but also the theme, color table, and fonts of the application are getting changed. However, if you have a Workspace you just need to enhance and re-deploy it again without impact to the modules.
Let’s see, If your department already had the Workspaces. So when any team wants to build a new application they can use that Workspace as a framework and start to develop their modules instead of taking time for solution structure, framework defination, theme, and layout creation for the application.

The other Advantages already shared on the previous post. I would like to bring them here so that We will have a general view on it.

Let’s imagine, if you have many development teams and tring hard to make the teams work independently and parallely. However, if three or four teams are working a the significant changes of a complex application and that application does not support modularization. So when any team needs to deploy the changed to the Stagings or Production environments, they need to inform all the other teams to ensure there is no conflict between the teams. After deployed, the other teams need to merge the changes into their source code branches. Managing this situation is a nightmare for the project manager.
The other scenario, if the application doesn’t support modularization, so any change even the small one you need to conduct the System Integration Test (SIT) and User Acceptant Test (UAT) for the whole system because of the impact and the efforts will charge back to the business. You know, the business users may surprise why the simple change is costly?
Micro-Services adoption: as you know, Micro-service is new technology that structures an application as a collection of loosely coupled services, which implement business capabilities. The microservice architecture enables the continuous delivery/deployment of large, complex applications. It also enables an organization to evolve its technology stack.

Why’s Mef

I’ve worked on many Dependency Injections as Ninject, AutoFax, Unity, QuickInject and StructureMap.

The functionality of them is the same because they have been implemented based on Ioc, Dependency Injection concepts. Similarly, The Mef had been released sine the .Net Framework 4.0

Only one thing different between the libraries is the way to import the type mapping and export the objects from the DI container.

If you ask me Why I like Mef? The answer is because of Love. The crazy love without reason. I think the accepted answer is because She is Microsoft’s daughter.

Hope the answer satisfies you.

What is HBD?

HBD (Hoang Bao Duy) is just a lazy, foolish developer, and all his projects were supposed for personal used only.

All HBD projects had been developed by himself. Obviously, There are a lot of silly code in his projects. If you found it, please help to point it out, that is the way you help him grow.

He is not recommending to use his library on your company projects because the enterprise project framework should be verified carefully by the professional development and testing teams.

Saying that doesn’t mean the libaries were came up with poorly quality. Just want to share more information about HBD libraries, all had been tested carefully before publishing, beside that the vulnerability scanning, code quality scaning are applied by using Sonarqube.com, Whitesource-Bolt. The unit tests, code UI tests also a part of his projects in order to ensure all functionality of the libraries are working as expected. Furthermore the author had trying his best to improve the libraries, add new features and hotfix the defects promptly.

However, if you want to implement something but don’t know how to start or you want to have some referent code then the HBD open source projects are for you.

Source Code

All HBD projects had been published in here.

The Mef for MVC and Azure DocumentDb Demonstration

As I’d already shared the Mef libraries for WPF, WinForms and Console Application. So In this post, I would like to share one more Mef library for .Net MVC.

As you may know, The MVC is supporting Areas that allow developing a set of Views, Controllers, and Resources (Images, CSS and Javascript) inside Areas folder. However, the areas are still a part of MVC application, and the resources need to be imported into the _Layout view manually and deploy along with the application. Beside of that, if any changes in the areas may impact to the whole application and need to be tested carefully before going live.

I. HBD.Mef.Mvc Introduction

PM> Install-Package HBD.Mef.Mvc

The Definition.

Workspace: this is an MVC website (a Shell) considering as Module container that allows deploying and run multi modules separately.
Module: this is a loosely couple MVC area that is implementing independently with Workspace and able to deploy into the Workspace lately.

So, get used of Area in MVC, I would like to introduce my HBD.Mef.Mvc library, it had been implemented based on the Mef technology allows you to build and manage the MVC areas as a module not only in a separate folder but also in different projects.

Before going to details of the library implementation, I would like to discuss a few questions below.

Why do we need the Modularization application?

Let’s imagine, if you have many development teams and try to make the teams are working independently and separately as much as possible. However, if three or four teams are working a the significant changes of a complex application and that application does not support modularization. So when any team needs to deploy the changed to the Stagings or Production environments, they need to inform all the other teams to ensure there is no conflict between the teams. After deployed, the other teams need to merge the changes into their source code branches. Managing this situation is a nightmare for the project manager.
The other scenario, if the application doesn’t support modularization, so any change even the small one you need to conduct the System Integration Test (SIT) and User Acceptant Test (UAT) for the whole system because of the impact and the efforts will charge back to the business. You know, The business users may surprise why the simple change is costly?
Micro-Services adoption: as you know, Micro-service is new technology that structures an application as a collection of loosely coupled services, which implement business capabilities. The microservice architecture enables the continuous delivery/deployment of large, complex applications. It also enables an organization to evolve its technology stack.

So the advantage of the Modularization application:

Allow the teams are working on the modules independently, parallelly.
Speed up and enable continuous development, delivery process: In term of the Agile development process. Normally, the sprint time is two weeks, and the recommendation to the development team is releasing a small workable feature of the application and demo to the Business users on the Sprint demonstration meeting.
Help to scale down the impact of the changes and increase the scalability, flexibility, and stability of the application.
Developing and maintain the automation tests or UI tests for a module is much easier for the whole complex application.

What is Mvc Module?

As you know, develop a Module is not just a Views and Controllers but also the settings, configuration, resources, Business and Data logics also. On the next sections, I will show you how to build a Workspace and create a module for that Workspace separately by using HBD.Mef.Mvc.

II HBD.Mef.Mvc Features

1. Navigations

Along with a Module is a set of navigation that We need to add into the top menu of the Workspace to allow users to navigate and using your modules functions. Let’s see, if developing a module and the navigation are adding directly to the _Layout view of the Workspace, and overwriting the _Layout file of the Workspace in every deployment. In this case, the dependence happens again if there are more than one development teams are working the same Workspace and on each team, they also maintain a different version of _Layout view on their modules.

INavigationService

So in this library is provided an INavigationService allows registering the navigations into the Main Menu of Workspace dynamically.

Currently, the Main menu is supported two level only. You can add a navigation link directly in the main menu, or add a menu and navigation links are children of that menu.

IFooterNavigationService

Similarly, the IFooterNavigationService allows registering the links into Footer portion of the Workspace dynamically.

Navigation and Authorization

In the MVC some controller actions are required a particular Roles for the execution. So if the current user doesn’t have the necessary Roles, she is not able to execute that actions. In this case, the Workspace will hide all the navigation related to that actions automatically. If there are no visible children of a menu, the Workspace will hide the parent menu as well. It will help to save the main menu space for the other modules.

2. Resource Bundle Handling.

Working with MVC, you will know that the framework provides a feature called Bundle to allows to import the CSS and javascript files into the views.

Similar to navigation. Including all resources into the _Layout view of the Workspace is not recommended and it may conflict with the resources of the other Areas.

To resolve this issue. I have implemented a helper class in the library allows to register the module resources into the bundles and manage to render that bundles when accessing the module views. It means the Workspace will present the resources of the accessing module into the _Layout page at runtime. This feature will ensure that no CSS or java scripts conflicts between the Modules.

3. Controllers scanning.

You may be aware that, if we want to export a class into Mef container, we need to mark the class with Export attribute. What happens if you forgot to mark this attribute to the controllers? No worry this case had been covered in this library. It will scan all controllers in your binaries and export into Mef container automatically.

4. Configuration management.

As you know, running a .Net website the AppSettings and ConnectionStrings will be loaded into ConfigurationManager class of System.Configuration.

Definitely, on each Module, it will have a separate set of App Settings and Connection strings. Instead of adding the configuration into Workspace config file. You can keep it in a Wed.config and place it in the top level of your Module. The library will load and merge into the ConfigurationManager automatically.

Currently. Only AppSettings and ConnectionString sections are supporting. As the configuration will merge into Workspace configuration, so I would recommend using the Module Name as the prefix of the configuration keys.

The sample code to show you how to use all features above will be provided on the Module development below.

III. Develop a new Workspace.

The idea to implement an MVC Workspace as a core foundation application, that allows to add-in the modules and services independently.

I have developed a Workspace named HBD.Mvc.Shell using HBD.Mef.Mvc and published to Github, if you want to develop a new Workspace by yourself you can reference my source code in here.

However, I would like to highlight a few things as below.

1. Bootstrapper class in the App_Start folder.

After installed HBD.Mef.Mvc from Nuget, a new Bootstrapper class, will be added to App_Start folder automatically.

Only one thing you need to do is overwrite the RegisterMainNavigation method and add the navigation of Workspace in. Because the Menu bar, Footer bar will be rendering from INavigationService and IFooterNavigationService instead of maintaining the menus manually.

The rest of configuration, modules loading, resources management will be done automatically by Bootstrapper itself. However, all methods of Bootstrapper are in virtually so in case you want to customize the logic you can overwrite them easily.

protected override void RegisterMainNavigation(
                              INavigationService maiNavigationService)
{
    base.RegisterMainNavigation(maiNavigationService);

    maiNavigationService.AddNavigation(a => a.WithTitle("Home")
                .WithIcon(Glyphicon.glyphicon_home)
                .DisplayAt(0)
                .For<HomeController>(c => nameof(c.Index)));

    maiNavigationService.Menu("Setting")
                .AlignAtRight()
                .WithIcon(Glyphicon.glyphicon_cog)
                .DisplayIconOnly()
                .Items
                .AddNavigation(a => a.WithTitle("About")
                    .WithIcon(Glyphicon.glyphicon_info_sign)
                    .For<HomeController>(c => nameof(c.About)))
                .AddNavigation(a => a.WithTitle("Contact")
                    .WithIcon(Glyphicon.glyphicon_info_sign)
                    .For<HomeController>(c => nameof(c.Contact)))
                .AddSeperator()
                .AddViewInfo(i => i.WithIcon(Glyphicon.glyphicon_user)
                .SetGetter(v =>
                {
                    if (v.User.Identity.IsAuthenticated)
                        return v.User.Identity.Name;
                    return "Guess";
                }));
}

protected override void RegisterMainNavigation(

INavigationService maiNavigationService)

{

base.RegisterMainNavigation(maiNavigationService);

maiNavigationService.AddNavigation(a => a.WithTitle("Home")

.WithIcon(Glyphicon.glyphicon_home)

.DisplayAt(0)

.For<HomeController>(c => nameof(c.Index)));

maiNavigationService.Menu("Setting")

.AlignAtRight()

.WithIcon(Glyphicon.glyphicon_cog)

.DisplayIconOnly()

.Items

.AddNavigation(a => a.WithTitle("About")

.WithIcon(Glyphicon.glyphicon_info_sign)

.For<HomeController>(c => nameof(c.About)))

.AddNavigation(a => a.WithTitle("Contact")

.WithIcon(Glyphicon.glyphicon_info_sign)

.For<HomeController>(c => nameof(c.Contact)))

.AddSeperator()

.AddViewInfo(i => i.WithIcon(Glyphicon.glyphicon_user)

.SetGetter(v =>

{

if (v.User.Identity.IsAuthenticated)

return v.User.Identity.Name;

return "Guess";

}));

}

Please note that the DisplayAt and AlignAtRight only supported int the root menu level for both The main menu and Footer navigation.

The FontAwesome and Glyphicon icons also supported on both levels of menu. If you want to display an image on the menus instead, you can replace the Glyphicon with a virtual path of the image location. When rendering the Workspace will scan the image from both Area and global Workspace folders and display the image properly.

 navigationService.Menu("View Data")
            .Items
            .AddSeperator()
            .AddNavigation(a => a.WithTitle($"View {AreaName}")
                .WithIcon("Images/customers.png")
                .For<ViewController>(c => nameof(c.Index)))
            .AddNavigation(
                a => a.WithTitle($"View {AreaName} Details.")
                .For<ViewController>(c => nameof(c.Details)));

navigationService.Menu("View Data")

.Items

.AddSeperator()

.AddNavigation(a => a.WithTitle($"View {AreaName}")

.WithIcon("Images/customers.png")

.For<ViewController>(c => nameof(c.Index)))

.AddNavigation(

a => a.WithTitle($"View {AreaName} Details.")

.For<ViewController>(c => nameof(c.Details)));

2. Main menu and Footer partial views.

In HBD.Mvc.Shell Workspace, I had moved the main menu and footer of _Layout view to the partial views. So, in future if any changes on the menu rendering we just need to re-deploy the small part view files instead of a whole _Layout file. This will help to minimize the impact of the changes to the Workspace.

3. Navigation Authorization.

As mentioned above. The navigations are supporting the Authorization, and I would like to move to a separate section to show you how the navigation can pick up the Roles from a controller, or you can specify the Roles manually.

Auto Pickup the Roles from Authorize attribute.

The sample code to add a navigation for a controller action

 navigationService.Menu("Import Data")
      .AddNavigation(a => a.WithTitle($"Import Account From File")
           .For<ImportController>(c => nameof(c.ImportFromFile)))

navigationService.Menu("Import Data")

.AddNavigation(a => a.WithTitle($"Import Account From File")

.For<ImportController>(c => nameof(c.ImportFromFile)))

With above code, we will add a navigation titled Import Account From File for the ImportFromFile action of ImportController and below is controller code.

[Export]
[PartCreationPolicy(CreationPolicy.NonShared)]
[Authorize(Roles = "Edit")]
public class ImportController : Controller
{
    [Authorize(Roles = "Import")]
    public ActionResult ImportFromFile()
    {
        return View();
    }
}

[Export]

[PartCreationPolicy(CreationPolicy.NonShared)]

[Authorize(Roles = "Edit")]

public class ImportController : Controller

{

[Authorize(Roles = "Import")]

public ActionResult ImportFromFile()

{

return View();

}

The For extension method will check the Authorize attribute of ImportFromFile action to whether any Authorize with Roles had been specified and pick up the Roles for the navigation automatically. If there is no Authorize attribute had been found it will check at the Controller level for the same.

Note that this automation only happens when there is no Roles had been provided. It means if you already provided the Roles for navigation the auto role pick up won’t be executed.

Specify the Roles manually.

Below code is a sample for the manual Role specification:

navigationService.Menu("Export Data")
      .AddNavigation(a => a.WithTitle($"Export {AreaName} To Excel")
         .WithAuthorize("Edit")
         .For<ExportController>(c => nameof(c.ExportToExcel)))

navigationService.Menu("Export Data")

.AddNavigation(a => a.WithTitle($"Export {AreaName} To Excel")

.WithAuthorize("Edit")

.For<ExportController>(c => nameof(c.ExportToExcel)))

The WithAuthorize is an extension method that allows you to determine the Roles for navigation. If calling WithAuthorize without any parameter provided, it means the navigation just require the current user is authorized.

IV. Quick start Module development.

To prove my library is working. I have implemented a simple module named Azure Notes. This module is a personal notebook and using Azure DocumentDb to store the note items.

Before starting with the Module implementation, we need to create the Azure DocumentDb first. There is two option for the developers.

1. Setup DocumentDb on Azure Portal

If you already had the Azure Subscription, you can log in to the portal and create a DocumentDb account and then create a collection with the following information.

Database name: AzureNotes
Collection Id: AzureNotes
Partition Key: AzureNotes
Storage Capacity: 10GB.
Throughput Capacity: 400 RU/s

If you don’t have Azure Subscription, you can install Azure DocumentDb Emulator here, and the create a similar collection as above.

2. Module Implementation

Create new Module

Create new Mvc Web application and install the latest version of HBD.Mef.Mvc from nuget. After installed you can delete all the redundant files and just keep the below folders and files.

Content folder
Controllers folder
Views folder
Scripts folder
all configuration files.

And then add a new class named <YourModuleName>AreaRegistration and then inherited from MefAreaRegistration in HBD.Mef.Mvc this class will help to register your module as an Area in the Workspace application.

Your module should look similar as below.

Register Module Routing

public override string AreaName => "AzureNote";
public override string PrimaryRouteName => $"{AreaName}_default";

public override void RegisterArea(AreaRegistrationContext context)
{
      context.Routes.MapRoute(
             PrimaryRouteName,
             $"{AreaName}/{{controller}}/{{action}}/{{id}}",
             new {controller = "Home", action = "Index", id = UrlParameter.Optional},
             new[] {$"{GetType().Namespace}.Controllers"}
       ).DataTokens.Add("area", AreaName);
}

public override string AreaName => "AzureNote";

public override string PrimaryRouteName => $"{AreaName}_default";

public override void RegisterArea(AreaRegistrationContext context)

{

context.Routes.MapRoute(

PrimaryRouteName,

$"{AreaName}/{{controller}}/{{action}}/{{id}}",

new {controller = "Home", action = "Index", id = UrlParameter.Optional},

new[] {$"{GetType().Namespace}.Controllers"}

).DataTokens.Add("area", AreaName);

}

Register Main Menu Navigation

public override void RegisterNavigation(INavigationService navigationService)
{
     navigationService.AddNavigation(a => a.WithTitle("Azure Note")
         .WithIcon(FontAwesome.fa_cloud)
         .For<HomeController>(c => nameof(c.Index)));
}

public override void RegisterNavigation(INavigationService navigationService)

{

navigationService.AddNavigation(a => a.WithTitle("Azure Note")

.WithIcon(FontAwesome.fa_cloud)

.For<HomeController>(c => nameof(c.Index)));

}

Register Footer Navigation

public override void RegisterFooterNavigation(IFooterNavigationService footerNavigationService)
{
     footerNavigationService.AddLink(l => l.WithTitle("Azure Source Code")
                .WithIcon("https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png")
                .For("https://github.com/baoduy"))
                .AddLink(a => a.For("http://drunkcoding.net"));
}

public override void RegisterFooterNavigation(IFooterNavigationService footerNavigationService)

{

footerNavigationService.AddLink(l => l.WithTitle("Azure Source Code")

.WithIcon("https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png")

.For("https://github.com/baoduy"))

.AddLink(a => a.For("http://drunkcoding.net"));

}

Register Module Bundles

public override void RegisterBundleResources(BundleCollection bundles)
{
      bundles.AddAreaStyleBundle(AreaName)
           .Include("~/Content/azurenote.css",
                    "~/Content/sidebar.css");

      bundles.AddAreaScriptBundle(AreaName)
            .Include("~/Scripts/azurenote.js");
}

public override void RegisterBundleResources(BundleCollection bundles)

{

bundles.AddAreaStyleBundle(AreaName)

.Include("~/Content/azurenote.css",

"~/Content/sidebar.css");

bundles.AddAreaScriptBundle(AreaName)

.Include("~/Scripts/azurenote.js");

}

Update the App Settings of Web.config file
- Using Azure DocumentDb Emulator

<appSettings>
    <add key="AzureNode_Uri" value="https://localhost:8081" />
    <add key="AzureNode_Key" value="C2y6yDjf5/R+ob0N8A7Cgv30VRDJIWEHLM+4QDU5DE2nQ9nDuVTqobD4b8mGGyPMbIZnqyMsEcaGQy67XIw/Jw==" />
    <add key="AzureNode_DbId" value="AzureNotes" />
    <add key="AzureNode_CollectionId" value="AzureNotes" />
</appSettings>

</appSettings>

- Using Azure DocumentDb

<appSettings>
    <add key="AzureNode_Uri" value="<Your DocumentDb Account URL>" />
    <add key="AzureNode_Key" value="<Your DocumentDb Account Key>" />
    <add key="AzureNode_DbId" value="AzureNotes" />
    <add key="AzureNode_CollectionId" value="AzureNotes" />
</appSettings>

</appSettings>

The DocumentDB Account URL and Key can be found in the DocumentDb Account Keys

Controller and Views Implementation

You shall continue to implement your controllers and views logics as usually. However, remember to add the Export attribute to your Controllers.

[Export]
[PartCreationPolicy(CreationPolicy.NonShared)]
[Authorize(Roles = "Edit")]
public class ImportController : Controller
{}

[Export]

[PartCreationPolicy(CreationPolicy.NonShared)]

[Authorize(Roles = "Edit")]

public class ImportController : Controller

{}

3. Module Deployment

To deploy your module into Workspace. All the folder below need to be copied into Areas\<YourModuleName>\ folder. All binaries of your module will be copied to the bin folder of Workspace.

Debug Mode

Running your module on the localhost, you can use set below command line into the post-build event of your module. It helps to copy the necessary files and folders into the Workspace on every build.

xcopy "$(ProjectDir)Views" "$(SolutionDir)HBD.Mvc.Shell\Areas\$(ProjectName)\Views" /s /y /r /i
xcopy "$(ProjectDir)Content" "$(SolutionDir)HBD.Mvc.Shell\Areas\$(ProjectName)\Content" /s /y /r /i
xcopy "$(ProjectDir)Scripts" "$(SolutionDir)HBD.Mvc.Shell\Areas\$(ProjectName)\Scripts" /s /y /r /i
xcopy "$(ProjectDir)bin\*.dll" "$(SolutionDir)HBD.Mvc.Shell\bin" /s /y /r /i
xcopy "$(ProjectDir)*.config" "$(SolutionDir)HBD.Mvc.Shell\Areas\$(ProjectName)" /s /y /r /i

xcopy "$(ProjectDir)Views" "$(SolutionDir)HBD.Mvc.Shell\Areas\$(ProjectName)\Views" /s /y /r /i

xcopy "$(ProjectDir)Content" "$(SolutionDir)HBD.Mvc.Shell\Areas\$(ProjectName)\Content" /s /y /r /i

xcopy "$(ProjectDir)Scripts" "$(SolutionDir)HBD.Mvc.Shell\Areas\$(ProjectName)\Scripts" /s /y /r /i

xcopy "$(ProjectDir)bin\*.dll" "$(SolutionDir)HBD.Mvc.Shell\bin" /s /y /r /i

xcopy "$(ProjectDir)*.config" "$(SolutionDir)HBD.Mvc.Shell\Areas\$(ProjectName)" /s /y /r /i

Deploy to Production

Package your module as the structure below for the production deployment. So that, IT guys can help to copy the folder and files quickly or use the auto deployment tool to deploy the zip file into Workspace application.

AzureNotes.zip
- Areas
  - AzureNote
    - Content: all CSS files of your module.
    - Scripts: all javascript files of your module.
    - Views: all *.cshtml files and folders of your modules.
    - Web.config
- bin
  - AzureInterfaces.dll
  - AzureNote.dll
  - AzureNoteEntities.dll
  - AzureStorage.dll
  - DocumentDB.Spatial.Sql.dll
  - Microsoft.Azure.Documents.Client.dll
  - Microsoft.Azure.Documents.ServiceInterop.dll

After deployed, just recycle the application pool to re-initialize the Workspace to load new module and displayed on the screen.

4. Live Demo

I have hosted the HBD.Mvc.Shell and Azure Notes module onto my Azure, you may want to take a look at the link below. I just have 25$ on my subscription. So hopefully It is not going to down soon.

V. Source Code

The WPF Workspace – Quick Start

Nuget Package:

PM> Install-Package HBD.WPF.Shell

As the Workspace for WPF had been introduced a few day back. So is this post I would like to show you how to get started with that application.

I. Module Implementation.

1. Add New Project

Open Visual Studio and create a new WPF User Control Library project with project name is WPF.Demo.Module.
Install the latest version of HBD.WPF.Shell from Nuget.
Add a new class named DemoStartup and inherited from HBD.WPF.Shell.Modularity.WpfModuleBase and then override 2 methods (GetStartUpViewTypes and MenuConfiguration(IShellMenuService menuSet)) as below.
Remember to add the ModuleExport attribute into your DemoStartup class.

[Prism.Mef.Modularity.ModuleExport(typeof(DemoStartup))]
[PartCreationPolicy(CreationPolicy.Shared)]
public class DemoStartup : WpfModuleBase
{
    /// <summary>
    /// The list of ViewType will be open automatically when app started.
    /// </summary>
    /// <returns></returns>
    protected override IEnumerable<IViewInfo> GetStartUpViewTypes()
    {
        yield return new ViewInfo(typeof(View1));
        yield break;
    }

    /// <summary>
    /// The Main menu configuration.
    /// </summary>
    /// <param name="menuSet"></param>
    protected override void MenuConfiguration(IShellMenuService menuSet)
    {
        base.MenuConfiguration(menuSet);

        menuSet.Menu("Demo")
            .Children
                .AddNavigation("View 1")
                .For<View1>();

    }
}

[Prism.Mef.Modularity.ModuleExport(typeof(DemoStartup))]

[PartCreationPolicy(CreationPolicy.Shared)]

public class DemoStartup : WpfModuleBase

{

/// <summary>

/// The list of ViewType will be open automatically when app started.

/// </summary>

/// <returns></returns>

protected override IEnumerable<IViewInfo> GetStartUpViewTypes()

{

yield return new ViewInfo(typeof(View1));

yield break;

}

/// <summary>

/// The Main menu configuration.

/// </summary>

/// <param name="menuSet"></param>

protected override void MenuConfiguration(IShellMenuService menuSet)

{

base.MenuConfiguration(menuSet);

menuSet.Menu("Demo")

.Children

.AddNavigation("View 1")

.For<View1>();

}

2. Setup the Module_*.json

Add a new json named Module_Demo.json with the below content.

{
  "Name": "WPF.Demo.Module",
  "Description": "The Demo Module for HBD.WPF.Shell",
  "Version": "1.0.0-beta1",
  "IsEnabled": true, //or false
  "AllowToManage": true,
  //The list of assemblies that you want to be exposed to the EMF.
  "AssemplyFiles": [ "WPF.Demo.Module.dll" ]//The name of Module dll.
}

{

"Name": "WPF.Demo.Module",

"Description": "The Demo Module for HBD.WPF.Shell",

"Version": "1.0.0-beta1",

"IsEnabled": true, //or false

"AllowToManage": true,

//The list of assemblies that you want to be exposed to the EMF.

"AssemplyFiles": [ "WPF.Demo.Module.dll" ]//The name of Module dll.

}

Set the build action of this config file is Copy Alway.

3. Add a new User control

Add a new class named ViewModel1.cs inside folder ViewModels as below.

[Export]
public class ViewModel1 : ViewModelBase
{
    /// <summary>
    /// Set View tile and header.
    /// </summary>
    /// <param name="viewTitle"></param>
    /// <param name="viewHeader"></param>
    protected override void SetViewTitle(out string viewTitle, out string viewHeader)
    {
          viewTitle = "View 1";
          viewHeader = "The View 1";
    }
}

[Export]

public class ViewModel1 : ViewModelBase

{

/// <summary>

/// Set View tile and header.

/// </summary>

/// <param name="viewTitle"></param>

/// <param name="viewHeader"></param>

protected override void SetViewTitle(out string viewTitle, out string viewHeader)

{

viewTitle = "View 1";

viewHeader = "The View 1";

}

Add a new User Control named View1.xaml inside Views folder with the code behind as below.

[Export]
[PartCreationPolicy(CreationPolicy.Shared)]
public partial class View1 : UserControl
{
    public View1()
    {
        InitializeComponent();
    }

    [Import]
    public ViewModel1 Model { set { this.DataContext = value; } }
}

[Export]

[PartCreationPolicy(CreationPolicy.Shared)]

public partial class View1 : UserControl

{

public View1()

{

InitializeComponent();

}

[Import]

public ViewModel1 Model { set { this.DataContext = value; } }

}

4. Setup the Public folder

Copy folder [Solution Directory]\packages\HBD.WPF.Shell\tools\Shell to [Solution Directory]\Published\Shell.
Right click on the project select Properties
Add below code into Post-build event

if not exist "$(SolutionDir)Published\Shell\Modules\$(ProjectName)" mkdir "$(SolutionDir)Published\Shell\Modules\$(ProjectName)" 
xcopy "$(TargetDir)$(ProjectName).*" "$(SolutionDir)Published\Shell\Modules\$(ProjectName)" /s /y /r
xcopy "$(TargetDir)*.json" "$(SolutionDir)Published\Shell\Modules\$(ProjectName)" /s /y /r

if not exist "$(SolutionDir)Published\Shell\Modules\$(ProjectName)" mkdir "$(SolutionDir)Published\Shell\Modules\$(ProjectName)"

xcopy "$(TargetDir)$(ProjectName).*" "$(SolutionDir)Published\Shell\Modules\$(ProjectName)" /s /y /r

xcopy "$(TargetDir)*.json" "$(SolutionDir)Published\Shell\Modules\$(ProjectName)" /s /y /r

Set Start external program under Debug to [Solution Directory]\Published\Shell\HBD.WPF.Shell.exe
And set Working directory to [Solution Directory]\Published\Shell folder.

5. Run the application with this Module.

After finished all above steps, the project shall look like below.

Build and Run the application you will see the new Demo menu had been added. When clicking on the child menu item the View1 will be open on the Tab control.

II. Source Code

Download the WPF.Demo.Module here.

Hope my Workspace is useful.

The Workspace for WPF Application Introduction

Nuget Package:

PM> Install-Package HBD.WPF.Shell

I. HBD.WPF.Shell Introduction

Similar with HBD.WinForms.Shell and HBD.App.Shell. In this post, I would like to introduce one more Shell Foundation for WPF Application. This open source project had been developed based on Prism and WPF technologies, that allow to add-in the Modules at run-time. So that you can use this project as a Foundation of your application and then develop and maintain your modules separately and independence.

II. The Available Regions

When working with Prism, the region is one of the good features allow to organize display area and navigation of the controls in the application. As the screenshot above there are 7 regions are available in this Shell.

1. The Menu Region

This region will be used to display the main menu of the Shell. The main menu view will be loaded into the menu region when the application started and it can’t be replaced or deactivated and the menu view must be inherited the HBD.Mef.Shell.Views.IShellMainView interface. So that the Shell will extract the view from Mef container based on this interface type.

The sample code of the main menu view.

[Export(typeof(IShellMainView))]
[PartCreationPolicy(CreationPolicy.Shared)]
public partial class ShellMainView : IShellMainView
{
    ...
}

[Export(typeof(IShellMainView))]

[PartCreationPolicy(CreationPolicy.Shared)]

public partial class ShellMainView : IShellMainView

{

...

}

2. The Right Region

This region will be used to display the notification center of the Shell. Similar to the main menu view. The notification center view will be loaded into the right region when clicked the bell icon on the menu view. However, it can be replaced or deactivated. This view also requires being inherited the HBD.Mef.Shell.Views.IShellNotificationCenterView interface.

3. The Status Region

This region will be used to display the status view of the Shell. This view will be loaded at app start and can’t be replaced or deactivated. This view required to be inherited the HBD.Mef.Shell.Views.IShellStatusView interface.

4. The Main Region

This region will be used to display the Tab Control View that allows adding the custom views from the Modules. The same with Status View, This view will be loaded at app start and not allow to replace or deactivate. It also required being inherited the HBD.Mef.Shell.Views.IShellMainView interface.

5. The Left Region

This region is available and will be shared for all modules. The look and feel are similar to the left region.

6. The Tab Region

This region must be defined in the Tab Control View to tell the Shell that all custom views from the modules will be displayed in the Tab Control.

7. The Title Region

When creating a custom view of the Module. The view header and view title need to be specified. The view title will be displayed on the Tab header and view header will be displayed in the title region. However, only view title will be displayed when loading to the Left orRight region as the screenshot below. As the other view, this title view needs to be HBD.Mef.Shell.Views.IShellTitleView inherited the interface.

Just hightlight that all Views of this Shell had been implemented in the separate library named HBD.WPF.Shell.UI and export into Mef container. So that, you can customize the views by replace HBD.WPF.Shell.UI with the other library that content the full set of the above views.

Refer the source code of HBD.WPF.Shell.UI for more details.

III. The Built-inServices of the Shell.

Below built-in services had been developed along with this project. I will post a separate post for each service to discuss the usage and customization later. In this section just introduce the service functionality and how to use it.

Please note that all built-in service had been added into the HBD.WPF.Shell.ViewModels.ViewModelBase abstract class. So recommend that all view model should be delivered from this class.

1. Dialog Service

The dialog service is providing the easy way to interact with the dialog as

Display a UserControl as dialog.
Open the file browser dialog
Open the Folder browser dialog.

The service is an instance of HBD.WPF.Shell.Services.IDialogService interfaces and exported to the Mef container.

Sample code

DialogService.ShowDialog<UserControlType>(this, p =>
{
    p.Title = "AA";//Dialog Title
    p.DialogType = DialogType.Dialog;//Dialog Type.
}, null);//Specify the call-back method if needed.

DialogService.ShowDialog<UserControlType>(this, p =>

{

p.Title = "AA";//Dialog Title

p.DialogType = DialogType.Dialog;//Dialog Type.

}, null);//Specify the call-back method if needed.

Dialog screenshot

2. Message Box service

The message box service is providing the common dialog as Information, Alert, Confirm and Error message box and shared across the modules. So that message box will be displayed consistently.

This service is an instance of HBD.WPF.Shell.Services.IMessageBoxService interfaces and exported to the Mef container.

Sample code

  this.MessageBoxService.Info(this, "This is a Information box.", "Information",
                (rs1) => this.MessageBoxService.Alert(this, "This is a Alert box.","Alert",
                (rs2) =>this.MessageBoxService.Confirm(this, "this is Confirmation box.")));

this.MessageBoxService.Info(this, "This is a Information box.", "Information",

(rs1) => this.MessageBoxService.Alert(this, "This is a Alert box.","Alert",

(rs2) =>this.MessageBoxService.Confirm(this, "this is Confirmation box.")));

Information Box
Alert Box
Confirmation Box

3. Notification Service

The notification service allows to display a notification on the screen and added into Notification automatically. This service is an instance of HBD.WPF.Shell.Services.INotificationService interfaces and also exported to the Mef container.

Sample code

NotificationService.Notify("Notification Header",
  "That works fine, but what I am trying to do is dynamically change the colors. With your solution I am still using a static resource. Can I bind the R, G, B to anything?",
   NotificationIconType.Info);

NotificationService.Notify(n =>
{
   n.Title = "Alert";
   n.Message = "That works fine, but what I am trying to do is dynamically change the colors.";
   n.IconType = NotificationIconType.Alert;
   n.IsKeepInCentral = true;
   n.CreatedDate = DateTime.Today.AddDays(-2);
   n.For(NotifyClicked);
   n.GroupTitle = "A";
 });

 NotificationService.Notify(n =>
 {
   n.Title = "Alert";
   n.Message = "That works fine, but what I am trying to do is dynamically change the colors.";
   n.Icon = "pack://application:,,,/WPF.Demo.Module;component/Resources/Icons/pin_blue.png";
   n.IsKeepInCentral = true;
   n.CreatedDate = DateTime.Today.AddDays(-12);
   n.For(NotifyClicked);
   n.GroupTitle = "B";
 });

NotificationService.Notify("Notification Header",

"That works fine, but what I am trying to do is dynamically change the colors. With your solution I am still using a static resource. Can I bind the R, G, B to anything?",

NotificationIconType.Info);

NotificationService.Notify(n =>

{

n.Title = "Alert";

n.Message = "That works fine, but what I am trying to do is dynamically change the colors.";

n.IconType = NotificationIconType.Alert;

n.IsKeepInCentral = true;

n.CreatedDate = DateTime.Today.AddDays(-2);

n.For(NotifyClicked);

n.GroupTitle = "A";

});

NotificationService.Notify(n =>

{

n.Title = "Alert";

n.Message = "That works fine, but what I am trying to do is dynamically change the colors.";

n.Icon = "pack://application:,,,/WPF.Demo.Module;component/Resources/Icons/pin_blue.png";

n.IsKeepInCentral = true;

n.CreatedDate = DateTime.Today.AddDays(-12);

n.For(NotifyClicked);

n.GroupTitle = "B";

});

Notification Screenshot.

4. Status Service.

The status service allows displaying the message onto the Status bar of the Shell. This service is an instance of HBD.WPF.Shell.Services.IShellStatusService interfaces and also exported to the Mef container.

Sample code

StatusService.SetStatus("Hello From Demo", Colors.Yellow);

1

StatusService.SetStatus("Hello From Demo", Colors.Yellow);
Screenshot

5. Other Services.

Navigation Executer: this service will help to execute the INavigationParameter
Shell Option Service: this service will save the states of the application: current position, current theme, window state and more.
Shell Region Navigation Service: This service provides an easy way to navigation between the views and regions.

6. Upcoming Services.

The services below are under development and hope it will be release soon.

Authentication service: this service will be using the Open Authentication technology that allows the application interact with the OAuth services as Google, Facebook, Outlook, Linked-In, and Twitter.
Module management service: that allow downloading, import and manage the Modules in the Shell.

Just hightlight that all Services of this Shell had been implemented in the separate library named HBD.WPF.Shell.Services and export into Mef container. So that, you can customize the views by replace HBD.WPF.Shell.Services with the other library that content the full set of the services above.

Refer the source code of HBD.WPF.Shell.Services for more details.

IV. Implement the new Module.

Please refer here for the quick star with Module development here.

V. Source code

You can download the full source code of this Shell here. All the controls of this Shell had been customized from the Microsoft standard controls. So that feel free to use this project for your business.

The Workspace for Console application

Nuget Package:

PM> Install-Package HBD.App.Shell

HBD.App.Shell

This post, I Will share the other Workspace source code for Console Shell application as well. This one will provides the core foundation for the console application. That allows building a loosely coupled, module-able and maintainable application.

How does it work?

This Shell application had been developed based on HBD.Mef library that will automatic load all modules in the defined folder at run time. This application is suitable for those who want to develop a batch job that will be triggered by the scheduler and execute the particular plugin based on the input parameters.

Quick Start

1. Add New Module

Open Visual Studio and create a new Class Library project example project name is Job.Module.
Install the latest version of HBD.App.Shell from Nuget.
Add a new class named Job1 and inherited from HBD.Mef.ConsoleApp.ConsoleModuleBase and then implement 2 abstract methods (Initialize and Run(params string[] args)) as below. Remember to add the ModuleExport attribute into your Job1 class.

[PluginExport("Job1", typeof(Job1))]
[PartCreationPolicy(CreationPolicy.Shared)]
public class Job1 : ConsoleModuleBase
{
        public override void Initialize()
        {
        }

        public override void Run(params string[] args)
        {
            Console.WriteLine($"{this.GetType().Name} was ran with parameters '{string.Join(",", args)}'");
            Console.Read();

            this.Logger.Info(message);
        }
}



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

[PluginExport("Job1", typeof(Job1))]
[PartCreationPolicy(CreationPolicy.Shared)]
public class Job1 : ConsoleModuleBase
{
        public override void Initialize()
        {
        }
 
        public override void Run(params string[] args)
        {
            Console.WriteLine($"{this.GetType().Name} was ran with parameters '{string.Join(",", args)}'");
            Console.Read();
 
            this.Logger.Info(message);
        }
}

The function of this job is writing a message to the console and log file.

2. Setup Publish Shell folder.

Copy folder [Solution Directory]\packages\HBD.App.Shell\tools\App.Shell to [Solution Directory]\Publish\App.Shell

3. Update project’s properties.

Right click on the project select Properties
Add below code into Post-build event

if not exist "$(SolutionDir)Publish\App.Shell\Modules\$(ProjectName)" mkdir "$(SolutionDir)Publish\App.Shell\Modules\$(ProjectName)" 
xcopy "$(TargetDir)*.*" "$(SolutionDir)Publish\App.Shell\Modules\$(ProjectName)" /s /y /r



1
2

if not exist "$(SolutionDir)Publish\App.Shell\Modules\$(ProjectName)" mkdir "$(SolutionDir)Publish\App.Shell\Modules\$(ProjectName)" 
xcopy "$(TargetDir)*.*" "$(SolutionDir)Publish\App.Shell\Modules\$(ProjectName)" /s /y /r

Set Start external program under Debug to Publish\App.Shell\HBD.App.Shell.exe
And set Working directory to Publish\App.Shell folder.
And then set the Command line arguments is -job1 param1 param2 param3.

Add Module config and Debug your module.

Add a new Module_Job_Demo.json file with the following content.

//this file name convention is Module_[Your project Name]
{
  "Name": "Demo Job Module",
  "Description": "This is demo job module for App Shell",
  "Version": "1.0.0-beta1",
  "IsEnabled": true, //or false
  //The list of assemblies that you want to be exposed to the EMF.
  "AssemplyFiles": [ "Job.Module.dll" ]
}



1
2
3
4
5
6
7
8
9

//this file name convention is Module_[Your project Name]
{
  "Name": "Demo Job Module",
  "Description": "This is demo job module for App Shell",
  "Version": "1.0.0-beta1",
  "IsEnabled": true, //or false
  //The list of assemblies that you want to be exposed to the EMF.
  "AssemplyFiles": [ "Job.Module.dll" ]
}

Set Build action of this config file as below

Run your module, the Shell application will display as below.

How to run multi jobs with parameters

As the Command line arguments above you will see the first parameter is the JobName and then follow by the parameters for that job. If you want to execute multi-job you can pass the Command-line arguments following this format: -JobName1 param1 param2 param3 -JobName2 param1 param2 param3

This is a screenshot when executing multi jobs.

If the Environment is Debug the console window will keep open unstil you press a enter key.

Source code

You can download the Job.Module source code here in Github – Job.Module

And the source code of HBD.App.Shell in here Github – HBD.App.Shell

Hope, this Shell will help you to develop a plugin-able application faster and easier. Your feedback and ideas are much appreciated. Please feel free to drop me an email with your opinion.

The Workspace for WindowForms

Nuget Package:

PM> Install-Package HBD.WinForms.Shell

HBD.WinForms.Shell

This post, I would like to share my Winforms Shell application, that provides the core foundation for the Winforms application. With this foundation, it can be load the external modules from the pre-defined folders when it started. So that you can add-in and maintenance the modules easily.

How does it work?

This Shell application had been developed based on HBD.Mef library to loading and executing external modules when it starts. For more information about HBD.Mef you can found in here.

Build-In Services

In this Shell there are a few services had been developed and exposed into Mef that helps you to interact with the Shell component. 1. The IMainMenuService will help to add Menu Item into the Menu-bar of Main window.

The IStatusBarService will help to set the status into the Status-Bar of Main window.

The IMainViewService will help to interact with Tab Manager of the Main window. That allow to add/remove UserControl into TabManager.

The NavigationManager will provide the details in the below section. # Quick Start – Develop a new module for HBD.WinForms.Shell

1. Add New Module

Open Visual Studio and create a new Class Library project example project name is Demo.Module.
Install the latest version of HBD.WinForms.Shell from Nuget.
Add new class named StartupDemoModule and inherited from HBD.Mef.WinForms.Modularity.WinFormModuleBaseand then implement 2 abstract methods (GetStartUpViewTypes and MenuConfiguration(IMainMenuService menuSet)) as below. Remember to add the ModuleExport attribute into your StartupDemoModule class.

[PluginExport(typeof(StartupDemoModule))]
[PartCreationPolicy(CreationPolicy.Shared)]
public class StartupDemoModule : WinFormModuleBase
{
        protected override IEnumerable<IViewInfo> GetStartUpViewTypes()
        {
            //Return the View1 as Startup View.
            //This view will be loaded automatically when application started.
            yield return new ViewInfo(typeof(View1));
        }

        protected override void MenuConfiguration(IMainMenuService menuSet)
        {
            //Add Main Menu for this module.
            menuSet.Menu("Demo")
                .WithIcon(Resources.DemoIcon)
                .WithToolTip("This is demo menu.")
                .Children
                    //Add Navigation for View1.
                    .AddNavigation("View 1")
                        .For(new ViewInfo(typeof(View1)))
                    //And this navigation for View 2.
                    .AndNavigation("View 2")
                        .For(new ViewInfo(typeof(View2)));
        }
}



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

[PluginExport(typeof(StartupDemoModule))]
[PartCreationPolicy(CreationPolicy.Shared)]
public class StartupDemoModule : WinFormModuleBase
{
        protected override IEnumerable<IViewInfo> GetStartUpViewTypes()
        {
            //Return the View1 as Startup View.
            //This view will be loaded automatically when application started.
            yield return new ViewInfo(typeof(View1));
        }
 
        protected override void MenuConfiguration(IMainMenuService menuSet)
        {
            //Add Main Menu for this module.
            menuSet.Menu("Demo")
                .WithIcon(Resources.DemoIcon)
                .WithToolTip("This is demo menu.")
                .Children
                    //Add Navigation for View1.
                    .AddNavigation("View 1")
                        .For(new ViewInfo(typeof(View1)))
                    //And this navigation for View 2.
                    .AndNavigation("View 2")
                        .For(new ViewInfo(typeof(View2)));
        }
}

Add 2 new User Controls Named View1 and View2 as below.

On each view overwrite the Text property and return the View Title and add the Export attribute as below.

[Export]
public partial class View1: UserControl
{
    public override string Text => "View 1";

    ...
}

[Export]
public partial class View2: UserControl
{
    public override string Text => "View 2";

    ...
}



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

[Export]
public partial class View1: UserControl
{
    public override string Text => "View 1";
 
    ...
}
 
[Export]
public partial class View2: UserControl
{
    public override string Text => "View 2";
 
    ...
}

2. Setup Publish Shell folder.

Copy folder [Solution Directory]\packages\HBD.WinForms.Shell\tools\WinForms.Shell to [Solution Directory]\Publish\WinForms.Shell

3. Update project’s properties.

Right click on the project select Properties
Add below code into Post-build event

if not exist "$(SolutionDir)Publish\WinForms.Shell\Modules\$(ProjectName)" mkdir "$(SolutionDir)Publish\WinForms.Shell\Modules\$(ProjectName)" 
xcopy "$(TargetDir)*.*" "$(SolutionDir)Publish\WinForms.Shell\Modules\$(ProjectName)" /s /y /r



1
2

if not exist "$(SolutionDir)Publish\WinForms.Shell\Modules\$(ProjectName)" mkdir "$(SolutionDir)Publish\WinForms.Shell\Modules\$(ProjectName)" 
xcopy "$(TargetDir)*.*" "$(SolutionDir)Publish\WinForms.Shell\Modules\$(ProjectName)" /s /y /r

Set Start external program under Debug to Publish\WinForms.Shell\HBD.WinForms.Shell.exe
And set Working directory to Publish\WinForms.Shell folder.

4. Add Module config and Debug your module.

Add a new Module_Demo.json file with the following content.

//this file name convention is Module_[Your project Name]
{
  "Name": "Demo Module",
  "Description": "This is demo module for WinForms Shell",
  "Version": "1.0.0-beta1",
  "IsEnabled": true, //or false
  //The list of assemblies that you want to be exposed to the EMF.
  "AssemplyFiles": [ "Demo.Module.dll" ]
}



1
2
3
4
5
6
7
8
9

//this file name convention is Module_[Your project Name]
{
  "Name": "Demo Module",
  "Description": "This is demo module for WinForms Shell",
  "Version": "1.0.0-beta1",
  "IsEnabled": true, //or false
  //The list of assemblies that you want to be exposed to the EMF.
  "AssemplyFiles": [ "Demo.Module.dll" ]
}

Set Build action of this config file as below

Run your module the Shell application will display as below.

Navigation between the Views.

From version 1.0.1 a new interface had been added into HBD.Mef.WinForms.Common to provide the communication channel between the views. So that the view and navigate to the other view with the parameters.

1. Implementation.

If your view wants to be navigated from the other view you need to implement the INavigationAware interface and handle OnNavigatedTo(WinformNavigationContext navigationContext) method, This method will be called when navigating from the other view.

The interface

public interface INavigationAware
{
    void OnNavigatedTo(WinformNavigationContext navigationContext);
}



1
2
3
4

public interface INavigationAware
{
    void OnNavigatedTo(WinformNavigationContext navigationContext);
}

The view implementation

[Export]
public partial class View2 : UserControl, INavigationAware
{
    public void OnNavigatedTo(WinformNavigationContext navigationContext)
    {
        this.label2.Text = navigationContext.NavigationParameters.First().Value.ToString();
    }
}



1
2
3
4
5
6
7
8

[Export]
public partial class View2 : UserControl, INavigationAware
{
    public void OnNavigatedTo(WinformNavigationContext navigationContext)
    {
        this.label2.Text = navigationContext.NavigationParameters.First().Value.ToString();
    }
}

2. Using NavigationManager

The sample code below will handle the button event and navigate to the other view

[Export]
public partial class View1 : UserControl
{
    [Import]
    public INavigationManager NavigationManager { protected get; set; }

    private void button1_Click(object sender, System.EventArgs e)
    {
        this.NavigationManager.NavigateTo(typeof(View2),
            new Dictionary<string, object> { ["Message"] = "Navigated from View 1" });
    }
}



1
2
3
4
5
6
7
8
9
10
11
12

[Export]
public partial class View1 : UserControl
{
    [Import]
    public INavigationManager NavigationManager { protected get; set; }
 
    private void button1_Click(object sender, System.EventArgs e)
    {
        this.NavigationManager.NavigateTo(typeof(View2),
            new Dictionary<string, object> { ["Message"] = "Navigated from View 1" });
    }
}

When running the application and click the button. View2 will be open and display the message was passed from View1.

3. Recommendation

There are 2 base classes had been provided in HBD.Mef.WinForms for your Forms and Views. So that when you create a new Form or View, it can be inherited from this form instead.

The FormBase

public class FormBase: Form
{
    [Import]
    public IServiceLocator ContainerService { protected get; set; }

    [Import]
    public ILoggerFacade Logger { protected get; set; }

    [Import]
    public IMessageBoxService MessageBoxService { protected get; set; }
}



1
2
3
4
5
6
7
8
9
10
11

public class FormBase: Form
{
    [Import]
    public IServiceLocator ContainerService { protected get; set; }
 
    [Import]
    public ILoggerFacade Logger { protected get; set; }
 
    [Import]
    public IMessageBoxService MessageBoxService { protected get; set; }
}

The ViewBase

public class ViewBase : UserControl, INotifyPropertyChanged, IActiveAware,INavigationAware
{

    [Import(AllowDefault = true,AllowRecomposition = true)]
    public IServiceLocator ContainerService { protected get; set; }

    [Import(AllowDefault = true, AllowRecomposition = true)]
    public ILoggerFacade Logger { protected get; set; }

    [Import(AllowDefault = true, AllowRecomposition = true)]
    public IShellStatusService StatusService { protected get; set; }

    [Import(AllowDefault = true, AllowRecomposition = true)]
    public IMessageBoxService MessageBoxService { protected get; set; }

    [Import(AllowDefault = true, AllowRecomposition = true)]
    public INavigationManager NavigationManager { protected get; set; }

    #region IActiveAware
        ...
    #endregion

    #region INotifyPropertyChanged
        ...
    #endregion

    #region NavigationAware
        ...  
    #endregion
}



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

public class ViewBase : UserControl, INotifyPropertyChanged, IActiveAware,INavigationAware
{
 
    [Import(AllowDefault = true,AllowRecomposition = true)]
    public IServiceLocator ContainerService { protected get; set; }
 
    [Import(AllowDefault = true, AllowRecomposition = true)]
    public ILoggerFacade Logger { protected get; set; }
 
    [Import(AllowDefault = true, AllowRecomposition = true)]
    public IShellStatusService StatusService { protected get; set; }
 
    [Import(AllowDefault = true, AllowRecomposition = true)]
    public IMessageBoxService MessageBoxService { protected get; set; }
 
    [Import(AllowDefault = true, AllowRecomposition = true)]
    public INavigationManager NavigationManager { protected get; set; }
 
    #region IActiveAware
        ...
    #endregion
 
    #region INotifyPropertyChanged
        ...
    #endregion
 
    #region NavigationAware
        ...  
    #endregion
}

The Form implementation

public class MainForm : FormBase
{
    ...
}



1
2
3
4

public class MainForm : FormBase
{
    ...
}

The View implementation

[Export]
public partial class View1: ViewBase
{
    public override string Text => "View 1";
    ...   
}



1
2
3
4
5
6

[Export]
public partial class View1: ViewBase
{
    public override string Text => "View 1";
    ...   
}

Demo.Module source code

You can download the Demo.Module source code here in Github

Hope this Shell will help you to develop a plugin-able application faster and easier. Your feedback and ideas are much appreciated. Please feel free to drop me an email with your opinion.Nuget Dependences

The HBD.Api.Shell

The AzureNoteApi

Live Demo

Source Code

The Advantages Of the Workspace

Why’s Mef

What is HBD?

Source Code

I. HBD.Mef.Mvc Introduction

PM> Install-Package HBD.Mef.Mvc

The Definition.

Why do we need the Modularization application?

What is Mvc Module?

II HBD.Mef.Mvc Features

1. Navigations

2. Resource Bundle Handling.

3. Controllers scanning.

4. Configuration management.

III. Develop a new Workspace.

1. Bootstrapper class in the App_Start folder.

2. Main menu and Footer partial views.

3. Navigation Authorization.

Auto Pickup the Roles from Authorize attribute.

Specify the Roles manually.

IV. Quick start Module development.

1. Setup DocumentDb on Azure Portal

2. Module Implementation

3. Module Deployment

4. Live Demo

V. Source Code

I. Module Implementation.

1. Add New Project

2. Setup the Module_*.json

3. Add a new User control

4. Setup the Public folder

5. Run the application with this Module.

II. Source Code

I. HBD.WPF.Shell Introduction

II. The Available Regions

1. The Menu Region

2. The Right Region

3. The Status Region

4. The Main Region

5. The Left Region

6. The Tab Region

7. The Title Region

III. The Built-inServices of the Shell.

1. Dialog Service

2. Message Box service

3. Notification Service

4. Status Service.

5. Other Services.

6. Upcoming Services.

IV. Implement the new Module.

V. Source code

HBD.App.Shell

How does it work?

Quick Start

1. Add New Module

2. Setup Publish Shell folder.

3. Update project’s properties.

How to run multi jobs with parameters

Source code

Nuget Package:

How does it work?

Build-In Services

1. Add New Module

2. Setup Publish Shell folder.

3. Update project’s properties.

4. Add Module config and Debug your module.

Navigation between the Views.

1. Implementation.

2. Using NavigationManager

3. Recommendation

Demo.Module source code