OOP Series : Interfaces

An interface is a template of mthods. Not properties. An interface is usually accompanied by an 'implements' clause. Classes which implement an interface must contain the declared methods. There is no defined means of declaring a JavaScript interface/implments combination.
PHP : template.class.php
<?php
interface template
{
function setWidth($width);
function setHeight($height);
}
?>
PHP : document.class.php
<?php
require_once 'template.class.php';
class document implements template
{
public $width, $height;
function setWidth($width)
{
$this->width = $width;
}

function setHeight($height)
{
$this->height = $height;
}
}
?>
Now a file (index.php) which creates a document object.
<?php
require_once 'document.class.php';
$doc = new document;
$doc->setWidth(10);
$doc->setHeight(10);
echo $doc->width.' '.$doc->height;
?>

OOP Series : Encapsulation

One of OOP's strengths is that it provides control over access to properties and methods. This becomes particularly useful when developers are working together and extending classes.It is also often referred to as data hiding. It achieves this through public, private and protected properties and methods. How these are implemented in different languages can vary significantly as you see in the code examples below.
Public usually means anything which makes use of the class can access it.
Private usually means only the class can access it.
Protected usually means either it can access private properties and methods whose values can then be passed back, or can be used only by extended classes.
Given the more complex nature of protected, I tend to use it only when necessary.
PHP : car.class.php
<?php
class car
{
public $mypublicvariable;
private $myprivatevariable;
protected $myprotectedvariable;
function __construct()
{
$this->mypublicvariable = 'guitar';
$this->myprivatevariable = 'beer';
$this->myprotectedvariable = 'chocolate';
}
}
?>
PHP : extendedcar.class.php
<?php
require_once 'car.class.php';
class extendedcar extends car
{
function __construct()
{
parent::__construct();
}

function showprotected()
{
return $this->myprotectedvariable;
}
}
?>
JavaScript : car.class.js
car = function()
{
this.mypublicvariable = 'guitar';
var myprivatevariable = 'beer';

this.myprivilegedmethod = function()
{
return myprivatevariable;
}
}
Now a file (index.php) which creates 2 PHP objects. One from the parent class and one from the extended class. Then 1 JavaScript object.
<?php
require_once 'car.class.php';
require_once 'extendedcar.class.php';
$mycar = new car;
$myextendedcar = new extendedcar;
echo $mycar->mypublicvariable.'<br />';
echo $myextendedcar->showprotected().'<br />';
?>
<script src="car.class.js"></script>
<script>
var mycar = new car();
document.write(mycar.mypublicvariable+'<br />');
document.write(mycar.myprivilegedmethod()+'<br />');
</script>

OOP Series : Inheritance

One of OOP's strengths is that it provides the concept of inheritance. This becomes particularly useful when developers are working together and extending classes. In this first example I'm not going to focus on controlling the visibility of properties and methods. Everything will be public. Visibility will be covered in another blog entry.
PHP:car.class.php
<?php
class car
{
public $mypublicvariable;
function __construct()
{
$this->mypublicvariable = 'guitar';
}
function changevalue()
{
$this->mypublicvariable = 'beer';
}
}
?>
PHP:extendedcar.class.php
<?php
require_once 'car.class.php';
class extendedcar extends car
{
function __construct()
{
parent::__construct();
}
function changevalue()
{
$this->mypublicvariable = 'chocolate';
}
}
?>
JavaScript:car.class.js
car = function()
{
this.mypublicvariable = 'guitar';
}
car.prototype.changevalue = function()
{
this.mypublicvariable = 'beer';
}
JavaScript:extendedcar.class.js
extendedcar = function()
{
car.call(this);
}
extendedcar.prototype = new car();
extendedcar.prototype.constructor = car;
extendedcar.prototype.changevalue = function()
{
this.mypublicvariable = 'chocolate';
}
Now a file (index.php) which creates an object from both.
<?php
require_once 'car.class.php';
require_once 'extendedcar.class.php';
$mycar = new car;
$myextendedcar = new extendedcar;
echo $mycar->mypublicvariable.'<br />';
$mycar->changevalue();
echo $mycar->mypublicvariable.'<br />';
echo $myextendedcar->mypublicvariable.'<br />';
$myextendedcar->changevalue();
echo $myextendedcar->mypublicvariable.'<br />';
?>
<script src="car.class.js"></script>
<script src="extendedcar.class.js"></script>
<script>
var mycar = new car();
var myextendedcar = new extendedcar();
document.write(mycar.mypublicvariable+'<br />');
mycar.changevalue();
document.write(mycar.mypublicvariable+'<br />');
document.write(myextendedcar.mypublicvariable+'<br />');
myextendedcar.changevalue();
document.write(myextendedcar.mypublicvariable+'<br />');
</script>

