jQuery UI

The jQuery UI plugin provides some useful widgets and effects to use in your jQuery based scripts. It also offers an advanced theme framework, so you don’t have to write all the css by yourself. You can use one of the included theme’s or roll your own with the ThemeRoller.

I’ve decided to use the UI plugin for tree things in my web part:

• Datepicker widget to specify the orderdate
• Dialog widget to show confirmation dialogs, edit forms and validation messages
• Highlighting effect to focus the users attention to changing data, such as the shoppingcart

Datepicker

The datepicker enhances a standard text input box with a datapicker that slides out when the textbox receives focus. It contains different options for specifying the allowed dates, year/month selection and more. When it’s shown it will look like this:

Linking it to your input box is very simple. I use the following code:

$("#bpvorderdate").datepicker({
showOn: 'button',
minDate: +1, dateFormat: 'dd/mm/yy',
buttonImage: '/_layouts/images/calendar.gif',
buttonImageOnly: true
});

In this case, the user has to press a button (in this case an imagebutton) to open the datepicker.

Dialogs

Dialogs are a very useful way to give feedback to the user or asking for confirmation. In my web part I want to show a confirmation dialog when a user presses the delete icon next to a product in the shoppingcart or the “clear shoppingcart” button. The user will be presented with the following dialog:

Showing this is very easy. First we create a function that is called when the page is initialized:

function initializeDeleteItemDialog() {
var doOk= function() {
var paramsdata = {
"productId" : $("#bpvremoveitemid").val()
}
$.ajax({
type: "POST", url: "/_layouts/intranet2009/bpvshoppingcart.asmx/DeleteItem",
data: JSON.stringify(paramsdata),
contentType: "application/json;charset=utf-8",
dataType: "json",
success:rendershoppingcart,
error: showError
});

$("#bpvremoveitemdialog").dialog("close");
}
var doCancel = function()
{
$("#bpvremoveitemdialog").dialog("close");
}
var dialogOpts = {
modal: true,
buttons: {"Bewaren": doCancel, "Verwijderen": doOk},
autoOpen: false
}
$("#bpvremoveitemdialog").dialog(dialogOpts);
}

We first specify the code to execute when the user presses the Ok button. In this case we’ll call the DeleteItem method of the shoppingcart web service and then close the dialog. The Cancel button will close the dialog straight away. In the dialog options we specify the buttons with their callback. Then we hook up the dialog to the html element we want to show. The html is written out in the Render method of the web part:

writer.WriteLine(“<div id=\”bpvremoveitemdialog\” title=\”Product verwijderen?\”>”);
writer.WriteLine(“Weet u zeker dat u dit product uit uw winkelwagen wilt verwijderen?”);
writer.WriteLine(“<input type=\”hidden\” id=\”bpvremoveitemid\”/>”);
writer.WriteLine(“</div>”);

To open the dialog we just have to call the dialog method again with “open” as parameter:

function removeProduct(element) {
$("#bpvremoveitemid").val($(element).attr("productid") );
$("#bpvremoveitemdialog").dialog("open");
}

Validation

Validation of your inputs is supposed to be really easy with the validation plugin. Unfortunately this doesn’t count when you combine it with ASP.Net Webforms. With the validation plugin you attach the validation to a form within your html. Because ASP.Net Webforms uses one form tag for the entire page, this doesn’t allow you to set validation to a group of elements that would normally be contained within their own form tag. The solution I came up with for now only validates 1 element at a time.
If you now of a way to assign one validation and remove it again before assigning a new validation, let me know.

First we hook up all the validations we want on the form and we specify a custom validation
rule, called dutchDate:

