Migration to jQuery UI

From AlohaWiki

Jump to: navigation, search
Working Draft

This is a working draft for a new Aloha feature. See the Roadmap for a list of things we're currently working on.

Topic...
Version{{{version}}}
Status...
Responsible Persons...
Documentation...
Demo...


Contents

Latest Thoughts - DevCon Developments

  1. completely extract the ui & implement it in an own ui plugin
  2. define events and very basic configuration like toolbar [ B, I ] and addButton
  3. do not use logic inside of anonymous functions that are event handlers - expose everything

Talk

You can find the talk and discussion here: Video

Requirements

  1. Selected layout will depend on mobile or desktop - can be overwritten
  2. Toolbar layouts: fixed, floating
  3. Buttons will be able to specify which layouts they supprt
  4. If a button has not specified a layout, it is included in all
  5. Implementors will be able to over-ride which buttons show in which layouts

API Draft Implementation

API Draft is found here - please use here for all code development: https://gist.github.com/838449

Feature set assessment

Warning
Warning

A migration to another UI should be optional. Define an interface so ExtJS, jQueryUI and any other implementation can coexist (of course one implementation only could be used at a time and could also be necessary).

Currently Aloha is being developed using ExtJS for rendering the UI. Migration to the jQuery UI Project would eliminate license hassle, considerably slim Aloha down and bring the chance to benefit from one of the most brilliant UI frameworks to come.

Deriving from Aloha's current implementation state, a set of form fields is required.

Floating Menu UI Elements

FloatingMenu.jpg

The following UI elements should be available, to enable migration to jQuery UI.

Link Plugin

The link plugin requires some special UI eLements.

LinkPlugin.jpg

ResourceSelector.jpg

For Data-Repositories see #Data Repositories

Other UI Elements

Please note that there are also requirements for other UI Elements, not only for the Floating Menu. These are:

Other stuff

Warning
Warning

Aloha Repository API is based on Ext Store/Ext Tree.

the HTML5 local storage may be an alternative for Ext.Store

Data Repositories

Warning
Warning

The Link Plugin also relies heavily on Repositories (like some other Plugins like the Product Plugin). A possible substitute for this is http://wiki.jqueryui.com/w/page/12137773/Data-Library which is still work-in-progress, or Backbone.js


Data repositories are a major issue to consider when migrating from ExtJS to jQueryUI, as there is no such thing available for jQueryUI atm. The jQueryUI Data-Library seems to provide similar functionality, but is far from being ready yet. Implementing an Aloha-Data-Repository does not seem to be too complicated either, so maybe that's a possible way to go.

Also keep in mind that the Repositories have to provide data in a way, that the repository browser (see above) can be implemented.

Abstracting the UI

Implementation approach

A very important point of adding a new UI to Aloha is proper abstraction. The goal is not to bind Aloha to another UI implementation, but to abstract all UI components in a clean way, so that various UI systems may be implemented and used.

There should be an interface so developers know what to implement. 

/**
 * "Abstract" Button definition
 */
Aloha.ui.Button = function () {
	obj: {},
	text: string,
	icon: string, // css class
	size: string, // smal, medium, big
	click: function(e) {},
	enableToggle: boolean,
	pressed: boolean,
	toggle: function (b),
	parameters: [], // generic parameters passed from the settings
	...
};

There should be provided a suitable way to provide a UI implementation which may be used by plugins using the Aloha.ui Components. 

/**
 * "Abstract" Button definition
 */
jQuery.extend({Aloha.ui.Button,  {
	init: { 
		//create button with UI
		// set this.obj
	},
	toggle: function (b) {
		// toggle button
	},
	...
});

A new instance of button in a plugin could look like UI object, like: 


/**
 * Button implementation
 */
var myButton = new Aloha.ui.Button({
	text: 'bold',
	icon: 'aloha-button-bold', // css class
	size: 'small', // smal, medium, big
	enableToggle: true,
});

If you follow the API draft below, the FloatingMenu then would be Implemented with like creating new Tab objects, which contain Button Groups, which contain buttons and other input elements.

API draft

These are the objects and methods that have to be provided

AlohaAPISpec.png


Button

Button Group

Tab

MultiSplitButton

AttributeField

This is one of the UI elements which are linked very close to ExtJS. Maybe this field should derive from a more general input field component or sth?

Browser

Retrieved from "http://www.aloha-editor.org/wiki/Migration_to_jQuery_UI"
Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox