1
ADOBE CQ ENHANCEMENTS FOR
RESPONSIVE DESIGN AND EDITORIAL
CONTROL
2
INTRODUCTION
• Christopher Leggett
• Senior Developer
• Velir
• 6 Years Web Development Experience
3
VELIR
4
CQ ENHANCEMENTS
Focus For Enhancements
• Support Responsive Design
• Ease Content Entry
• Aim To Solve Common Needs
• Co...
5
CQ ENHANCEMENTS
Enhanced Image Servlet
• New Resizing Options
New Widgets
• Structured Multi List
• YouTube Search
Rich ...
6
CQ ENHANCEMENTS
Enhanced Image Servlet
Existing Image Servlet
7
CQ ENHANCEMENTS
Enhanced Image Servlet
Existing Image Servlet Features
8
CQ ENHANCEMENTS
Enhanced Image Servlet
Resizing Considerations
9
CQ ENHANCEMENTS
Enhanced Image Servlet
Hard Width/Height Resizing
10
CQ ENHANCEMENTS
Enhanced Image Servlet
Max Width/Height and Min Width/Height Resizing
11
CQ ENHANCEMENTS
Enhanced Image Servlet
How To Use It
12
CQ ENHANCEMENTS
Enhanced Image Servlet
Skip Image Resizing With “.no” Selector
• Image Gallery
13
CQ ENHANCEMENTS
Enhanced Image Servlet
14
CQ ENHANCEMENTS
Enhanced Image Servlet
Demo
15
CQ ENHANCEMENTS
Structured Multi List Widget
CQ Widgets
16
CQ ENHANCEMENTS
Structured Multi List Widget
What’s Missing
17
CQ ENHANCEMENTS
Structured Multi List Widget
Carousel Component
18
CQ ENHANCEMENTS
Structured Multi List Widget
Cast Of Heroes
19
CQ ENHANCEMENTS
Structured Multi List Widget
Our Solution
20
CQ ENHANCEMENTS
Structured Multi List Widget
Vault XML Definition
21
CQ ENHANCEMENTS
Structured Multi List Widget
Demo
22
CQ ENHANCEMENTS
YouTube Search Widget
23
CQ ENHANCEMENTS
YouTube Search Widget
Demo
24
CQ ENHANCEMENTS
Rich Text Editor Plugins
Rich Text Editor
25
CQ ENHANCEMENTS
Rich Text Editor Plugins
Provided Plugins
• Basic Formatting (Bold, Italic, Underline)
• Justify (Left,...
26
CQ ENHANCEMENTS
Rich Text Editor Plugins
Additional Plugins
• Blockquote Plugin
• Formatting Plugin
27
CQ ENHANCEMENTS
Rich Text Editor Plugins
Demo
28
CQ ENHANCEMENTS
Rich Text Editor Plugins
What’s needed to build a plugin
• Plugin object (Extends CQ.form.rte.plugins.P...
29
CQ ENHANCEMENTS
Rich Text Editor Plugins
Three Execution Paths
• UI Initialization
• Command Execution
• UI Updates
30
CQ ENHANCEMENTS
Rich Text Editor Plugins
UI Initialization
31
CQ ENHANCEMENTS
Rich Text Editor Plugins
Command Execution
32
CQ ENHANCEMENTS
Rich Text Editor Plugins
UI Updates
33
CQ ENHANCEMENTS
Christopher Leggett
Senior Developer
Velir
christopher.leggett@velir.com
Open Source
• https://github.c...
Upcoming SlideShare
Loading in …5
×

EVOLVE'13 | Enhance | Responsive Design | Chis Leggett

616 views
463 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
616
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
25
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

EVOLVE'13 | Enhance | Responsive Design | Chis Leggett

  1. 1. 1 ADOBE CQ ENHANCEMENTS FOR RESPONSIVE DESIGN AND EDITORIAL CONTROL
  2. 2. 2 INTRODUCTION • Christopher Leggett • Senior Developer • Velir • 6 Years Web Development Experience
  3. 3. 3 VELIR
  4. 4. 4 CQ ENHANCEMENTS Focus For Enhancements • Support Responsive Design • Ease Content Entry • Aim To Solve Common Needs • Contribute To The CQ Community https://github.com/Velir/AEM-Toolbox
  5. 5. 5 CQ ENHANCEMENTS Enhanced Image Servlet • New Resizing Options New Widgets • Structured Multi List • YouTube Search Rich Text Editor Plugins • New RTE Plugins • How To Build Your Own
  6. 6. 6 CQ ENHANCEMENTS Enhanced Image Servlet Existing Image Servlet
  7. 7. 7 CQ ENHANCEMENTS Enhanced Image Servlet Existing Image Servlet Features
  8. 8. 8 CQ ENHANCEMENTS Enhanced Image Servlet Resizing Considerations
  9. 9. 9 CQ ENHANCEMENTS Enhanced Image Servlet Hard Width/Height Resizing
  10. 10. 10 CQ ENHANCEMENTS Enhanced Image Servlet Max Width/Height and Min Width/Height Resizing
  11. 11. 11 CQ ENHANCEMENTS Enhanced Image Servlet How To Use It
  12. 12. 12 CQ ENHANCEMENTS Enhanced Image Servlet Skip Image Resizing With “.no” Selector • Image Gallery
  13. 13. 13 CQ ENHANCEMENTS Enhanced Image Servlet
  14. 14. 14 CQ ENHANCEMENTS Enhanced Image Servlet Demo
  15. 15. 15 CQ ENHANCEMENTS Structured Multi List Widget CQ Widgets
  16. 16. 16 CQ ENHANCEMENTS Structured Multi List Widget What’s Missing
  17. 17. 17 CQ ENHANCEMENTS Structured Multi List Widget Carousel Component
  18. 18. 18 CQ ENHANCEMENTS Structured Multi List Widget Cast Of Heroes
  19. 19. 19 CQ ENHANCEMENTS Structured Multi List Widget Our Solution
  20. 20. 20 CQ ENHANCEMENTS Structured Multi List Widget Vault XML Definition
  21. 21. 21 CQ ENHANCEMENTS Structured Multi List Widget Demo
  22. 22. 22 CQ ENHANCEMENTS YouTube Search Widget
  23. 23. 23 CQ ENHANCEMENTS YouTube Search Widget Demo
  24. 24. 24 CQ ENHANCEMENTS Rich Text Editor Plugins Rich Text Editor
  25. 25. 25 CQ ENHANCEMENTS Rich Text Editor Plugins Provided Plugins • Basic Formatting (Bold, Italic, Underline) • Justify (Left, Right, Center) • Hyperlinks • Lists • Format (Wrapping Tag) • Styling (CSS Class) • Tables • Source Editing • Special Characters
  26. 26. 26 CQ ENHANCEMENTS Rich Text Editor Plugins Additional Plugins • Blockquote Plugin • Formatting Plugin
  27. 27. 27 CQ ENHANCEMENTS Rich Text Editor Plugins Demo
  28. 28. 28 CQ ENHANCEMENTS Rich Text Editor Plugins What’s needed to build a plugin • Plugin object (Extends CQ.form.rte.plugins.Plugin) • UI objects (Extends CQ.form.rte.ui.TbElement) • Command objects (Extends CQ.form.rte.commands.Command)
  29. 29. 29 CQ ENHANCEMENTS Rich Text Editor Plugins Three Execution Paths • UI Initialization • Command Execution • UI Updates
  30. 30. 30 CQ ENHANCEMENTS Rich Text Editor Plugins UI Initialization
  31. 31. 31 CQ ENHANCEMENTS Rich Text Editor Plugins Command Execution
  32. 32. 32 CQ ENHANCEMENTS Rich Text Editor Plugins UI Updates
  33. 33. 33 CQ ENHANCEMENTS Christopher Leggett Senior Developer Velir christopher.leggett@velir.com Open Source • https://github.com/Velir/AEM-Toolbox .com

×