Embed Size (px)
DESCRIPTION
Citation preview
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
• Contribute To The CQ Communityhttps://github.com/Velir/AEM-Toolbox
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
CQ ENHANCEMENTSEnhanced Image Servlet
Existing Image Servlet
7
CQ ENHANCEMENTSEnhanced Image Servlet
Existing Image Servlet Features
8
CQ ENHANCEMENTSEnhanced Image Servlet
Resizing Considerations
9
CQ ENHANCEMENTSEnhanced Image Servlet
Hard Width/Height Resizing
10
CQ ENHANCEMENTSEnhanced Image Servlet
Max Width/Height and Min Width/Height Resizing
11
CQ ENHANCEMENTSEnhanced Image Servlet
How To Use It
12
CQ ENHANCEMENTSEnhanced Image Servlet
Skip Image Resizing With “.no” Selector• Image Gallery
13
CQ ENHANCEMENTSEnhanced Image Servlet
14
CQ ENHANCEMENTSEnhanced Image Servlet
Demo
15
CQ ENHANCEMENTSStructured Multi List Widget
CQ Widgets
16
CQ ENHANCEMENTSStructured Multi List Widget
What’s Missing
17
CQ ENHANCEMENTSStructured Multi List Widget
Carousel Component
18
CQ ENHANCEMENTSStructured Multi List Widget
Cast Of Heroes
19
CQ ENHANCEMENTSStructured Multi List Widget
Our Solution
20
CQ ENHANCEMENTSStructured Multi List Widget
Vault XML Definition
21
CQ ENHANCEMENTSStructured Multi List Widget
Demo
22
CQ ENHANCEMENTS
YouTube Search Widget
23
CQ ENHANCEMENTSYouTube Search Widget
Demo
24
CQ ENHANCEMENTSRich Text Editor Plugins
Rich Text Editor
25
CQ ENHANCEMENTSRich 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
CQ ENHANCEMENTSRich Text Editor Plugins
Additional Plugins
• Blockquote Plugin
• Formatting Plugin
27
CQ ENHANCEMENTSRich Text Editor Plugins
Demo
28
CQ ENHANCEMENTSRich 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
CQ ENHANCEMENTSRich Text Editor Plugins
Three Execution Paths
• UI Initialization
• Command Execution
• UI Updates
30
CQ ENHANCEMENTSRich Text Editor Plugins
UI Initialization
31
CQ ENHANCEMENTSRich Text Editor Plugins
Command Execution
32
CQ ENHANCEMENTSRich Text Editor Plugins
UI Updates
33
CQ ENHANCEMENTS
Christopher LeggettSenior [email protected]
Open Source• https://github.com/Velir/AEM-Toolbox
.com
