Write 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 ﬁle 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
.

deﬁned 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
• ﬁeldObject points to instance of goog.editor.Field
• getFieldDomHelper() returns the goog.dom.Domhelper
for the ﬁeld
• 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
.

a
Created in L TEX 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

. .

Write a Google Closure Editor Plugin

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Write a Google Closure Editor Plugin

Ähnlich wie Write a Google Closure Editor Plugin (20)

Mehr von yinhm .

Mehr von yinhm . (6)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Write a Google Closure Editor Plugin