Aloha Presentation #t3con10

Clemens Prerovsky

twitter.com/blacktarmac

c.prerovsky@gentics.com

Phoenix

+

Agenda

• Concepts

• Technical Anatomy

• Demo PluginDevelopment

• Roadmap

Alohais about

the flow

Alohais about

just 15 Buttons

Alohais about

easy development

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.

Floating Menu

Let‘s have a

lookhttp://aloha-editor.com/aloha-nightly/examples/AlohaWorld.html

TechnicalAnatomy

Core

Editables FloatingMenu Ribbon Sidebar

UI EventsSelection /

RangeLogging i18n

jQuery ExtJS / Sencha

Plugins

Format Table Link List

Repositories

Developing

a „Product“plugin

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

Core

Editables FloatingMenu Ribbon Sidebar

UI EventsSelection /

RangeLogging i18n

jQuery ExtJS / Sencha

Plugins

Format Table Link List

Repositories

A new plugin...

/**

* Aloha Product Example Plugin

*/

EXAMPLE.Product =

new GENTICS.Aloha.Plugin('com.example.aloha.plugins.Product');

com.example.aloha.plugins.Product

Initialization & adding the insert button

/**

* Initialize the plugin

*/

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!

TabGroup

// product scope & product attribute field

GENTICS.Aloha.FloatingMenu.createScope(this.getUID('product'), 'GENTICS.Aloha.global');

this.productField = new GENTICS.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 new Scope& the Attribute Field

Insert Product

/**

* insert a product at the cursor position

*/

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

var newProduct = 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

Handle selectionChanged

// 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();

});

Events

„Link“ Attribute

Field

So far…

Repositories

/**

* Create the resource object

*/

GENTICS.Aloha.Repositories.Product = new

GENTICS.Aloha.Repository('com.gentics.aloha.resources.Product');

/**

* resource data

*/

GENTICS.Aloha.Repositories.Product.settings.data = [

{

id: 1,

displayName: 'Kuota Kueen K',

url:'kuota-kueen-k.jpg',

objectType: 'product'

},{

id: 2,

displayName: '2XU Wetsuit',

url:'2xu-wetsuit.jpg',

objectType: 'product'

},…

];

A new Repository

Query & update selected Product

/**

* Searches a resource for resource items matching query if objectTypes.

*/

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 = new RegExp(queryString, 'i');

return (

jQuery.inArray(e.objectType, objectTypeFilter) > -1 &&

( e.displayName.match(r) || e.url.match(r) )

);

});

callback.call( this, d);

};

/**

* callback after a product has been selected from the resource

*/

GENTICS.Aloha.Repositories.Product.markObject = function (obj, resourceItem) {

EXAMPLE.Product.updateProduct(obj, resourceItem);

};

Filtering

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

LinkPlugin

Next up…

POW!

BOOM!

CRUNCH!!!

ZONK! BOINK!

SemanticsFramework

Collaboration

www.aloha-editor.comgithub.com/alohaeditor/Aloha-Editor