Binding.scala使用教程8--binding.scala结合semanticUI

由于Binding.scala是一个新兴框架，并没有适配的UI 框架，但是不妨碍它成为一个优秀的框架，它可以使用基于JQuery的UI框架，比如Bootstrap,Semantic UI 等等。

1.首先进入官网查看Getting Started

https://semantic-ui.com/introduction/getting-started.html

2.打包semantic步骤

• 参考官网打包那个视频

• 安装nodeJS

• npm install -g gulp

• npm init (随便新建一个文件夹，cd 到这个目录下，执行 npm init)

• npm install semantic-ui --save

• cd semantic/

• gulp build

3.上述操作后生成的文件夹及文件

4. 将semantic 下的dist文件夹拷贝到 sbt 工程的resources下

5. 到Jquery官网下载最新版本

https://jquery.com/download/

6. index.html 引入文件

7. build.sbt

build 引入JQuery

import sbt.addCompilerPlugin

lazy val root = project
  .in(file("."))
  .enablePlugins(ScalaJSPlugin)
  .settings(
    inThisBuild(List(
      organization := "jerry",
      version := "0.1-SNAPSHOT",
      scalaVersion := "2.12.6"
    )),
    name := "my-scala-js",
    libraryDependencies ++= Seq(
      "org.scala-js" %%% "scalajs-dom" % "0.9.6",
      "org.scalatest" %%% "scalatest" % "3.0.5" % "test",
      "com.thoughtworks.binding" %%% "dom" % "latest.release",

      // For Scala.js projects, or JS/JVM cross projects
      "com.thoughtworks.binding" %%% "futurebinding" % "latest.release",

      //JQuery
      "org.querki" %%% "jquery-facade" % "1.2"
    ),
    addCompilerPlugin("org.scalamacros" % "paradise" % "2.1.0" cross CrossVersion.full),
    scalaJSUseMainModuleInitializer := true
  )



// Automatically generate index-dev.html which uses *-fastopt.js
resourceGenerators in Compile += Def.task
{
  val source = (resourceDirectory in Compile).value / "index.html"
  val target = (resourceManaged in Compile).value / "index-dev.html"

  val fullFileName = (artifactPath in(Compile, fullOptJS)).value.getName
  val fastFileName = (artifactPath in(Compile, fastOptJS)).value.getName

  IO.writeLines(target,
    IO.readLines(source).map
    {
      line => line.replace(fullFileName, fastFileName)
    }
  )

  Seq(target)
}.taskValue

8.实现一个小案例

• 效果如下

9.文件目录

SemanticUI

• 更多关于semantic UI 的隐式转化 参考 沈达的博客

http://sadhen.com/blog/2017/01/02/binding-with-semantic.html

package app
import scala.scalajs.js
import org.querki.jquery.JQuery

// SemanticUI 的隐式转换
object SemanticUI
{
  @js.native
  trait SemanticJQuery extends JQuery {
    def dropdown(params: js.Any*): SemanticJQuery = js.native
  }
  implicit def jq2semantic(jq: JQuery): SemanticJQuery = jq.asInstanceOf[SemanticJQuery]
}

View

package app

import com.thoughtworks.binding.Binding.Var
import com.thoughtworks.binding.dom
import org.scalajs.dom.html.Input
import org.scalajs.dom.raw.Event


object View
{
  val input = Var("")
  @dom
  def render =
  {
    

      

         input.value= event.currentTarget.asInstanceOf[Input].value }/>
        
        
Gender
        

          
Male
          
Female
        
      
      the selected value is { input.bind }
    
  }
}

MainApp

package app

import com.thoughtworks.binding.dom
import org.scalajs.dom.document
import org.querki.jquery.$
import SemanticUI.jq2semantic
import scala.scalajs.js.Dynamic.literal

import scala.scalajs.js.JSApp

object MainApp extends JSApp
{
  def main(): Unit =
  {
    dom.render(document.body, View.render)
    $(".ui.dropdown").dropdown(literal(on="hover",clearable= true))
  }
}

package object app

阻止IDEA 报错

import com.thoughtworks.binding.Binding

package object app
{
  implicit def makeIntellijHappy[T<:org.scalajs.dom.raw.Node](x: scala.xml.Node): Binding[T] =
    throw new AssertionError("This should never execute.")
}