AnsweredAssumed Answered

Integrating YUI and preview in Explorer

Question asked by mabayona on Aug 26, 2009
Latest reply on Aug 27, 2009 by mabayona
I´m just trying to get some basic YUI based functionality as a *.ftl file to be used in the custom view of a explorer node. If this functionality works OK, it opens great intregration oportunities. The idea is to be able to have some working basic interaction (e.g. input parameters,…) that can be extended to cover more complex interfaces.

I´m trying this basic code from yahoo web:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>


    <meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Adding Tabs</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
   margin:0;
   padding:0;
}
</style>

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/tabview/assets/skins/sam/tabview.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>

<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/tabview/tabview-min.js"></script>


<!–begin custom header content for this example–>
<style type="text/css">
.yui-navset button {
    position:absolute;
    top:0;
    right:0;
}
</style>

<!–end custom header content for this example–>

</head>

<body class=" yui-skin-sam">


<h1>Adding Tabs</h1>

<div class="exampleIntro">
   <p>This demonstrates how to dynamically add tabs to a TabView widget.</p>

         
</div>

<!–BEGIN SOURCE CODE FOR EXAMPLE =============================== –>

<div id="demo" class="yui-navset">
    <ul class="yui-nav">
        <li><a href="#tab1"><em>Tab One Label</em></a></li>

        <li class="selected"><a href="#tab2"><em>Tab Two Label</em></a></li>
        <li><a href="#tab3"><em>Tab Three Label</em></a></li>
    </ul>           
    <div class="yui-content">
        <div id="tab1"><p>Tab One Content</p></div>
        <div id="tab2"><p>Tab Two Content</p></div>
        <div id="tab3"><p>Tab Three Content</p></div>

    </div>
</div>

<script>
(function() {
    var tabView = new YAHOO.widget.TabView('demo');
   
    var addTab = function() {
        var labelText = window.prompt('enter the tab label');
        var content = window.prompt('enter the tab content');
        if (labelText && content) {
            tabView.addTab( new YAHOO.widget.Tab({ label: labelText, content: content }) );
        }
    };

    var button = document.createElement('button');
    button.innerHTML = 'add tab';

    YAHOO.util.Event.on(button, 'click', addTab);
    tabView.appendChild(button);

    YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
})();
</script>

</body>
</html>

This works OK in a browser (including paremeter input) however it displays OK in as a custom view but the data input functionallity does not work.

Does anybody knows what is missing to make it work or if this is at all possible with current Alfresco Explorer?

Outcomes