Aloha Editor presentation from T3CON10 in Frankfurt about integration & extension

2. Clemens Prerovsky twitter.com/blacktarmac c.prerovsky@gentics.com

3. Phoenix +

4. Agenda Concepts Technical Anatomy Demo PluginDevelopment Roadmap

5. Aloha is about the flow

6. Aloha is about just 15 Buttons

7. Aloha <div> <div> <BR> <BR> is about <p></p> <p></p> <br /> <br /> easy development

8. Editables Just edit. Click and edit. This is all you need. While editing you want to see the results immediately without previews or reloads. With Aloha Editor you work on the final document.

9. Floating Menu

10. Let‘shave a look http://aloha-editor.com/aloha-nightly/examples/AlohaWorld.html

11. Plugins Repositories Format Table Link List Technical Anatomy Core Editables FloatingMenu Ribbon Sidebar UI Events Selection / Range Logging i18n jQuery ExtJS / Sencha

12. Developing a„Product“ plugin

13. http://aloha-editor.com/aloha-nightly/examples/triSports.html

14. Plugins Repositories Format Table Link List Core Editables FloatingMenu Ribbon Sidebar UI Events Selection / Range Logging i18n jQuery ExtJS / Sencha

15. A new plugin... com.example.aloha.plugins.Product /** *AlohaProductExamplePlugin */ EXAMPLE.Product = newGENTICS.Aloha.Plugin('com.example.aloha.plugins.Product');

16. Initialization & adding the insert button /** *Initializetheplugin */ EXAMPLE.Product.init = function () { var that = this; // floating menu "Insert product"-button var insertButton = new GENTICS.Aloha.ui.Button({ 'iconClass' : 'GENTICS_button GENTICS_button_product', 'size' : 'small', 'onclick' : function () { that.insertProduct(); }, 'tooltip' : this.i18n('button.insertproduct'), 'toggle' : false }); GENTICS.Aloha.FloatingMenu.addButton( 'GENTICS.Aloha.continuoustext', insertButton, GENTICS.Aloha.i18n(GENTICS.Aloha, 'floatingmenu.tab.insert'), 1 ); Scope! Tab Group

17. // product scope & product attribute field GENTICS.Aloha.FloatingMenu.createScope(this.getUID('product'), 'GENTICS.Aloha.global'); this.productField = newGENTICS.Aloha.ui.AttributeField(); this.productField.setTemplate('<span><b>{displayName}</b>' + '<span class="product-preview" style="background-image: url({url});"></span>' + '<br class="clear" /><i>{objectType}</i></span>'); this.productField.setObjectTypeFilter(['product']); GENTICS.Aloha.FloatingMenu.addButton( this.getUID('product'), this.productField, this.i18n('floatingmenu.tab.product'), 1 ); A newScope& theAttribute Field

18. InsertProduct /** *insertaproductatthecursorposition */ EXAMPLE.Product.insertProduct = function () { // activate floating menu tab GENTICS.Aloha.FloatingMenu.userActivatedTab = this.i18n('floatingmenu.tab.product'); // current selection or cursor position var range = GENTICS.Aloha.Selection.getRangeObject(); // insert a product varnewProduct = jQuery('<div class="GENTICS_block product" contenteditable="false">' + '<div class="image"></div>' + '<div class="name">' + this.i18n('newproductname') + '</div></div>'); // insert the product into the dom and focus it GENTICS.Utils.Dom.insertIntoDOM(newProduct, range, jQuery(GENTICS.Aloha.activeEditable.obj)); range.startContainer = range.endContainer = newProduct.contents().get(0); range.select(); this.productField.focus(); }; Switch Tab Cursor Pos

19. HandleselectionChanged // handle event as soon as a product block is clicked GENTICS.Aloha.EventRegistry.subscribe(GENTICS.Aloha, 'selectionChanged', function(event, rangeObject) { var foundMarkup = that.findProduct( rangeObject ); jQuery('.product-selected') .removeClass('product-selected'); if ( foundMarkup.length != 0 ) { GENTICS.Aloha.FloatingMenu .setScope(that.getUID('product')); that.productField.setTargetObject(foundMarkup, 'data-product-name'); foundMarkup.addClass('product-selected'); } // re-layout the Floating Menu GENTICS.Aloha.FloatingMenu.doLayout(); }); „Link“ Attribute Field Events

20. So far…

21. Repositories /** *Createtheresourceobject */ GENTICS.Aloha.Repositories.Product = newGENTICS.Aloha.Repository('com.gentics.aloha.resources.Product'); /** *resourcedata */ GENTICS.Aloha.Repositories.Product.settings.data = [ { id: 1, displayName: 'KuotaKueen K', url:'kuota-kueen-k.jpg', objectType: 'product' },{ id: 2, displayName: '2XU Wetsuit', url:'2xu-wetsuit.jpg', objectType: 'product' },… ]; A newRepository

22. Query &update selectedProduct /** *SearchesaresourceforresourceitemsmatchingqueryifobjectTypes. */ GENTICS.Aloha.Repositories.Product.query = function(queryString, objectTypeFilter, filter, inFolderId, orderBy, maxItems, skipCount, renditionFilter, callback) { var d = this.settings.data.filter(function(e, i, a) { var r = newRegExp(queryString, 'i'); return ( jQuery.inArray(e.objectType, objectTypeFilter) > -1 && ( e.displayName.match(r) || e.url.match(r) ) ); }); callback.call( this, d); }; /** *callbackafteraproducthasbeenselectedfromtheresource */ GENTICS.Aloha.Repositories.Product.markObject = function (obj, resourceItem) { EXAMPLE.Product.updateProduct(obj, resourceItem); }; Filtering

23. Success! http://aloha-editor.com/aloha-nightly/examples/triSports.html

24. Next up… LinkPlugin

25. Semantics Framework BOOM! POW! CRUNCH!!! ZONK! BOINK!

26. Collaboration

27. Get involved! www.aloha-editor.com github.com/alohaeditor/Aloha-Editor