Developer

You are not logged in. Log In or Sign Up

Home

Documentation

Examples

Discussion Board

Members

Announcements

Visit Flux.com

Widget Developer Kit Samples

These Widget Developer Kit examples demonstrate the use of custom markup and custom java script logic to create your own very customized widgets. It is a good idea to use these as a starting point when trying to customize widgets as they demonstrate the steps needed to take a default widget and through WDK customization create very specific UI or functionality to suit your needs.

Thumbs Up/Down Widget
Simple Rating Widget

Thumbs Up/Down Widget

Click here to download source files

Note - ensure to specify the correct Community UCID, Access Key, Permalink/URI, Markup URL and Javascript URL in the Widget Code

WIDGET CODE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
</head>

<body>
<script src="http://widgets.flux.com/-/Runtime.js" type="text/javascript"></script>
<script src="http://widgets.flux.com/-/Context.js?communityUcid=$COMMUNITY UCID GOES HERE$" type="text/javascript"></script>
<script type="text/javascript">
	Flux.Utils.WidgetsLoader.createWidget(
		'ContentAction2',
		{accessKey: '$ACCESS KEY GOES HERE$',uri: '$CONTENT PERMALINK/URI GOES HERE$',showAddToMyProfileButton: true,showCommentCount: true,hideCommentText: false,showRating: true,showFlagging: false,permalinkUrl: '',showPermalink: true
		, customize: {markupUrl: '$MARKUP URL GOES HERE$', scriptUrl: 'SCRIPT URL GOES HERE$'}}
	);
</script>
</body>
</html>

CUSTOM MARKUP:

<style>

body {
	background: #FFFFFF none repeat scroll 0%;
	color: #191919;
	font-family: Verdana,sans-serif;
	font-size: small;
	font-type: normal;
	margin: 0pt;
	padding: 0pt;
}

#wrap ol.slat li span.comments, span.comments {
	background: transparent url(icon-metacom.gif) no-repeat scroll 0pt 2px;
	margin-left: 5px;
	padding-left: 14px;
}

.info-title {
	color: #999999;
	display: block;
	font-size: 73%;
	font-weight: normal;
	margin: 0pt 0pt 4px;
	padding: 0pt;
}

.info-title em {
	color: #191919;
	font-style: normal;
	font-weight: bold;
}

#wrap ol.slat li span.vote-down, span.vote-down {
	background: transparent url(icon-voted.gif) no-repeat scroll 0pt 2px;
	color: #999999;
	margin-left: 5px;
	padding-left: 14px;
}

#wrap ol.slat li span.vote-down, span.vote-up {
	background: transparent url(icon-voteu.gif) no-repeat scroll 0pt 2px;
	color: #999999;
	margin-left: 5px;
	padding-left: 14px;
}

