Hyland Connect

mabayona · ‎08-26-2009

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?

mikeh · ‎08-26-2009

The treeview in Explorer uses an early version of YUI, so it might be clashing. That would be the first place to look.

Thanks,
Mike

mabayona · ‎08-27-2009

Well, after looking at incompatibilities, it seems that it works OK except that at the end of the interaction, the preview window gets updated/refreshed with the initial layout and all the dynamic changes in the interface and user interactions (e.g. the added tab disappears since it was not there initially) are therefore lost.

Does anybody know haw to avoid this refresh/reset of the preview?

Otherwise, the (ugly and not acceptable) alternative would be to update the preview definition in the repository.

Hyland Connect

Integrating YUI and preview in Explorer