Writing A Google Closure Editor Plugin

.
Write a Google Closure

Editor Plugin
@yinhm
December 19, 2010
. .
@yinhm Google Closure Plugin 1/27
.
Before we start
.
• Closure is a JavaScript library

• Developed by google, released under Apache license
• The JavaScript library behind Google’s web apps
. .
.
Hello world: Step 1

.
goog.require('goog.dom');
function sayHi() {
var newHeader = goog.dom.createDom('h1',
{'style': 'background-color:#EEE'},
'Hello world!');
goog.dom.appendChild(document.body, newHeader);
}
. .
.
Hello world: Step 2

.
<html>
<head>
<script src="closure-library/closure/goog/base.js">
</script>
<script src="hello.js"></script>
</head>
<body onload="sayHi()">
</body>
</html>
. .
.
Hello world: How does it work?

.
• bootstrap file base.js

• import module: goog.require(’goog.dom’)
. .
.
Modules
.
• DOM, Dojo query(third party)

• UI: Autocomplete, dialog, date picker, Tab...
• AJAX: xhrio, iframeio...
• Rich-text editor
. .
.
object-oriented programming
.
• Class-based programming(as opposed to prototype-based)

• Namespace
• Inheritance
. .
.
Example of a Class
.
/** no JSDoc **/

goog.provide('example.Animal'}
example.Animal = function(first_name) {
this.name_ = name;
};
example.Animal.prototype.first_name = '';
example.Animal.prototype.getName = function() {
return this.name_;
};
. .
.
Static methods
.
defined on Class constructor function but not it’s prototype
example.Animal.equil = function(a1, a2) {

return a1.name == a2.name;
};
. .
.
Inheritance
.
goog.privode('example.Bird');
goog.require('example.Animal');
example.Bird = function() {
// call to the superclass’s constructor function
goog.base(this, 'bird');
};
goog.inherits(example.Bird, example.Animal); // prototyp
example.Bird.prototype.fly = function() {
return true;
};
. .
.
Inheritance of ui.Dialog
.
. .
.
goog.Disposable
.
• dispose
• disposeInternal
. .
.
goog.events.EventTarget
.
• addEventListener
• removeEventListener
• dispatchEvent
. .
.
goog.ui.Component
.
Life Cycle Stage (or Purpose)

• constructor Component instance creation
• createDom() Component DOM structure building
• decorateInternal() (optional)
• enterDocument() Post DOM-building initialization (such
as attaching event listeners)
• exitDocument() Post DOM-removal cleanup (such as
detaching event listeners)
• dispose() Component disposal
• canDecorate() Indicates whether the component can use
a pre-existing element
. .
.
A UI Component Example
.
An Introduction to Components
. .
.
Rich Text Editor

.
• Known as Trog Editor

• Used in previous verion of Google Docs
• Used in Gmail
• Google not releasing all plugins(yet), eg: Image
. .
.
Rich Text Editor: high-level

.
design
• Using build-in browser features: contentEditable,

execCommand
• More than that: cross-browser consistency
. .
.
Let’s build a image plugin.
. .
.
init editor
.
var editorId = 'myId';

var editorDiv = dom.createDom(goog.dom.TagName.DIV,
{id: editorId,
style: 'width: 630px; height: 300px;'});
// Create an editable field.
var trogField = new goog.editor.Field(editorId);
trogField.makeEditable();
. .
.
register plugin
.
var trogField = new goog.editor.Field(editorId);

trogField.registerPlugin(
new goog.editor.plugins.ImageDialogPlugin(config));
trogField.makeEditable();
. .
.
Interacting
.
• User clicks image button

• trogField.execCommand(goog.editor.Command.BOLD)
• trogField looks at the installed plugin
• isEnabled? isSupportCommand?
• plugin.execCommand
• plugin.execCommandInternal
. .
.
goog.editor.Plugin
.
• base class for all Trog plugins

• extends goog.events.EventTarget
• fieldObject points to instance of goog.editor.Field
• getFieldDomHelper() returns the goog.dom.Domhelper
for the field
• must implement getTrogClassId()
• isSupportedCommand, execCommand,
execCommandInternal
. .
.
Implemen: ImageDialogPlugin
.
• inherit from AbstractDialogPlugin

• isSupportedCommand, execCommand,
execCommandInternal handler by AbstractDialogPlugin
• must implement createDialog
. .
.
Implement: ImageDialog
.
• inherit from good.ui.editor.AbstractDialog

• must implement createDialogControl, createOkEvent
• creating dialog HTML, handle events
. .
.
Implement: detail
.
Open sourced: http:

//github.com/yinhm/google-closure-editor-image/
. .
.
References
.
• http://code.google.com/closure, Google Closure
. .
.
About
.
Created in LaTEX using the beamer class, TeX Live and Emacs.
Published under the Creative Commons Attribution 3.0 License

http://creativecommons.org/licenses/by/3.0/
by @yinhm
http://yinhm.appspot.com
Document version December 19, 2010
. .

Writing A Google Closure Editor Plugin

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Writing A Google Closure Editor Plugin

Uploaded by

Copyright:

Available Formats

.

Write a Google Closure

December 19, 2010

• Closure is a JavaScript library

Hello world: Step 1

Hello world: Step 2

Hello world: How does it work?

• bootstrap ﬁle base.js

• DOM, Dojo query(third party)

• Class-based programming(as opposed to prototype-based)

/** no JSDoc **/

deﬁned on Class constructor function but not it’s prototype

example.Animal.equil = function(a1, a2) {

Life Cycle Stage (or Purpose)

Rich Text Editor

• Known as Trog Editor

Rich Text Editor: high-level

• Using build-in browser features: contentEditable,

Let’s build a image plugin.

var editorId = 'myId';

var trogField = new goog.editor.Field(editorId);

• User clicks image button

• base class for all Trog plugins

• inherit from AbstractDialogPlugin

• inherit from good.ui.editor.AbstractDialog

Open sourced: http:

• http://code.google.com/closure, Google Closure

Published under the Creative Commons Attribution 3.0 License

Document version December 19, 2010

You might also like

/ no JSDoc /