Failure in Getting Scalatags Work

Question
1

Dear all,

I am trying the Hands-On Tutorial and things work relatively well up to here:

http://www.lihaoyi.com/hands-on-scala-js/#InteractiveWebPages

I have included some Scalatags as instructed in my code and see no widgets on the HTML – even though the compiler is happy both in the terminal and the workbench output on the page. For the reference, I am putting the relevant files in the P.S. Does anyone know what’s going wrong?

TIA,
–Hossein

P.S.

  • workbench-example-app\build.sbt:

enablePlugins(ScalaJSPlugin, WorkbenchPlugin)

name := "Example"

version := "0.1-SNAPSHOT"

scalaVersion := "2.11.8"

libraryDependencies ++= Seq(
"org.scala-js" %%% "scalajs-dom" % "0.9.1",
"com.lihaoyi" %%% "scalatags" % "0.6.2"
)

  • workbench-example-app\src\main\resources\index-dev.html

<!DOCTYPE html>
<html>
<head>
<title>Example Scala.js application</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body style="margin: 0px">

<div>
    <canvas style="display: block" id="div" width="255" height="255"/>
</div>

<script type="text/javascript" src="../example-fastopt.js"></script>
<script type="text/javascript" src="/workbench.js"></script>
<script>
    webpage.Search0().main(document.getElementById('div'));
</script>
</body>
</html>
  • workbench-example-app\project\build.sbt

addSbtPlugin("org.scala-js" % "sbt-scalajs" % "0.6.13")

addSbtPlugin("com.lihaoyi" % "workbench" % "0.3.0")

  • workbench-example-app\src\main\scala\webpage\Search0.scala

    package webpage

    import org.scalajs.dom
    import dom.html
    import scalajs.js.annotation.JSExport
    import scalatags.JsDom.all._

    @JSExport
    object Search0 extends{
    @JSExport
    def main(target: html.Div) = {
    val listings = Seq(
    "Apple", "Apricot", "Banana", "Cherry",
    "Mango", "Mangosteen", "Mandarin",
    "Grape", "Grapefruit", "Guava"
    )

      def renderListings = ul(
    for {
      fruit <- listings
      if fruit.toLowerCase.startsWith(box.value.toLowerCase)
    } yield li(fruit)
  ).render
  
  lazy val box = input(
    `type`:="text",
    placeholder:="Type here!"
  ).render
  
  val output = div(renderListings).render
  
  box.onkeyup = (e: dom.Event) => {
    output.innerHTML = ""
    output.appendChild(renderListings)
  }
  
  target.appendChild(
    div(
      h1("Search Box!"),
      p(
        "Type here to filter " +
        "the list of things below!"
      ),
      div(box),
      output
    ).render
  )
}

    }

2

To make sure code is formatted correctly, please put ```scala (three backticks, and scala, with no space in between) before any code snippets, and ``` after them.

3

Thank you for the formatting tip. Any chance anyone picks up the contents too?

4

Hi Hossein,
I think you missed part of how to do that example towards the top of that page you linked.
Critically, you need to:

  • Get all the code via git clone https://github.com/lihaoyi/workbench-example-app
  • cd into that directory.
  • Compile and run the code with: sbt ~fastOptJS (note that ~ is crucial so the server is running to serve the web page.)
  • View the ouput by putting this in your browser: http://localhost:12345/target/scala-2.11/classes/index-dev.html

Worked well for me once I followed the above steps. Cool fractals as a reward!
-Brett

5

Hi Brett,

I don’t think I’ve missed any of those steps. With minor reservations, I do get the output the book promises up the point I mention.

The fractals worked for me too. Did you also get any of

http://www.lihaoyi.com/hands-on-scala-js/#InteractiveWebPages

flying?

Cheers,
–Hossein

6

Ah yeah, nope, that part of the tutorial is super unclear, sorry I misunderstood what you are stuck on. I might try some more later.

7

Thanks. Looking forward that.

8

For the record, I would like to announce it that with little change in the HTML, I do get the promised behaviour. canvas here

<canvas style="display: block" id="div" width="255" height="255"/>

should have been replaced by div. The tutorial does indeed allude to that in a way that was unhelpful to an HTML-illiterate like me:

need to update the on-page Javascript’s document.getElementById to pick a <div> rather than the <canvas> we were using in the previous chapter.

My understanding from the above excerpt was that I needed to only replace id="canvas" by id="div". After all, document.getElementById picks ids…

Cheers,
–Hossein