GUI Extension - TabPage not loading JS - tridion

Question

I am adding a new Tab to the Component Edit screen. My tab is showing fine but the JavaScript is not loading. I would like to write out the URI of the current Component in the tab. I have a feeling the naming of my JavaScript methods is not correct or matching with the config, but really don't know how to say 'hello' from the JavaScript side.
I used the InfoTab View from the Tridion CME (code sample below) and also the PowerTools ItemXml for inspiration - but no luck.
What is the minimum set of methods in the JS to get hello world working?
Solution
Added the dependencies node from Rob's suggestion. The log then showed the js file as loading.
HelloTab.js
Type.registerNamespace("RC");
RC.HelloTab = function RC$HelloTab$HelloTab(element) {
console.log('Constructor');
Tridion.OO.enableInterface(this, "RC.HelloTab");
this.addInterface("Tridion.Controls.DeckPage", [element]); //My extension is like this
};
RC.HelloTab.prototype.initialize = function HelloTab$initialize()
{
console.log('init');
$log.debug('init');
this.callBase("Tridion.Controls.DeckPage", "initialize");
$evt.addEventHandler($display.getItem(), "load", this.getDelegate(this.updateView));
};
RC.HelloTab.prototype.select = function HelloTab$select()
{
console.log('select');
this.callBase("Tridion.Controls.DeckPage", "select");
this.updateView();
};
RC.HelloTab.prototype.updateView = function HelloTab$updateView()
{
console.log('update');
if (this.isSelected())
{
console.log('selected')
}
};
Tridion.Controls.Deck.registerPageType(RC.HelloTab, "RC.HelloTab");
HelloTab.config
<?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 cache="true">
<cfg:filters />
<cfg:groups>
<cfg:group name="RC.HelloTab" merge="always">
<cfg:fileset>
<cfg:file type="script">/HelloTab.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:add>
<ext:extension assignid="HelloTab" name="Hi There!" insertbefore="InfoTab">
<ext:control>~/HelloTab.ascx</ext:control>
<ext:pagetype>RC.HelloTab</ext:pagetype>
<ext:dependencies>
<cfg:dependency>RC.HelloTab</cfg:dependency>
</ext:dependencies>
<ext:apply>
<ext:view name="ComponentView">
<ext:control id="MasterTabControl"/>
</ext:view>
</ext:apply>
</ext:extension>
</ext:add>
</ext:tabpages>
<ext:toolbars/>
<ext:ribbontoolbars/>
</ext:editorextension>
</ext:editorextensions>
</extensions>
<commands/>
<contextmenus />
<localization />
<settings>
<defaultpage/><!-- /Views/Default.aspx</defaultpage> -->
<navigatorurl/><!-- /Views/Default.aspx</navigatorurl> -->
<editurls/>
<listdefinitions />
<itemicons/>
<theme>
<path>theme/</path>
</theme>
<customconfiguration />
</settings>
</Configuration>
Original:
HelloTab.config
<resources cache="true">
<cfg:filters />
<cfg:groups>
<cfg:group name="RC.HelloTab" merge="always">
<cfg:fileset>
<cfg:file type="style">{ThemePath}/HelloTab.css</cfg:file>
<cfg:file type="script">/HelloTab/HelloTab.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:add>
<ext:extension assignid="HelloTab" name="Hi There!" insertbefore="InfoTab">
<ext:control>~/HelloTab.ascx</ext:control>
<ext:pagetype>HelloTab</ext:pagetype>
<ext:apply>
<ext:view name="ComponentView">
<ext:control id="MasterTabControl"/>
</ext:view>
</ext:apply>
</ext:extension>
</ext:add>
</ext:tabpages>
<ext:toolbars/>
<ext:ribbontoolbars/>
</ext:editorextension>
</ext:editorextensions>
</extensions>
<commands/>
<contextmenus />
<localization />
<settings>
<defaultpage/><!-- /Views/Default.aspx</defaultpage> -->
<navigatorurl/><!-- /Views/Default.aspx</navigatorurl> -->
<editurls/>
<listdefinitions />
<itemicons/>
<theme>
<path>theme/</path>
</theme>
<customconfiguration />
</settings>
JavaScript:
Type.registerNamespace("RC.HelloTab");
RC.HelloTab = function HelloTab(element)
{
Tridion.OO.enableInterface(this, "RC.HelloTab");
this.addInterface("Tridion.Controls.DeckPage", [element]);
};
RC.HelloTab.prototype.initialize = function HelloTab$initialize()
{
$log.event("RC.HelloTab", "RC.HelloTab init");
this.callBase("Tridion.Controls.DeckPage", "initialize");
document.write("something else");
var item = $display.getItem();
if (item)
{
if (item.isLoaded())
{
this._showInfo();
}
else
{
item.load();
}
}
};
RC.HelloTab.prototype.select = function HelloTab$select()
{
this.callBase("Tridion.Controls.DeckPage", "select");
if (this.properties.itemChanged)
{
this._showInfo();
this.properties.itemChanged = false;
}
};
RC.HelloTab.prototype._showInfo = function HelloTab$_showInfo()
{
var item = $display.getItem();
var html = "<h1>title</h1>";
$dom.setOuterHTML($("#title"), html);
document.write('another uri=' + item.ID);
};
RC.HelloTab.prototype._onItemChanged = function HelloTab$_onItemChanged()
{
if (this.isSelected())
{
this._showInfo();
}
};
Tridion.Controls.Deck.registerPageType(RC.HelloTab, "HelloTab");
Tridion.Web.Trace:
w3wp.exe Information: 0 : (634734775171817068) CachedJssControlResources: LastModifiedTime for type HelloTab is 5/24/2012 5:22:26 PM
w3wp.exe Information: 0 : (634734770029374585) CachedJssControlResources: LastModifiedTime for type editors_hellotab_hellotab_ascx is 5/24/2012 5:22:26 PM