$.validator.addMethod(
"dutchDate", function(value,element)
{ return value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/);},
"Voer een datum in van het formaat dd/mm/yyyy" );
$("form").validate({
onsubmit: false,
onfocusout: false,
onkeyup: false,
onclick: false,
showErrors: showValidationError,
rules: {
bpvproductamount: {
required: true,
number: true
},
bpvproductid: {
required: true
},
bpvorderdate: {
required: true,
dutchDate: true
}
},
messages: {
bpvproductamount: {
required: "Aantal is een verplicht veld",
number: "Aantal moet een getal zijn"
},
bpvproductid: {
required: "U heeft geen product geselecteerd" },
bpvorderdate: {
required: "Bezorg-/ophaaldatum is een verplicht veld",
dutchDate: "Bezorg-/ophaaldatum moet in het formaat dd/mm/yyyy zijn"
}
}
});

I only want the validation to occur when I call it on specific elements from code, so we specify false on every event it normally triggers on. When there are errors,  I want to call a showValidationError function that shows the errors in a dialog box. Then we specify the rules and the messages we want to show when the rule isn’t matched. “bpvproductamount” equals the name attribute of the input element.

To call the validation we use the element method of the validation plugin:

if ($("form").validate().element("#txtbpvproductid") && $("form").validate().element("#txtbpvproductamount"))
{
// valid, so perfom actions
}

As soon as an element doesn’t pass validation, the method we attached to the showErrors event is called. Unfortunately this means only one error at a time will popup if multiple  elements don’t pass validation. To show the validation messages, we’ll make use of the Dialog widget once again:

function showValidationError(errorMap, errorList)
{
var message = "";
var i;
for(i=0; i < errorList.length; i++) {
message += errorList[i].message + "<br />";
}
if (message.length > 0) {
showMessage(message);
}
}

Conclusion

Building an AJAX web part with jQuery (and some plugins) can result in a very responsive UI with a good user experience. In the end, I don’t think building a web part with ASP.Net AJAX would have taken me less time as well. I’m not happy with the validation though. Although the jQuery validation plugin is very useful in most web frameworks (including ASP.Net MVC), it seems that it doesn’t combine well with web forms. But I haven’t been able to find a better plugin for it.

Bookmark to:

Building an AJAX web part with jQuery (Part 3) is a post from: Peter Gerritsen's blog

Fortunately some javascript template engines are developed to make this easier. These engines come in all shapes and sizes, ranging from engines with an own templating syntax to simple data binding engines.

On the first side of the spectrum, there are engines such as jTemplates, this one uses python like syntax to create the instructions. On the other end engines like Chain.js and PURE live, these can be considered more a databinding egines. The last ones make use of classnames for the databinding, like in the following Chain.js example:

<div id="quickdemo">
	<div class="item">
		<span class="library">Library Name</span>
	</div>
</div>

$('#quickdemo').items( [
		{library:'Prototype'},
		{library:'jQuery'},
		{library:'Dojo'},
		{library:'MooTools'}
	]).chain();

In this case the library field in the JSON objects is put into the element with “library” in de classname. The nice thing about Chain.js is the fact that it monitors the items collection for changes. Adding or removing items from script, automatically updates the generated HTML. So filtering and sorting can be very easily accomplished, some very easy to follow examples are available on the companion website.

PURE uses the same classnames based system for the databinding. Consider the following example:

<ol class="siteList reference@id">
	<li class="sites">
		<a class="name url@href" href="http://beebole.com">Beebole</a>
	</li>
</ol>

var data = {
	"reference": "3456",
	"sites": [{
			"name": "Beebole",
			"url": "http://beebole.com"
		},
		{
			"name": "BeeLit",
			"url": "http://beeLit.com"
		},
		{
			"name": "PURE",
			"url": http://beebole.com/pure
		}]
	};
	$('ol.siteList').autoRender(data);

The url@href and reference@id classnames provide a way to set attributes of the databound elements.

But what if you don’t want to decorate your HTML elements with extra classnames to support the databinding? Or you want to handle some events of the generated elements?

For this PURE supports directives. You create your directives and pass them into the autoRender or render functions. Consider the following example:

