summaryrefslogtreecommitdiff
path: root/book/src/main/scalatex/book/handson/WebPage.scalatex
diff options
context:
space:
mode:
authorLi Haoyi <haoyi@dropbox.com>2014-11-12 00:04:54 -0800
committerLi Haoyi <haoyi@dropbox.com>2014-11-12 00:04:54 -0800
commit428976e0c29599e29623c63ba22a12a53a342b1e (patch)
treec4198b5bd414088317294cc0721d387ab6711669 /book/src/main/scalatex/book/handson/WebPage.scalatex
parentdab933c342d755086253b1465a04caeeaa2af823 (diff)
downloadhands-on-scala-js-428976e0c29599e29623c63ba22a12a53a342b1e.tar.gz
hands-on-scala-js-428976e0c29599e29623c63ba22a12a53a342b1e.tar.bz2
hands-on-scala-js-428976e0c29599e29623c63ba22a12a53a342b1e.zip
Lots of link insertion and standardization
Diffstat (limited to 'book/src/main/scalatex/book/handson/WebPage.scalatex')
-rw-r--r--book/src/main/scalatex/book/handson/WebPage.scalatex7
1 files changed, 3 insertions, 4 deletions
diff --git a/book/src/main/scalatex/book/handson/WebPage.scalatex b/book/src/main/scalatex/book/handson/WebPage.scalatex
index ef9ac6c..2bcdf1c 100644
--- a/book/src/main/scalatex/book/handson/WebPage.scalatex
+++ b/book/src/main/scalatex/book/handson/WebPage.scalatex
@@ -19,7 +19,6 @@
@div(id:="div1")
@script("HelloWorld0().main(document.getElementById('div1'))")
-
@p
This approach works, as the above example shows, but has a couple of disadvantages:
@@ -65,7 +64,7 @@
@script("Inputs().main(document.getElementById('div3'))")
@p
- In Scalatags, you build up fragments of type @hl.scala{Frag} using functions like @hl.scala{div}, @hl.scala{h1}, etc., and call @hl.scala{.render} on it to turn it into a real @hl.scala{dom.Element}. Different fragments render to different things: e.g. @hl.scala{input.render} gives you a @hl.scala{dom.HTMLInputElement}, @hl.scala{span.render} gives you a @hl.scala{dom.HTMLSpanElement}. You can then access the properties of these elements: adding callbacks, checking their value, anything you want.
+ In Scalatags, you build up fragments of type @hl.scala{Frag} using functions like @hl.scala{div}, @hl.scala{h1}, etc., and call @hl.scala{.render} on it to turn it into a real @lnk.dom.Element. Different fragments render to different things: e.g. @hl.scala{input.render} gives you a @lnk.dom.HTMLInputElement, @hl.scala{span.render} gives you a @lnk.dom.HTMLSpanElement. You can then access the properties of these elements: adding callbacks, checking their value, anything you want.
@p
In this example, we render and @hl.scala{input} element and a @hl.scala{span}, wire up the input to set the value of the span whenever you press a key in the input, and then stuff both of them into a larger HTML fragment that forms the contents of our @hl.scala{target} element.
@@ -88,7 +87,7 @@
Using a @hl.scala{for}-loop with a filter inside the Scalatags fragment is just normal Scala, since you can nest arbitrary Scala expressions inside a Scalatags snippet. In this case, we're converting both the fruit and the search query to lower case so we can compare them case-insensitively.
@p
- Lastly, we just need to define the input box and output-container (as we did earlier), set the @hl.scala{onkeyup} event handler, and place it in a larger fragment, and then into our target:
+ Lastly, we just need to define the input box and output-container (as we did earlier), set the @lnk.dom.onkeyup event handler, and place it in a larger fragment, and then into our target:
@div(cls:="pure-g")
@div(cls:="pure-u-1 pure-u-md-13-24")
@@ -180,7 +179,7 @@
@hl.ref("examples/demos/src/main/scala/webpage/Weather1.scala", "import dom", "val url =")
@p
- The first import brings in Scala adapters to several DOM APIs, which allow you to use them more idiomatically from Scala. The second brings in an implicit @hl.scala{ExecutionContext} that we'll need to run our asynchronous operations.
+ The first import brings in Scala adapters to several DOM APIs, which allow you to use them more idiomatically from Scala. The second brings in an implicit @hl.scala{scala.concurrent.ExecutionContext} that we'll need to run our asynchronous operations.
@p
Then we need the code itself: