[A 3]Javascript oop for xpages developers - public

www.ktrick.com
A-3
Javascript OOP for XPages Developers
Kazunori Tatsuki @ Ktrick Co,. Ltd.

• Name: Kazunori Tatsuki
• Company: KTrick Co,. Ltd.
• Title: Owner of KTrick Co,. Ltd.
• My Experience:
- 7 years development experience as IBM Vender in US.
- XPages and all other domino related languages, C, C++,
Objective-C, Java, PHP etc.
Introduction

Are you struggling with developing
XPages application?
Why?

Javascript?
Client side Javascript…
Sever side Javascript…
What’s different?

Nowadays Javascript sample code is like this …
var func1 = function(){
alert("hello!");
}
var myButton = new Button({
label: "Show me!",
onClick: function(){
myDialog.set("content", “Hello!");
myDialog.show();
}
}, "progbutton").startup();

Javascript used to be like this…
function func1(param){
alert( param);
}
It is easier to understand, isn’t it?
Why has it changed?

Have you ever seen this?
( function() {
//contents here…
}() );
Hmmm, Too much parenthesis…
Actually these are all different meaning.

Javascript looks complicated.
but
Don’t give up!

In this session,
I would like you to understand the structure of
Javascript by breaking down the source code one by one.

Object Oriented Programming
What’s the benefits of using OOP?

Benefits of OOP
・Reusability
・ Refactoring
・ Extensibility
・ Maintenance
・ Efficiency
As a result,
you can reduce the time and cost for development and testing.

OOP
What do you imagine from this word?

OOP
Class
Delegate
OverloadPolymorphism
Java
C++
Abstract
class
C#
Override
Inheritance
Derived class
Instance
UML

If you already have OOP experience, you may think of
「 Class 」

How can we develop OOP without class?

To begin with, Javascript only has
Object.

sub Class （type）
By the way, Class is like this…
Super Class （type）
Object （Instance）
NEW
NEW
NEW
Class is like ‘type’.
You define the class as the
abstract type for instance. Then
you can generate the instances
from the classes.
By doing this, you can generate
same type objects (instances)
easily ,which have the same
functions and attributes.

Again, Javascript doesn’t have Class structure…
then…

Javascript Prototype chain is like this…
Dele
gate
Dele
gate
Dele
gate
You can connect the objects
and objects like chain.
Then if the original object
doesn’t have the specific
methods or variables, then
Javascript delegates to search
in the other object until they
are found.
Dele
gate

Let’s take a look at the actual source code.
※Basically please consider that the sample codes are written in client side Javascript
because server side Javascript cannot use some methods like alert().
However the theories and structures are the same!

How to generate Object?
var obj = { };
That’s it. An empty object was generated.

Object structure
var obj = {
key: value
};
Object can have Properties
(the set of Key and value)
That’s it!
var obj = {
name : “Apple”,
size : 500
};
alert(obj.name);
（i.e.）

Finally, explanation of Prototype Chain !!
It’s THE Javascript OOP

There are two important keywords below when learning
Javascript Prototype Chain.
➲ __proto__ ➲prototype
It’s very important to understand what is different from each other
to understand Javascript OOP.

__proto__
・[Rule] All objects in Javascript have [[Prototype]] internally.
However some browser application like Chrome, Firefox etc allow
you to access the [[Prototype]] by using __proto__ property
instead.
Internal means that you basically
cannot access to the [[Prototype]]

Like this…
Dele
gate
Dele
gate
Dele
gate
__proto__
__proto__
__proto__
__proto__

Sample code (This sample code works in Chrome & Firefox since allowing you to access by
using “__proto__” )
However this code
alert “It is Apple”
var obj = {
name : “none”,
callMe : function() { alert(“It is ” + this.name); }
};
var objApple = { name : “Apple”};
objApple.__proto__ = obj;
var objBlackbox = { };
objBlackbox.__proto__ = objApple;
objBlackbox.callMe();
Object is empty…

Confirm the order of source code（1）
It alerts “It is Apple”
Generates object named obj.
It has name and callMe
property.
Generates object named objApple.
name property is ”Apple”.
Generates object named
objBlackbox.
There is no property.
var obj = {
name : “none”,
};

Confirm the order of source code （2）
Set “obj” into
objApple.__proto_
var obj = {
name : “none”,
};
Generate object named obj.
property.
Generate object named objApple.
Generate object named
objBlackbox.

Set “objApple” int
objBlackbox.__proto__
var obj = {
name : “none”,
};
Set “obj” into
objApple.__proto_
Generate object named obj.
property.
Generate object named objApple.
Generate object named
objBlackbox.
Confirm the order of source code （3）

Confirm the method call (1)
var obj = {
name : “none”,
};

(1) There is no callMe()
method in objBlackbox
var obj = {
name : “none”,
};

(２)Search object stored in __proto__ (objApple)
var obj = {
name : “none”,
};

(３) There is no callMe()
method in objApple neither.
var obj = {
name : “none”,
};

(４) Serach object stored in __proto__ (obj)
var obj = {
name : “none”,
};

(５) Found callMe() method in obj!var obj = {
name : “none”,
};
(４) Serach object stored in __proto__ (obj)

(1) callMe() method is called.
var obj = {
name : “none”,
};
Confirm the attribute call (1)

(２) Refer “name” property
※”this” means “object itself.”
var obj = {
name : “none”,
};

(３) There is no “name”
property in objBlackbox
var obj = {
name : “none”,
};

(４) Search the object stored in __proto__ (objApple)
var obj = {
name : “none”,
};

(５) Found ”name“ in objApple ！
var obj = {
name : “none”,
};

(６) There is “name” property in obj as
well. However not referred
var obj = {
name : “none”,
};
(５) Found ”name“ in objApple ！

Like in the sample code, if the
original object does not have the
methods or attributes, then
Javascript delegates to the chained
object to search them via __proto__
until found
This is
Prototype Chain !
Dele
gate
Dele
gate
Dele
gate
Not
Found
Found
Not
Found
Not
Found

Now is it ok to understand __proto__ ?

Wait a minutes…
__proto__ (aka [[Prototype]]) is just internal property.
Then we should not use the code like below...
Is it true?

In fact I used the code like below as an example so that I can explain
the internal mechanism more clearly.
However, there is an alternative way to achieve the same logic.

The answer is using “New” operation
（i.e.）This is the sample code equivalent to the previous sample.
var obj = new Frout(“Apple”);
Breakdown
of this code
later on.
var Frout = function( pname ) {
this.name = pname;
}
Frout.prototype.callMe = function() { alert(“It is ” + this.name); };
var objApple = new Frout(“Apple”);

➲ prototype
Before moving forward, there is an another keyword
called ”prototype”
It’s very important to understand what is different from __proto__!

prototype
・[Rule] All function objects have prototype property.
“function object”
Hmm, New keyword again...
But don’t worry. You already know this.

Function Object is like this…
It was already explained in previous slide.
Function(method) can be value.

All Function Objects have prototype property.
Again,
For example,
alert( func.prototype );
The second line above does not output “undefined”. This means prototype exists as the default.
However after defining the function object, the prototype refer just empty object.
Then, How to use prototype?

The answer is…
Prototype is used with new operation when the object is generated!

Confirm by source code
(This is the sample code equivalent to previous sample for __proto__)
Define Constructor
Generates Function Object.
name is undefined at this
moment.
Set the method to the
prototype property of Frout
object.
Generate objApple object by
using new operation.
By the prototype chain,
objApple can call the callMe()
method of Frout prototype
var Frout = function( pname ) {
this.name = pname;
}
objApple.callMe(); Alert 「It is Apple」
※ it is not
“objApple.prototype.callMe() “
Explain in the
next slide

var obj = {};
obj.__proto__ = Frout.prototype;
Frout.apply(obj, arguments );
return obj;
Try to breakdown the process of new operation artificially.

var obj = {};
return obj;
(1) Generates object.

var obj = {};
return obj;
(2) Set prototype property into __proto__.
Frout.prototype
Has callMe()
method.
(1) Generate object.

var obj = {};
return obj;
(3) Execute constructor function.
Constructor
function is
executed only
when function
object is
generated.
Frout.prototype
Has callMe()
method.

var obj = {};
return obj; (4) Returns the object.
Constructor
function is
executed only
when function
object is
generated.
Frout.prototype
Has callMe()
method.

var obj = {};
return obj;
(4) Return the object.
Constructor
function is
executed only
when function
object is
generated.
Frout.prototype
Has callMe()
method.

The sample code using for
explanation of __proto__
var obj = {};
return obj;
The breakdown process of new
operation artificially.
If you replace obj to Frout.prototype,
then both objects have callMe()
Frout.prototype.callMe = function() {…};
var obj = {
name : “none”,
callMe : function() { … }
};

Difference between __proto__ and prototype
Prototype is used when
object is generated by
new operation to be
stored in __proto__.
Used by prototype
search mechanism
internally.
By the new operation,
object prototype is
automatically stored.
__proto__ prototype
To make a
prototype chain,
use this prototype.
__proto__ is just needed
to understand the internal
mechanism.
Use new and prototype for
OOP.

Frout object preparation
and if we describe
We don’t want to write this, correct? It is not useful
var Frout = function( name ) {
this.name = name;
}
this.name = name;
this.callMe = function() { alert(“It is ” + this.name); };
}

