Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Archived:Use prototype JavaScript library - Object Creation in Symbian Web Runtime

From Wiki
Jump to: navigation, search

Archived.pngArchived: This article is archived because it is not considered relevant for third-party developers creating commercial solutions today. If you think this article is still relevant, let us know by adding the template {{ReviewForRemovalFromArchive|user=~~~~|write your reason here}}.

Article Metadata
Code ExampleCompatibility
Platform(s):
S60 3rd Edition FP2
Article
Created: dougcn (24 Mar 2008)
Last edited: hamishwillee (02 Jul 2012)


Contents

Introduction

As you may know, Prototype is a famous cross-web-browser javascript library. It supports almost all current popular web browsers, such as FireFox, Safari, IE, Opera, etc. With the latest version(Prototype 1.6.0), it also supports AppleWebKit, an open source web engine provided by Apple Inc.

The Nokia Web Browser is built upon S60WebKit, a port of the open source WebKit project to the S60 platform. Nokia WRT(Web-RunTime) is based on it.

In this topic, we will see how to define a class and its subclass using prototype.js library.

Install prototype.js

Please go to Archived:Use prototype JavaScript library in Symbian Web Runtime for how to install prototype javascript library.

Object Creation

Classes and subclasses can be defined in new syntax or old syntax, we will define both for a comparison. We will also learn how to add an instance method and class method.

Define classes in new syntax

To define a class, for example, Animal class, we can call Class.create method and pass properties into this method as follows:

// properties are directly passed to `create` method
var Animal = Class.create({
initialize: function(name) {
this.name = name;
},
eat: function(food) {
return this.name + ' is eating ' + food;
}
});

To derive a sub-class from the Animal class -- Cat class, we call the Class.create function again and use Animal class as the first parameter and a method collection for the new class as the second parameter. Note: Class.create can take in an arbitrary number of arguments.

// when subclassing, specify the class you want to inherit from
var Cat = Class.create(Animal, {
// redefine the eat method
eat: function($super, food) {
return $super(food) + ' or sth.!';
}
});

In Cat class, the eat method overrides the same one in parent class.

The source code for the "new syntax" test case:

function testNewSyntax()
{
var cat1 = new Cat('Mimi');
alert(cat1.eat('fish'));
// ->; "Mini is eating fish or sth!"
}

Define classes in old syntax

Define a class -- Aninal0 class. (We must use a different class name in a global namespace)

/** obsolete syntax **/
var Animal0 = Class.create();
Animal0.prototype = {
initialize: function(name) {
this.name = name;
},
eat: function(food) {
return this.name + ' is eating ' + food;
}
};

Define a subclass -- Cat0 class. (Again, we use a different name.)

var Cat0 = Class.create();
// inherit from Person class:
Cat0.prototype = Object.extend(new Animal0(), {
// redefine the eat method
eat: function(food) {
return this.name + ' is eating ' + food + ' or sth.!';
}
});

The source code for the "Old syntax" test case:

function testOldSyntax()
{
var cat1 = new Cat0('Mimi');
alert(cat1.eat('fish'));
// -> "Mini is eating fish and sth.!"
}

Add new methods for an existing class temporarily

Add a new method for Animal class, so an instance of a derived class can also call that method.

function testAddMethods()
{
var cat1 = new Cat('Mimi');
 
// every animal should be able to drink. But here we just let it "eat water"
Animal.addMethods({
drink: function() {
return this.eat('water');
}
});
 
alert(cat1.drink()); // -> "Mimi is eating water or sth.!"
}

Use a mixin module when defining a new class

First, define a mixin module -- Tunnable.

// define a module
var Tunable = {
down: function(hp) {
this.volume -= hp;
if (this.volume < 0) this.mute();
},
mute: function() {
this.isMute = true;
}
};

Second, create a class based on the mixin.

var Tuner = Class.create(Tunable, {
initialize: function() {
this.volume = 100;
this.isMute = false;
}
});

And then test it. Here is the source code for this test case.

function testMixin()
{
var tuner = new Tuner;
tuner.down(30);
alert(tuner.volume); //-> 70
}

Add class methods

Here we define a class method named "allEatSth" for Cat class. So, you can call the Cat.allEatSth() function directly.

function testClassMethods()
{
Cat.allEatSth = function(n) {
var items = [];
n.times(function(i) {
items.push(new Cat('Teddy').eat( i + 1));
});
return items;
}
 
alert(Cat.allEatSth(3));
// -> ["Teddy is eating 1 or sth.!", "Teddy is eating 2 or sth.!", "Teddy is eating 3 or sth.!"]
}

In addition, there are other ways to define new methods. Please navigate to the references below for more informations.

Download Sample Application

Download sample wiget of this topic: File:PrototypeObject.zip. To install it, just rename the suffix .zip to .wgz.

For the latest version, please go to http://code.google.com/p/prototypewrt/downloads/list


Related topics

References

  • Prototype Homepage[1]
  • Sample WRT applications Download [2]
This page was last modified on 2 July 2012, at 04:31.
80 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×