mathieuleclaire / scaladget

Scala lib for generating javascript widgets

Github

scaladget

Scaladget provides a scala facades of some famous javascript libraries. It relies on the scala-js project. Among them:

Usage

Just add this to your dependencies:

  libraryDependencies += "fr.iscpif" %%% "scaladget" % "0.9.3"

All the facades are intensively used in the OpenMOLE project.

Bootstrap-native library

Demo

The boostrap-native facade (based on https://thednp.github.io/bootstrap.native/) renders transparent the use of buttons, forms, modals, collapsers, selectors etc... The bootstrap-native.min.js (bootstrap-native 2.0.+ or more) has to be set in a js folder. Then the whole html element (like div or span) as to be placed in :

withBootstrapNative{
 // your code here
 }

The reason is that the bootstrap-native.min.js file has to be loaded lazyly after the dom is loaded. Set you code in the withBootstrapNative guarantees the bootstrap-native script is loaded last.

Here is an example of bootstrap modal dialog creation in full scala:

  // Create the Modal dialog
    val modalDialog: ModalDialog =
      bs.ModalDialog(
        onopen = () => println("OPEN"),
        onclose = () => println("CLOSE")
      )

    // Append header, body, footer elements
    modalDialog header div("Header")
    modalDialog footer bs.buttonGroup()(
      ModalDialog.closeButton(modalDialog, btn_info, "OK"),
      ModalDialog.closeButton(modalDialog, btn_default, "Cancel")
    )

    // Build the modal dialog and the trigger button
    tags.span(
      modalDialog.dialog,
      bs.button("Modal !", btn_primary +++ sheet.marginLeft(5), () => modalDialog.show)
    ).render

Find more examples on the: API Demo

Here is an example of scaladget intensive use in the OpenMOLE project

D3 wrapper

An example using the scaladget D3 wrapper can be found in the ScalaWUI project: FlowChart. It reproduces this D3 flowchart.