data-sly-call in sightly not invoking - aem

Question

I was trying the sample example given at [a link]http://docs.adobe.com/docs/en/aem/6-0/develop/sightly/use-api-in-java.html. I have created the component SightlyTest in which the data-sly-call to the template does not work. Below are my files inside component:
extra.html
<template data-sly-template.extra="${# text}"
data-sly-use.extraHelper="${'ExtraHelper' # text=text}">
<p>${extraHelper.reversedText}</p>
</template>
ExtraHelper.java
package apps.AEMProject.components.content.SightlyTest;
import com.adobe.cq.sightly.WCMUse;
public class ExtraHelper extends WCMUse {
private String reversedText;
public String getReversedText() {
return reversedText;
}
#Override
public void activate() throws Exception {
String text = get("text", String.class);
reversedText = new StringBuilder(text).reverse().toString();
System.out.print("reversedText ::: "+reversedText);
}
}
SightlyOp.java
package apps.AEMProject.components.content.SightlyTest;
import com.adobe.cq.sightly.WCMUse;
public class SightlyOp extends WCMUse {
private String lowerCaseTitle;
private String lowerCaseDescription;
#Override
public void activate() throws Exception {
lowerCaseTitle = getProperties().get("title", "").toLowerCase();
lowerCaseDescription = getProperties().get("description", "").toLowerCase();
}
public String getLowerCaseTitle() {
return lowerCaseTitle;
}
public String getLowerCaseDescription() {
return lowerCaseDescription;
}
}
SightlyTest.html
<div data-sly-use.sg="SightlyOp"
data-sly-use.extra="extra.html">
<h1>${sg.lowerCaseTitle}</h1>
<p>${sg.lowerCaseDescription}</p>
<div data-sly-call="${extra # text=properties.description}"></div>
</div>
sg.lowerCaseTitle & sg.lowerCaseDescription is working fine, but nothing display for data-sly-call
Thanks

Answer 1

Try this in SightlyTest.html instead,
<div data-sly-use.sg="SightlyOp" data-sly-use.extra1="extra.html">
<h1>${sg.lowerCaseTitle}</h1>
<p>${sg.lowerCaseDescription}</p>
<div data-sly-call="${extra1.extra # text=properties.description}"></div>
</div>
Modified to data-sly-use.extra1 to differentiate between the variable and the template being called.

Answer 2

I realize I've come to the party a little late, but I'd like to expand on Aditya's answer.
Think of the file extra.html more like a "library" of data-sly-templates rather, since it could contain as many of them as you want (each with a different name). So when you "use" the extra.html file you're sort of importing those templates into a namespace you provide on the use statement. You can then call the templates using that "namespace".
<div data-sly-use.sg="SightlyOp"
data-sly-use.extra="extra.html">
<!--/*${extra} is now a namespace for the templates in extra.html. (you can name it whatever you like for more clarity*/-->
<h1>${sg.lowerCaseTitle}</h1>
<p>${sg.lowerCaseDescription}</p>
<!--/*since your template is called extra, and it's in the namespace called extra you call it with ${extra.extra}*/-->
<div data-sly-call="${extra.extra # text=properties.description}"></div>
</div>