There are 2 issues with your code.
- As @Knollbert mentioned, you have an issue with synchronicity which can be resolved with Crossrider's appAPI.dom.addRemoteJS method using the callback to inject and build your UI.
- You have an issue with scopes as you are loading the remote script into the HTML Page's scope (the DOM) and trying to call it (YUI) from within the Extension scope where it has not been defined.
You can resolve both issues with the following extension.js code (and use jQuery to inject your elements):
appAPI.ready(function($) {
appAPI.dom.addRemoteJS("http://yui.yahooapis.com/3.13.0/build/yui/yui-min.js", function() {
$('body').addClass('yui3-skin-sam');
$('<div id="demo">').appendTo('body');
var script =
"YUI().use('tabview', function(Y) {" +
" var tabview = new Y.TabView({" +
" children: [{" +
" label: 'foo'," +
" content: '<p>foo content</p>'" +
" }, {" +
" label: 'bar'," +
" content: '<p>bar content</p>'" +
" }, {" +
" label: 'baz'," +
" content: '<p>baz content</p>'" +
" }]" +
" });" +
" tabview.render('#demo');" +
" tabview.selectChild(2);" +
"});";
appAPI.dom.addInlineJS(script);
});
});
In addition, you can tidy up the code injecting the inlineJS by creating a resource file (e.g. script.js) with the contents of the script variable and injecting it using appAPI.resources.addInlineJS, as follows:
script.js
YUI().use('tabview', function(Y) {
var tabview = new Y.TabView({
children: [{
label: 'foo',
content: '<p>foo content</p>'
}, {
label: 'bar',
content: '<p>bar content</p>'
}, {
label: 'baz',
content: '<p>baz content</p>'
}]
});
tabview.render('#demo');
tabview.selectChild(2);
});;
extension.js
appAPI.ready(function($) {
appAPI.dom.addRemoteJS("http://yui.yahooapis.com/3.13.0/build/yui/yui-min.js", function() {
$('body').addClass('yui3-skin-sam');
$('<div id="demo">').appendTo('body');
appAPI.resources.addInlineJS('script.js');
});
});
[Disclaimer: I am a Crossrider employee]