Overview   Seperator   Blog   Seperator   Wiki   Seperator   Forums   Seperator   
login   Seperator   signup   Seperator   Search   Seperator   Feeds   Seperator   Dekoh.Com

Table of Contents

Dekoh Widgets are Web GUI components that are part of the Dekoh platform and developed as independent components. These widgets can be used by you in your Dekoh applications that are hosted on Dekoh desktop.

The questions in this topic will help you use the widgets in your Dekoh applications, either as is or with small modifications to suit specific needs.

1. How do I use the JavaScript libraries?

Dekoh uses prototype, scriptaculous, & window JavaScript library as the base JavaScript library for all its JavaScript functions. To enable JavaScript in your web page, you must first add the following code snippet in the head section of the page 

<style type="text/css" title="currentStyle" media="screen">
    @import "<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "theme","app","css.jsp?externalApp=true")%>";
</style>
<script type="text/javascript" src="<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "common",null,"JSlibrary.jsp")%>"></script>

The JSlibrary.jsp includes builder.js, controls.js, debug.js, dragdrop.js, effects.js, extended_debug.js, prototype.js, scriptaculous.js, slider.js, window.js, and window_ext.js

To use individual JavaScript files from the list above, include the following code snippet in the head section of the web page 

<script type="text/javascript" src="<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "common","prototype","<javascript file>")%>"></script>

2. How do I include the Date Chooser widget in my web page?

To use the date chooser widget, include the JavaScript in the header 
<style type="text/css" title="currentStyle" media="screen">
    @import "<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "theme","app","css.jsp?externalApp=true")%>"/>";
</style>
<script type="text/javascript" src="<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "widget","datechooser","datechooser.js")%>"></script>

You must also add the input type, class, id etc. inside your JSP/HTML/PHP page. An example code is given below: 

<input type="text" class="w8em format-m-d-y highlight-days-67" name="addedFromDate" id="addedFromDate" value="mm/dd/yyyy" size="14"/>

3. How do I use the Dialog widget in my web page?

To use the dialog widget in your web page, include the JavaScript inside the head section of you page 
<style type="text/css" title="currentStyle" media="screen">
    @import "<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "theme","app","css.jsp?externalApp=true")%>"/>";
</style>
<script type="text/javascript" src="<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "common",null,"JSlibrary.jsp")%>"></script>
<script type="text/javascript" src="<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "widget","dialog","dialog.js")%>"></script>

You will need to initialize the Dialog widget. Given below is a basic sample code, which will help initialize the widget. 

Function openDialog(){
var idailogContent=”Adding the content here <b>This can even take the html code</b>”; 
var idialog = new dekohDialog(‘dialog_ID’,{title:" My Dialog",height:200,width:400, content: idailogContent,topMessage:’This is sample dialog’});
}
You must also add the input type, class, id etc. inside your JSP/HTML/PHP page. An example code is given below: 
<input type=”button” value=”Open Dialog” onclick=”javascript:openDialog();”/>

4. How do I change the look and feel of my Dialog Widget?

With some simple JavaScript changes and a little CSS styling, you can change the look and feel of your Dialog widget. To create a new theme for your prototype window, read http://prototype-window.xilinus.com/themes.html.

You will also need to describe the window's look and feel in a CSS file and reference the new className (the default className is specified as ‘dekoh’) as an optional parameter in the JavaScript file. 

Function openDialog(){
var idailogContent=”Adding the content here <b>This can even take the html code</b>”; 
var idialog = new dekohDialog(‘dialog_ID’,{className:”YOUR_CLASS”,title:" My Dialog",height:200,width:400, content: idailogContent,topMessage:’This is sample dialog’});
}

5. How do I include the Inline Tray widget in my web page?

To include the Inline Tray widget in your web page, import the following JavaScript code in the head section of the page 
<style type="text/css" title="currentStyle" media="screen">
    @import "<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "theme","app","css.jsp?extrenalApp=true")%>"/>";
