Dougal Matthews

JavaScript: Detecting Caps lock

Dougal — Wed, 02 Jul 2008 22:30:49 +0000

I wanted to see if you could detect caps lock in JavaScript. Why? As a small usability touch, basically alerting users that caps lock is enabled when they are entering passwords for example. I’ve wrapped up the logic in a simple function that can help you detect caps lock on a key press. Here is the demo and following is the function followed by a simple usage.

function isCapslock(e){
e = (e) ? e : window.event;
var charCode = false;
if (e.which) {
charCode = e.which;
} else if (e.keyCode) {
charCode = e.keyCode;
}
var shifton = false;
if (e.shiftKey) {
shifton = e.shiftKey;
} else if (e.modifiers) {
shifton = !!(e.modifiers & 4);
}
if (charCode >= 97 && charCode <= 122 && shifton) {
return true;
}
if (charCode >= 65 && charCode <= 90 && !shifton) {
return true;
}
return false;
}

Aptana Cloud - Hands On

Dougal — Sun, 01 Jun 2008 01:26:36 +0000

I received beta access today to Aptana cloud, something I’d previously mentioned. Aptana cloud is targeted at rapid development, in particular web applications that need to scale rapidly (think Facebook applications etc.)

Aptana cloud plugs nicely into the Aptana IDE as you would expect and as an extra treat it comes with a beta version of the new PHP editor and a pre-release version of Jaxer 1.0. This post will discuss some of the key features and my experience of trying out for the first time…

The only obvious change after the install if you can see a cloud control button next the Jaxer button at the top of the IDE.

After creating a project it then is automatically available in the cloud options.

When you click on the project under the cloud menu you are taken through a (very easy to use) wizard for configuration. This runs your through a few steps, setting up a site name, picking a payment plan (the beta is free), payment details and so on. Most of these screens are fairly standard, however the service selection is quite interesting. I imagine these prices are not final, so just take them with a pinch of salt.

The payment scheme seems to be quite flexible and we can see a large number of services that are included, PHP being the main server side language at the moment, with Aptana Jaxer still being a beta… (Ruby of Rails is on the ‘coming soon’ list). The prices range from the cheapest being 256 MB ram and 5 GB hard disc for $0.99 a day, up to 2 GB of ram and 25 GB hard disc for $8.22 a day. Seems fairly reasonably priced.

After set-up is finished, it phones home and does some magic. Shortly after displaying the following screen;

And sure enough, browse on over to http://mycloud.aptanacloud.com/ to see the following screen.

After that, you’re set up. You can go ahead and develop the application as normal. When you next go into the project in the cloud menu it provides you with a simple synchronisation process for uploading new and changed files. Going to http://mycloud.aptanacloud.com/index.php shows the output of a phpinfo. Currently running 5.2.5, thankfully nice and up to date! Doesn’t look like you are able to use pear however… that is shame.

This has been a very quick into, just to show exactly how easy it is to get started with a new project, there is a whole host of facilities that have been integrated that I’ve not covered. See the following screenshot for a quick look-see. Database management, SVN, back-ups and more all now easily managed from one IDE.

The first questions that then spring to mind are, I don’t see how to develop with two versions for testing etc. As we don’t want to be testing under a live environment do we! I’m assuming there is also a way for developing with SVN and having multiple developers working on the same projects.

All in all, I’m quite impressed and look forward to seeing this develop further.

I’ve liked the idea of Jaxer since I first heard about it, now with Aptana cloud I’ve got some online hosting where I can try out a few things. Expect some Jaxer posts coming soon!

p.s. I didn’t notice any of the new PHP features…

JavaScript Object Manipulation

Dougal — Sun, 25 May 2008 22:16:15 +0000

JavaScript is a very dynamic language, so much so that you can redefine and change objects on the fly. This can be a strange concept to programmers from a more traditional OO background such as Java or C#, however once made familiar it can be very useful.

This feature is not restricted to modifying your own objects; you can change the built in JavaScript objects. Take the following example, First a simple demo environment;

Object Creation and Manipulation

Now a short bit of JavaScript in the js.js file…

var div = document.getElementById(‘mydiv’);
div.hide = function(){
this.style.display = "none";
}
div.hide();
div.show = function(){
this.style.display = "";
}
div.show();

