Step 5: Using jQuery

gzm0 · sjrd · commit 8a545f3fd477 · 2014-11-22T17:14:02.000+01:00
diff --git a/build.sbt b/build.sbt
@@ -4,4 +4,6 @@ name := "Scala.js Tutorial"
 
 scalaVersion := "2.11.2"
 
-libraryDependencies += "org.scala-lang.modules.scalajs" %%% "scalajs-dom" % "0.6"
+libraryDependencies += "org.scala-lang.modules.scalajs" %%% "scalajs-jquery" % "0.6"
+
+skip in ScalaJSKeys.packageJSDependencies := false
diff --git a/scalajs-tutorial-fastopt.html b/scalajs-tutorial-fastopt.html
@@ -5,10 +5,10 @@
     <title>The Scala.js Tutorial</title>
   </head>
   <body>
-    <button id="click-me-button" type="button"
-            onclick="tutorial.webapp.TutorialApp().addClickedMessage()">
-            Click me!</button>
+    <button id="click-me-button" type="button">Click me!</button>
 
+    <!-- Include JavaScript dependencies -->
+    <script type="text/javascript" src="./target/scala-2.11/scala-js-tutorial-jsdeps.js"></script>
     <!-- Include Scala.js compiled code -->
     <script type="text/javascript" src="./target/scala-2.11/scala-js-tutorial-fastopt.js"></script>
     <!-- Run tutorial.webapp.TutorialApp -->
diff --git a/src/main/scala/tutorial/webapp/TutorialApp.scala b/src/main/scala/tutorial/webapp/TutorialApp.scala
@@ -1,25 +1,20 @@
 package tutorial.webapp
 
 import scala.scalajs.js.JSApp
-import scala.scalajs.js.annotation.JSExport
 
-import org.scalajs.dom
-import dom.document
+import org.scalajs.jquery.jQuery
 
 object TutorialApp extends JSApp {
   def main(): 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 _)
   }
 
-  @JSExport
   def addClickedMessage(): Unit = {
-    appendPar(document.body, "You clicked the button!")
+    jQuery("body").append("<p>You clicked the button!</p>")
   }
 }
