Typesafe Activator

Enterprise Cloud Web Portal

Enterprise Cloud Web Portal

ACenterA Inc.
March 8, 2015
emberjs ember angular sample web database hibernate starter javascript java scala playframework akka reactive

An Enterprise Cloud Web Portal that is built using Java, Scala, Play Framework, and Akka.

How to get "Enterprise Cloud Web Portal" on your computer

There are several ways to get this template.

Option 1: Choose play-web-portal in the Typesafe Activator UI.

Already have Typesafe Activator (get it here)? Launch the UI then search for play-web-portal in the list of templates.

Option 2: Download the play-web-portal project as a zip archive

If you haven't installed Activator, you can get the code by downloading the template bundle for play-web-portal.

  1. Download the Template Bundle for "Enterprise Cloud Web Portal"
  2. Extract the downloaded zip file to your system
  3. The bundle includes a small bootstrap script that can start Activator. To start Typesafe Activator's UI:

    In your File Explorer, navigate into the directory that the template was extracted to, right-click on the file named "activator.bat", then select "Open", and if prompted with a warning, click to continue:

    Or from a command line:

     C:\Users\typesafe\play-web-portal> activator ui 
    This will start Typesafe Activator and open this template in your browser.

Option 3: Create a play-web-portal project from the command line

If you have Typesafe Activator, use its command line mode to create a new project from this template. Type activator new PROJECTNAME play-web-portal on the command line.

Option 4: View the template source

The creator of this template maintains it at https://github.com/ACenterAInc/acentera-web#master.

Option 5: Preview the tutorial below

We've included the text of this template's tutorial below, but it may work better if you view it inside Activator on your computer. Activator tutorials are often designed to be interactive.

Preview the tutorial

Intro to ACenterA Community Portal

ACenterA Web Portal is an Enterprise Ready Cloud Management Portal, it is aiming to manage multi-cloud providers. We hope that the community will provide pull requests, in order to improve this framework and make everyone benefits from it.

Unlike a traditional Play Web Application, the controllers only responds to JSON Requests, making it great to build a RestFull API at the same time as building your Web Application.
If you prefer to only use the Portal without the needs to manage it, you may visit our ACenterA Cloud Databases, where you can see / use the full features without any fees.
The Web UI is built using the ".handlebars" templates, thanks to the

com.ketalo.play.plugins - play-emberjs

This template will get you started building your first Enterprise Grade Web Application.

Intro to EmberJS



File is located into app/assets/base/{user,admin}/controllers/routes_xxxx.js

App.Router.map(function() {
      //Catch all Route
      this.route( "blank", { path: "/blank"});
      this.route( "404", { path: "*path"});

      //entry point everything should be under index..
      this.resource( "user",  { path: "/" }, function() {
              this.resource("main",  { path: "/" }, function() {
                  this.route("index",  { path: "/" });
                  this.route("account",  { path: "/account" });


              this.resource( 'project', { path: '/project/:project_id' }, function() {
                   this.route('index', { path: '/' });


In this example, the default page for "/" is (user.main.index) which in our case will be located into the uesr root view folder inside of app/assets/templates/base/

The default views consists into the same folder structure ie : main/index.handlebars or for the /account path main.account.handlebars
That view is loaded due to the {{outlet}} code inside the application.handlebars located into the user folder, or admin folder if you want to generate the admin pages.

Have a look at the application.handlebars which is the entry ponit of the webpage.

Re-Use of Views

In some case, you might want to re-use an existing view, in our case we wanted to use the same account.handlebars view, instead of duplicating the view. In order to do so in the project/account.handlebars we included the other view as reference. We could of done that using the controller also. We found it was easier to include it into an actual template, since we might want to do more things or extends the view.... by passing more parameters to display more informations.

{{view templateName="main/account" controllerBinding="controller" contentBinding="controller.content" accountBinding="controller.account"}}

If you want to learn more about EmberJS, I strongly suggest that you go throught Ember's documentation and tutorials. Good startng point -> http://emberjs.com/guides/

EmberJS ACenterA Implementation

The EmberJS uses the play-emberjs plugin, which was modified a little bit and use our fork at ACenterA Play-EmberJS. Thanks for that original plugin.
The original plugins, only generated 1 set of javascript files. For our case, we wanted to be able to have the same structure for multiple section of the website, in order to make it easier and smaller footprint.

Our versions takes the various *.handlebars files and *.js from the following folders and loads them. Everything into the common might be overwitten by the other sections
Want to have a mobile section? Sure, all you have to do is to modify the build.sbt to include another set of folders see the current configuration :

   emberJsPrefix:= "main",
   emberObjects := Seq( Seq("common","objects.js"),

Current loaded Hierarchy based on the emberObjects pattern

    * app/assets/templates/base/common/{view,models,controller}
    * app/assets/templates/base/user/{view,models,controller}
    * app/assets/templates/base/admin/{view,models,controller}

The Javascript files generated generated will be stored into your public/template/{common,user,admin}/{view,models,controllers}/objects.js and are loaded from the following scala file :

    * modules/app/assets/views/main.scala.html

i18N - Multi-Language

We have not yet modified or created all of the i18N texts, feel free to create or update the various views and send us a pull request. We will be happy to look at them and integrate it.
Browser base Text Replacement this file could be migrated into /base/common/controllers/i18n.js each layer extends the base version...

EmberJS i18n.js file is located at modules/app/assets/templates/base/user/controllers/i18n.js

Server-Base API Text Replacement

The messages file is located at conf/messages and for other languages are conf/messages.fr (or .ru etc...)

You need to make sure to add the langues into the conf/application.conf files ie: "en,fr,ru"

comments powered by Disqus