sightly - aem6 ui development using js and java

SightlyDr. Yash Mody, PhD

CTO, Tekno Point Consulting | @yash_mody

Sightly is HTML5

• Expression Language ${ }

• Data Atrributes (data-sly)

• Adding a script

• <div data-sly-include=”footer.jsp”/>

Tools

• Brackets

• Eclipse Plugin

Building Templates

• HTML

• Dialogs

• Design Dialogs

In Expression Language

• properties

• pageProperties

• inheritedPageProperties

data-sly• use

• include

• resource

• list

• unwrap

• test

• text

• attribute

• element

• template & call

WCMUse• activate

• getPageManager

• getCurrentPage

• getPageProperties

• getProperties

• getCurrentStyle

• getResourceResolver

• getRequest

• getResponse

• getSlingScriptHelper

Key Pointers

• Sightly is not OSGi

• @Component, @Reference et. al. will not work

Building a Template

• wcm/ foundation/components/page

Adding a Component

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

extending WCMUse

• package starts from apps

• public void activate()

Using WCMUse class

• data-sly-use.title=“Title”

Adding Dialogs

• /libs/granite/ui/components/foundation/layouts/

i18n

• create a dictionary (no change)

• In sightly code: ${‘today' @i18n}

Sling Models• @Model(adaptables=Resource.class)

public class SomeModel {

@Inject

private String propertyName;

}

• SomeModel model = resource.adaptTo(SomeModel.class)

Thank you