<div style="display: none;" id="bpvcategorytemplate">
	<ul>
		<li class="context">
			<a category="" class="context context@category" href="#">laden...</a>
		</li>
	</ul>
</div>

function showProductCategories()
{
    $.getJSON(bpvweburl + "/_layouts/ecabointranet2009/bpv.ashx", {type: "categories"}, function(data)
    {
        var categoriescontainer = $("#bpvcategoriescontainer");
        categoriescontainer.empty();

        var list = categoriescontainer.append($("#bpvcategorytemplate").html());

        var directive = {'a.context[onclick]' : '"showProducts(this); return false;"'}

        list.autoRender( data, directive );
    });
}

Here we get some JSON from a handler, put the html from the template into a new element, and bind the JSON to that template. When binding the JSON data, we attach a javascript function to the onclick event of the generated anchor tags.

Much more can be accomplished by using directives, such as creating an alternating row style by setting a class during the binding of the items. For more information about using directives in PURE, read this page.

There are loads more things possible in PURE or in the other engines, the best way to find out is to read the docs and try some things out.

Bookmark to:

Using a template plugin for jQuery to parse JSON data is a post from: Peter Gerritsen's blog

There are a few different ways you can pass or get information from the page the Silverlight control is hosted in:

• Set the initParams parameter in the Silverlight object definition
• Read the HtmlDocument in your Silverlight code
• Use JavaScript to call methods in your Silverlight code

You can only use the first option if your hosting your Silverlight application on the same domain. When using the hosting service on silverlight.live.com, no interaction between your application and HTML page is allowed.

For the second option you can use the HtmlPage object in your code to traverse through the HTML DOM, basic methods such as GetElementById are available.

The last option is the one I’ll be using in this post. To accomplish this you need to follow a few steps:

• Decorate your page class with a “ScriptableType” attribute
• Decorate the method you want to call with the “ScriptableMember” attribute and make sure it’s public
• Register your object in the HtmlPage
• Give your Silverlight object definition an id, so you can easily reference it from your JavaScript

The reason I’m going with this technique is the flexibility it provides when you want to reuse the tagcloud in other applications. Every blog engine has a different way to generate the HTML for a tagcloud, my blog just shows a list of tags.

To change the color based on the weight and set the url of the HyperlinkNutton we need to make some changes to the Tag3D object I showed you in the last post:

public class Tag3D
{
public HyperlinkButton btnLink { get; set; }
private TextBlock textBlock { get; set; }
public Point3D centerPoint { get; set; }
private Color TagColor { get; set; }

public Tag3D(double x, double y, double z, string text, string url, Color tagColor, int weight)
{
centerPoint = new Point3D(x, y, z);
textBlock = new TextBlock();
textBlock.Text = string.Format("{0} ({1})", text, weight);
btnLink = new HyperlinkButton();
btnLink.Content = textBlock;
btnLink.NavigateUri = new Uri(url);
this.TagColor = tagColor;
}

public void Redraw(double xOffset, double yOffset)
{
double zFactor = ((centerPoint.Z + 300) / 450.0);
btnLink.FontSize = 30.0 * zFactor;
double alpha = zFactor * 255;
//Debug.WriteLine("Z: {0}; zFactor: {1}; alpha: {2}", centerPoint.Z, zFactor, alpha);
btnLink.Foreground = new SolidColorBrush(Color.FromArgb(Convert.ToByte(alpha), TagColor.R, TagColor.G, TagColor.B));

Canvas.SetLeft(btnLink, centerPoint.X + xOffset - (btnLink.ActualWidth / 2));
Canvas.SetTop(btnLink, -centerPoint.Y + yOffset - (btnLink.ActualHeight/ 2));
Canvas.SetZIndex(btnLink, Convert.ToInt32(centerPoint.Z));
}
}

