From bac53bef685f4e00e7061923dcd57dea4f9e229b Mon Sep 17 00:00:00 2001 From: Li Haoyi Date: Wed, 3 Dec 2014 22:46:04 -0800 Subject: scalatex broken out into separate project which needs to be published separately --- book/src/main/scala/book/Book.scala | 6 +++--- book/src/main/scalatex/book/handson/ClientServer.scalatex | 15 +++++++++++++-- 2 files changed, 16 insertions(+), 5 deletions(-) (limited to 'book/src/main') diff --git a/book/src/main/scala/book/Book.scala b/book/src/main/scala/book/Book.scala index d023d56..71c0d65 100644 --- a/book/src/main/scala/book/Book.scala +++ b/book/src/main/scala/book/Book.scala @@ -25,7 +25,7 @@ object Book { "META-INF/resources/webjars/font-awesome/4.2.0/fonts/fontawesome-webfont.woff", "css/side-menu.css", "example-opt.js", - "example-opt.js.map", +// "example-opt.js.map", "webpage/weather.js", "favicon.svg", "favicon.png" @@ -72,6 +72,7 @@ object Book { script(raw(googleAnalytics)) ), body( + onload:=s"Controller().main($data)", div(id:="layout")( a(href:="#menu", id:="menuLink", cls:="menu-link")( span @@ -83,8 +84,7 @@ object Book { div(id:="main-box")( txt ) - ), - script(raw(s"Controller().main($data)")) + ) ) ) ).render diff --git a/book/src/main/scalatex/book/handson/ClientServer.scalatex b/book/src/main/scalatex/book/handson/ClientServer.scalatex index 48d35f2..50afe76 100644 --- a/book/src/main/scalatex/book/handson/ClientServer.scalatex +++ b/book/src/main/scalatex/book/handson/ClientServer.scalatex @@ -1,5 +1,12 @@ @import BookData._ +@def lazyload(id: String) = script(raw(""" + document.addEventListener("load", function(){ + document.getElementById(id).src = 'https://hands-on-scala-js.herokuapp.com/' + }) +""")) + + @p Historically, sharing code across client & server has been a holy-grail for web development. There are many things which have made it hard in the past: @@ -75,7 +82,9 @@ @p Now, if we go to the browser at @code{localhost:8080}, we should see our web-page! - @iframe(src:="https://hands-on-scala-js.herokuapp.com/", width:="100%", height:="350px", "frameBorder".attr:="0") + @iframe(id:="heroku1", width:="100%", height:="350px", "frameBorder".attr:="0") + @lazyload("heroku1") + @p This is a real, live example running on a @lnk("Heroku server", "https://hands-on-scala-js.herokuapp.com/"). Feel free to poke around and explore the filesystem on the server, just to convince yourself that this actually works and is not just a mock up. @@ -215,7 +224,9 @@ @p Other than that, nothing much has changed. If you've done this correctly, the web application will look and behave exactly as it did earlier! - @iframe(src:="https://hands-on-scala-js.herokuapp.com/", width:="100%", height:="350px", "frameBorder".attr:="0") + @iframe(id:="heroku2", width:="100%", height:="350px", "frameBorder".attr:="0") + @lazyload("heroku2") + @p So why did we do this in the first place? -- cgit v1.2.3