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官网下载最新版本
6. index.html 引入文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>my-scala-js</title>
<link rel="stylesheet" type="text/css" href="./dist/semantic.min.css">
<script src="./jquery-3.3.1.min.js"></script>
<script src="./dist/semantic.min.js"></script>
</head>
<body>
<!-- Include Scala.js compiled code -->
<script type="text/javascript" src="../my-scala-js-opt.js"></script>
</body>
</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 =
{
<div>
<div class="ui selection dropdown">
<input type="hidden" name="gender" onchange={ event: Event => input.value= event.currentTarget.asInstanceOf[Input].value }/>
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" data:data-value="Male">Male</div>
<div class="item" data:data-value="Female">Female</div>
</div>
</div>
the selected value is { input.bind }
</div>
}
}
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.")
}