Romain Carlier presented plans to change the Aloha Editor user interface from ExtJS to jQuery UI. This would reduce the compressed size by 80% and eliminate licensing fees. Key aspects of the proposed new UI include using simpler HTML markup, additional contextual views like collapsed and floating toolbars, and organizing elements in a tab and controlset hierarchy. Components like buttons and dialogs would be available initially, while panels and trees require more work. The changes aim to separate the UI from the core and allow different representation frameworks and themes.

1. Aloha Editor Conference 2011 Open Discussion on UI Changes Romain Carlier Introduction to UI changes Romain Carlier

3. Co-founder of Reaklab (Web agency in Belgium) with Thomas Lété

4. Editor of Wikeo(.net), a free website creation tool using Aloha Editor

5. Working as a webdesigner/integrator2011 - Romain Carlier for Aloha Editor Developer Conference

6. Status Introduction to UI changes Romain Carlier

8. ~ 800Ko compressed size

11. Easier to use, extend, manipulate.

12. No licensing.

13. Based on jQuery, alreadyloaded by Aloha Editor.No need to load all the components. This switch applies to the standard Aloha EditorInterface. 2011 - Romain Carlier for Aloha Editor Developer Conference

14. Markup And simplicity Introduction to UI changes Romain Carlier

16. Elevates the level of comprehensibility for new plugin developers / UI Hackers

17. Maintainability and coherence

19. Progress, Datagroup, Section

20. Range inputs2011 - Romain Carlier for Aloha Editor Developer Conference

22. Aloha Editor Generated Code2011 - Romain Carlier for Aloha Editor Developer Conference

23. What’s next ? Introduction to UI changes Romain Carlier

25. Floating view2011 - Romain Carlier for Aloha Editor Developer Conference

27. Defined by context (contextual functions/tabs )

28. Holds controls or controlsets (no sub-tabs)

29. Controlset

30. Defined by float / maximum elements

31. Holds controls

32. Control

33. Still allows for custom code

34. Based on a jQuery UI representation

35. Depends on the list of available componentsRepresentation for Aloha Editor components follows the representation guideline proposed by jQuery UI : Text, icon, two icons or combinations. 2011 - Romain Carlier for Aloha Editor Developer Conference

37. Buttons with icons

38. Controllersets

39. Tabs

40. Split Buttons

41. Progressbars

42. Modal Dialogs

44. http://code.google.com/p/jquery-ui/source/browse/#svn/branches/labs/panel

45. Dividers

46. Selectables

47. http://jquery-ui.googlecode.com/svn/branches/labs/selectable/

48. Tree

49. Data repositories2011 - Romain Carlier for Aloha Editor Developer Conference

51. No grouping, no drag and drop

52. Customization of behavior is up to the implementer

53. Brainstorming

54. This approach is not definitive

55. Aloha Conference 2011 aims at determining what the next standard UI for Aloha Editor will be.2011 - Romain Carlier for Aloha Editor Developer Conference

57. Including jQuery UI is not closing the door to other

58. Separate the UI from the Core (UI is now a plugin)

59. Abstraction and creation of a LayoutManager

60. Dispatching of layout information through generic actions

61. Map to representation framework (addButton -> append)Don’t re-invent the wheel. Core Aloha Editor UIAPI jQuery UI Theme Third party representation tool, theme, extensions… jQuery UI, ExtJS, Lightweight, Mobile, Browser toolbars implementations 2011 - Romain Carlier for Aloha Editor Developer Conference

62. WIP Introduction to UI changes Romain Carlier

64. Floating view

65. Context panels2011 - Romain Carlier for Aloha Editor Developer Conference

67. States

68. Panel collapse

69. Contextual elements2011 - Romain Carlier for Aloha Editor Developer Conference

70. Introduction to UI changes Romain Carlier Who > Current status > What’s next > Q&A Default Aloha Editor jQuery UI edition design proposal 2011 - Romain Carlier for Aloha Editor Developer Conference

71. Q&A Introduction to UI changes Romain Carlier

72. Thank you! romain@reaklab.com @reak Introduction to UI changes Romain Carlier