How to integrate soy templates into Refapp plugin ?

[Lukas Maruniak]

Hi,

How can I integrate soy templates into my refapp plugin ?

My pom.xml :

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
    <modelVersion>4.0.0</modelVersion>
...
 <dependencies>
...
        <!-- SOY templates -->
        <dependency>
            <groupId>com.atlassian.soy</groupId>
            <artifactId>soy-template-plugin</artifactId>
            <version>${soy.version}</version>
        </dependency>

        <dependency>
            <groupId>com.atlassian.soy</groupId>
            <artifactId>soy-template-renderer-api</artifactId>
            <version>${soy.version}</version>
        </dependency>

...
</dependencies>
    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>com.atlassian.refapp</groupId>
                <artifactId>atlassian-platform</artifactId>
                <version>${refapp.version}</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>
<build>
        <plugins>
            <plugin>
                <groupId>com.atlassian.maven.plugins</groupId>
                <artifactId>maven-refapp-plugin</artifactId>
                <version>${amps.version}</version>
                <extensions>true</extensions>
                <configuration>
                    <productVersion>${refapp.version}</productVersion>
                </configuration>
            </plugin>
            <plugin>
                <artifactId>maven-compiler-plugin</artifactId>
                <configuration>
                    <source>1.6</source>
                    <target>1.6</target>
                </configuration>
            </plugin>
            <!-- Compile soy to js -->
            <plugin>
                <groupId>com.atlassian.maven.plugins</groupId>
                <artifactId>soy-to-js-maven-plugin</artifactId>
                <executions>
                    <execution>
                        <id>generate-js-from-soy</id>
                        <phase>process-resources</phase>
                        <goals>
                            <goal>compile</goal>
                        </goals>
                        <configuration>
                            <outputDirectory>${project.build.directory}/temp/soy/</outputDirectory>
                            <resources>
                                <directory>${project.basedir}/src/main/resources/js/</directory>
                                <includes>
                                    <include>**/soy/*.soy</include>
                                </includes>
                            </resources>
                            <propertiesFile>${project.basedir}/src/main/resources/unity.properties</propertiesFile>
                        </configuration>
                    </execution>
                </executions>
            </plugin>

        </plugins>
    </build>
    <properties>
        <refapp.version>2.20.0</refapp.version>
        <amps.version>4.2.13</amps.version>
        <plugin.testrunner.version>1.1.1</plugin.testrunner.version>
        <rest.version>2.9.1</rest.version>
        <soy.version>2.3.1</soy.version>
    </properties>
</project>

projects-table.soy :

{namespace navigator}

/**
 * @param projects
 */
{template .projects-table}

    <table id="project-table" class="aui aui-table-sortable">
    <thead>
        <tr>
            <th id="projectName">Project Name</th>
            <th id="admin">Administrator</th>
            <th id="desc" class="aui-table-column-unsortable">Description</th>
            <th id="labels" class="aui-table-column-unsortable">Labels</th>
            <th id="sbu">SBU</th>
            <th id="sbe">SBE</th>
            <th id="lob">LOB</th>
            <th id="site">Site</th>
        </tr>
    </thead>
    <tbody>
            #foreach($project in $projects)
                {call .projects-table-row data="all"}
                    {param projectName: $project.name /}
                    {param admin: $project.administrator /}
                    {param description: $project.description /}
                    {param site: $project.Site /}
                    {param sbu: $project.SBU /}
                    {param sbe: $project.SBE /}
                    {param lob: $project.LOB /}
                    {param labels: $project.labels /}
                {\call}
            {\foreach}

    </tbody>

{/template}

web-resource in atlassian-plugin.xml is defined:

...  
<web-resource key="navigator-resources" name="navigator Web Resources">
    <dependency>com.atlassian.auiplugin:ajs</dependency>
    <dependency>com.atlassian.auiplugin:aui-lozenge</dependency>
    <dependency>com.atlassian.auiplugin:aui-select2</dependency>
    <dependency>com.atlassian.auiplugin:aui-experimental-soy</dependency>

    <transformation extension="soy">
      <transformer key="soyTransformer"/>
    </transformation>

    <resource type="download" name="projects-table-row.soy.js" location="js/navigator/soy/projects-table-row.soy"/>
    <resource type="download" name="projects-table.soy.js" location="js/navigator/soy/projects-table.soy"/>

    <resource type="download" name="navigator.css" location="/css/navigator/navigator.css"/>
    <resource type="download" name="init.js" location="/js/navigator/init.js"/>
    <resource type="download" name="navigator.js" location="/js/navigator/navigator.js"/>
    <resource type="download" name="images/" location="/images"/>
    <context>navigator</context>
  </web-resource>
