Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Anthony Candaele 1197 posts 2049 karma points
    Jan 08, 2012 @ 19:18
    Anthony Candaele
    0

    using the CDLoader.cshtml

    Hi Jorge,

    I followed instructions on your blog about integrating the Client Dependency Framework by using a user control:

    Minify your css and and javascript in Umbraco

    I created a user control (CDLoader.ascx), a macro refering to the user control and then inserted the macro on my master page.

    However the css is not rendered, and if I look in the source code of my rendered page, I don't see any link-tag to my css.

    So no I try to use the code in CDLoader.cshtml from the uBootstrap starter kit to implement Client Dependency Framework through a Razor script. I just wonder if I can skip the using statement: @using Bootstrap.Logic.ClientDependency as this of course refers to a compiled class wich I don't have in my own web project.

    Thanks for your advice,
    Anthony

  • J 150 posts 489 karma points
    Jan 08, 2012 @ 21:18
    J
    1

    Hi Anthony,

    you can remove the dependency on the Html5StandardRenderer class by using the built-in ClientDependency.Core.FileRegistration.Providers.StandardRenderer class so your cshtml file will look like this:

    @*
        Paramaters:
        CssPaths (string)
        JsPaths (string)
        IncludeDefaultPaths (bool, default false)
    *@
    @using ClientDependency.Core
    @using ClientDependency.Core.Controls
    @using ClientDependency.Core.FileRegistration.Providers
    @{
        var cssPaths = Parameter.CssPaths;
        var jsPaths = Parameter.JsPaths;
        bool includeDefaultPaths;
        bool.TryParse(Parameter.IncludeDefaultPaths, out includeDefaultPaths);
    
        KeyValuePair cdPaths = GetClientDependencyPaths(cssPaths, jsPaths, includeDefaultPaths);
        @Html.Raw(cdPaths.Key)
        @Html.Raw(cdPaths.Value)
    }
    
    @functions 
    {
        KeyValuePair GetClientDependencyPaths(string cssPaths, string jsPaths, bool includeDefaultPaths)
        {
            var paths = new HashSet
            {
                new ClientDependencyPath {Name = "Styles", Path = "~/css"}, 
                new ClientDependencyPath {Name = "Scripts", Path = "~/scripts"}
            };
    
            var allDependencies = new List();
            string cssOutput, jsOutput;
            int priority;
    
            if (!string.IsNullOrEmpty(cssPaths))
            {
                priority = 0;
                allDependencies.AddRange(cssPaths.Split('|').Select(path => new CssInclude { PathNameAlias = includeDefaultPaths ? "Styles" : string.Empty, FilePath = path, Priority = priority++ }));
            }
    
            if (!string.IsNullOrEmpty(jsPaths))
            {
                priority = 0;
                allDependencies.AddRange(jsPaths.Split('|').Select(path => new JsInclude { PathNameAlias = includeDefaultPaths ? "Scripts" : string.Empty, FilePath = path, Priority = priority++ }));
            }
    
            var renderer = new StandardRenderer();
            renderer.RegisterDependencies(allDependencies, paths, out jsOutput, out cssOutput);
            return new KeyValuePair(cssOutput, jsOutput);
        }
    }

    Another option is to reuse the code for Html5StandardRenderer :

    using System.Collections.Generic;
    using System.Collections.Specialized;
    using System.Text;
    using System.Web;
    using ClientDependency.Core;
    using ClientDependency.Core.Config;
    using ClientDependency.Core.FileRegistration.Providers;
    
    namespace Bootstrap.Logic.ClientDependency
    {
        public class Html5StandardRenderer : BaseRenderer
        {
            public const string DefaultName = "Html5StandardRenderer";
    
            public override void Initialize(string name, NameValueCollection config)
            {
                if (string.IsNullOrEmpty(name))
                {
                    name = DefaultName;
                }
    
                base.Initialize(name, config);
            }
    
            protected override string RenderJsDependencies(List<IClientDependencyFile> jsDependencies)
            {
                if (jsDependencies.Count == 0)
                {
                    return string.Empty;
                }
    
                var stringBuilder = new StringBuilder();
                if (ConfigurationHelper.IsCompilationDebug || !EnableCompositeFiles)
                {
                    foreach (var clientDependencyFile in jsDependencies)
                    {
                        stringBuilder.AppendLine(RenderSingleJsFile(clientDependencyFile.FilePath));
                    }
                }
                else
                {
                    foreach (var js in ProcessCompositeList(jsDependencies, ClientDependencyType.Javascript))
                    {
                        stringBuilder.AppendLine(RenderSingleJsFile(js));
                    }
                }
    
                return stringBuilder.ToString();
            }
    
            protected override string RenderCssDependencies(List<IClientDependencyFile> cssDependencies)
            {
                if (cssDependencies.Count == 0)
                {
                    return string.Empty;
                }
    
                var stringBuilder = new StringBuilder();
                if (ConfigurationHelper.IsCompilationDebug || !EnableCompositeFiles)
                {
                    foreach (var clientDependencyFile in cssDependencies)
                    {
                        stringBuilder.AppendLine(RenderSingleCssFile(clientDependencyFile.FilePath));
                    }
                }
                else
                {
                    foreach (var css in ProcessCompositeList(cssDependencies, ClientDependencyType.Css))
                    {
                        stringBuilder.AppendLine(RenderSingleCssFile(css));
                    }
                }
    
                return stringBuilder.ToString();
            }
    
            protected override string RenderSingleJsFile(string js)
            {
                return string.Format("<script src=\"{0}\"></script>", HttpUtility.HtmlEncode(js));
            }
    
            protected override string RenderSingleCssFile(string css)
            {
                return string.Format("<link rel=\"stylesheet\" href=\"{0}\">", HttpUtility.HtmlEncode(css));
            }
        }
    }
    

    I will be releasing the source code soon so you can play around with it

    Cheers,

    Jorge

  • Anthony Candaele 1197 posts 2049 karma points
    Jan 09, 2012 @ 10:12
    Anthony Candaele
    0

    Hi Jorge,

    Thanks for your help. As my webproject is also using Html5 I chose the second option.

    So I created a web project in VS 2010 and made sure I had the same namespaces as your Html5StandardRenderer class.

    The code compiled fine and I copied the bootstrap.dll to the bin folder of my website. 
    Then I created a CdLoader.cshtml file in the Umbraco Backend and placed the macro:

    <umbraco:Macro Alias="CdLoader" CssPath="style.css" runat="server" /> 

    I'm not really sure about the CssPath attribute. In my css folder I have three .css files: layout.css, reset.css and style.css

    However, if I render the homepage, I don't see any rendered css. If I look in the source code of the rendered page there is no css link at all:

    <head>
      <title></title>
      <meta charset="utf-8">
       
       
       
       
       
       
       
      <script type="text/javascript" src="/scripts/jquery-1.4.2.min.js"></script>
      <script type="text/javascript" src="js/dropdown.js"></script>
       
      <script type="text/javascript" src="/scripts/jquery.faded.js"></script>
      <script type="text/javascript">
      $(function(){
      $("#faded").faded({
      crossfade: true,
      autoplay: 4000,
      autorestart: true,
      speed: 900
      });
      });
      </script>
       
       
      <!--[if lt IE 7]>
      <script type="text/javascript" src="http://info.template-help.com/files/ie6_warning/ie6_script.js"></script>
      <![endif]-->
      <!--[if IE]>
      <script type="text/javascript" src="js/html5.js"></script>
      <![endif]-->
      </head>

    Also changing the version number in the ClientDepency.config file doesn't help

    greetings
    Anthony

  • J 150 posts 489 karma points
    Jan 09, 2012 @ 10:32
    J
    0

    Hi Anthony,

    Try setting the IncludeDefaultPaths to true:

    <umbraco:Macro Alias="CdLoader" CssPaths="style.css" IncludeDefaultPaths="true" runat="server" />

    This will automatically will prepend ~/css for the stylesheets and ~/scripts for the javascripts

    Jorge

  • Anthony Candaele 1197 posts 2049 karma points
    Jan 09, 2012 @ 10:50
    Anthony Candaele
    0

    Hmm, this is a though one. Still no css. What strikes me is that the css link in the header tag isn't even rendered.

    I don't know if this could have anything to do with it, I'm working with a urlrewrite in the UrlRewriting.config file:

    <add name="home"

            virtualUrl= "^~/home$"

            rewriteUrlParameter="ExcludeFromClientQueryString"

            destinationUrl="~/"

            ignoreCase="true"

            redirect="Application"

            redirectMode="Permanent" />

    I also tried it in Firefox with the same result, no css link in the header tag

    <head>
    <title></title>
    <meta charset="utf-8">
    
    
    
    
    
    
    
      <script type="text/javascript" src="/scripts/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/dropdown.js"></script>
    
      <script type="text/javascript" src="/scripts/jquery.faded.js"></script>
    
      <script type="text/javascript">
        $(function(){
          $("#faded").faded({
            crossfade: true,
            autoplay: 4000,
            autorestart: true,
            speed: 900
          });
        });
       </script>
    
    
    <!--[if lt IE 7]> <script type="text/javascript" src="http://info.template-help.com/files/ie6_warning/ie6_script.js"></script> <![endif]-->
    <!--[if IE]> <script type="text/javascript" src="js/html5.js"></script> <![endif]-->
    </head>

    Greetings,
    Anthony

  • J 150 posts 489 karma points
    Jan 09, 2012 @ 10:57
    J
    0

    Hi Anthony,

    I believe is a typo. Try setting CssPaths (plural) and let me know if it works ok.

    Cheers,

    J

  • Anthony Candaele 1197 posts 2049 karma points
    Jan 09, 2012 @ 11:14
    Anthony Candaele
    0

    Just I was willing to jump of a bridge in despair, your typo-solution saved me:

    As you can see in the screenshot, the menu-navigation is not rendered as it should be, but I think this is due to the fact that I'm only providing the Css path to one stylesheet (style.css) while I have three stylesheets: style.css, layout.css and reset.css.

    So is there a way to provide a path for all three stylesheet files?

    In the meantime I will mark you html5renderer.cshtml post as solution to this thread.

    greetings, 

    Anthony

  • J 150 posts 489 karma points
    Jan 09, 2012 @ 11:21
    J
    0

    Hi Anthony,

    Yes, you can load several stylesheets. ClientDependency will compress them and put them in a single file. Try putting all the stylesheets in the CssPaths and separate them with the pipe symbol. The order you put those files is important, that's why reset.css is first in the list

    <umbraco:Macro Alias="CdLoader" CssPaths="reset.css|layouts.css|style.css" IncludeDefaultPaths="true" runat="server" />

    Hope this helps

    J

  • Anthony Candaele 1197 posts 2049 karma points
    Jan 09, 2012 @ 11:34
    Anthony Candaele
    0

    Perfect!

    Thanks to the uBootstrap Starter Kit, I learnt a lot of new stuff concerning integrating the Client Dependency Framework and succeed in integrating the Client Depency Framework in my own webproject.

    Now I will look to integrate Combres in my webproject. I read in your blogpost Minify your css and javascript in Umbraco that Combres is a Library to minify and compress css and Javascript resources.

    greetings,
    Anthony

Please Sign in or register to post replies

Write your reply to:

Draft