The Tag Cloud Wigdet is used to create tag clouds within your non-Dekoh application. The widget uses Prototype library and implements DWR (Direct Web Remoting) to get data. Read more
here
to use the Tag Cloud widget with your non-Dekoh applications.
- Dialog and inline mode
- Return selected value in the text-field
- Different styles of tag cloud
Add this code to 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 src='/dekohportal/dwr/engine.js'></script>
<script src='/dekohportal/dwr/util.js'></script>
<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","tagCloud","tagCloudDialog.js")%>'>
</script>
<script type='text/javascript' src='<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "widget","tagCloud","tagcloud.js")%>'>
</script>
<script type='text/javascript' src='<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "widget","tagCloud","interface-dwr.js")%>'>
</script>
<script type="text/JavaScript" src="<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "widget","dialog","dialog.js")%>"></script>
The basic syntax to initialize the tag cloud widget is
<script type="text/javascript">
function openTagCloudTray(){
oTC_Dialog = new TC_Dialog('tc_tagContainer', 'chosenTags', 'edit', trayDatasource, 'OBJECT_NAME');
}
function trayDatasource(){
}
</script>
Include the following code where you want to invoke the File Chooser in page:
<input type=”text” size="30" id="chosenTags" name="chosenTags" value=""/>
<input type="button" value="Show Tagcloud" onclick="javascript: openTagCloudTray();"/>
Add this code to the head section of the page:
<script src='/dekohportal/dwr/engine.js'>
</script>
<script src='/dekohportal/dwr/util.js'>
</script>
<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","tagCloud","tagCloudDialog.js")%>'>
</script>
<script type='text/javascript' src='<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "widget","tagCloud","tagcloud.js")%>'>
</script>
<script type='text/javascript' src='<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "widget","tagCloud","interface-dwr.js")%>'>
</script>
The basic syntax to invoke the tag cloud in the page is:
<script type="text/javascript">
var pageDatasource = new dwrTagCloudDataSource("<url:tags tagName='#@@#'/>", 'DIO_ID');
var pageTagCloud = new oTagCloud('pageTagCloud', "tagContainer", pageDatasource, {mode:'view', minimalMode:'on', tagView:"view_cloud", tagsLimit:'All', dialogWin:false});
// for windows. Use fileseparator value ‘/’ for linux
</script>
Include the following code where you want to invoke the Tag Cloud in page:
<input type=”text” size="30" id="chosenTags" name="chosenTags" value=""/>
<input type="button" value="Show Tagcloud" onclick="javascript: openTagCloudTray();"/>
| Options | Since | Description | Default |
|---|
| tagCloundTargetDivId | V1.0 | Dialog Id | - |
| returnTxtFieldId | V1.0 | The textfield id where the selected values will be populated | - |
| cloudMode | V1.0 | If it’s a list or cloud mode | - |
| trayDatasource | V1.0 | Datasource | - |
| currentDigitalObjectName | V1.0 | Dio name | - |
| Options | Since | Description | Default |
|---|
| className | V1.0 | The style class | Dekoh |
| dialogTitle | V1.0 | The dialog title | - |
| topMessage | V1.0 | The message shown on the dialog | “Select file(s) to add/import' |
| fileSeperator | V1.0 | This value is to be initialized for different operating systems | “
' |
| width | V1.0 | Width of the dialog | 700 |
| height | V1.0 | Height of the dialog | 450 |
| minWidth | V1.0 | Minimum width | 400 |
| minHeight | V1.0 | Minimum height | 300 |
| xPos | V1.0 | Specify the x position of the dialog in the document | 0 |
| yPos | V1.0 | Specify the y position of the dialog in the document | 0 |
| minimizable | V1.0 | Works with resizable value set to ‘true’. The value defined for this is ‘true’ or ‘false’ depends on whether you want to make dialog minimized | False |
| maximizable | V1.0 | Works with resizable value set to ‘true’. The value defined for this is ‘true’ or ‘false’ depends on whether you want to make dialog maximized | False |
| isModal | V1.0 | Specify whether the dialog is modal or not | true |
| Options | Since | Description | Default |
|---|
| Id | V1.0 | Tagcloud Id | - |
| targetDivId | V1.0 | The target div where the tagcloud is going to get rendered | - |
| ds | V1.0 | Datasource | - |
| Options | Since | Description | Default |
|---|
| cloudtitle | V1.0 | - | null |
| mode | V1.0 | Start the tagcloud in ‘select’ or ‘edit’ mode | 'edit' |
| minimalMode | V1.0 | Show/hide toolbar and advanced controls | null |
| rankOn | V1.0 | display frequency in cloud | False |
| colorsOn | V1.0 | display colors in cloud | true |
| textSizeOn | V1.0 | display text sizes in cloud | true |
| tagView | V1.0 | 'list' or 'cloud' | cloud |
| contentdiv | V1.0 | ID of div holding the actual tags HTML | 'cloudContent' |
| sortOrder | V1.0 | order of the tags list: ORDER_ASC or ORDER_REVERSE | ORDER_ASC |
| tagSeparator | V1.0 | inserted between tags, … = elipsis | ‘, ’ |
| sortField | V1.0 | SORT_DEFAULT, SORT_FREQ, SORT_DATE, SORT_NAME | SORT_DEFAULT |
| tagsLimit | V1.0 | limits how many tags are displayed. 'All' displays all available tags | LABEL_ALL |
| dioId | V1.0 | Digital Object ID | - |
| urlBase | V1.0 | - | - |
| currusagefilter | V1.0 | filters the tags based on recency of usage. options are USG_MONTH, USG_WEEK, USG_24HOURS, USG_ALL | USG_ALL |
| moreOptions | V1.0 | the following are ignored if minimalMode is 'on'. advanced options drawer available | ‘on’ |
| sorterOn | V1.0 | show/hide Sort control | true |
| styleSwitcherOn | V1.0 | show/hide Style control | true |
| usageFilterOn | V1.0 | show/hide Usage filter control | true |
| tagLimiterOn | V1.0 | show/hide taglimiter control | true |
| noOfStyles | V1.0 | The style number | 6 |
| currentShowSort | V1.0 | sort the tags on the parameter | LABEL_MOST_USED |
| dialogWin | V1.0 | The tagcloud in the dialog mode or not | false |
| returnTxtFieldId | V1.0 | The text field where the selected values are going to get saved | - |
| tagCloudHeight | V1.0 | Tagcloud height | null |
| activeStyleSheet | V1.0 | - | 0 |
| tagLinkWindow | V1.0 | Specify a named window frame to open the links in a new page or same page | '_self' |
| Function | Parameters | Description |
|---|
| getTagCloudObj | - | Returns the selected tagcloud object |
| showProcessRunning | - | Shows the running status |
| closeDialogWindow | - | Close the dialog window if the tagcloud is initialized in the dialog mode |
| initAndViewTagCloud | - | Initialize the tagcloud |
| isMinimalMode | - | Return whether the tagcloud is running in the minimal mode |
| sortByName | Reverse
toggleText
listToSort | Sorting of tags by name |
| sortByFreq | reverse | Sorting of tags by frequency. Set the reverse value as true or false. |
| sortByDate | reverse | Sorting of tags by date. Set the reverse value as true or false. |
| toggleTagLimit | - | Set the tag limits to the predefined values as 25,50, 100 and all |
| toggleUsageFilter | - | Toggle the values to be shown along with the tag. |
| filterByUsage | filter | Set the value as USG_24HOURS, USG_WEEK, USG_MONTH, USG_ALL |
| toggleSorting | currSortField
isAscending | Toggle the displayed values Most used, least used, latest. isAscending is the Boolean whether the sorting is done in ascending or descending order. |
| toggleShowSorting | - | Toggle the tags sorting by from A to Z , Z to A |
| updateTagView | useFilter | Update the tag view after applying the user filters |
| setMinMaxTagFrequency | - | Set the minimum and maximum frequency |
| extractTopXTags | filterClick | Returns the tag when the filter is clicked |
| setTagFontSizes | - | Set the font size as same or variable based on frequency |
| refreshTagCloud | Id
bFilter | Refresh the tag cloud. The id is the id of the division where the tagcloud is rendered. If we're using a month/week filter, then use the alternate filtered tag array |
| refreshTagList | Id
bFilter | Refresh tag list. The id is the id of the division where the tagcloud is rendered. If we're using a month/week filter, then use the alternate filtered tag array |
| editAddTags | - | Edit and add tags |
| selectTags | - | Select the tags |
| editTags | strAction | Edit selected tags. Set, add,delete,rename & merge as action. |
| editMerge | - | Merge the selected tags |
| editRename | - | Rename the selected tags |
| editDelete | - | Delete the selected tags |
| getTagByName | tagName | Get the tag in the array by name |
| resizeTagContainer | - | Resize the tag container |
| initEditMode | - | Initialize the tagcloud in edit mode |
| endEditMode | - | End the tagcloud in edit mode |
| isDuplicate | selectedTags
currentTag | Check if the tag is duplicate. |
| addTag | tagsArray | add the tags as an array |
| getTag | idx | Get tag from array |
| getSortOrder | - | Get the sorting order |
| setSortOrder | order | Set the sorting order. if true set to ORDER_REVERSE, otherwise ORDER_ASC |
| getSortField | - | Get the sorting field |
| setSortField | field | Set the sorting field |
| getView | - | Get view of tagcloud |
| setView | view | Set the view of tagcloud. Set VIEW_CLOUD or VIEW_LIST |
| getStyleForRank | wt | Get style for ranking the tags |
| initTagCloud | data | Initialize the tag cloud with the data. |
| viewAsList | - | View the tagcloud as list |
| viewAsCloud | - | View the tagcloud as cloud |
| showColors | - | Show colors |
| hideColors | - | Hide colors |
| removeTextSizes | - | Remove the variable text sizes |
| applyTextSizes | - | Apply text sizes |
| setPrevStyleSheet | - | Set the previous style of tagcloud than the selected one |
| setNextStyleSheet | - | Set the next style of tagcloud than the selected one |
| setActiveStyleSheet | index | Set the style of tagcloud. Select values from 0 to 7 |
<init-param>
<param-name>config-tagcloud</param-name>
<param-value>widgets/tagcloud/dwr-tagcloud.xml</param-value>
</init-param>
Each application implements tag cloud differently.
Each class on which we execute methods, needs a <create ...> entry. There are several types of creator. The most common ones use either the 'new' keyword or the Spring framework. For more information, see the Creator documentation.
Each class on which we execute methods, needs a <create ...> entry. There are several types of creator. The most common ones use either the 'new' keyword or the Spring framework. For more information, see the Creator documentation.
| Method Name | Functionality |
|---|
| - | - |
We need to ensure that all the parameters can be converted. Many of the types provided by the JDK are enabled for you, but you need to give DWR permission to convert your own code. Generally this means that JavaBean parameters will need a <convert ...> entry.
Dekoh Portal Ver 0.4.2 or later.