ul.rateit {
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.rateit li {
	float: left;
	margin: 0 8px 0 0;
	padding: 0;
	text-indent: -9999px;
}

ul.rateit li.rate-down a {
	float: left;
	display: block;
	width: 37px;
	height: 29px;
	outline: none;
	background: url(btn-ratedown.gif) no-repeat 0 0;
}

ul.rateit li.rate-up a {
	display: block;
	width: 37px;
	height: 29px;
	outline: none;
	background: url(btn-rateup.gif) no-repeat 0 0;
}

ul.rateit li a.voted-n {
	outline: none;
	background-position: 0 -58px;
}

ul.rateit li a.voted-y {
	outline: none;
	background-position: 0 -87px;
}

ul.rateit li a:hover {
	background-position: 0 -29px;
}

ul.rateit li a:active {
	outline: none;
	background-position: 0 -87px;
}

</style>

<h3 class="info-title"><em>Comments</em> <span class="comments"><a id="commentCount" href="#postComment">0</a></span></h3>
<h3 class="info-title last"><em>Rating</em> <span id="ratingInformation"></span></h3>
<h3 class="info-title"><em id="ratingTitle"></em></h3>
<ul class="rateit">
<li class="rate-up"><a id="rateUpButton" href="#">Thumbs up</a></li>
<li class="rate-down"><a id="rateDownButton" href="#">Thumbs down</a></li>
</ul>

CUSTOM JAVA SCRIPT LOGIC:

Flux.Widgets.ContentAction2.prototype._initialize = function(params) {
	this._requestInfo = this.createRequestInfo({contentUri: params.uri});
	this._commentCount = 0;

	this._contentType = 'Clip';
	if (params.contentType) {
		this._contentType = params.contentType;
	}
	
	this.render2();
	this.applyStyle();

	$addHandler(this.$get('rateUpButton'), 'click', Function.createDelegate(this, this._rateUpClickHandler));
	$addHandler(this.$get('rateDownButton'), 'click', Function.createDelegate(this, this._rateDownClickHandler));
	
	this._contentUri = params.uri;
	
	this.dataBind();
	
	Flux.EventManager.registerWidget(this);
}

Flux.Widgets.ContentAction2.prototype.dataBind = function(reason) {
	this.getJsonData(this._getDataUrl(), Function.createDelegate(this, this._onDataLoad));
}

Flux.Widgets.ContentAction2.prototype._onDataLoad= function(result) {
	this._renderData(result.CommentCount, result.OverallThumbRating, result.CurrentUserVote);
	this._commentCount = result.CommentCount;
}

Flux.Widgets.ContentAction2.prototype._renderData = function(commentCount, rating, currentUserVote) {
	this.$get('commentCount').innerHTML = commentCount;

	var ratingInformation = this.$get('ratingInformation');
	Sys.UI.DomElement.removeCssClass(ratingInformation, 'vote-up');
	Sys.UI.DomElement.removeCssClass(ratingInformation, 'vote-down');
	
	if (rating >= 0) {
		Sys.UI.DomElement.addCssClass(ratingInformation, 'vote-up');
	} else {
		Sys.UI.DomElement.addCssClass(ratingInformation, 'vote-down');
	}
	ratingInformation.innerHTML = String.format('{0}%', Math.abs(rating));
	
	this._setButtonsState(currentUserVote);
}

Flux.Widgets.ContentAction2.prototype._setButtonsState = function(rating) {
	var rateUpButton =  this.$get('rateUpButton');
	var rateDownButton =  this.$get('rateDownButton');
	
	Sys.UI.DomElement.removeCssClass(rateUpButton, 'voted-y');
	Sys.UI.DomElement.removeCssClass(rateUpButton, 'voted-n');
	Sys.UI.DomElement.removeCssClass(rateDownButton, 'voted-y');
	Sys.UI.DomElement.removeCssClass(rateDownButton, 'voted-n');
	
	var title;
	if (rating != 0) {
		title = 'Your rating';
		if (rating > 0) {
			Sys.UI.DomElement.addCssClass(rateUpButton, 'voted-y');
			Sys.UI.DomElement.addCssClass(rateDownButton, 'voted-n');
		} else {
			Sys.UI.DomElement.addCssClass(rateUpButton, 'voted-n');
			Sys.UI.DomElement.addCssClass(rateDownButton, 'voted-y');
		}
	} else {
		title = String.format('Rate this {0}', this._contentType);
	}
	this.$get('ratingTitle').innerHTML = title;
}

Flux.Widgets.ContentAction2.prototype._setContentRating = function(rating) {
	Flux.API.Services.Rating.SetContentRating(this._requestInfo,
		rating, Flux.API.RatingMode.Thumb, this._setContentRatingHandler, null, this);
		
	Flux.DataAccess.CookieHelper.set('preventCache_rating', (new Date()).getTime(), 10);

	this._setButtonsState(rating);
}

Flux.Widgets.ContentAction2.prototype._setContentRatingHandler = function(result, instance, methodName) {
	if (result.StatusCode == Flux.API.StatusCode.Ok) {
		instance.onAfterAction('rating');
		
		var rating = 0;
		var votesUp = result.Value;
		var votesDown = result.Count - result.Value;
		if (votesUp + votesDown) {
			var rating =  Math.max(votesUp, votesDown) /
				(votesUp + votesDown) * 100;
			if (votesUp < votesDown) {
				rating *= -1;
			}
		}

		instance._renderData(instance._commentCount, Math.floor(rating), result.CurrentUserVote);
	} else {
		Flux.Debug.traceServiceError('Rating', methodName, result);
	}
}

Flux.Widgets.ContentAction2.prototype._rateUpClickHandler = function(e) {
	if (this.onBeforeAction()) {
		this._setContentRating(1);
	}
	e.preventDefault();		
}

Flux.Widgets.ContentAction2.prototype._rateDownClickHandler = function(e) {
	if (this.onBeforeAction()) {
		this._setContentRating(-1);
	}
	e.preventDefault();		
}

Flux.Widgets.ContentAction2.prototype._getDataUrl = function() {
	// .replace call is made to prevent MTV contentdetail page to retrieve data via AKAMAI and instead make it get data directly from Flux daapi server
	if (Flux.Context.isUserAuthenticated())
		return Flux.DataAccess.UrlBuilder.buildContentUsageUrl(this._contentUri, 'rating').replace(/daapiak-mtv/,  'daapi');
	else
		return Flux.DataAccess.UrlBuilder.buildContentUsageUrl(this._contentUri, 'rating');
}

TOP

Simple Rating Widget

Click here to download source files

Note - ensure to specify the correct Community UCID, Access Key, Permalink/URI, Markup URL and Javascript URL in the Widget Code

WIDGET CODE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>

<body>
<script src="http://widgets.flux.com/-/Runtime.js" type="text/javascript"></script>
<script src="http://widgets.flux.com/-/Context.js?communityUcid=$COMMUNITY UCID GOES HERE" type="text/javascript"></script>
<script type="text/javascript">
	Flux.Utils.WidgetsLoader.createWidget(
		'ContentAction2',
		{accessKey: '$ACCESS KEY GOES HERE$',uri: '$CONTENT PERMALINK/URI GOES HERE',showAddToMyProfileButton: false,showCommentCount: false,hideCommentText: false,showRating: true,showFlagging: false,showPermalink: false
		, customize: {markupUrl: '$MARKUP URL GOES HERE$', scriptUrl: '$SCRIPT URL GOES HERE$'}}
	);
</script>
</body>
</html>

CUSTOM MARKUP:

<style type="text/css">
	.Flux .contentAction2 {
		font-size: 12px;
		font-family: Tahoma;
	}

	.Flux .contentAction2 .dropDown {
		border: 1px #cccccc solid;
		background-color: #94a1af;
	}

	.Flux .contentAction2 .dropDown a.listItem:hover {
		background-color: #999999;
	}

	.Flux .contentAction2 .dropDown .listItem {
		display: block;
		text-decoration: none;
		padding: 2px;
		background-color: Transparent;
	}

	.Flux .contentAction2 .thumbIco,
	.Flux .contentAction2 .disabled .thumbIco,
	.Flux .contentAction2 a.fShareLink,
	.Flux .contentAction2 a.addToFavorites,
	.Flux .contentAction2 .flagging {
		background: transparent url('http://staticll.fluxstatic.com/-/Clients/Common/Img/contentAction_xy_0x40.gif') no-repeat 0px 0px;
		height: 16px;
		padding-left: 24px;
		line-height: 16px;
		display: block;
		vertical-align: middle;
		cursor: pointer;
		text-decoration: none;
	}

	.Flux .contentAction2 a.votes {
		display: block;
		padding: 0px;
		margin: 0px;
	}

	.Flux .contentAction2 .thumbIco {
		background-position: left -160px;
	}

	.Flux .contentAction2 a:hover .thumbIco {
		background-position: left -200px;
	}


	.Flux .contentAction2 a:hover .disabled .thumbIco,
	.Flux .contentAction2 .disabled .thumbIco {
		background-position: left -240px;
		cursor: default;
	}

	.Flux .contentAction2 a.fShareLink {
		padding-left: 50px;
		text-decoration: none;
	}

	.Flux .contentAction2 a.fShareLink:hover {
		background-position: 0px -40px;
	}


	.Flux .contentAction2 a.addToFavorites {
		background-position:  0px -80px;
	}


	.Flux .contentAction2 a.addToFavorites:hover {
		background-position: 0px -120px;
	}

	.Flux .contentAction2 .flagging {
		background-position: 0px -280px;
		position: static;
	}

	.Flux .contentAction2 a.flagging:hover {
		background-position: 0px -320px;
		position: relative;
	}

	.Flux .contentAction2 .flagging .dropDown {
		display: none;
	}

	.Flux .contentAction2 a.flagging:hover .dropDown {
		display: block;
		position: absolute;
		left: 0px;
		top: 100%;
		padding: 3px;
		width: 54px;
	}

	.Flux .contentAction2 a.flagging:hover .listItem {
		display: block;
		text-decoration: none;
	}

	.Flux .contentAction2 a.flagging:hover .itemSeparator {
		background: transparent url('http://staticll.fluxstatic.com/-/Clients/Common/Img/contentAction_xy_0x40.gif') no-repeat 0px -360px;
		height: 1px;
		line-height: 1px;
		font-size: 0px;
		padding: 0px;
		margin: 0px;
		display: block;
	}

	.Flux .contentAction2 .tooltip {
		background-color:infobackground;
		border:1px solid gray;
		color:#333333;
		cursor:pointer;
		line-height:12px;
		padding:2px;
		text-decoration:none;
		white-space:nowrap;
		display:none;
	}

	.Flux .contentAction2 a.nonSigned:hover .tooltip {
		color:Black;
		display:block;
		left:0px;
		position:absolute;
		top:100%;
	}
	
	.Flux .contentAction2 .commentCount {
		text-decoration: none;
	}

	.Flux .contentAction2 .invisible {
		display: none;
	}
</style>
<table cellpadding="0" cellspacing="0" border="0" class="contentAction2">
	<tr>
		<td>
			<div id="fShare" class="invisible">
				<a href="#" onclick="return false;" class="fShareLink">Share</a>
			</div>
		</td>
		<td id="addToMyProfileContainer" class="invisible">
			<a id="addToMyProfileButton" href="#" class="addToFavorites">Favorites</a>
			{addToMyProfileConfirm}Added!{/addToMyProfileConfirm}
		</td>
		<td>
			<div id="commentCount" class="invisible">
				<a class="commentCount" id="commentsLink" href="#"></a>
			</div>
		</td>
		<td>
			<div id="voteContainer" class="invisible">
				
				
				
				<a href="#" style="color:blue;" id="rateButton">  
					<span style="color:blue;" id="voteCount">   
						{item_rated}<b>{THUMBS_UP_COUNT}</b> Thumbs up{/item_rated}
						{item_default}Click to Rate{/item_default}
						{item_signup}Sign in to rate{/item_signup}
						{item_thanks}Thanks for rating{/item_thanks}
					</span>
				</a> 
				
				
				<!--<a id="thumbUpButton" href="#" class="votes" title="Vote">
					<span id="disabled">
						<span class="thumbIco">
							<span id="voteCount"></span><span> Votes</span>
						</span>
					</span>
				</a>-->
			</div>
		</td>
		<td><a class="invisible" id="permalink" href="{PERMALINK_URL}">Permalink</a></td>
		<td>
			<div id="flaggingHolder" class="invisible">
				<a id="flaggingButton" class="flagging"  href="#" onmouseover1="$get("{0}_dropdown").style.display='';" onmouseout1="$get("{0}_dropdown").style.display='none';">
					<span id="flagConfirm" class="invisible">Flagged...</span>
					<span id="flagButton">Flag</span>
					<span id="flaggingDropDown" class="dropDown">
						<span id="setAdultFlag" class="listItem">Adult</span>
						<span class="itemSeparator"></span>
						<span id="setHateFlag" class="listItem">Hate</span>
						<span class="itemSeparator"></span>
						<span id="setSpamFlag" class="listItem">Spam</span>
						<span class="itemSeparator"></span>
						<span id="setOtherFlag" class="listItem">Other</span>
					</span>
				</a>
			</div>
		</td>
	</tr>
</table>

CUSTOM JAVA SCRIPT LOGIC:

Flux.Widgets.ContentAction2.prototype._renderRating = function() {
	var container = this.$get('voteCount');
	var template = '';
	
	if (this._hover) {
		if (Flux.Context.isUserAuthenticated()) {
			if (this._isUserVoted) {
				template = this.getTemplateItem('item_thanks');
			} else {
				template = this.getTemplateItem('item_default');
			}
		} else {
			template = this.getTemplateItem('item_signup');
		}
	} else {
		if (this._gainRatingCount > 0) {
			template = this.getTemplateItem('item_rated').replace(/\{THUMBS_UP_COUNT\}/g, this._gainRatingCount);
		} else {
			template = this.getTemplateItem('item_default');
		}
	}

	container.innerHTML = template;
}

Flux.Widgets.ContentAction2.prototype._ratingInitialize = function(params) {
	this._thumbUpButton = this.$get('rateButton');
	this.addClickHandler(this._thumbUpButton, this.thumbUpClickHandler);

	$addHandler(this._thumbUpButton, 'mouseover', Function.createDelegate(
		{instance: this, hover: true}, this._hoverHandler));
	$addHandler(this._thumbUpButton, 'mouseout', Function.createDelegate(
		{instance: this, hover: false}, this._hoverHandler));
}

Flux.Widgets.ContentAction2.prototype._hoverHandler = function(e) {
	this.instance._hover = this.hover;
	this.instance._renderRating();
	e.preventDefault();
}

Flux.Widgets.ContentAction2.prototype._getContentRatingHandler = function(result) {
	this._gainRatingCount = result.GainRatingCount;
	this._renderRating();
	
	if (Flux.Context.isUserAuthenticated()) {
		this.setVotingState(true);
	}
}

Flux.Widgets.ContentAction2.prototype.thumbUpClickHandler = function(e) {
	if (!Flux.Context.isUserAuthenticated()) {
		Flux.Context.redirectToSignInPage();
	}
	
	if (this._userCanVote) {
		Flux.API.Services.Rating.SetContentRating(this.createRequestInfo({contentUri: this._contentUri}),
			1, Flux.API.RatingMode.Gain, Function.createDelegate(this, function(result) {
				if (result.StatusCode == Flux.API.StatusCode.Ok) {
					if (result.CurrentUserVote == 1) {
						this._isUserVoted = true;
					}
					this._userHasVoted = true;
					this.onAfterAction();
				}
			}));
			
		this.setVotingState(false);
	}
	e.preventDefault();
}

TOP