I am adding a new tab to the component editing screen. My tab displays fine, but JavaScript is not loading. I would like to write the URI of the current component in the tab. I feel that the names of my JavaScript methods are incorrect or consistent with the configuration, but I don’t really know how to say hello to JavaScript.
I used InfoTab View from CME Tridion (sample code below) as well as PowerTools ItemXml for inspiration - but no luck.
What is the minimum set of methods in JS for receiving greetings in the world?
Decision
Added node dependencies from the Rob clause. Then the log showed the js file as a download.
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]);
};
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/>
<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/>
<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 : 0: (634734775171817068) CachedJssControlResources: LastModifiedTime HelloTab is 5/24/2012 5:22:26 PM
w3wp.exe : 0: (634734770029374585) CachedJssControlResources: LastModifiedTime editors_hellotab_hellotab_ascx is 5/24/2012 5:22:26 PM