OOP Series : Constructors and destructors

In OOP, constructors are initialisers and destructors are clean up operations.
In the case of PHP you declare a constructor of your class. It will be run when an object is created from the class. You can also declare a destructor which will be "called as soon as there are no other references to a particular object, or in any order during the shutdown sequence."
In the case of JavaScript, you don't have a specific method, but just make all your declarations.
In JavaScript, it's best to rely upn the garbage collector.
PHP:familyphoto.class.php
<?php
class familyphoto
{
public $mywidth, $myheight;
function __construct($mywidth = NULL, $myheight = NULL)
{
$this->mywidth = $mywidth;
$this->myheight = $myheight;
}

function __destruct()
{
$this->mywidth = NULL;
$this->myheight = NULL;
}
}
?>
JavaScript:familyphoto.class.js
familyphoto = function(mywidth, myheight)
{
this.mywidth = typeof mywidth !== 'undefined' ? mywidth : null;
this.myheight = typeof myheight !== 'undefined' ? myheight : null;
}
Now a file (index.php) which creates 2 objects from both. In one, passing no values, and in another, passing 2 required values.
<?php
require_once 'familyphoto.class.php';
$familyphoto1 = new familyphoto;
echo $familyphoto1->mywidth.'<br />';
echo $familyphoto1->myheight.'<br />';
$familyphoto2 = new familyphoto(4,3);
echo $familyphoto2->mywidth.'<br />';
echo $familyphoto2->myheight.'<br />';

?>
<script src="familyphoto.class.js"></script>
<script>
var familyphoto1 = new familyphoto();
document.write(familyphoto1.mywidth+'<br />');
document.write(familyphoto1.myheight+'<br />');
var familyphoto2 = new familyphoto(4,3);
document.write(familyphoto2.mywidth+'<br />');
document.write(familyphoto2.myheight+'<br />');
familyphoto1.destruct();
familyphoto2.destruct();
</script>

OOP Series : Properties and methods

Why? I don't know, but the creators of OOP decided to rename variables and functions as properties and methods respectively. The crazy thing is, that in the code, you will see references to things like 'var' and 'function'. Hey ho! Here are 2 simple examples of how they are declared and used in my example of the desk lamp which lights up my keyboard on this dull day.
PHP : desklamp.class.php
<?php
class desklamp
{
public $power = 'OFF';
function onoffswitch()
{
$this->power = $this->power == 'OFF' ? 'ON' : 'OFF';
}
}
?>
JavaScript : desklamp.class.js
desklamp = function()
{
this.power = 'OFF';

this.onoffswitch = function()
{
this.power = this.power == 'OFF' ? 'ON' : 'OFF';
};
};
Now a file (index.php) which creates objects from both and makes the switch.
<?php
require_once 'desklamp.class.php';
$mydesklamp = new desklamp;
echo 'PHP desk lamp power = '.$mydesklamp->power.'<br />';
$mydesklamp->onoffswitch();
echo 'PHP desk lamp power = '.$mydesklamp->power.'<br />';
?>

