My previous encounters with Visual Basic were with Visual Basic 6.0  and the VB macro editor that comes with built into Microsoft Office 2002. So I have hardly come to this with no experience, however it is true to say that without much effort and a quick tutorial, even beginners can achieve quite interesting things.

For those that aren’t familiar with it, VB.net is an evolution of the Visual Basic language created by Microsoft. It includes a whole new set of .net framework class libraries, as well as the most of the traditional class libraries.  VB.net is used for both offline and online applications. For this article, I’m interested only in the traditional Windows “forms” application.

The Visual Editor:

Screenshot of the visual editor

As the name suggests, Visual Basic involves a visual component, which is the graphical forms editor. This allows you to add components to the forms space, such as buttons, text boxes, scroll bars, labels etc, and then you code in the interactions between these components. At the side of the editing area is a properties box, which lists all the various properties that dictate the behavior of those components.

Visual Studio functions much the same as Visual Basic 6.0 in regards to the visual editor.

When I first learnt to use Visual Basic, I picked it up very fast because it was more or less intuitive. What made it very easy to achieve things that I had not even learnt, but only imagined, was one of the program’s great features:

The Object Browser:

Object Browser

The object browser contains a browse-able list of class libraries that you can use. Looking through the list, you can get an idea of what can be achieved with Visual Basic, and can browse the syntax and required objects/parameters for various functions. It is important to note that some sub-classes and operations are not shown in the browser.

User Friendliness:

One of my more favourite features in Visual Studio (and its’ predecessors) is the drop down auto-complete list.

Visual Basic is an object oriented language, and the objects are elaborated through the . (dot). For example, to reference a parameter “height” of a text box named “txtBox”, we would refer to it as txtBox.height

The auto-complete list will pop up when I type the . (dot), and list all those properties that I may choose from. Height would be found within it, and have an icon that represents that it is a property.

Drop-down box

Also found within the auto-complete list, are functions. These have different icons. Examples of these would be show(), hide(), close()

This makes for very easy coding. I can be guided along by the auto-complete without having learnt the ins and outs of the object with which i’m interacting.

As for user-friendliness as a whole, there is more complexity in Visual Studio than there was in Visual Basic 6.0. This has great advantages, but one disadvantage is that it is definitely less user-friendly than it once was, especially at compile time.

Builds can be debug or release, and there are versions and references that must be accounted for. All of this can be learnt fairly easily.

Releasing your software to the world:

Visual Studio has a publish option, that lets you publish a software installer. For me this process was counter-intuitive to my expectations, as most applications I have downloaded have been in standalone single install files, either msi or exe.

When you publish your application it will be placed in a folder with subdirectories that contain your application and its’ files.

The best way to publish with a standalone installer is to compile your application in the standard way, and then create a new project choosing the “installer package” template. This will create an msi installer into which you can add your executable and program files.

I didn’t find any good tutorials that go through this process from start to finish, so be prepared to spend some time searching the web for any answers you may have, and do plenty of testing if you wish to take this path.

Of course you can stick with the published installer.

Conclusion:

Overall, Visual Studio 2008 and vb.net (with net framework 3.5) has plenty of great features and lots of class libraries to help you achieve what you want.

I haven’t even touched on the possibilities that arise from the online projects that can be created and managed with VS2008, so I’m sure there’ll be plenty more adventures for me in the years to come in the world of VB.net

This is my tutorial for beginners wanting to use AJAX on their websites.

xmlHttpRequest

AJAX is made possible by a DOM API by the name of xmlHttpRequest, which allows HTTP or HTTPS requests to be initiated and handled from within Javascript.

Below is the function to place in your .js file for the current document.

function xmlRequest(){
	var xmlHttp=null;
	if (window.XMLHttpRequest) {
  	// code for IE7+, Firefox, Chrome, Opera, Safari
  		xmlHttp=new XMLHttpRequest();
	}
	else if (window.ActiveXObject) {
  // code for IE6, IE5
		xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
	} else {
		alert("Your browser does not support XMLHTTP!");
	}
	return xmlHttp;
}

Grabbing and Displaying a Record-set

Suppose you wanted to display data on your website that is updated every 10 seconds, showing a list of recent entries into a shout-out wall table, looking a bit like this:

Louis: Love the site!

Disregarding the process beyond the scope of this tutorial (of entering the data into the database), we will need to take these steps to achieve this outcome:
1. Write the query and output server-side script (php for this tutorial)
2. Write some javascript to request the server-side script, and output the response to a designated area of the site.

The Shout-out Table

In the database, we will have a table called “shoutouts” with the following structure:
soID(int,auto_increment),userName(varchar 50),shoutOutMsg(varchar 255)

The PHP script

The script below will show you how to query the database and output the results. The query uses a limit to display only the most recent shout-outs.

getShoutOuts.php

include "connect.php";
$sql="SELECT * FROM shoutouts ORDER BY soID DESC LIMIT 5";
$result=mysql_query($sql);
if (mysql_errno()){
	echo "ERROR|".mysql_error();
} else {
	echo "OK|";
	for ($row=mysql_fetch_assoc($result)){
		echo "<strong>".$row['userName']."</strong>: ".$row['shoutOutMsg']."";
	}
}

We use “ORDER BY soID DESC” to make the latest posts show up first, and “LIMIT 5″ to select the first 5 out of this reversed order set. The script then loops through each of the 5 records and outputs a row of html that displays the user name and message.

