Design with Silverlight

Despite what you say, Dave, I refuse to believe I'm the *only* one! =)

The project described in my last post described how to set up a basic object-oriented approach to Silverlight in JavaScript. Now we need a way to access properties on the object, so we're going to add "getters" and "setters".

If you don't have the last project, it's available here.

Getters and setters are just functions (or methods) added to the prototype object, which is located in the objSquare.js file. Getters "return" values to the calling code, while setters set some value on the specified object.

Let's add a getter that will return the canvas top of the specified object.

In the objSquare.js file, add a comma after the closing curly brace of the "initialize" function, then add the following code:

get_top : function()
{
return this._square["Canvas.Top"];
}

This getter is called by specifying the object name, a dot (.), then the method - get_top(). Because it specifies a return value, you can assign it to a variable or use it for calculations.

Let's test this out. Open the Page.xaml.js file, and after the lines of code that instantiate the two square objects, add a line to open a message box with the value of the canvas top for "newSquare".

alert(newSquare.get_top());

Run the app and you should get a message box with "100" in it. Change "newSquare" to "newSquare1" and run it again. You should see a message box with "500" in it.

Setters work the same way, but they do not return a value. Instead, they perform an action on the specified object.

Add a comma after the closing curly brace for the get_top method, and add a method called "set_top" that looks like this:

set_top : function(newTop)
{
this._square["Canvas.Top"] = newTop;
}

"newTop" is a value we will pass into the setter, which will then be applied to the specified object.

Save the objSquare.js file and go back to Page.xaml.js. Add the following two lines of code after the alert:

newSquare.set_top(250);
newSquare1.set_top(50);

This calls the setter for both of the square objects in the app. The first one will be moved so that the canvas top is at 250, and the second will be moved so the canvas top is 50. Run the program - you should see the message box open, then both squares draw at the specified location.

If you've made a habit of using a traditional JavaScript coding style, you can probably see where this is a useful, powerful way of creating/manipulating objects for Silverlight. It offers another benefit too, which you may have already guessed: "custom" properties.

I've seen people ask on the forums about accessing properties that don't exist by default - for example, canvas right.

Let's add a getter that will return a right canvas value on a specified object.

In the objSquare.js file, add a comma after the closing curly brace for the set_top method, then add the following getter:

get_right : function()
{
return this._square["Canvas.Left"] + this._square.width;
}

As you can probably figure out from reading the code, this will return the specificed objects canvas left value added to the specified object's width, which will give us the object's right bound. It's not really adding a property to the object per se, but it is cutting down on potential code clutter by setting up the calculation in a single place.

Save the objSquare.js file, and open Page.xaml.js. Add a message box that calls the get_right method on the newSquare object:

alert(newSquare.get_right());

When the program is run, you should see a message box open that displays the top value for "newSquare1" (500), then the squares will draw on the canvas, and a second message box will open that displays "125", which is the right canvas value for the "newSquare" object.

The final files for this entry can be found here.

This entry was posted on Friday, March 14th, 2008 at 8:45 am and is filed under Tutorial. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.