This chapter describes the JavaScript class system since it is required knowledge for creating custom controls.
/*
Class person.
*/
class Person {
constructor(sName) {
this.sName = sName || "unknown";
}
sayHi(){
console.log("Hi!");
}
sayName(){
console.log ("My name is " + this.sName + "!");
}
}
The sample above defines the class Person with a property sName and two methods. An instance of this class is made using the new keyword.
const oJohn = new Person("John");
oJohn.sayHi();
oJohn.sayName();
The sample above creates an instance of this person and then calls its two methods. This will result in the lines ‘Hi!’ and ‘My name is John!’ appearing on the JavaScript console.
/*
Class student
*/
class Student extends Person {
constructor(sName, iNr) {
// Call constructor of super class
super(sName);
this.iNr = iNr || 0;
}
sayHi(){
// Forward send to sayHi of super class
super.sayHi();
console.log("I'm a student with number " + this.iNr + "!");
}
}
In the sample above a class named Student is defined that is a subclass of Person. The constructor function is now calling the constructor of its base class using super. In DataFlex this would be a forward send.
The sayHi method is augmented and writes an extra line to the console. Note that super.sayHi(this); calls the original sayHi function comparable to a forward send in DataFlex.
const oStudent = new Student("Stephen", 12412);
oStudent.sayHi();
oStudent.sayName();
The sample above creates an instance of Student and calls both sayHi and sayName. This will result in the lines ‘Hi!’, ‘I’m a student with number 12412!’ and ‘My name is Stephen!’ appearing on the JavaScript console.
This chapter describes how to use Mixins within the Web Framework.
Mixins are JavaScript classes that take another class as a parameter to inherit from.
/*
Mixin
*/
const Council_Mixin = superclass => class extends superclass {
constructor(sName) {
// Call constructor of super class
super(sName);
this.bIsCouncil = True;
}
sayCouncil(){
console.log("I am a council member!");
}
}
The sample above defines the Council mixin class. This class inherits from a superclass that can be variable.
/*
Class Student with Mixin
*/
class Student extends Council_Mixin(Person) {
constructor(sName, iNr) {
// Call constructor of super class
super(sName);
this.iNr = iNr || 0;
}
sayHi(){
// Forward send to sayHi of super class
super.sayHi();
console.log("I'm a student with number " + this.iNr + "!");
}
}
In the sample above the class Student inherits from both Council_Mixin and Person.
const oCouncilStudent = new Student("John [Council]", 9001);
oCouncilStudent.sayHi();
oCouncilStudent.sayName();
oCouncilStudent.sayCouncil();
The sample above creates an instance of Student and calls sayHi, sayName and sayCouncil. This will result in the lines ‘Hi!’, ‘I’m a student with number 9001!’, ‘My name is John [Council]!’ and ‘I am a council member!’ appearing on the JavaScript console.
The diagram above shows the inheritance structure of the framework including most classes. The core class of the framework is df.WebObject and this is where all classes inherit from. To develop a component without user interface this is the class to inherit from. The df.WebBaseUIObject class has the basic rendering functionality built in. The most sensible class to use as a base class is df.WebBaseControl as this represents a control that participates in the column layout system and already has a label. Then for data bound controls the df.WebBaseDEO class might be the right base class but it has a slightly complicated API to set and get data that includes support for things like masks.
Previous Topic: Building Custom Controls
Next Topic: Lifecycle