Answer 1

I think your problem is you're missing the dependency elements in the ext:extension element.
<ext:dependencies>
<cfg:dependency></cfg:dependency>
</ext:dependencies>
Add like so:
<ext:extension assignid="HelloTab" name="Hi There!" insertbefore="InfoTab">
<ext:control>~/HelloTab.ascx</ext:control>
<ext:pagetype>HelloTab</ext:pagetype>
<ext:dependencies>
<cfg:dependency>RC.HelloTab</cfg:dependency>
</ext:dependencies>
<ext:apply>
<ext:view name="ComponentView">
<ext:control id="MasterTabControl"/>
</ext:view>
</ext:apply>
</ext:extension>
If you're using Chrome you could put in some console.log statements (alerts if IE) into each of the methods you have implemented from the interface as a test and at the top of the file. E.g.:
console.log('Hello: File loaded');
One difference between your code and a GUI extension I've written recently is your constructor function name does not include the namespace.
I would expect it to be called:
RC.HelloTab = function RC$HelloTab$HelloTab(element)
{
console.log('Constructor');
Tridion.OO.enableInterface(this, "RC.HelloTab.HelloTab"); //Also was missing NS here
this.addInterface("Tridion.Controls.DeckPage", [element]); //My extension is like this
};
Another way to check is to use Chrome developer tools on the page you expect your Javascript to appear, go to the scripts tab and use the search box within the developer tools to search for your namespace.
Hope this helps.

Answer 2

Indeed, the dependency on the group with resource files is missing. That's why js was not present on the page. Btw, there are two ways to make a dependency:
Make a dependency in the ext:extension node (as Rob proposed)
If you have code behind for your HelloTab.ascx, you could use ControlResources attribute for the class definition
[ControlResources("RC.HelloTab")]public class HelloTab{}
Some additional comments:
The recommended way to use registerNamespace is to define only namespace object, but not the class itself. So in the provided code, there should be only Type.registerNamespace("RC");
Tridion.OO.enableInterface used to define the unique interface name for the class and set the API functions to use OO possibilities on the class. To this call actually makes possible to call addInterface method. Interface name could be any string, which should be unique. Usually, we use the name of the class with full namespace. So in this case original version was correct - Tridion.OO.enableInterface(this, "RC.HelloTab");.