I think this should be our “bible” when designing a page of refactoring one.

And it should also be a guide when reviewing the usability of our apps…

http://quince.infragistics.com/#/ByMap/ViewPattern$pattern=Annotated+Scrollbar

For example:

Question: “How to focus the attention of the end-user to a page action ?”  

Answer: Use the “Primary Action pattern” (Have a look at it)

And on top of this, this is done in SilverLight 2. And the app is pretty fast considering the mass of information!

Thank’s to Yvan C. for this post.

var Math = {
	Add: function(Number1, Number2) {
		///
		///		Addition function.
		///
		/// Return the total of two number (n1 + n2).
 
		Code here.
	},
	Sub: function(Number1, Number2) {
		///
		///		Substract function.
		///
		/// Return the total of two number (n1 – n2).
 
		Code here.
	},
	...
}

To call your function, you can simply call it by doing “alert(Math.Add(12,12));”. It is also possible to create object where you need to do a new to instantiate it. To learn more about the JSON, you can go on http://msdn.microsoft.com/en-us/library/bb299886.aspx.
If you want to instantiate an object that does some init stuff, I strongly suggest using something like the following:

var Math = function {
	init stuff here
	...
	Create function directly inside the function (anonymous type)
	function Sub(Number1, Number2) {
		///
		///		Substract function.
		///
		/// Return the total of two number (n1 – n2).
 
		Code here.
	}
}
function Math.prototype.Add (Number1, Number2) {
		///
		///		Addition function.
		///
		/// Return the total of two number (n1 + n2).
 
		Code here.
	}

It actually looks more like a class that you need to instantiate. By example to use the previous code, you need to do:

var myMathObj = new Math();
var addResult = myMathObj.Add(10,14);
var subResult = myMathObj.Sub(15,10);

Here’s a link to a good tutorial about the prototype: http://www.javascriptkit.com/javatutors/proto.shtml.

When I work I actually have a source control (Team Foundation Server) application inside my Visual Studio 2008. I wanted to have some JavaScript file to be compressed when I was publishing my application on the web server. To do so, I actually added a new JavaScript file containing nothing to the solution under my script folder and I checked in my stuff. After that, I also added my JSTrim somewhere in the project with it’s config file.

After I went inside the project properties (right click on the project/properties). I went inside the build event (Post Build event command line) and added those lines:

cd $(SolutionDir)Web\Script\
attrib -r myCompiledJS.js
JSTrim.exe -m high --config JSTrim.config
attrib +r myCompiledJS.js

The $(SolutionDir) is actually a system variable or macro, so that you can export those settings on different computer without having problems. The Web\Script\ is the folder inside your solution where you can find your JSTrim.exe. The attrib -r myCompiledJS.js is actually a windows command line executable that allow you to remove the read-only and then put it back using the +r feature. Any Windows system or dos system should be able to run that line. Concerning the JSTrim possible attributes, I suggest you to do JSTrim -h to get all parameter information.

So, by adding those lines inside the post-build, whenever you have a successfull build, it will regenerate the compiled JavaScript file. What I personally do, I use the compiler current mode (debug, release, etc.) to use the proper JavaScript file. When I’m in debug mode, I always keep the non compiled JS files and when I publish or run as “Release” I use those compiled files. The major reason to do that is because you may want to debug your JavaScript more easily.

If you have any question, ask them

- DevExpress CodeRush Express: http://devexpress.com/Products/Visual_Studio_Add-in/CodeRushX/

- Want to refactor your Aspx files ? http://devexpress.com/Products/Visual_Studio_Add-in/RefactorASP/

Want to know how it works? Look here http://tv.devexpress.com/

You want more goodies?

Check this out! http://www.visualstudiogallery.com/ This is an official site from MSFT!

Thanks to Yvan C.

Where I work, we are currently using SQL Server 2005 and maybe in few weeks 2008. I had an issue when I wanted to have a distinct select while using text field so I did my little research.

I found out that “Text” column are depreciated and we should use “nVarchar(max)” instead. The varchar using the “max” can use up to 2gb in memory, which means that we have no reason of not using it. With a varchar, we can do all the string manipulation, distinct and etc.

Hello,

While I was looking inside the MSDN forum I found out an interesting article. This article talks about the client Ids and how ugly it is to use it across JavaScript. There is a technique which is really easy to apply that is really good. If you want to learn more about that technique go on the following link:

http://blog.jagregory.com/2006/04/12/how-to-use-clientids-in-javascript-without-the-ugliness/

