How to use JS.RegisterJSInclude() with Ektron v9?

Question

I have a widget with a sub folder containing some css and JS. I want to register these files through the widget rather than externally.

First of all, where do i put them. page_load, pre render, init ???

This is my register scripts function which I've tried calling from page load and pre render with no success.

  private void RegisterScripts()
    {
        var api = new CommonApi();
        var sitepath = api.SitePath;
        Css.RegisterCss(this, sitepath + "widgets/mywidget/mything.css", "MyCSS");
        JS.RegisterJSInclude(this, sitepath + "widgets/mywidget/thing.min.js", "MyJS1");
        JS.RegisterJSInclude(this, sitepath + "widgets/mywidget/otherthing.js", "MyJS2");
        JS.RegisterJSInclude(this, sitepath + "widgets/mywidget/morethings.js", "MyJS3");
    }

im pretty sure i've done everything set out here: http://documentation.ektron.com/cms400/v8.50/mobile_help/Advanced/Content/Widget%20Chapter/Customizing%20Widgets/Customizing_Widgets.htm

Answer 1

I cannot recall if it was after 8.5 or before, but the latest Register methods utilize packages for registration. Packaging the CSS and JavaScript allows better caching and resource utilization, and helps ensure that the old days, where you could end up registering multiple copies of EktronJS because of a typo in your "key", are gone. It also aggregates multiple script and css requests into single requests to improve performance.

The new way to register scripts and css going forward, including v9, is to use the Ektron.CMS.Framework.UI methods. Packages allow you to create reusable blocks that can then be registered in multiple locations with a single call. If any of the files in them are already registered, it will not include them again (in the past you would have dupes). You can still register single scripts, however, and there is a method for doing so.

string sitePath = new Ektron.Cms.CommonApi().SitePath;
Ektron.Cms.Framework.UI.JavaScript.Register(this, sitePath + "/widgets/myWidget/js/script.js");

When you use the Packaging approach, you have the option to use built-in resources, or your custom ones. The biggest advantage is reuse. If you create small packages in a CustomPackages class, for instance, and want to combine items, you can, and any that are already referenced by other widgets or items will only be included once. It also allows you to create frameworks/models for creating and quickly deploying future widgets. A simple example of this approach:

string sitePath = new Ektron.Cms.CommonApi().SitePath;
Ektron.Cms.Framework.UI.Package widgetRes = new Ektron.Cms.Framework.UI.Package()
{
    Components = new List<Ektron.Cms.Framework.UI.Component>()
    {   // all built-in ektron packages
        Ektron.Cms.Framework.UI.Packages.EktronCoreJS,
        Ektron.Cms.Framework.UI.Packages.jQuery.jQueryUI.Datepicker,
        Ektron.Cms.Framework.UI.Packages.jQuery.jQueryUI.Dialog,
        Ektron.Cms.Framework.UI.Packages.Ektron.JSON,
        Ektron.Cms.Framework.UI.JavaScript.Create("/widgets/myWidget/js/script.js"),    // custom JS
        Ektron.Cms.Framework.UI.Css.Create(sitePath+"/widgets/myWidget/css/myStyles.css")   // custom CSS
    }
};
widgetRes.Register(this);   // register everything
widgetRes.RegisterJS(this); // register JS only
widgetRes.RegisterCss(this);    // register CSS only

The link that Bill provided is a custom library that builds on the packaging that Ektron built and allows a little more freedom of where you register the methods, what packages you have available, and how the caching is handled. The Ektron methods always include the scripts in the head of the page so the custom library allows you to specify a control like a placeholder to register them in. It's build on top of the existing Ektron Packaging structure, however, and that new packaging and registration approach is ultimately what you want to utilize instead of the workaround.