When the JavaScript file is called it initially retrieves the mydiv object from the DOM tree. Next are the interesting lines; “div.hide = function(){…” assigns a new function object to ‘hide’ on the object. This doesn’t need to be predefined in any particular way. Then inside the curly brackets you can write a function much as you normally would. However, note that the ‘this’ keyword inside the function relates to the object that the function will be inside.

After this function is created the following lines show that is it called just like a normal function. To demonstrate what it is doing it is worth noting that this could be done by doing;

var div = document.getElementById(‘mydiv’);
div.style.display = "none";

This works quite well, however say you want to add this to a number of Elements if not all? This could be a hassle. Rather than extending that particular object, we extend the object that it derives from. This works with the same HTML.

Element.prototype.destroy = function(){
this.parentNode.removeChild(this);
}
var div = document.getElementById(‘mydiv’);
alert(div);
div.destroy();
div = document.getElementById(‘mydiv’);
alert(div);

The above code adds a function to all elements. This means all the different HTML elements in the page will then have this function available to them. This easily allows you to add useful helper functions that you will re-use on a particular website.

You can change other objects too. Remember in JavaScript Arrays and Functions are objects, so you can augment these in much the same way. For example, the following function gets every second item in an array.

Array.prototype.odd = function(){
var newArray = [];
for(var x=0;xlength;x=x+2){
newArray.push(this[x])
}
return newArray;
}
var test = [1,2,3,4,5,6,7,8];
alert(test.odd());

Note this example is only tested for FireFox/Opera. IE example to come soon. It should work in Safari, but I’m macless and can’t test.

Lambda Functions - Does your language support it?

Dougal — Sun, 18 May 2008 15:47:40 +0000

What are Lambda functions? Basically lambdas are functions that can be treated as anonymous or as objects. It depends on the language that is being used. They are very useful and at the core of the Functional Programming paradigm. So what languages can you create lambas in? Here is a few;

JavaScript

var foo = function(x, y){
return x + y;
}
alert(foo(2, 4));

PHP

$foo = create_function(‘$x,$y’, ‘return $x + $y;’);
echo $foo(2,4);

Python

foo = lambda x, y: x + y
print foo(2,4)

These are of course very simple examples and don’t show the full potential. I’ve been a fan of lambdas for a while now and wanted to see what languages supported them. If you know of others you want me to add, post them in the comments. I know many other languages can, I just posted up the languages I’m familiar with.

I think out of all the examples I’ve looked at so far I like the style of them most in either JavaScript of Python.

Galactocracy

Dougal — Sun, 11 May 2008 21:28:01 +0000

It’s been a busy week so I don’t have much time to write. Therefore, I’m just going to do a quick plug of a Facebook application I made with some friends. Don’t worry – it’s not one of those applications that’s going to be annoying and force you do invite people or ask you silly questions in an attempt to tell you who you really are.

Galactocracy rather is a turn based strategy game, similar in some ways to the board game risk. However it is set in space.

So anyway, there isn’t much point in me telling you too much about it. I think the game sells itself when you give it a shot.

So why not head over to http://apps.facebook.com/galactocracy/ and try it out.

I’ll be waiting for you at the other side of the battlefield to fight it out for supreme control over the universe

P.S. Next I’m going to be covering something JavaScript or Python. Not sure what yet, maybe something a little bit silly just for fun.

Analysing PHP Objects and Classes

Dougal — Mon, 05 May 2008 20:43:54 +0000

Due to the dynamic nature of PHP as a programming language it can be quite difficult to determine what is happening. This is then even harder if you don’t have access to debugging tools such as those in Zend Studio.

How can you view an object?

header("Content-Type: text/plain");
error_reporting(E_ALL);
class Foo {
private $name = "Fred";
private $age = 30;
public function __construct(){}
public function bar(){
echo "Hello World";
}
}
$myFoo = new Foo();
print_r($myFoo);
$content = print_r($myFoo, true);
var_dump($myFoo);

These all are all ways of outputting objects and can prove to be invaluable. I find using print_r particularly useful for logging data errors to a file or database that you can analyse later.

Foo Object
(
[name:private] => Fred
[age:private] => 30
)
object(Foo)#1 (2) {
["name:private"]=>
string(4) "Fred"
["age:private"]=>
int(30)
}

Reflection