<script src="desklamp.class.js"></script>
<script>
var mydesklamp = new desklamp;
document.write('JS desk lamp power = '+mydesklamp.power+'<br />');
mydesklamp.onoffswitch();
document.write('JS desk lamp power = '+mydesklamp.power);
</script>

A short series on OOP (Object Orient(at)ed Programming)

I'm going to do a short series of blog entries on OOP. I'll be using 2 languages in order to emphasise that the concepts are not language specific. All then entries will have simple code to demonstrate the point and be short in text.

Why OOP?

Good question Mick. Funnily enough, when you begin learning a language, it's rare to dive into OOP. It's possible that just grapsing this first concept would be enough to put any newbie off. Unfortunately, this also presents it's own problem. The newbie was doing perfectly well, creating useful code, only to be held up by a new concept (OOP) which slows them down. So the first question on their mind is why do I have to learn OOP? What is it going to give me.

Enough Mick. Give me the answer. Here I probably attack the problem from a different point of view than many of my programming friends.

Suppose I asked you to explain something. The mug of tea I'm drinking from. You might say, It's a cylindrical object, just big enough to hold, with a handle. It's yellow. They don't always look like that. Some are small for espresso, some are blue etc.

This would be an OOP way of looking at a mug of tea. Something which actually comes naturally to us. Strangely, if you were to use the concept we come into programming with (procedural), you'd describe the cup of tea as, 'It is the thing I am drinking from'.

First concept - classes and objects

So, here is the first concept. What is a class, and what is an object?
A class is a description of the thing. An object is a version of the thing.
Using our cup of tea example, we create a class called 'cup of tea', and in order to have a cup of tea, we need to create an object (my cup of tea).

Time to start coding I think. We are going to do this with 2 languages; PHP and JavaScript. First the classes.
PHP : cupoftea.class.php
<?php
class cupoftea
{
public $height, $diameter, $colour;
}
?>

JavaScript : cupoftea.class.js
cupoftea = function()
{
var height, diameter, colour;
};

Now a file (index.php) which creates objects from both.
<?php
require_once 'cupoftea.class.php';
$mycupoftea = new cupoftea;
$mycupoftea->height = 20;
echo $mycupoftea->height;
?>

<script src="cupoftea.class.js"></script>
<script>
var mycupoftea = new cupoftea;
mycupoftea.height = 30;
document.write(mycupoftea.height);
</script>

Start building your OOP JavaScript objects

Let's face it. Sometimes jQuery doesn't cut it. Either you don't want the user to download the library or it seems to be a sledgehammer to crack a nut. JavaScript has also matured into a great server-side language. Think of node.js. My example below uses OOP JavaScript for web interaction, but consider the concept on the server-side too.
Let's start with the HTML page:
<html>
<script src="alertster.class.js"></script>
<script>
var myalertster = new alertster('hello');
myalertster.sendit('goodbye');
</script>
</html>
Not too big is it? Essentially we are creating a new object called myalertster from a class called alertster which lies within a file called alertster.class.js. I am passing a couple of parameters here, but as you'll see from the contents of alertster.class.js (below), I've stuck a little error trapping in there too.
Now for alertster.class.js:
function alertster(message)
{
message = typeof message !== 'undefined' ? message : 'Default message';
this.m = message;
this.sendit = function(additional)
{
additional = typeof additional !== 'undefined' ? additional : 'Default additional message';
alert(this.m+"\n"+additional);
};
};
Easy!

How to set off multiple functions repeatedly using JavaScript

We are going to create an array of functions we'd like to kick off every 5 seconds. In this example I've used alerts, but this could make an excellent poll for changes to a file.

Once our array is created we can call a function which will perform the actions.

First we need to declare our function and stick it in the <head> of our page.
<script>

function runFunctions(funcArr, delay)
{
    setInterval(
        function()
        {
            for(i=0; i<funcArr.length; i++)
            {
                eval(funcArr[i]);
            }
        }, delay);
}

