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

最新推荐文章于 2024-03-25 09:38:40 发布

Jerry0Chou

最新推荐文章于 2024-03-25 09:38:40 发布

阅读量822

点赞数 1

文章标签： binding.scala semantic ui

本文链接：https://blog.csdn.net/qq_23989985/article/details/86701616

版权

由于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 引入文件

<!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.")
}