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