EaselJS/tutorials/Inheritance/index.html at master · CreateJS/EaselJS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>EaselJS Tutorial: Inheritance</title>
	<link href="../../_assets/css/shared.css" rel="stylesheet" type="text/css">
	<link href="../_shared/tutorial.css" rel="stylesheet" type="text/css">
	<script src="../_shared/tutorial.js"></script>

	<!-- SyntaxHighlighter-->
	<script src="../_shared/SyntaxHighlighter/shCore.js"></script>
	<script src="../_shared/SyntaxHighlighter/shBrushJScript.js"></script>
	<script src="../_shared/SyntaxHighlighter/shBrushXml.js"></script>
	<link href="../_shared/SyntaxHighlighter/shCore.css" rel="stylesheet" type="text/css">
	<link href="../_shared/SyntaxHighlighter/shThemeCreateJS.css" rel="stylesheet" type="text/css">
</head>

<body onload="initTutorial();">
	<article>
		<header>
			<h1>EaselJS <em>Inheritance</em></h1>
			<p>
				<strong>Synopsis:</strong> Creating custom classes that extend display objects.<br>
				<strong>Topics:</strong> inheritance, extend, promote<br>
				<strong>Target:</strong> EaselJS v0.8.0
			</p>
		</header>
		<p class="highlight">
			This tutorial is part of the <a href="https://github.com/CreateJS/EaselJS/" target="_blank">EaselJS GitHub repository</a>.<br />
			Check out the repository for more tutorials and a handful of helpful samples.
		</p>

		<section>
			<header>
				<h2>Inheritance</h2>
			</header>
			<p>
				Creating new class definitions that extend existing display objects provides encapsulated, easily reusable visual elements, and it's easy to do. This tutorial shows one method of extending a class, but there are many other options - use the one that's most comfortable for you, but apply the lessons you learn here.
			</p>
			<p>
				We'll create a <code>Button</code> class, that extends <code>Container</code>.
			</p>
			<textarea class="brush: js;" readonly>
(function() {

function Button(label) {
	this.Container_constructor();
	this.label = label;
}
var p = createjs.extend(Button, createjs.Container);

p.draw = function(ctx, ignoreCache) {
	this.Container_draw(ctx, ignoreCache);
	// add custom logic here.
}

window.Button = createjs.promote(Button, "Container");
}());
			</textarea>
			<p>
				Lines 1 & 15 create an anonymous function scope to work in and avoid polluting the global scope.
			</p>
			<h3>The constructor</h3>
			<p>
				Line 3 defines the constructor function which will be called when we create new Button instances.
				Line 4 calls Container's constructor, via a method alias that was set up by <code>promote</code> (more on that shortly).
				Calling the super class's constructor is very important to ensure new instances are set up correctly.
				Line 5 just sets the value of an instance property based on a parameter passed to the constructor.
			</p>
			<h3>Using createjs.extend()</h3>
			<p>
				Line 7 makes Button extend, or inherit from, the Container class. This adds Container to it's prototype
				chain, making all of its methods available in Button.
			</p>
			<p>
				The <code>extend</code> method passes back the
				new prototype, which we assign to a new variable <code>p</code> for easy access.
			</p>
			<h3>Adding methods</h3>
			<p>
				Lines 9-12 set up a new draw method on Button's prototype, which overrides an existing draw method on Container. Just like with the
				constructor, it can call its super class's version of the method using a special method that was added by <code>promote</code>.
			</p>
			<h3>Using createjs.promote()</h3>
			<p>
				Line 14 calls <code>promote</code>, which identifies all of the methods in Container that were overridden in Button
				(including the constructor) and promotes them into Button with a new name in the format <code>prefix_methodName</code>.
				We specified "Container" as the prefix which results in promoted methods that look like <code>Container_draw</code>.
				This gives you an easy and highly performant way to call super class methods in the instance scope.
			</p>
			<p>
				The <code>promote</code> method returns the class, which is then assigned into the global/window scope to make it available for our application.
			</p>
		</section>

		<section>
			<header>
				<h2>Finishing up</h2>
			</header>
			<p>
				Now the class can be instantiated, and added to the display list like any other display object.
			</p>
			<textarea class="brush: js;" readonly>
var myButton = new Button("label");
stage.addChild(myButton);
			</textarea>
			<p>
				Check out demo.html and Button.js to see an example of this in action. Click the buttons.
			</p>

			<iframe src="demo.html" class="demo" data-description="a (simple) reusable Button class" width="100%" height="220px"></iframe>
		</section>

	</article>
</body>
</html>