</style>
<script type="text/javascript" src="<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "common",null,"JSlibrary.jsp")%>"></script>
<script type="text/javascript" src="<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "theme","app","css.jsp?externalApp=true")%>"></script>

Javascript code

You will need to initialize the Dialog widget. Given below is a basic sample code, which will help initialize the widget. 
Function openInlineTray(elementId){
var inlineTrayContent=”Here is the content”;
var oinlineTray = new inlineTray('InlineTray_Id', {title:'My Sample Inline Tray',content:inlineTrayContent, clickedElementId:elementId});
}

HTML Code

You must also add the input type, class, id etc. inside your JSP/HTML/PHP page. An example code is given below: 
<div style=”border:1px #333 solid;padding:10px;background:#eee;cursor:pointer;” onclick=”openInlineTray(this);”>Click to Open inline tray</div>

6. How do I create a Menu widget in my web page?

To create a Menu widget in your web page, import the following JavaScript code in the head section of the page 
<style type="text/css" title="currentStyle" media="screen">
    @import "<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "theme","app","css.jsp?extrenalApp=true")%>"/>";
</style>
<script type= "text/javascript" src="<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "common",null,"JSlibrary.jsp")%>"></script>
<script type= "text/javascript" src="<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "widget","menu","dekohMenu.js")%>"></script>

Javascript code

You will need to initialize the Dialog widget. Given below is a basic sample code, which will help initialize the widget. 
function createMenu(element)
{
    var menuData = new Array();
    var appMenu = new dekohMenu(element, 'appMenu');
    var dekohMenuItemList = new Array();
    dekohMenuItemList[dekohMenuItemList.length]= new dekohMenuItem('Sample_ID_1', 'Sample Title 1', '/dekohportal/themes/app/images/file-text.png', 'http://www.dekoh.com');
dekohMenuItemList[dekohMenuItemList.length]= new dekohMenuItem('Sample_ID_2', 'Sample Title 2', '/dekohportal/themes/app/images/file-text.png', 'http://www.dekoh.com');
dekohMenuItemList[dekohMenuItemList.length]= new dekohMenuItem('Sample_ID_3', 'Sample Title 3', '/dekohportal/themes/app/images/file-text.png', 'http://www.dekoh.com');


for(var i =0; i < dekohMenuItemList.length; i ++){
        appMenu.addItem(dekohMenuItemList[i], dekohMenuItemList[i].parentId)
}
    appMenu.displayMenu();
}

HTML Code

You must also add the input type, class, id etc. inside your JSP/HTML/PHP page. An example code is given below: 
<div style=”border:1px #333 solid;padding:10px;background:#eee;cursor:pointer;” onclick='createMenu(this);'>Create Menu </div>

7. How do I setup the Message Tray widget in my web page?

To set the Menu widget in your web page, import the following JavaScript code in the head section of the page 
<style type="text/css" title="currentStyle" media="screen">
    @import "<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "theme","app","css.jsp?externalApp=true")%>"/>";
</style>
<script type="text/javascript" src="<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "common",null,"JSlibrary.jsp")%>"></script>
<script type="text/javascript" src="<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "widget","messageTray","messageTray.js")%>"></script>

Javascript code

You will need to initialize the Dialog widget. Given below is a basic sample code, which will help initialize the widget. 
<script type="text/javascript">
        //<![CDATA[
var msgBlock = new messageTray('displayMessage');
        //]]>
</script>

Note: Place the JavaScript code after the div element in your web page so that this element gets registered in the dom.

HTML Code

You must also add the input type, class, id etc. inside your JSP/HTML/PHP page. An example code is given below: 
<div id='displayMessage'></div>

8. How do I setup the RSS Feed for the Dekoh network activity on my web page?

To set the RSS Feed for Dekoh network activity in your web page, import the following JavaScript code in the head section of the page 
<style type="text/css" title="currentStyle" media="screen">
    @import "<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "theme","app","css.jsp?externalApp=true")%>"/>";
