Downloaded 20 times
Write a Google Closure Editor Plugin
- 1. . . Write a Google Closure Editor Plugin @yinhm December 19, 2010 . . @yinhm Google Closure Plugin 1/27
- 2. . 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
- 3. . 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
- 4. . 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
- 5. . Hello world: How does it work? . • bootstrap file base.js • import module: goog.require(’goog.dom’) . . @yinhm Google Closure Plugin 5/27
- 6. . Modules . • DOM, Dojo query(third party) • UI: Autocomplete, dialog, date picker, Tab... • AJAX: xhrio, iframeio... • Rich-text editor . . @yinhm Google Closure Plugin 6/27
- 7. . object-oriented programming . • Class-based programming(as opposed to prototype-based) • Namespace • Inheritance . . @yinhm Google Closure Plugin 7/27
- 8. . 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
- 9. . 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
- 10. . 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; }; . . @yinhm Google Closure Plugin 10/27
- 11. . Inheritance of ui.Dialog . . . @yinhm Google Closure Plugin 11/27
- 12. . goog.Disposable . • dispose • disposeInternal . . @yinhm Google Closure Plugin 12/27
- 13. . goog.events.EventTarget . • addEventListener • removeEventListener • dispatchEvent . . @yinhm Google Closure Plugin 13/27
- 14. . 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 . . @yinhm Google Closure Plugin 14/27
- 15. . A UI Component Example . An Introduction to Components . . @yinhm Google Closure Plugin 15/27
- 16. . 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
- 17. . Rich Text Editor: high-level . design • Using build-in browser features: contentEditable, execCommand • More than that: cross-browser consistency . . @yinhm Google Closure Plugin 17/27
- 18. . . Let’s build a image plugin. . . @yinhm Google Closure Plugin 18/27
- 19. . 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
- 20. . 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
- 21. . 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
- 22. . 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
- 23. . Implemen: ImageDialogPlugin . • inherit from AbstractDialogPlugin • isSupportedCommand, execCommand, execCommandInternal handler by AbstractDialogPlugin • must implement createDialog . . @yinhm Google Closure Plugin 23/27
- 24. . Implement: ImageDialog . • inherit from good.ui.editor.AbstractDialog • must implement createDialogControl, createOkEvent • creating dialog HTML, handle events . . @yinhm Google Closure Plugin 24/27
- 25. . Implement: detail . Open sourced: http: //github.com/yinhm/google-closure-editor-image/ . . @yinhm Google Closure Plugin 25/27
- 26. . References . • http://code.google.com/closure, Google Closure . . @yinhm Google Closure Plugin 26/27
- 27. . 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 . . @yinhm Google Closure Plugin 27/27