“In computer science, reflection is the process by which a computer program can observe and modify its own structure and behaviour. The programming paradigm driven by reflection is called reflective programming.” Wikipedia (http://en.wikipedia.org/wiki/Reflection_%28computer_science%29) .

Ok, so what does that mean? Basically, Reflection is a way of programmatically dealing with classes. So you can find out information about them. Including the properties and values.

What’s inside a class?

As of PHP 5 there is now a very powerful reflection library available. This includes a number of very useful objects. The two we will be focusing on are ReflectionClass and Reflection. Here is the one liner that can do it all….

Reflection::export(new ReflectionClass(‘SimpleXMLElement’));

To set up a simple test case for this I used;

header("Content-Type: text/plain");
error_reporting(E_ALL);
Reflection::export(new ReflectionClass(‘SimpleXMLElement’));

This creates quite a bit of output;

Class [ class SimpleXMLElement implements Traversable ] {
- Constants [0] {
}
- Static properties [0] {
}
- Static methods [0] {
}
- Properties [0] {
}
- Methods [12] {
Method [ final public method __construct ] {
}
Method [ public method asXML ] {
}
Method [ public method saveXML ] {
}
Method [ public method xpath ] {
}
Method [ public method registerXPathNamespace ] {
}
Method [ public method attributes ] {
}
Method [ public method children ] {
}
Method [ public method getNamespaces ] {
}
Method [ public method getDocNamespaces ] {
}
Method [ public method getName ] {
}
Method [ public method addChild ] {
}
Method [ public method addAttribute ] {
}
}
}

So what does it all mean? It’s quite a bit to read through. So starting from the top;

Line one shows us the definition of the class but it’s got a few things more than we are used to seeing. The first being . This means that it exists internally, as in its implemented in C code rather than native PHP. SimpleXML is the name of the package that the class is in. Then on this line we can see the name of the class, any classes it extends and any interfaces it implements.
The next step as we go in we can see its divided into various different sections. These are fairly self explanatory so I won’t go into too much detail. Again, for each method you can see its implemented internally and is in the SimpleXML package.

header("Content-Type: text/plain");
error_reporting(E_ALL);
class Test{
private function hello(){
}
}
Reflection::export(new ReflectionClass(‘Test’));

The above example is the same as before but with a simple class made up for it. The output follows

Class [ class Test ] {
@@ C:\Important\www\BlogExamples\5. Analysing PHP Objects and Classes\reflection.php 6-12
- Constants [0] {
}
- Static properties [0] {
}
- Static methods [0] {
}
- Properties [0] {
}
- Methods [1] {
Method [ private method hello ] {
@@ C:\Important\www\BlogExamples\5. Analysing PHP Objects and Classes\reflection.php 8 - 10
}
}
}

This has a very similar result to the output on the SimpleXMLElement in terms of the content. The key differences are, internal is now replaced by ‘user’ and rather than have a package name there is a special value represented by ‘@@’ that shows where the code resides. It’s nice to see it even shows the line numbers for the class and the methods.

So…

What is this all useful for? Generally on the whole PHP’s documentation is very good. However, it doesn’t always show the differences between versions of PHP clearly, some of the newer features remain less well documented or perhaps the documentation doesn’t have good coverage in your native language.

Either way, will this ever replace reading the source code and documentation? Well, probably not. However for internal code thats written in C unless you want to read that it makes for quite a handy reference.

Aptana Cloud

Dougal — Tue, 29 Apr 2008 17:23:40 +0000

From the makers of the Aptana IDE and Jaxer. We have another interesting product, Aptana Cloud. There is plenty of coverage out there already so I wont attempt to compete. Here are some of the best;

This looks very interesting to me and I’m a big supporter of all things JavaScript (note you don’t have to use JavaScript for Aptana Cloud).

Lazy Loading in PHP with __autoload

Dougal — Sat, 26 Apr 2008 13:35:06 +0000

__autoload is one of the magic methods added to PHP in version 5. It creates a very easy way for you to manage all your different class files. Actually, with __autoload you don’t need to manage them.

Often you will see in PHP projects files that include the other files needed for that page. You can then end up with a while bunch of require_once calls and so on. This can be quite tedious to maintain and you may not always need all the files.

When you create a new instance of a class PHP checks for it and if it can’t be found the __autoload method is called. It’s passed in one parameter, the name of the class.

function __autoload($class){
require "/path/to/class/files/$class.php";
}
$x = new Foo();

Above is a simple example of autoload in action. When a new Foo is created the autoload function requires /path/to/class/files/Foo.php. So with a simple naming convention each class in its own file where the file name is the name of the class (similar to Java) you can easily include files.

This example can be taken slightly further to manage hierarchies of classes…

function __autoload($class){
$class = str_replace(‘_’, ‘/’, $class);
$path = "/path/to/class/files/$class.php";
require $path;
}
$x = new Foo_Bar();

The above code simply replaces all underscores ( _ ) with forward slashes ( / ) before requiring the class. The naming convention changes slightly for this, the class name Foo_Bar would be found in following path: /path/to/class/files/Foo/Bar.php.

function __autoload($class){
$class = str_replace(‘_’, ‘/’, $class);
$path = "/path/to/class/files/$class.php";
if(file_exists($path)){
require $path;
} else {
// Error handling here, log it etc.
// Exceptions cannot be thrown.
}
}
$x = new Foo_Bar_Fail();

The final example shows the same code again with some optional error checking. It allows you to log errors and so on. However, exceptions cannot be thrown by __autoload unless its being called by class_exists. Since this function calls autoload to look for classes. When trying to throw exceptions, PHP runs into a fatal error before its thrown due to the order or __autload. This means a fatal error will be triggered as the class can’t be found and the exception will vanish.

Following up to this post I plan to do one of spl_autoload soon. With this you can have PHP automatically run its own autoload procedure on include paths. For further reading on this follow the link below. The documentation is a little sparse however.

Enjoy, lazy loading!

Useful links;

Design Patterns: Singleton

Dougal — Sat, 19 Apr 2008 20:17:59 +0000

The singleton design pattern is a way of enforcing only one instance of an object. This is achieved by making 3 fairly simple steps to a class. Firstly making the constructor private, creating a static member variable that will contain the instance and then creating a static method for accessing the instance.

So, In PHP it would be;

class Foo {
private static $instance = null;
private function __construct(){
// Private, so can’t be accessed from outside
}
private static function getInstance(){
if($this->instance == null) {
$this->instance = new Foo();
}
return $this->instance;
}
public function bar(){
echo "I am one, I am a singleton!";
}
}
// Example usage
$foo = Foo::getInstance();
$foo->bar();
// or the chaining method
Foo::getInstance()->bar();
// Note this will not work
$myfoo = new Foo();

Why are singletons good? It’s almost like a global object right? What is good about a singleton as opposed to a concrete class? A concrete class has more flexibility as you can create multiple instances and then each instance can of course be different. However, what if you only ever want one instance of an object and ensure you don’t accidentally make another instance (or another developer doesn’t). You could use globals but they need to be managed somehow and people can still make mistakes and forget things.

The most common example is a database class, you might want to make sure that you only open one connection to the database. Creating multiple instances of database class could (depending how you programmed it) open multiple database connections and be inefficient.

The singleton can also be useful if an object that is used infrequently across a website. It can provide you easy access to it without having to worry about passing the object around. In the above code, you can access that object instance with this snippet of code “Foo::getInstance();”.

New Blog

Dougal — Sat, 12 Apr 2008 22:24:40 +0000

So, this is my first post. Just a quick introduction to this blog and what you can expect to find here.

Interestingly I’ve always has mixed feelings about blogs. I’ve always been fairly anti personal blogs. They seem to be generally a waste of time, besides, who wants to know what I ate for breakfast? (I skipped breakfast today by the way). So instead of that, I’m going to attempt to make a blog based on my experiences as a developer.

Basically, this blog is going to be strongly focused around programming. I’ll be covering a number of languages and platforms. Most likely this will depend on what I’m using in my studies or in the workplace at that time.

I have a wide range of interests when it comes to programming, including JavaScript, PHP, .NET and everything in between. So you can expect coverage of all these topics in a fairly random order. Depending what takes my interest first!

I’m going to aim to try and do a post weekly, all going well and I’m not on holiday or something.

Some of the following are topic idea’s that I currently have;

Design Patterns
Cover some of the less well documented PHP features. Such as the magic methods or Soap (SoapClient, SoapServer etc.).
Talking about new technologies such as Silverlight or Jaxer.
Having fun with JavaScript – like animations and pyhsics.

I’m also open open to suggestions of topics. Feel free to send them in.

Edit;

On a side note, the design and layout of this page is going to be a work in progress. It’s not really the main focus of this website