Add resources through ClientDependency (deprecated)

Before you read on, please know that extensibility in our webforms framework is deprecated and will be removed soon. [Please read here for a little more context.](extending-ucommerce/extending-ucommerce-admin/ui-extensibility-v9.markdown

Ucommerce uses ClientDependency to package, versioning, and outputting resources in the backend of Ucommerce. It can sometimes be useful to hook into that framework in order to modify styling, hook in new javascript functions or add new services, directives, or controllers to our Angular Application.

Under the hood

We leverage our IoC container to hook up new controls that can deliver different front-end resources for the backend application. In the container we have a single component that hooks up all required resources used out of the box. Each of the items in the array listed below hooks up different things.

• JavascriptResourcesIncludeList
  • Includes frameworks like JQuery and AngularJS
• ResourcesIncludeList
  • Includes all default styling among with components for our AngularJS application
• WidgetResourcesIncludeList
  • Finds all resources for Widgets including AngularJS directives, services, controllers and more
• ApplicationBootStrapper
  • Bootstraps the application with AngularJS

    
    
    <component 
    	id="controls.ucommerceMain"
    	service="Ucommerce.Presentation.UI.Resources.IResourcesControls, Ucommerce.Presentation"
    	type="Ucommerce.Presentation.UI.Resources.Impl.ResourcesControls, Ucommerce.Presentation" >
    	<parameters>
    		<resouresIncludeLists>
    			<array>
    				<item>${JavascriptResourcesIncludeList}</item>
    				<item>${ResourcesIncludeList}</item>
    				<item>${WidgetResourcesIncludeList}</item>
    				<item>${ApplicationBootStrapper}</item>
    			</array>
    		</resouresIncludeLists>
    	</parameters>
    </component>
    
    

Including your own set of resources

If you want to include your own resources into the backend you need to add a new item into the list shown above. The types included in the list is of type 'Ucommerce.Presentation.UI.Resources.IResourcesIncludeList, Ucommerce.Presentation'. The method.

Implementing IResourcesIncludeList

The interface is pretty easy implemented as we only need to return a single control, which has the responsibility of delivering the resources for ClientDependency. ClientDependency will look for attributes on the controls to find the resources needed. Standard implementation looks like the class below. In the implementation we just return itself, which is tagged with the attributes for ClientDependency telling it the resources it needs to load.

    using System.Web.UI;
    using ClientDependency.Core;
    using Ucommerce.Presentation.UI.Resources;
    
    namespace UcommerceCodeSamples.ExtendingUcommerce
    {
        [ClientDependency(ClientDependencyType.Javascript, "scripts/App/loader.js", "Ucommerce", Priority = 1000)]
        public class ApplicationBootStrapper : Control, IResourcesIncludeList
        {
            public Control GetControl()
            {
                return this;
            }
        }
    }
     

Quick Word on our AngularJS application

Even though Ucommerce is still running on ASP.NET webforms we have an angular application running underneath. If you want to build your front-end controls for the backend using Angular you can do that. It will require you to hook in your own control into the resouresIncludeLists in the control above. It needs to be before the ${ApplicationBootStrapper} element as it is not yet possible to lazy load controls into the AngularJS application.

To register a directive you can output the following resource:

    
    
    	function ucommerceWidgets() {
    		return {
    			restrict: 'E',
    			transclude: true,
    			replace: true,
    			scope: {
    				type: '&',
    				header: '=',
    				close: '&',
    				timeout: '@'
    			},
    			templateUrl: UcommerceClientMgr.BaseUCommerceUrl + 'scripts/app/directives/ucommerce-widgets/widgets.html',
    			controller: uc_widgetsController,
    			link: function (tElement, tAttr) {
    
    			}
    		};
    	} 
    
    	angular.module('ucommerce.directives').directive("ucommerceWidgets", ucommerceWidgets);
    
    

To register a controller you can output the following resource:

    
    
    	function uc_widgetsController($scope, UcommerceWidgetService, $timeout) {
    
    	}
    
    	angular.module('ucommerce').controller("widgetsController", uc_widgetsController);
    
    

Registering your control

If you're interested in how to register your new component in our container, please read How to Register a Custom Component

Summary

In this article we covered

• How Ucommerce loads resources into the backend
• How you can implement 'System.Web.Ui.control' to deliver resources for ClientDependency
• How you can register your component and hook it into the 'controls.ucommerceMain' component in our container