In resume we need to create a JavaScript object containing the list of client id. That way we can access our client id by doing something like “ClientIds.txtUsername”.

First of all, you will need Visual Studio 2005 or 2008. Once you’ve created a web site project or an web site application project, you need to add to the solution a “Web Service” page. You can call that web service “Test.asmx”. By default you will see an “Hello World” test function. To try out that fabulous function press “F5″ to compile and run from the test.asmx page. By doing that, it will display you the available function for your Web Services. Click on it to see how to call that function by soap or HTTP post. You also have in that screen a button to invoke your web method inside your service. If you had any primitive parameters (Ex.: string, int, bool, …), you would see the inputs to call your method. In your case, only click on the button “Invoke”. The result displayed on your browser should be an “Hello World” text.

Let’s get back to the “Test.asmx” and replace the hello world function by “GetXMLDataSetData”. Don’t put any arguments at the moment. Inside that function, put the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

[WebMethod]
public XmlDocument GetXMLDataSetData() {
	XmlDocument myXmlDocument = new XmlDocument();
	DataSet myDataSet = new DataSet("MyDataSetName");
	DataTable myDataTable = new DataTable("MyDataTableStuff");
 
	myDataSet.Tables.Add(myDataTable);
 
	myDataTable.Columns.Add("FirstName", typeof(string));
	myDataTable.Columns.Add("LastName", typeof(string));
	myDataTable.Columns.Add("FullName", typeof(string), "LastName + ', ' + FirstName");
	DataRow dtrow = myDataTable.NewRow();
	dtrow["FirstName"] = "Nordes";
	dtrow["LastName"] = "Lamarre";
 
	myDataTable.Rows.Add(dtrow);
	myDataTable.AcceptChanges();
 
	myXmlDocument.LoadXml(myDataSet.GetXml());
    return myXmlDocument;
}

The result given by clicking the invoke button will be the following:

1
2
3
4
5
6
7
8

<?xml version="1.0" encoding="utf-8"?>
<MyDataSetName>
  <MyDataTableStuff>
    <FirstName>Nordes</FirstName>
    <LastName>Lamarre</LastName>
    <FullName>Lamarre, Nordes</FullName>
  </MyDataTableStuff>
</MyDataSetName>

What you could also do is calling a stored procedure that is returning you a dataset. From that DataSet, you only return the tables you need with the appropriate data.

The content of the IFrame content load after the current page is loaded or after the “src” attribute change. So we are not able to have the IFrame content height or width until the data is rendered. It exist an event handler called “onload” that trigger once the content is loaded, but it is not possible to get the content body height, in fact it will alway’s return 0. By googling, I’ve found a lot of solutions, but none of them was working properly or at least working like I wanted. Because of that, I’ve written my own solution.

My solution is to use a “setTimeout” until the IFrame content is fully rendered on the page and after that, we are able to get the iframe content height and set it to the IFrame itself. In the following solution I actually use JQuery. If you need to convert it to normal JavaScript, it should be pretty easy.

Write this into your HTML:

1
2

<iframe id="iframeId" name="iframeId" onload="sizeIFrame(this.id)" style="width:100%">
</iframe>

Write this in your javascript (header or JS file):

1
2
3
4
5
6
7
8
9
10
11
12

function sizeIFrame(frameId) {
	var myIFrame = $("#" + frameId);
	var innerDoc = (myIFrame.get(0).contentDocument) ? myIFrame.get(0).contentDocument : myIFrame.get(0).contentWindow.document;
 
	try {// will throw an exception if the body is not fully loaded.
		myIFrame.height(innerDoc.body.scrollHeight + 35);
	} catch (e) { }
 
	if (innerDoc.body && innerDoc.body.scrollHeight == 0) {
		setTimeout(function() { sizeIFrame(frameId); }, 100);
	}
}

If you are having any problem please leave a comment.

This solution have only been tested on Internet Explorer 6/7

Here’s how internet explorer define the setInterval() function:

1

var iTimerID = window.setInterval(vCode, iMilliSeconds [, sLanguage])

You can find how to work with it by going on the this site msdn.microsoft.com.

Inside Firefox, you can actually instead of the third parameter, submit 1 or more parameter that will be used when calling back your function. By going on Mozilla specification page, you can find how to set interval on Mozilla browsers.

1
2

intervalID = window.setInterval(func, delay[, param1, param2, ...]);
intervalID = window.setInterval(code, delay);

