Created

Jan 23, 2014

Sightly intro part 2

Posted by Feike Visser

Welcome to the second part of the intro of the Sightly framework available in AEM6 (here you find the first article).

In this article I will go through some more data-sly attributes, and show you how to write custom Java classes to integrate with your Sightly components.

Small note, we have still the same disclaimer here that the syntax may slighty change.

Are data-sly attributes bound to specific HTML-elements?

I got this question from @snemarch based on my first article.

No, you can use all the data-sly attributes everywhere you like.

Here an example to show data-sly-list with HTML5 article and section tags

sample1.html

${item.title}

${item.properties.subtitle}

This page has subpages

Preserve the markup from the designer

How many times do you get a HTML snippet from a designer with some nice mock data in there? And what do we with that?, we rip it apart and you just end up with a small snippet and you lost the context of it.

Now with sightly you can preserve the markup including the mock data, and still make it fully functional.

In the sample below I have received a navigation HTML snippet, and integrated this with sightly. Via the empty data-sly-test attributes the elements are surpressed completely.

sample2.html


Naming your data-sly-test expression

With data-sly-test you can show or hide an HTML element.

What you also can do is to name your expression and reuse that in other data-sly-test expression.

In the example below I have data-sly-test-valid, that then can used as 'valid' in the other data-sly-test expression.

sample3.html

${pageProperties.title}
Please enter a title for this page

Hiding container elements

If some cases you have a need to hide a container element, for example hiding the <ul> for a list, or not generating a surrounding <div>

For these cases you can use the data-sly-unwrap attribute.

In this example we generate a list of <li> items, without the <ul>.

sample4.html

  • ${child.title}

You can also pass an expression to the data-sly-unwrapped attribute to make it conditional.

Here you see that only in edit-mode the <ul> is hidden.

sample5.html

  • ${child.title}

Custom Java-classes

In most projects you will find yourself in need to write some custom code to support your components. With sightly you can use the data-sly-use attribute for that.

sample6.html

${comp1.myTitle}

Java-class, option 1

We have a few options how you can write your custom class, the first option is that your Java-class is extending the "WCMUse" class from Sightly.

When extending this class you are able to call methods like "getResource()", "getCurrentPage()", "getPageManager()" etc.

Here an example of a Java-class that extends WCMUse.

SightlyComponent.java

public class SightlyComponent extends WCMUse  {
	
	private String myTitle;
	
	@Override
	public void activate() {
		myTitle = "My Project " + getCurrentPage().getTitle();
	}

	public String getMyTitle() {
		return myTitle;
	}
}

Java-class, option 2

If you don't feel comfortable to extend a class, you can also implement the Use-interface.

Via the init() method you can access all the bindings that are available. These are things like "currentPage", "resource", "request" etc.

Here an example of this implementation.

SightlyComponent.java

public class SightlyComponent implements Use {
	
	private String myTitle;

	@Override
	public void init(Bindings bindings) {
		Page currentPage = (Page) bindings.get(WCMBindings.CURRENT_PAGE);
		
		myTitle = currentPage.getTitle() + "new";
	}
	
	public String getMyTitle() {
		return myTitle;
	}
}

We have some more options how you can implement Java-classes, but I will cover that in a next article.

In this final example you can see how you can access a service from the WCMuse-class.

SightlyComponent.java

public class SightlyComponent extends WCMUse  {
	
	private String myTitle;
	
	@Override
	public void activate() {
		myTitle = "My Project " + getCurrentPage().getTitle();
		
		MyService service = getSlingScriptHelper().getService(MyService.class);
		service.action(myTitle);
		
	}

	public String getMyTitle() {
		return myTitle;
	}
}

This is already the end of part 2 of my sightly intro. In my next article I am planning to give you some more samples, and introduce some more options to integrate your Java-classes.

Feel free to reach out to me, for more info or questions.

@heervisscher

ADD A COMMENT