GUI Extensions - Resources failing to load

Question

I'm kinda at a loss as to what exactly I'm doing wrong, so hopefully by throwing this out there someone should be able to point something hopefully obvious out to me.

A new GUI extension is being created that will sit as a button on a new Events tab of the Tridion ribbon bar. I can get the button to appear, however no icon appears for the button and is always disabled, which leads me to believe the stylesheet and javascript resources for the extension are not loading :S

My editor config is as follows:

<?xml version="1.0"?>
<Configuration xmlns="http://www.sdltridion.com/2009/GUI/Configuration/Merge" xmlns:cfg="http://www.sdltridion.com/2009/GUI/Configuration" xmlns:ext="http://www.sdltridion.com/2009/GUI/extensions" xmlns:cmenu="http://www.sdltridion.com/2009/GUI/extensions/ContextMenu">

<resources>
<cfg:filters/>
<cfg:groups>      
  <cfg:group name="Events.Cvent">
    <cfg:fileset>
      <cfg:file type="style">/Theme/cvent.css</cfg:file>
      <cfg:file type="reference">Events.Commands.Cvent</cfg:file>
    </cfg:fileset>
  </cfg:group>
  <cfg:group name="Events.Cvent.Commandset">
    <cfg:fileset>
      <cfg:file type="script">/Scripts/cvent.js</cfg:file>
    </cfg:fileset>
    <cfg:dependencies>
      <cfg:dependency>Tridion.Web.UI.Editors.CME</cfg:dependency>
      <cfg:dependency>Tridion.Web.UI.Editors.CME.commands</cfg:dependency>
    </cfg:dependencies>
  </cfg:group>
</cfg:groups>
  </resources>
<definitionfiles/>
<extensions>
<ext:dataextenders/>
<ext:editorextensions>
  <ext:editorextension target="CME">
    <ext:editurls/>
    <ext:listdefinitions/>
    <ext:taskbars/>
    <ext:commands/>
    <ext:commandextensions/>
    <ext:contextmenus/>        
    <ext:lists/>
    <ext:tabpages/>
    <ext:toolbars/>
    <ext:ribbontoolbars>
      <ext:add>
        <ext:extension assignid="EventsPage" name="Events">
          <ext:control/>
          <ext:pagetype/>
          <ext:apply>
            <ext:view name="DashboardView">
              <ext:control id="DashboardToolbar"/>
            </ext:view>
          </ext:apply>
        </ext:extension>
        <ext:extension assignid="EventsAdministrationGroup" pageid="EventsPage" name="Administration">
          <ext:group/>
          <ext:apply>
            <ext:view name="DashboardView">
              <ext:control id="DashboardToolbar"/>
            </ext:view>
          </ext:apply>
        </ext:extension>
        <ext:extension assignid="CventBtn" groupid="EventsAdministrationGroup" name="Import Cvent Events" pageid="EventsPage">
          <ext:command>Cvent</ext:command>
          <ext:title>Import Cvent Events</ext:title>
          <ext:dependencies>
            <cfg:dependency>Events.Cvent</cfg:dependency>               
          </ext:dependencies>
          <ext:apply>
            <ext:view name="DashboardView">
              <ext:control id="DashboardToolbar"/>
            </ext:view>
          </ext:apply>
        </ext:extension>
      </ext:add>
    </ext:ribbontoolbars>
  </ext:editorextension>
</ext:editorextensions>
<ext:modelextensions/>
</extensions>

 <commands>    
    <cfg:commandset id="Events.Commands.Cvent">
  <cfg:command name="Cvent" implementation="Events.Commands.OpenCvent"/>
  <cfg:dependencies>
    <cfg:dependency>Events.Cvent.Commandset</cfg:dependency>        
  </cfg:dependencies>
</cfg:commandset>
  </commands>
  <contextmenus/>
  <localization/>

  <settings>
    <defaultpage/>
    <editurls/>
    <listdefinitions/>
    <theme>
      <path>/Theme/</path>
    </theme>
    <customconfiguration>
      <clientconfiguration xmlns="http://www.sdltridion.com/2009/GUI/Configuration/Merge">
        <Cventurl xmlns="http://www.sdltridion.com/2009/GUI/Configuration/Merge">/Cvent/Cvent.aspx</Cventurl>
      </clientconfiguration>
    </customconfiguration>
  </settings>

</Configuration>

All the resource files (javascript and css) I need are there in the directories as according to the config. My JS for GUI looks like the following:

Type.registerNamespace("Events.Commands");

Events.Commands.OpenCvent = function Commands$OpenCvent(name)
{
    Type.enableInterface(this, "Events.Commands.OpenCvent");
    this.addInterface("Tridion.Cme.Command", ["Cvent"]);
    this.properties.url;
};

Events.Commands.OpenCvent.prototype._isAvailable = function OpenCvent$_isAvailable(selection, pipeline) 
{
    return true;
};

Events.Commands.OpenCvent.prototype._isEnabled = function OpenCvent$_isEnabled(selection, pipeline) 
{
    return true;
};

Events.Commands.OpenCvent.prototype._execute = function OpenCvent$_execute(selection, pipeline) 
{   
    window.open('www.google.com');  
};

Restarted Tridion and still nothing, what am I doing wrong?

Answer 1

You can check whether or not your files are included by loading the CME with the ?mode=js and ?mode=css parameters.

Don't forget that those files are heavily cached - and just changing the configuration does not invalidate the cache. You need to either increase the @modification attribute in System.config (to invalidate the cache of all clients) - or simply clear your browser cache manually (easiest while developing).

If your changes are not in those files, it's likely a problem with your editor config. As Chris pointed out, files are only included if something else is included which has a dependency on it. If you enable tracing, you can see why your files are not being included in the resulting log file (Tridion.Web.trace).

Check out section 6 of this article for more information on how to do that: http://www.sdltridionworld.com/articles/sdltridion2011/tutorials/debugging_the_tridion_2011_cme.aspx

Answer 2

I can't tell you what exactly is wrong with your extension, but maybe you can have a look at an existing GUI Extension (in fact several extensions) and maybe you can compare what is wrong with yours. Have a look at the PowerTools http://code.google.com/p/tridion-2011-power-tools/

Also some good examples on http://www.sdltridionworld.com, e.g. http://www.sdltridionworld.com/articles/sdltridion2011/tutorials/GUIextensionIn8steps.aspx

Answer 3

I believe the dependencies will not actually get loaded unless they are used and referenced from within the comandset nodes of the config. Could you include your complete editor.config rather than just the extract?