Merge pull request #2 from pme123/integrate-semantic-ui

moved to sbt-crossproject

Integrate semantic ui

Author: pme123

README.md

@@ -9,6 +9,8 @@ See the general setup on the starter kit page.
 This is an example application showing how you can integrate a Play project with a Scala.js, Binding.scala 
 project - using **Web Sockets**.
 
+It is my personal Starter Kit at the moment.
+
 ## Business Case
 
 It's about an automatic process that can be started manually (button). 
@@ -20,11 +22,19 @@ that the process is only run once at a time.
 Each client sees the LogEntries of the last 'Adapter process' (LogReport) - 
 or if the process is running - each LogEntry right away.
 
-![play-wsocket-scalajs](https://user-images.githubusercontent.com/3437927/32768876-ec1a891c-c919-11e7-8a64-ec32a1cdc1cc.gif)
+You can filter the LogEntries for their Level and/ or their message.
+
+![play-wsocket-scalajs](https://user-images.githubusercontent.com/3437927/33009370-eb51c8b2-cdd6-11e7-8753-383eebbcc191.gif)
+
+# Architecture
+- Server: Play with Scala
+- Client: Binding.scala with ScalaJS
 
 The web-sockets are created according to the 
 [Lightbend's Websocket example](https://github.com/playframework/play-scala-websocket-example).
 
+The project is split into 3 modules that are explained in the following chapters. 
+
 ## Shared
 The great thing about a **full-stack Scala app** is that 
 we only have to define our domain model once for the server and the client.
@@ -72,13 +82,78 @@ case object KeepAliveMsg extends AdapterMsg
 The UI is done with 
 [Binding.scala](https://github.com/ThoughtWorksInc/Binding.scala)
 
-It is more or less HTML-snippets that contain dynamic content provided by Binding.scala:
-* `Vars[LogEntry]` a list of LogEntries that from the active- or last Adapter run.
-* `Var[Boolean]` is true if the Adapter process is running at the moment.
-* `Var[Option[LogLevel]]` the LogLevel of the last Adapter run - used for the title.
+The client is split in 3 classes:
+
+### AdapterClient
+The whole web page is here composed with `Binding.scala data-binding expressions`. 
+
+It is more or less HTML-snippets that contain dynamic content provided by `Binding.scala data sources`:
+
+* `logData: Vars[LogEntry]` a list of LogEntries that from the active- or last Adapter run.
+* `isRunning: Var[Boolean]` is true if the Adapter process is running at the moment.
+* `filterText: Var[String]` is the filter text from the input field.
+* `filterLevel: Var[LogLevel]` is the Level selected from the drop-down.
+* `lastLogLevel: Var[Option[LogLevel]]` the LogLevel of the last Adapter run - used for the title.
 
 If you have troubles understanding it, please check out [Binding.scala-Google-Maps](https://github.com/pme123/Binding.scala-Google-Maps), where I explained all the details.
 
+#### ScalaJS Routes
+To use Play routes from within the client, we need again something to do.
+My solution is taken from here: [github.com/vmunier/play-scalajs.g8](https://github.com/vmunier/play-scalajs.g8/issues/50)
+
+* build.sbt
+```scala
+  // Create a map of versioned assets, replacing the empty versioned.js
+  DigestKeys.indexPath := Some("javascripts/versioned.js"),
+  // Assign the asset index to a global versioned var
+  DigestKeys.indexWriter ~= { writer => index => s"var versioned = ${writer(index)};" }
+```
+* add `javascripts/versioned.js` to the `public` folder (contains only: `var versioned = {};)
+* add to the end of the `routes`-file `->         /webjars                      webjars.Routes`
+* now you can use them like `<img src={"" + g.jsRoutes.controllers.Assets.versioned("images/favicon.png").url}></img>`
+Don't forget `import scala.scalajs.js.Dynamic.{global => g}` 
+### ClientWebsocket
+Encapsulates the communication with the server. The internal communication with the AdapterClient
+is done via the `Binding.scala data sources`.
+
+### SemanticUI
+To have a decent look I integrated with [Semantic-UI](https://semantic-ui.com/usage/layout.html).
+
+The solution is based on this [blog](http://sadhen.com/blog/2017/01/02/binding-with-semantic.html).
+
+To do that we need to add the dependency with webjars:
+```scala
+// server
+    , "org.webjars" %% "webjars-play" % "2.6.1"
+    , "org.webjars" % "Semantic-UI" % semanticV
+    , "org.webjars" % "jquery" % jQueryV
+// client
+  jsDependencies ++= Seq(
+    "org.webjars" % "jquery" % jQueryV / "jquery.js" minified "jquery.min.js",
+    "org.webjars" % "Semantic-UI" % semanticV / "semantic.js" minified "semantic.min.js" dependsOn "jquery.js"
+  ),
+  ...
+     // jquery support for ScalaJS
+     "be.doeraene" %%% "scalajs-jquery" % "0.9.1"
+
+```
+Here is the documentation: [webjars.org](http://www.webjars.org/documentation)
+
+Monkey Patching: With Semantic-UI you sometimes you have activate the Javascript.
+
+see [correct-way-to-dynamically-add-semantic-ui-controls](http://stackoverflow.com/questions/30531410/correct-way-to-dynamically-add-semantic-ui-controls)
+
+```scala
+  @js.native
+  trait SemanticJQuery extends JQuery {
+    def dropdown(params: js.Any*): SemanticJQuery = js.native
+  }
+
+  implicit def jq2semantic(jq: JQuery): SemanticJQuery = jq.asInstanceOf[SemanticJQuery]
+```
+This is all - that is needed with ScalaJS. 
+Thanks to `implicit` Monkey Patching can be done in an elegant way with Scala.
+
 ## Server
 When you go to [http://localhost:9000](http://localhost:9000) 
 a web-socket is opened to show you the active- or last LogReport of the Adapter Process.

build.sbt

@@ -1,6 +1,9 @@
-lazy val scalaV = "2.12.2"
+// (5) shadow sbt-scalajs' crossProject and CrossType until Scala.js 1.0.0 is released
+import sbtcrossproject.{crossProject, CrossType}
 
-resolvers += "jitpack" at "https://jitpack.io"
+lazy val scalaV = "2.12.3"
+lazy val jQueryV = "2.2.4"
+lazy val semanticV = "2.2.10"
 
 lazy val server = (project in file("server")).settings(
   scalaVersion := scalaV,
@@ -13,12 +16,23 @@ lazy val server = (project in file("server")).settings(
     "com.vmunier" %% "scalajs-scripts" % "1.1.1",
     guice,
     filters,
-    ws,
+    ws
+    // webjars for Semantic-UI
+    , "org.webjars" %% "webjars-play" % "2.6.1"
+    , "org.webjars" % "Semantic-UI" % semanticV
+    , "org.webjars" % "jquery" % jQueryV
+    ,
     "com.typesafe.akka" %% "akka-testkit" % "2.5.6" % Test,
     "com.typesafe.akka" %% "akka-stream-testkit" % "2.5.6" % Test,
     "org.scalatestplus.play" %% "scalatestplus-play" % "3.1.2" % Test,
     "org.awaitility" % "awaitility" % "3.0.0" % Test
-  )
+  ),
+  // to have routing also in ScalaJS
+  // Create a map of versioned assets, replacing the empty versioned.js
+  DigestKeys.indexPath := Some("javascripts/versioned.js"),
+  // Assign the asset index to a global versioned var
+  DigestKeys.indexWriter ~= { writer => index => s"var versioned = ${writer(index)};" }
+
 ).enablePlugins(PlayScala)
   .dependsOn(sharedJvm)
 
@@ -28,26 +42,35 @@ lazy val client = (project in file("client")).settings(
   scalacOptions ++= Seq("-Xmax-classfile-name","78"),
   scalaJSUseMainModuleInitializer in Test := false,
   addCompilerPlugin("org.scalamacros" % "paradise" % "2.1.0" cross CrossVersion.full),
- // jsDependencies += "org.webjars" % "flot" % "0.8.3" / "flot.js" minified "flot.min.js",
- // jsDependencies += "org.webjars" % "bootstrap" % "3.3.6" / "bootstrap.js" minified "bootstrap.min.js",
+  jsDependencies ++= Seq(
+    "org.webjars" % "jquery" % jQueryV / "jquery.js" minified "jquery.min.js",
+    "org.webjars" % "Semantic-UI" % semanticV / "semantic.js" minified "semantic.min.js" dependsOn "jquery.js"
+  ),
   libraryDependencies ++= Seq(
     "org.scala-js" %%% "scalajs-dom" % "0.9.3",
     "org.scala-lang.modules" %% "scala-xml" % "1.0.6",
     "com.typesafe.play" %%% "play-json" % "2.6.1",
     "com.thoughtworks.binding" %%% "dom" % "11.0.0-M4",
     "com.thoughtworks.binding" %%% "futurebinding" % "11.0.0-M4",
     "fr.hmil" %%% "roshttp" % "2.0.2",
-    "org.scala-js" %%% "scalajs-java-time" % "0.2.2"
+    // java.time supprot for ScalaJS
+    "org.scala-js" %%% "scalajs-java-time" % "0.2.2",
+    // jquery support for ScalaJS
+    "be.doeraene" %%% "scalajs-jquery" % "0.9.1"
   )
-).enablePlugins(ScalaJSPlugin, ScalaJSWeb).
+).enablePlugins(ScalaJSWeb).
   dependsOn(sharedJs)
 
-lazy val shared = (crossProject.crossType(CrossType.Pure) in file("shared"))
+lazy val shared = crossProject(JSPlatform, JVMPlatform)
+  .crossType(CrossType.Pure)
   .settings(scalaVersion := scalaV
     , libraryDependencies ++= Seq(
       "org.julienrf" %%% "play-json-derived-codecs" % "4.0.0"
+      // logging lib that also works with ScalaJS
       , "biz.enef" %%% "slogging" % "0.6.0"
     ))
+  .jsSettings(/* ... */) // defined in sbt-scalajs-crossproject
+  .jvmSettings(/* ... */)
   .jsConfigure(_ enablePlugins ScalaJSWeb)
 
 lazy val sharedJvm = shared.jvm