Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.

Sightly Call to Java Component

Avatar

Level 3

I have a Java Component , want to call that component in html using sightly. I am trying to use the tag   data-sly-use.settings="com.pnc.xxx.Settings" .

It is initiating the new Instance, but not referring the existing component. How can I refer the existing component in sightly?

4 Replies

Avatar

Level 10

When you say It is initiating the new Instance,  are you referring to new java object?

Avatar

Level 2

I have the same problem but i am trying to call the java class from the local folder. 

-apps (folder)
    -mywebsite (folder)
        -components (folder)
            -contentpage (cq:Component)
            -partials (folder)
                -navbar.html        
                -Menu.java
                -navbar.js

This is my apps structure.

I am trying to call Menu.java from navbar.html but i can`t, when i am trying to call navbar.js is working correctly. What i am doing wrong ?

navbar.html (using navbar.js)

<nav class="navbar navbar-default" data-sly-use.navbar="../partials/navbar.js">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <a class="navbar-brand" href="#">${navbar.info.title}</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right" data-sly-list="${navbar.items}">
        <li class="${item.page.active ? 'active' : ''}">
            <a href="${item.page.vanityUrl}">${item.page.title}</a>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

navbar.html (using Menu.java)

<nav class="navbar navbar-default" data-sly-use.navbar="../partials/Menu">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <a class="navbar-brand" href="#">${navbar.lowerCaseTitle}</a>
    </div>


  </div><!-- /.container-fluid -->
</nav>

Menu.java

package apps.mywebsite.contentpage.partials;
import com.adobe.cq.sightly.WCMUse;

public class Menu extends WCMUse {

    private String lowerCaseTitle;

  
    @Override
    public void activate() throws Exception {
        lowerCaseTitle = "Hristo";
    }

    public String getLowerCaseTitle() {
        return lowerCaseTitle;
    }

}

navbar.js

use(function(){
    var info = {},
        items = [],
        basePath = currentPage.getAbsoluteParent(2),
        currentNavPath = currentPage.getAbsoluteParent(3).getPath(),
           pages = basePath.listChildren(new Packages.com.day.cq.wcm.api.PageFilter());

        info.title = currentPage.getAbsoluteParent(1).getTitle();

    var resourceResolver = resource.getResourceResolver();


    while (pages.hasNext()) {
        var page = pages.next();
        var active = (page.getPath() == currentNavPath);

        items.push({
            page: page,
            active: active
        });

    };

    return {
        info: info,
        items: items
    };
});

Avatar

Level 2

My Menu.java it`s not doing the same but i am just trying to access  private String lowerCaseTitle; if everything is ok i will do the same logic in the java code. 

Avatar

Level 3

Hristo Gatev wrote...

I have the same problem but i am trying to call the java class from the local folder. 

-apps (folder)
    -mywebsite (folder)
        -components (folder)
            -contentpage (cq:Component)
            -partials (folder)
                -navbar.html        
                -Menu.java
                -navbar.js

This is my apps structure.

I am trying to call Menu.java from navbar.html but i can`t, when i am trying to call navbar.js is working correctly. What i am doing wrong ?

navbar.html (using navbar.js)

<nav class="navbar navbar-default" data-sly-use.navbar="../partials/navbar.js">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <a class="navbar-brand" href="#">${navbar.info.title}</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right" data-sly-list="${navbar.items}">
        <li class="${item.page.active ? 'active' : ''}">
            <a href="${item.page.vanityUrl}">${item.page.title}</a>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

navbar.html (using Menu.java)

<nav class="navbar navbar-default" data-sly-use.navbar="../partials/Menu">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <a class="navbar-brand" href="#">${navbar.lowerCaseTitle}</a>
    </div>


  </div><!-- /.container-fluid -->
</nav>

Menu.java

package apps.mywebsite.contentpage.partials;
import com.adobe.cq.sightly.WCMUse;

public class Menu extends WCMUse {

    private String lowerCaseTitle;

  
    @Override
    public void activate() throws Exception {
        lowerCaseTitle = "Hristo";
    }

    public String getLowerCaseTitle() {
        return lowerCaseTitle;
    }

}

navbar.js

use(function(){
    var info = {},
        items = [],
        basePath = currentPage.getAbsoluteParent(2),
        currentNavPath = currentPage.getAbsoluteParent(3).getPath(),
           pages = basePath.listChildren(new Packages.com.day.cq.wcm.api.PageFilter());

        info.title = currentPage.getAbsoluteParent(1).getTitle();

    var resourceResolver = resource.getResourceResolver();


    while (pages.hasNext()) {
        var page = pages.next();
        var active = (page.getPath() == currentNavPath);

        items.push({
            page: page,
            active: active
        });

    };

    return {
        info: info,
        items: items
    };
});

 

I can able to invoke java class using the sightly tag data-sly-use.settings="com.xxx.Settings" ,  Give a try and hope it works.