sightly - aem6 ui development using js and java

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

Upload: yash-mody

Post on 29-Nov-2014

207 views

Category:

Technology


3 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Sightly - AEM6 UI Development using JS and JAVA

SightlyDr. Yash Mody, PhD

CTO, Tekno Point Consulting | @yash_mody

Page 2: Sightly - AEM6 UI Development using JS and JAVA

Sightly is HTML5

• Expression Language ${ }

• Data Atrributes (data-sly)

• Adding a script

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

Page 3: Sightly - AEM6 UI Development using JS and JAVA

Tools

• Brackets

• Eclipse Plugin

Page 4: Sightly - AEM6 UI Development using JS and JAVA

Building Templates

• HTML

• Dialogs

• Design Dialogs

Page 5: Sightly - AEM6 UI Development using JS and JAVA

In Expression Language

• properties

• pageProperties

• inheritedPageProperties

Page 6: Sightly - AEM6 UI Development using JS and JAVA

data-sly• use

• include

• resource

• list

• unwrap

• test

• text

• attribute

• element

• template & call

Page 7: Sightly - AEM6 UI Development using JS and JAVA

WCMUse• activate

• getPageManager

• getCurrentPage

• getPageProperties

• getProperties

• getCurrentStyle

• getResourceResolver

• getRequest

• getResponse

• getSlingScriptHelper

Page 8: Sightly - AEM6 UI Development using JS and JAVA

Key Pointers

• Sightly is not OSGi

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

Page 9: Sightly - AEM6 UI Development using JS and JAVA

Building a Template

• wcm/ foundation/components/page

Page 10: Sightly - AEM6 UI Development using JS and JAVA

Adding a Component

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

Page 11: Sightly - AEM6 UI Development using JS and JAVA

extending WCMUse

• package starts from apps

• public void activate()

Page 12: Sightly - AEM6 UI Development using JS and JAVA

Using WCMUse class

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

Page 13: Sightly - AEM6 UI Development using JS and JAVA

Adding Dialogs

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

Page 14: Sightly - AEM6 UI Development using JS and JAVA

i18n

• create a dictionary (no change)

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

Page 15: Sightly - AEM6 UI Development using JS and JAVA

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

public class SomeModel {

@Inject

private String propertyName;

}

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

Page 16: Sightly - AEM6 UI Development using JS and JAVA

Thank you