The HTML

We need a place within our document to put the shouts. You can create elements with javascript, but for beginners it may be easier to simply add a placeholder element in the source document. Either way, the element must have an ID that can be called upon later by the javascript function, looking like this:

The Javascript

Our Javascript will consist of a function that will request the data and subsequently insert it into the document. You should take note that the function called upon by this script “xmlRequest” was shown at the beginning of the tutorial.

function getShoutOuts(){
	var xmlObject=new xmlRequest();
	xmlObject.open("GET","getShoutOuts.php",true);
	xmlObject.send(null);
	xmlObject.onreadystatechange=function(){
		if (xmlObject.readyState==4){
			var returnString=xmlObject.responseText.split("|");
			if (returnString[0]=="OK"){
				//query was successful
				var returnedHTML=returnString[1];
				document.getElementById('shoutContainer').innerHTML=returnedHTML;
			} else if (returnString[0]=="ERROR"){
				//query failed in php and reported an error
				alert(returnString[1]);
			}
		}
	}
	var t=setTimeout(getShoutOuts,10000);
}

Simply invoke the function getShoutOuts() on the loading of your document, and the 5 most recent shoutOut entries will be displayed on your page within the shoutContainer div element.

General note about the Ajax Request:

There’s a lot I could say about dealing with these AJAX requests, but something that is often not noticed when starting to use them, is that the onreadystatechange function you construct, will not execute until data is returned. So even though it is above the script below it, it will not execute before it but after it at some point undetermined because of the delay in communications.

What this means… is if you set a variable using data returned from an AJAX request, don’t expect it to be available until xmlObject.readyState==4 and the code within that has been executed.

This is a function by Jonas Raoni Soares Silva, taken from here:

function isPointInPoly(poly, pt){
    for(var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i)
        ((poly[i].y <= pt.y && pt.y < poly[j].y) || (poly[j].y <= pt.y && pt.y < poly[i].y))
        && (pt.x < (poly[j].x - poly[i].x) * (pt.y - poly[i].y) / (poly[j].y - poly[i].y) + poly[i].x)
        && (c = !c);
    return c;
}

The function takes an object containing a property x, and property y, as well as an array, containing the bounding points of the polygon.

If you’re interested in how this applied to my isometric grid space, I’ll go over the basic concept below:

The grid space is made up of 400 (20×20 grid) images, layered and spaced in the DOM at a ratio of 2:1 W:H, making it look like a squashed diamond.

If we know the top and left value of each image, these can be used to construct an array of polygon coordinates for each tile.

Imagine a diamond in a rectangle shaped image. The left value will correspond to the x value of the first point, going from left to right, clockwise around the diamond polygon, the top value will correspond to the y value of the second point.

So going around the diamond, it would look like this;

var polyPoints=new Array(); // put this in global
 
// values known: topVal, leftVal, tileHeight and tileWidth (W/H of diamond in each tile image)
 
//for each tile(tileX,tileY):
polyPoints[tileX+"_"+tileY]=[
{x:leftVal,y:topVal+(tileHeight/2)},
{x:leftVal+(tileWidth/2),y:topVal},
{x:leftVal+tileWidth,y:topVal+(tileHeight/2)},
{x:leftVal+(tileWidth/2),y:topVal+tileHeight},
//don't forget to repeat the very first point to complete the polygon
{x:leftVal,y:topVal+(tileHeight/2)}
];

Now to determine if an event such as click or mousemove is within one of the polygons, an event listener must be added to the entire surrounding element, and on each event trigger, the entire array contained in polyPoints must be checked with the function isPointInPoly;

So when you have cursorX, cursorY, load them into an object and pass it to the following function:

var gridSize=20; //global declaration
 
function isPosInTiles(cursorPos){
var isFound=false;
var foundCoord;
for (var x=1;x<=gridSize;x++){
	for (var y=1;y<=gridSize;y++){
		if (isPointInPoly(cursorPos,polyPoints[x+"_"+y])){
			isFound=true;
			foundCoord={x:x,y:y};
		}
	}
}
if (isFound==true)
	return foundCoord;
} else {
	return false;
}
}

If the function returns anything other than false, then the event has taken place within one of the tiles, and the tile’s x and y values within the grid will be returned and can subsequently be used.

All in all, a very handy function, which I’m sure will be used many more times in the course of my work.

in the global section of my javascript document, I declare a lower and upper zIndex boundary for each “layer” within the document.

For example, I might have a space used for a chess game, laid out in an isometric fashion, meaning chess pieces will overlap to some degree. And all chess pieces will lay over the board (consisting of several layers giving the illusion of a single board). In addition, several menus will be laid over the entire game viewer when called.

So in this example, my global declarations might look like this.

var numBoardLayers=3;
var numWindowLayers=10;
var numPieces=32;
var boardLower=1;
var boardUpper=boardLower+numBoardLayers-1;
var pieceLower=boardUpper+1;
var pieceUpper=pieceLower+numPieces-1;
var windowLower=pieceUpper+1;
var windowUpper=windowLower+numWindowLayers-1;

As you can see, the number of layers in the board may be increased etc without the need to change scores of z-index values. Now that the global variables are set, they can be used within the functions that construct the board.

For example, a chess piece is rendered into the DOM at tile number (x), the z-index value can be set at pieceLower+(x)-1