</style>
<script type="text/javascript" src="<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "common",null,"JSlibrary.jsp")%>"></script>
<script type="text/javascript" src="<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "widget","rssReader","sharesRssReader.js")%>"></script>

Javascript code

You will need to initialize the widget. Given below is a basic sample code, which will help initialize the widget. 
<script type="text/javascript">
        //<![CDATA[
var remoteRssFeed = new localRemoteRssReader('remoteRssFeed', {title:"REMOTE SHARES FOR ME", targetElementId:'remoteRssNews', countToShow:5, dekohId:'USER_ID'}, {callback:updateFunction});
                    remoteRssFeed.getAndPopulateRssFeeds();
        //]]>
</script>

Note: Place the JavaScript code after the div element in your web page so that this element gets registered in the dom.

HTML Code

You must also add the input type, class, id etc. inside your JSP/HTML/PHP page. An example code is given below: 
<div id=' remoteRssNews '></div>

9. How do I setup the RSS Feed for the Dekoh Desktop activity on my web page?

To set the RSS Feed for Dekoh Desktop activity (Local RSS Reader) in your web page, import the following JavaScript code in the head section of the page 
<style type="text/css" title="currentStyle" media="screen">
    @import "<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "theme","app","css.jsp?externalApp=true")%>"/>";
</style>
<script type="text/javascript" src="<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "common",null,"JSlibrary.jsp")%>"></script>
<script type="text/javascript" src="<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "widget","rssReader","sharesRssReader.js")%>"></script>

Javascript code

You will need to initialize the widget. Given below is a basic sample code, which will help initialize the widget. 
<script type="text/javascript">
        //<![CDATA[
var localRssFeed = new localRemoteRssReader('localRssFeed', {title:"Local Desktop Activity", targetElementId:'localRssNews', countToShow:5, dekohId:'USER_ID'}, {callback:updateFunction});
                    localRssFeed.getAndPopulateRssFeeds();
        //]]>
</script>

Note: Place the JavaScript code after the div element in your web page so that this element gets registered in the dom.

HTML Code

You must also add the input type, class, id etc. inside your JSP/HTML/PHP page. An example code is given below: 
<div id=' localRssNews '></div>

10. How do I setup the RSS Feed for an external URL (for example, your blog) on my web page?

To set the RSS Feed for for an external URL on your web page, import the following JavaScript code in the head section of the page 
<style type="text/css" title="currentStyle" media="screen">
    @import "<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "theme","app","css.jsp?externalApp=true")%>"/>";
</style>
<script type="text/javascript" src="<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "common",null,"JSlibrary.jsp")%>"></script>
<script type="text/javascript" src="<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "common","rssReader","rssReader.js")%>"></script>

Javascript code

You will need to initialize the widget. Given below is a basic sample code, which will help initialize the widget. 
<script type="text/javascript">
        //<![CDATA[