In the constructor we now pass in the url and a Color to show when the tag is the most important (I chose to use a scale of 1 to 10, with 10 being the most important).
The url is simply assigned to the NavigateUrl property of the HyperlinkButton. The Color is used when setting the new Foreground Brush. I also made some modifications in the calculations of the font size and alpha of the Brush to make it look a bit more realistic.
To let the JavaScript in the page add the tags I’ve created a AddTag method and decorated it with the ScriptableMember attribute:

[ScriptableMember()]
public void AddTag(string tag, string url, int weight)
{
if (weight > 10)
weight = 10;

Color color = new Color();

color.R = Convert.ToByte(Math.Round(209.0 * ( weight / 10.0)));

color.G = Convert.ToByte(Math.Round(18.0 * (weight / 10.0)));

color.B = Convert.ToByte(Math.Round(65.0 * (weight / 10.0)));

tagBlocks.Add(new Tag3D(0.0, 0.0, 0.0, tag, url, color));
}

In this method we calculate the Color of the tag based on the weight. Then we add a new tag to the tagBlocks List<Tag3D>.

After calling this method a couple of times we need to place the tags and display them. I’ve changed the FillTags method shown in the previous post and renamed it to ProcessTags to make the name a bit more meaningful:

[ScriptableMember()]
public void ProcessTags()
{

double radius = RootCanvas.Width / 3;

int max = tagBlocks.Count;

double phi = 0;

double theta = 0;

for (int i = 1; i < max + 1; i++)

{

phi = Math.Acos(-1.0 + (2.0 * i – 1.0) / max);

theta = Math.Sqrt(max * Math.PI) * phi;

double x = radius * Math.Cos(theta) * Math.Sin(phi);

double y = radius * Math.Sin(theta) * Math.Sin(phi);

double z = radius * Math.Cos(phi);
Tag3D tag = tagBlocks[i -1];

tag.centerPoint = new Point3D(x, y, z);

tag.Redraw(RootCanvas.Width / 2, RootCanvas.Height / 2);

RootCanvas.Children.Add(tag.btnLink);
}
}

We need one more thing to make the methods callable from JavaScript. Register the
object with the HtmlPage in the constructor:

HtmlPage.RegisterScriptableObject("TagCloud", this);

No you can call the methods from JavaScript:

function addTags() {
var control = document.getElementById("Xaml1");
control.content.TagCloud.AddTag("Silverlight", "http://silverlight.net", 5);
control.content.TagCloud.AddTag("Tagcloud", "http://blogs.tamtam.nl", 2);
control.content.TagCloud.AddTag("Tam Tam", "http://www.tamtam.nl", 10);
control.content.TagCloud.AddTag("Axelerate3D", "http://www.codeplex.com", 8);
control.content.TagCloud.AddTag("WPF", "http://www.microsoft.com", 1);
control.content.TagCloud.AddTag("SharePoint", "http://www.microsoft.com", 4);
control.content.TagCloud.ProcessTags(); }

I’m just attaching some code to the onclick of a button and hard-coding the tags. Normally you would handle the onload of the document (or better yet the $(document).ready in jQuery) and get your tags from the Html to pass them to the Silverlight object.

And that wraps it up for this tutorial.

Bookmark to:

Creating a 3D tagcloud in Silverlight (part 2) is a post from: Peter Gerritsen's blog

This can actually lead to some rather odd JavaScript error messages saying some object is undefined when dragging and dropping web parts or using the list item edit menu.

Believe it or not, this is most of the times due to the custom style sheet and not to any custom JavaScript.

The reason for this is that the build in JavaScript of MOSS use a property offsetParent of a DOM-element to perform some “magic”. offsetParent returns a reference to the object which is the closest (nearest in the containment hierarchy) positioned containing element. In some of our custom designs this sometimes returns null and the script throws the “object undefined” error.

The easiest solution to prevent this, is to absolute-position the body by include the following statement in your css:

body { position: absolute !important; }

This can off course lead to some css issues, so positioning a wrapper is also an option.

Bookmark to:

JavaScript errors after implementing a custom site design is a post from: Peter Gerritsen's blog