Component development in AEM 6 using Sightly and Java - Presented at Adobe Bangalore

1. Sightly
Dr. Yash Mody, PhD
CTO, Tekno Point Consulting | @yash_mody

2. Sightly is HTML5
• Expression Language ${ }
• Data Atrributes (data-sly)
• Adding a script
• <div data-sly-include=”footer.jsp”/>

3. Tools
• Brackets
• Eclipse Plugin

4. Building Templates
• HTML
• Dialogs
• Design Dialogs

5. In Expression Language
• properties
• pageProperties
• inheritedPageProperties

6. data-sly
• use
• include
• resource
• list
• unwrap
• test
• text
• attribute
• element
• template & call

7. WCMUse
• activate
• getPageManager
• getCurrentPage
• getPageProperties
• getProperties
• getCurrentStyle
• getResourceResolver
• getRequest
• getResponse
• getSlingScriptHelper

8. Key Pointers
• Sightly is not OSGi
• @Component, @Reference et. al. will not work

9. Building a Template
• wcm/ foundation/components/page

10. Adding a Component
• <div data-sly-resource=”${‘topnav’ @
resourceType=’training/components/
topnav’}”></div>

11. extending WCMUse
• package starts from apps
• public void activate()

12. Using WCMUse class
• data-sly-use.title=“Title”

13. Adding Dialogs
• /libs/granite/ui/components/foundation/layouts/

14. i18n
• create a dictionary (no change)
• In sightly code: ${‘today' @i18n}

15. Sling Models
• @Model(adaptables=Resource.class)
public class SomeModel {
@Inject
private String propertyName;
}
• SomeModel model = resource.adaptTo(SomeModel.class)

16. Thank you