This is a demo of how Scala.JS can be used for client-server interaction.

The scala.js code resides in project client (sbt-project). It contains all the code necessary for the frontend of play-cms-demo

For now there isn't much to show, but a basic implementation and usage-sample of Autowire for exchanging information between Client and Server

Autowire

For client-sever-communication, play-cms-demo showcases Autowire (based on pickling-library boot-pickle) which allows us to use RMI-like method-calls to fetch information from the server.

Instead of untyped JSON or string-data, you can exchange actual Scala objects and your IDE will complain if you mess up with types.

This revolutionizes ajax calls since you have type-safty through an api trait (in project shared) which is implemented on project server by service.ApiService.

 

Javascript Configuration

Since the admin area of the play-cms can be extended with new sections (provided by the application which uses the cms), it is important that we are able to overwrite/extend settings in the js-configuration used in backend

As explained in Frontend (Browser) Development of play-cms there is a mechanism to render a template which provides js-configuration-values 

The js-configuration in play-cms-demo is mapped to the route /javascript/config and overwrites (extends) the route defined in play-cms.

The Configuration-Template (_config.scala.js) is included in the frontend-template (main.scala.html) as well as in the Admin-Area (layout.scala.html).

The _config.scala.js-template for play-cms-demo looks like this (it includes configuration from cms)

@*  This file specifies global javascript properties for libraries used in the cms-application backend (admin-area of cms) as well as frontend (web-application specfic)
    CMS-Default config is included by default (by rendering ch.insign.cms.views.js.js._config) and can be overwritten below the import *@

@ch.insign.cms.views.js.js._config()


@* Overwrite CMS-Default parameters or add new ones according to your needs *@

console.log("overwrite tiny-config");
jsconfig.tinyMce.externalPlugins.plantuml = "@{_asset("javascripts/plantuml/editor_plugin.js")}";