</script>

Now we can call our function from within the page <body> or just as easily in the <head>

<script>
            var myFuncs=new Array("alert('Mick')","alert('Mack')","alert('Paddy')","alert('Whack')");
            runFunctions(myFuncs, 5000);
</script>

Two lessons learned about IE from the coal face

Yesterday was a difficult day. It's my own fault. I should have started testing my portableCMS in IE earlier. I came across 2 problems which took more time than I was prepared for in debugging. 

So here is tip number 1. Don't even think of trying to refer to JavaScript constants in your jQuery calls. It's just not worth the hassle.

Tip number 2. As well as referring to a html5 reset, (I use http://html5resetcss.googlecode.com/files/html5-reset.css), add your own HTML 4 reset. Mine is listed below. You will still have problems, but less.

*

{

    margin:0;

    padding:0;

    border:0;

    outline:0;

    font-size:100%;

    vertical-align:baseline;

    background:transparent;

}

body

{

    font-family:Sans-serif;

    font-size:1em;    

}

h1, h2, h3, h4, h5, h6

{

    margin:0;

    padding:0;

    font-weight:normal;

}

p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea

{

    margin:0;

    padding:0;

}

blockquote

{

    margin:1.25em;

    padding:1.25em

}

q

{

   font-style:italic;

}

acronym, abbr

{

   cursor:help; 

}

small

{

    font-size:.85em;

}

big

{

    font-size:1.2em;

}

a, a:link, a:visited, a:active, a:hover

{

    text-decoration:none;

}

table

{

    margin:0;

    padding:0;

    border:none;

}

form

{

    margin:0;

    padding:0;

    display:inline;

}

label

{

    cursor:pointer;

}

.clear { clear:both; }

.floatLeft { float:left; }

.floatRight { float:right; }

.textLeft { text-align:left; }

.textRight { text-align:right; }

.textCenter { text-align:center; }

.textJustify { text-align:justify; }

.blockCenter { display:block; margin-left:auto; margin-right:auto; }

.bold { font-weight:bold; }

.italic { font-style:italic; }

.underline { text-decoration:underline; }

.noindent { margin-left:0; padding-left:0; }

.nomargin { margin:0; }

.nopadding { padding:0; }

.nobullet { list-style:none; list-style-image:none; }

Rotating boxes without images

Most rotating box CSS examples do not work cross browser. I like to try and avoid simulating this with, for example, pictures created at an angle in a good graphics package (like GIMP). Today however, I found this web page http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/. Not all the functionality works at this stage, but enough to get going. You'll need to get hold of the JavaScript libraries first. You can also take off the backgrounds and just use the technique for rotating text. My example below is a simple one.

See demo.

<!DOCTYPE html>
<html lang="ene">
<head>
<meta charset="UTF-8">
<title>Rotate text</title>
<style>
body
{
font-family:Sans-serif;
}
#box1
{
position: absolute;
top: 45px;
left: 45px;
border: solid 1px #CCCCCC;
position: absolute;
width: 100px;
height: 100px;
padding: 10px;
-sand-transform:rotate(45deg);
}
#box2
{
position: absolute;
top: 45px;
left: 160px;
border: solid 1px #CCCCCC;
background:#a3a3a3;
width: 200px;
height: 200px;
padding: 10px;
-sand-transform:rotate(-25deg);
}
</style>
<script src="scripts/EventHelpers.js"></script>
<script src="scripts/cssQuery-p.js"></script>
<script src="scripts/sylvester.js"></script>
<script src="scripts/cssSandpaper.js"></script>
</head>
<body>
<div id="box1" style="-webkit-transform: rotate(45deg); ">
-sand-transform: rotate(45deg);
</div>
<div id="box2" style="-webkit-transform: rotate(-45deg); ">
-sand-transform: rotate(-45deg);
</div>
</body>
</html>