From an OOP perspective this is bad
But let’s continue…

The reason:
this.name = name;
this.callMe = function() { alert(“It is ” + this.name); };
}
In this code, without a prototype, it will be defined inside the constructor
In other words:
Everytime new is called to create this object, callMe is also instantiated.
In Contrast, methods defined in the prototype, falls within the prototype chain inconsistently
Memory efficiency is better because the mechanism allows reference to the same memory when new objects are
created.

From the sample code earlier:
This function of brackets is integral to what kind of work?
( function() {
//code
}() );

Arriving at the conclusion
Calling an anonymous function immediately
We are going to do this

Immediately after the function
object is returned, we're calling
the function.
Create function
Object。
( function() {
//code・・・
}() );
Anonymous funtion
with no variable
This was done through a very complicated process。
This is used as such that when the page is loaded, it processes only once。
There are 2 parts？
//Immediate function1
(function () {
//code・・・
}());
//Immediate function２
(function () {
//code・・・
})();
Both are immediate function. In
JSLint(http://www.jslint.com/) the
former code seems to be preferred

the result…
this.name = name;
}
alert( objApple.name );
You should not be
able see if it was
private variable
Is this a
private variable？
protected variable?
public variable？
To be considered OOP, don’t we want to hide the private variable?

(Naturally）we are able to see orz
but wait a minute…

I modified something like this
var FroutModel = (function() {
// private variable
var name = “none";
// Constructor
var cls = function(pname){name = pname;};
// public method
cls.prototype.callMe = function() {alert("This is "+name);};
return cls;
} () );
this.name = name;
}
Before re edit

