JDK 1.8 sbt 1.3 Scala 2.12
- Créer un nouveau projet Scala avec sbt
- Créer projet/plugins.sbt et y ajouter la ligne
addSbtPlugin("org.scala-js" % "sbt-scalajs" % "0.6.28")
- Ajouter code suivant dans build.sbt
name := "ScalaJsApp"
version := "0.1"
scalaVersion := "2.12.4"
enablePlugins(ScalaJSPlugin)
scalaJSUseMainModuleInitializer := true // application ayant une méthode main- Créer un premier Objet Scala, dans un package "tutorial" : src/main/scala/tutorial/Hello.scala
package tutorial
object Hello1 {
def main(args: Array[String]): Unit = {
println("Hello, world")
}
}- Ajouter de nouvelles dépendances dans build.sbt, pour pouvoir travailler avec le DOM et les ScalaTags
libraryDependencies += "org.scala-js" %%% "scalajs-dom" % "0.9.7"
libraryDependencies += "com.lihaoyi" %%% "scalatags" % "0.6.7"On utisera les ScalaTags dans la partie Single Page Application
- Pour que les modifications soient prises en compte, il faut utiliser la commande reload dans le shell sbt
sbt> reload
Remarque Pour lancer le shell sbt, il suffit de lancer la commande
sbtdans un terminal. Sinon, IntelliJ propose directement un shell sbt avec le plugin Scala.
-
Executer le code pour vérifier l'affichage du "Hello World"
sbt> run -
Créer un dossier "views" à la racine du projet, pour y mettre les fichiers HTML. On peut y mettre un premier fichier "hello.html", avec le code suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Scala.js Hello, World</title>
</head>
<body>
<!-- include Scala.js compiled code -->
<script type="text/javascript" src="../target/scala-2.12/scalajsapp-fastopt.js"></script>
</body>
</html>- Modifier l'object Hello.scala
package tutorial
import org.scalajs.dom
import dom.document
object Hello {
def main(args: Array[String]): Unit = {
val parNode = document.createElement("p")
val textNode = document.createTextNode("Hello, world")
parNode.appendChild(textNode)
document.body.appendChild(parNode)
}
}-
Generer le code JS avec
sbt> fastOptJS -
Lancer "hello.html" dans le navigateur et observer "Hello, world" s'afficher !
- On modifie légèrement le body de views/hello.html
<body>
<div id="root"></div>
<!-- include Scala.js compiled code -->
<script type="text/javascript" src="../target/scala-2.12/scalajsapp-jsdeps.js"></script>
<script type="text/javascript" src="../target/scala-2.12/scalajsapp-fastopt.js"></script>
</body>- On modifie hello.scala : on utilise enfin les Scalatags (qu'on avait dans notre build.sbt)
import scalatags.JsDom.all._- On remplace la fonction main :
def main(args: Array[String]): Unit = {
val btn = button(
"Click me",
onclick := { () =>
dom.window.alert("Hello, world")
})
// intentional overkill to demonstrate scalatags
val content =
div(cls := "foo",
div(cls := "bar",
h2("Hello"),
btn
)
)
val root = dom.document.getElementById("root")
root.innerHTML = ""
root.appendChild(content.render)
}On peut donc créer des éléments html facilement, par exemple :
<div class="foo">
<h1 style="margin: 15px"> Title </h1>
<p class="bar"> Hello ! </p>
</div>devient
div(cls := "foo",
h1(style:="margin:15px", "Title"),
p(cls := "bar", "Hello !")
)- On peut lancer à nouveau
sbt> fastOptJSet lancer hello.html dans le navigateur !