Embed Size (px)
DESCRIPTION
Citation preview
.
.
.
Write a Google ClosureEditor 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
..@yinhm Google Closure Plugin 2/27
.
.
.
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);}
..@yinhm Google Closure Plugin 3/27
.
.
.
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>
..@yinhm Google Closure Plugin 4/27
.
.
.
Hello world: How does it work?
• bootstrap file base.js• import module: goog.require(’goog.dom’)
..@yinhm Google Closure Plugin 5/27
.
.
.
Modules
• DOM, Dojo query(third party)• UI: Autocomplete, dialog, date picker, Tab...• AJAX: xhrio, iframeio...• Rich-text editor
..@yinhm Google Closure Plugin 6/27
.
.
.
object-oriented programming
• Class-based programming(as opposed to prototype-based)• Namespace• Inheritance
..@yinhm Google Closure Plugin 7/27
.
.
.
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_;
};
..@yinhm Google Closure Plugin 8/27
.
.
.
Static methods
defined on Class constructor function but not it’s prototype
example.Animal.equil = function(a1, a2) {return a1.name == a2.name;
};
..@yinhm Google Closure Plugin 9/27
.
.
.
Inheritancegoog.privode('example.Bird');
goog.require('example.Animal');
example.Bird = function() {// call to the superclass’s constructor functiongoog.base(this, 'bird');
};goog.inherits(example.Bird, example.Animal); // prototype chain
example.Bird.prototype.fly = function() {return true;
};..
@yinhm Google Closure Plugin 10/27
.
.
.
Inheritance of ui.Dialog
..@yinhm Google Closure Plugin 11/27
.
.
.
goog.Disposable
• dispose• disposeInternal
..@yinhm Google Closure Plugin 12/27
.
.
.
goog.events.EventTarget
• addEventListener• removeEventListener• dispatchEvent
..@yinhm Google Closure Plugin 13/27
.
.
.
goog.ui.ComponentLife 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
..@yinhm Google Closure Plugin 14/27
.
.
.
A UI Component Example
An Introduction to Components
..@yinhm Google Closure Plugin 15/27
.
.
.
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
..@yinhm Google Closure Plugin 16/27
.
.
.
Rich Text Editor: high-leveldesign
• Using build-in browser features: contentEditable,execCommand
• More than that: cross-browser consistency
..@yinhm Google Closure Plugin 17/27
.
.
.
Let’s build a image plugin.
..@yinhm Google Closure Plugin 18/27
.
.
.
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();
..@yinhm Google Closure Plugin 19/27
.
.
.
register plugin
var trogField = new goog.editor.Field(editorId);trogField.registerPlugin(new goog.editor.plugins.ImageDialogPlugin(config));
trogField.makeEditable();
..@yinhm Google Closure Plugin 20/27
.
.
.
Interacting
• User clicks image button• trogField.execCommand(goog.editor.Command.BOLD)• trogField looks at the installed plugin• isEnabled? isSupportCommand?• plugin.execCommand• plugin.execCommandInternal
..@yinhm Google Closure Plugin 21/27
.
.
.
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
..@yinhm Google Closure Plugin 22/27
.
.
.
Implemen: ImageDialogPlugin
• inherit from AbstractDialogPlugin• isSupportedCommand, execCommand,
execCommandInternal handler by AbstractDialogPlugin• must implement createDialog
..@yinhm Google Closure Plugin 23/27
.
.
.
Implement: ImageDialog
• inherit from good.ui.editor.AbstractDialog• must implement createDialogControl, createOkEvent• creating dialog HTML, handle events
..@yinhm Google Closure Plugin 24/27
.
.
.
Implement: detail
Open sourced: http://github.com/yinhm/google-closure-editor-image/
..@yinhm Google Closure Plugin 25/27
.
.
.
References
• http://code.google.com/closure, Google Closure
..@yinhm Google Closure Plugin 26/27
.
.
.
About
Created in LaTEX using the beamer class, TeX Live and Emacs.
Published under the Creative Commons Attribution 3.0 Licensehttp://creativecommons.org/licenses/by/3.0/
by @yinhmhttp://yinhm.appspot.com
Document version December 19, 2010
..@yinhm Google Closure Plugin 27/27
![DIALux4[1].0- · PDF filedialux 2 plugin. 1.X. plugin , plugin. luminaire selection Plugin plugin . home page, Intenet Explorer](https://img.pdfslide.net/doc/110x75/5a715aac7f8b9a98538cccda/dialux410-wwwpowerengineeringblogfacomssuacirkhadamatkarkonanarticlesbarghdialux4-learningpdfpdf.jpg)
