Step 5: Using jQuery

sjrd · sjrd · commit a719e7610ecf · 2020-02-12T11:45:31.000+01:00
diff --git a/build.sbt b/build.sbt
@@ -7,3 +7,8 @@ scalaVersion := "2.13.1"
 scalaJSUseMainModuleInitializer := true
 
 libraryDependencies += "org.scala-js" %%% "scalajs-dom" % "1.0.0"
+libraryDependencies += "be.doeraene" %%% "scalajs-jquery" % "1.0.0"
+
+skip in packageJSDependencies := false
+jsDependencies +=
+  "org.webjars" % "jquery" % "2.2.1" / "jquery.js" minified "jquery.min.js"
diff --git a/scalajs-tutorial-fastopt.html b/scalajs-tutorial-fastopt.html
@@ -5,10 +5,12 @@
     <title>The Scala.js Tutorial</title>
   </head>
   <body>
-    <button id="click-me-button" type="button" onclick="addClickedMessage()">
+    <button id="click-me-button" type="button">
       Click me!
     </button>
 
+    <!-- Include JavaScript dependencies -->
+    <script type="text/javascript" src="./target/scala-2.13/scala-js-tutorial-jsdeps.js"></script>
     <!-- Include Scala.js compiled code -->
     <script type="text/javascript" src="./target/scala-2.13/scala-js-tutorial-fastopt.js"></script>
   </body>
diff --git a/src/main/scala/tutorial/webapp/TutorialApp.scala b/src/main/scala/tutorial/webapp/TutorialApp.scala
@@ -1,24 +1,18 @@
 package tutorial.webapp
 
-import scala.scalajs.js.annotation.JSExportTopLevel
-
-import org.scalajs.dom
-import org.scalajs.dom.document
+import org.scalajs.jquery._
 
 object TutorialApp {
   def main(args: Array[String]): Unit = {
-    appendPar(document.body, "Hello World")
+    jQuery(() => setupUI())
   }
 
-  def appendPar(targetNode: dom.Node, text: String): Unit = {
-    val parNode = document.createElement("p")
-    val textNode = document.createTextNode(text)
-    parNode.appendChild(textNode)
-    targetNode.appendChild(parNode)
+  def setupUI(): Unit = {
+    jQuery("body").append("<p>Hello World</p>")
+    jQuery("#click-me-button").click(() => addClickedMessage())
   }
 
-  @JSExportTopLevel("addClickedMessage")
   def addClickedMessage(): Unit = {
-    appendPar(document.body, "You clicked the button!")
+    jQuery("body").append("<p>You clicked the button!</p>")
   }
 }