var myRssFeed = new rssReader(‘myrssfeed’,{url: http://www.dekoh.com/blog/news/feed/entries/rss’, refreshTime:’5’, height:200,width:200, containerId :’myblogRSSFeed’})
        //]]>
</script>

Note: Place the JavaScript code after the div element in your web page so that this element gets registered in the dom.

HTML Code

You must also add the input type, class, id etc. inside your JSP/HTML/PHP page. An example code is given below: 
<div id=' myblogRSSFeed '></div>

11. How do I use the Selection Tray widget in my web page?

To use the Selection Tray widget in your web page, include the JavaScript inside the head section of you page 
<style type="text/css" title="currentStyle" media="screen">
    @import "<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "theme","app","css.jsp?externalApp=true")%>"/>";
</style>
<script type="text/javascript" src="<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "common",null,"JSlibrary.jsp")%>"></script>
<script type="text/javascript" src="<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "widget","selectionTray","selectionTray.js")%>"></script>

You will need to initialize the Dialog widget. Given below is a basic sample code, which will help initialize the widget. 

<script type="text/javascript">
    //<![CDATA[
// create the unselected object array
    unselectedObjArray[unselectedObjArray.length] =
    new selTrayObj('OBJECT_ID_', true, 'OBJECT_URL_", OBJECT_NAME_", 'OBJECT_CLICK_URL_', 'OBJECT_TYPE_(collection or simple object)');

//initialize the selection tray where the objects are going to get collected
var selTray = new SelectionTray('selTray', {selectMode:'dnd',actionMode:'edit', showSelectedItemUrl:'URL_TOSHOW_COLLECTED_OBJECT'});

//initialize the object tray
var objTray = new ObjectsTray('objTray', {selectionMode:'dnd',actionMode:'edit', showItemsOnPage:'TOTAL_ITEMS_TOSHOW',      currentItemsPage:'CURRENT_PAGE',totalItems:'TOTAL_ITEMS',droppableSection:'dekoh_SelectedObjTrayDiv', showMode:'thumbnail', nextPageUrl:'NEXT_PAGE_URL_',prevPageUrl:'PREV_PAGE_URL'});
 //]]>
</script>

Note: Place the JavaScript code after the div element in your web page so that this element gets registered in the dom.

You must also add the input type, class, id etc. inside your JSP/HTML/PHP page. An example code is given below: 

<table>
<tr>
<td><div id=' dekoh_selectedObjectTray '></div></td>
<td>
 <div id=" dekoh_viewObjectTray ">
<!—setting the list header- -- >
<div id="dekoh_viewObjectTray_ListHeader" style="display:none;">
<table>
        <tr>
            <th width="40"> &nbsp;</th>
            <th width="200"> Title</th>
            <th> Description</th>
        </tr>
    </table>
</div>

<div class="dekoh_selectableObjects" id="OBJECT_ID_">
<!—setting the thumbnail section- -- >

<div class="dekoh_OL_ObjthumbnailView" style="display:none;" id="coll_thumb_OBJECT_ID_">
<!—put ur html code here to show thumbnail
<div style=”width:100px;height:100px;background:#eee;border:1px #000 solid;”></div>
</div>
<!—setting the list section- -- >
<div class="dekoh_OL_ObjListView" style="display:none;" id="coll_list__OBJECT_ID_">
<!—put ur html code here to show list
<table>
        <tr>
            <td width="40"> &nbsp;</th>
            <td width="200"> Title of OBJECT_ID </th>
            <td> Description of OBJECT_ID </th>
        </tr>
    </table>

</div>

</div>

</div>

</td>
</tr>
</table>

12. How do I include the Template Chooser widget in my web page?

To use the template chooser widget, include the JavaScript in the header 
<style type="text/css" title="currentStyle" media="screen">
    @import "<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "theme","app","css.jsp?externalApp=true")%>"/>";
</style>
<script type="text/javascript" src="<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "common",null,"JSlibrary.jsp")%>"></script>
<script type="text/javascript" src="<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "widget","templateChooser","templateChooser.js")%>"></script>

You must also add the input type, class, id etc. inside your JSP/HTML/PHP page. An example code is given below: 

<input type=”button” value=”Change Template” onclick=” changeTemplate('currentTemplate')”/>

Note: The template chooser widget will work only if you have a template implementation in your application.

13. How do I include the Update Chooser widget in my web page?

To use the update chooser widget, include the JavaScript in the header 
<style type="text/css" title="currentStyle" media="screen">
    @import "<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "theme","app","css.jsp?externalApp=true")%>"/>";
</style>
<script type="text/javascript" src="<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "common",null,"JSlibrary.jsp")%>"></script>
<script type="text/javascript" src="<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "widget","updateChooser","updateChooser.js")%>"></script>

You must also add the input type, class, id etc. inside your JSP/HTML/PHP page. An example code is given below: 

<input type=”button” value=”Find Updates” onclick="new UpdateChooser();"/>