I am looking for some help to use Polymer with server side Scala/java using Play framework

Question

I am trying to experiment with Polymer in my scala project with Play framework. I followed the getting started at https://www.polymer-project.org/docs/start/creatingelements.html. In my index.scala.html I have included my-element.html and trying to access my-element. I am not seeing my contents in element as expected. Any suggestions about if what I am trying to do is feasible. Thank you in advance

On Mac, created a play-java app in IntelliJ.

Installed latest play framework 2.3.7 from https://www.playframework.com/download.
Extracted zip file and ran the activator command activator new to create new project
Opened Intellij IDEA and imported the new project
Ran project by activator run

Code attached below...

octo-element.html:

<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="octo-element" noscript>
    <template>
       <span>Hello from <b>octo-element</b>. This is my Shadow DOM.</span>
</template>
</polymer-element>

index.scala.html

@(message: String)
@main("Welcome to Play") {

@message
<octo-element></octo-element>
}

main.scala.html @(title: String)(content: Html)

<!DOCTYPE html>

<html>
<head>
    <title>@title</title>
    <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">
    <link rel="shortcut icon" type="image/png" href="@routes.Assets.at("images/favicon.png")">
    <script src="@routes.Assets.at("javascripts/hello.js")" type="text/javascript"></script>
        <!-- 1. Load platform support before any code that touches the DOM. -->
    <script src="../../bower_components/webcomponentsjs/webcomponents.min.js"></script>
        <!-- 2. Load the component using an HTML Import -->
    <link rel="import" href="../../bower_components/elements/octo-element.html">
</head>
<body>
    @content
</body>
</html>

Application.java

package controllers;

import play.mvc.Controller;
import play.mvc.Result;
import views.html.index;

public class Application extends Controller {

public static Result index() {
    return ok(index.render("Your new application is ready."));
}

}

Including some more information and sample code would be helpful. See: How do I ask a good question? — Michael Zajac
First of all, keep in mind that it doesn't have too much to do with Play, but html and JavaScript. Have you checked if all resources were rightly imported? Modern browsers have consoles that tell you that. i.e press f12 while using Chrome and you'll see. I guess it'll throw some errors, and, if so, i'd tell you to move your resources to public/assets, and import them just like your hello.js file. — user7197
Hi, thank you for the suggestion. It worked. The error was in the source file. But the suggestion certainly helped. — Deepa

Deepa Deepa · Accepted Answer · 2014-12-13T03:41:51

The polymer components (html and java scripts) should be created under assets. The assets route is defined in routes configuration.

I am looking for some help to use Polymer with server side Scala/java using Play framework

1 Answers