// private variable
// Constructor
// public method
return cls;
} () );
var objApple = new FroutModel(“Apple”);
alert( objApple.name );
objApple.callMe();
To make sure that
undefined is hidden
Can be
successfully called

Somehow it very much looks like a class

In addition to class inheritance, you can implement like this:
// private variable
// Constructor
// Parent class inheritance
cls.prototype = new BaseModel();
// public method
return cls;
} () );
Like this:
BaseModel object and
FroutModel object are
doing the same
implementation

Below are some descriptions about the code up to now. Please challenge yourself by solving the
puzzle
// private variable
// constructor
// parent class inheritance
// public method
return cls;
} () );
Hint: Scope chain cannot be seen
from the outside
Hint:Generate another
object inside the FroutModel
function
Hint: Returns the object that
was generated in the
FroutModel
Hint: Immediate
function

This time、
XPages discussion has not even come out yet…

Now, Javascript has two types:
Client-side Javascript
Server-side Javascript
Both have the concept of class

Lets try the last class’s implementation of SSJS. It’s also useful to copy to script lib
var AppModel = (function() {
// private variable
// constructor
// parent class inheritance
// public method
cls.prototype.func1 = function() {…};
return cls;
} () );
Actually、the
Javascript structure
has their own OOP
template, which I
don’t like.

Xpages call から呼び出し
Output Result
Storing the new object
using viewScope

Some notes when using OOP in XPages
Previously, we have stored the new object into viewScope. In order to use objects persistently, choose “Save the page in
memory” at the XSP property setting

What do you think so far?
In order to better understand Object-oriented in
Javascript, I think it is best to try various concept
I prepared an HTML file for you to test 
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
// <![CDATA[
// private variable
var name = "hoge";
// コンストラクタ
// メソッド
return cls;
}());
var frt = new FroutModel("Banana");
frt.callMe();
alert("frout.name="+frt.name);
// ]]>
</script>
</head>
<body>
</body>
</html>

Note that we are no longer afraid of Dojo
and jQuery

R
e
f
e
r
e
n
c
e
s
• 最強オブジェクト指向言語 JavaScript 再入門
Yuji Nojima slides. Developer at Foreignkey, Co. Ltd.
http://www.slideshare.net/yuka2py/javascript-23768378
• ブログ XPagesで行こう！
Kenji Ebihara’s blog. IBM Champion. Ricoh IT Solution
https://www.ibm.com/developerworks/community/blogs/ebi/
• MDN > 開発者向けのWeb技術 > Javascript
Mozilla Developer Network Javascript Portal
https://developer.mozilla.org/ja/docs/Web/JavaScript
• JSLint
To check Javascript bad coding practice
• http://www.jslint.com/

[A 3]Javascript oop for xpages developers - public

www.ktrick.com
This document are offered under the Creative Commons Attribution 2.1 Japan

[A 3]Javascript oop for xpages developers - public

More Related Content

What's hot (20)

Similar to [A 3]Javascript oop for xpages developers - public (20)

More from Kazunori Tatsuki (8)

Recently uploaded (20)

[A 3]Javascript oop for xpages developers - public