Resolution
If you want to be able to send your function the proper parameter, the best way is be doing an inner function parameter calling the function you want to call. What does that mean? It means that you will be able to call a function using your context variables.

Here’s an example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

var myIntervalId = null;
 
function myFunction(a, b, c){
	var xyz = 3;
	// some code
 
	// Set the interval with an anonymous method calling your application method.
	myIntervalId = setInterval(
		function(){ 
			intervalFunction(xyz, 12); 
		}, 1000);
 
	return myIntervalId;
}
 
function intervalFunction(param_1, param_2){
	if (param_1 != 0){
		clearInterval(myIntervalId); // Stop the interval
		// some code here
	}
	param_1 = param_1 -1;
	// Some code here
	alert(param_1);
}
 
myFunction(1,2,3); // Do the call to a function;

In this small example with almost no code, you will actually wait 3 seconds and after it will stop the counter and do what you want to do. Also, between those interval, you will receive a pop-up saying how much time you have left before the countdown stop.

This is nothing extraordinary, but if you plan on using interval using context parameters, be aware that you should do this instead of anything else.

1
2
3
4

body.ClassName /* Page nested in the IFrame */
{
    background-color:transparent;
}

But, that code doesn’t work with IE. The thing is, when you have an IFrame inside IE, it automatically add the style attribute “background-color:#ffffff”. To remove that IFrame background-color, you need to add the following attribute on your iframe.

1
2

<iframe id="myIframe" allowtransparency="true" src="../myproject/page">
</iframe>

You first need to create your enum if it doesn’t already exists in your actual project:

1
2
3
4
5
6

private enum MyEnum
{
	POSSIBLE_VALUE_1 = 1,
	POSSIBLE_VALUE_2 = 2,
	DEFAULT_VALUE = 1
}

After, in your page load or wherever you need it, you can do as follow to convert your string to your enum. That way, it will be more useful inside your project.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

MyEnum test;
 
try
{
	test = (MyEnum)Enum.Parse(typeof(MyEnum), Request.QueryString["MyQueryStringItem"].ToString(), true);
}
catch (Exception)
{
	// Possible exception: 
	//	The query string does not exist : NullReferenceException
	//	The query string value is not in the enum: ArgumentException
 
	test = MyEnum.DEFAULT_VALUE; // Or you can throw your own exception here.
}

You now see how easy it is to convert a simple string to an enum type. After that conversion, it will be more usable across your project. You will also be able to do switch with a more robust case. In case you change your enum list and you remove an item. At compile time, it will tell you that the enum value selected does not exists. That way your code stay clean.

Example of doing a little animation with 3 divs (the 3 boxes under the code):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

	$(document).ready(function(){
		$("#beat1").heartBeat(
			{
			delayBetweenAnimation:2000,  
			delay:1000 
			});
		setTimeout(function(){
			$("#beat2").heartBeat(
				{
				delayBetweenAnimation:2000,  
				delay:1000 
				});
		}, 200);
		setTimeout(function(){
			$("#beat3").heartBeat(
				{
				delayBetweenAnimation:2000,  
				delay:1000 
				});
		}, 500);
	});

My 3 divs are made like this:

1
2
3
4
5

<div>
	<div id="beat1" style="float:left;margin-left:5px;background-color:#AABBCC; width:10px; height:10px;"></div>
	<div id="beat2" style="float:left;margin-left:5px;background-color:#AABBCC; width:20px; height:20px;"></div>
	<div id="beat3" style="float:left;margin-left:5px;background-color:#AABBCC; width:30px; height:30px;"></div>
</div>

Note that, you can use class or whatever you want inside the selector instead of the id (I recommend it).

Heart Beat 0.1

Description:
This plugin is used to enhence the actual checkbox in pages. Depending on OS and Theme, people actually have different check box look and feel. The one in Windows XP is actually looking good, but compared to Vista, Vista is even more beautiful. I wanted to create a more standard check box that you can use everywhere (code behind, etc.).

Sample:

1
2
3
4
5
6
7

$(document).ready(function(){
 $("#cbwt1")
  .CheckboxMod({
      ImageUrlChecked: 'http://nordz.sauleil.com/wp-includes/images/nordz/CBMod/checked.jpg', 
      ImageUrlUnchecked: 'http://nordz.sauleil.com/wp-includes/images/nordz/CBMod/unchecked.jpg'
   });
});

To know more about that plugin, you can go in JQuery Plugins section.

Download Checkbox Modfier Version 0.2