...

When I'm trying to run server it always fails with:

java.lang.NoClassDefFoundError: Lorg/slf4j/Logger;

When I comment the whole part of "soy-to-js-maven-plugin" in pom.xml, no soy is rendered properly ( in my resources stays only plain projects-table.soy.js file )

Also, when I change version of soy-to-js-maven-plugin to 1.5, the Exception raised is:

com.google.template.soy.base.SoySyntaxException: In file c:\...\soy\projects-table.soy: Malformed attributes in 'template'
 command text ".projects-table".

[Sabine Winkler · Accepted solution]

Hi Lukas,

regarding the soy exception, the template name you used (projects-table) causes an error. Just remove the hyphen (projectsTable) and everything would be fine at this point.

Check the Google closure template syntax for loop [1]

{foreach $operand in $operands}
  {$operand}
{/foreach}

The slf4j exception you mentioned can be resolved in adding a dependency to your pom.xml

<dependency>
			<groupId>org.slf4j</groupId>
			<artifactId>slf4j-api</artifactId>
			<version>1.7.5</version>
			<scope>provided</scope>
		</dependency>

[1] https://developers.google.com/closure/templates/docs/commands#foreach

HTH (even your question is already a bit "old"),

Sabine

[Lukas Maruniak]

@Sabine- to your comment

So far I'm not using server-side template rendering. For my purpose I need to parse only javascript soy templates. I'm obtaining data which has to be rendered as it is described below.

I have created REST resource with following annotation:

@Path("projects")
public class ProjectsResource {

    private static final Logger log = LoggerFactory.getLogger(ProjectsResource.class);

    private final ProjectBasicSearch projectManager;

    public ProjectsResource(ProjectBasicSearch projectManager){
        this.projectManager = projectManager;
    }

    @GET
    @Path("all")
    @Produces(MediaType.APPLICATION_JSON)
    public List<ProjectDto> getAllProjects(){
        List<ProjectDto> projects = projectManager.getAllProjects();
        return projects;
    }    
}

Where ProjectDto is implemented following way :

@XmlRootElement
public class ProjectDto implements Serializable {

    @XmlElement
    private Long id;
...

Soy template looks like this:

{namespace some.namespace}


/**
 * @param project
 **/
{template .projectsTableRow}
<tr>
    <td headers="projectName">{$project.name}</td>
    <td headers="sbu">{$project.sbu}</td>
    <td headers="lob">{$project.lob}</td>
    <td headers="site">{$project.site}</td>
</tr>
{/template}

/**
 * @param projects
 */
{template .projectsTable}
<table id="project-table" class="aui aui-table-sortable">
<thead>
    <tr>
        <th id="projectName">Project Name</th>
        <th id="sbu">SBU</th>
        <th id="lob">LOB</th>
        <th id="site">Site</th>
    </tr>
</thead>
<tbody>
        {foreach $project in $projects}
            {call .projectsTableRow data="$project" /}
        {/foreach}
</tbody>
{/template}

In javascript I'm making AJAX request to mentioned REST resource and getting relevant ojbects.

UPDATE: Recently I found several errors in my template and now is everything working correctly. Once again, thanks for your help :)

[Sabine Winkler]

Other exceptions? I was trying to build a refapp example with your "project" (will upload it later) and just struggled with the point how the data are passed in the correct way. Client-side soy seems to be much easier - from the server-side however, java objects require to be converted (SoyData, SoyDataConverter). Passing the collection renders the objects as string. No property access possible. How did you manage this?

Thanks in advance, Sabine

[Sabine Winkler]

Thanks Lukas for accepting my answer. Is your refapp plugin now working?

[Lukas Maruniak]

Thank you also :). Yes it is, however I've got some other issue regarding the mentioned soy template, which is not loaded, even when I corrected foreach statement. But this is template specfic issue, because other templates are loaded correctly.