Developer manual: front end and view explanation

Developer manual - front end

Techniques

When developing for MediacenterJS you are free to use whatever front end technique you like. Whether you want to use a framework like Angular (As seen in the all the native apps) or Knockout, jQuery or plain javascript, you are free to choose yourself. Angular and Knockout are packaged with MediacenterJS.

Aside from these frameworks MediacenterJS is also packaged with the following 3rd party plugins:

• jQuery validation
• Pretty form plugin for styling check and radio buttons
• jQuery Scroll into view
• jQuery mousewheel
• jQuery i18n translations
• jQuery slim scrollbar

MCJS Core

A variety of options and settings are handled for you once you include mcjs core. This jQuery plugin enables various settings and options enabled throughout MediacenterJS. It handles:

• UI dialog popup
• UI dialog messages
• Stretch images over entire viewport (as seen in Weather app)
• Screensaver

There is also a generic handler for accesibility called jquery.remote.js. This file handles:

• Remote control handling
• Keyboard handling

Last but not least there is also a generic handler available for video called video.js. This file is plain javascript so it easily ties in with any framework. This file is located in the root of the /core/js folder and should not be confused with the file in the plugin folder with the same name.

Tile

The tile located in the public folder has the following dimensions: 160x169px. You can also add a SVG called 'tile' in the public folder.

If you want to control the color of the tile, you can add a tile.css and add some specific styling like so:

.tile.NAMEOFPLUGIN{
    background:#FB8521!important;
 }

Developer manual - view

Jade

The views are handled using Jade. If you are not familiar with Jade, it is a indent based HTML template engine. For more information about Jade: view: http://jade-lang.com/

Jade also allows blocks of code to be injected. To see this in action we look at the following example from the movies app.

extends /layout   //First we tell Jade to use the layouts file found in root/views.layout.jade

block declarations
- additional_title = #{lingua.movies};   // Add page title, and translate it with the template translate engine linqua
- use_knockout = true;  // Add knockout js files to page. You can also Angular this way

block additional_css  // Add additional CSS
link(href="http://vjs.zencdn.net/4.3/video-js.css", rel="stylesheet")
style.
	.vjs-play-progress, .vjs-volume-level { background-color: #d96800!important; }
link(rel='stylesheet', href='/movies/css/style.css')

block additional_scripts  // Add additional Javascript
script(src="http://vjs.zencdn.net/4.3/video.js")
script(src="/movies/js/jquery.mcjs.movie.functions.js")
script(src="/movies/js/jquery.mcjs.play.movie.js")
script(src="/movies/js/knockout.movies.js")

script.
	$(function(){
		$('body').mcjs();
	});

block body   // begin adding your code.

Translations

As seen in the example above, Lingua is used to translate strings used in the jade file.

#{lingua.loading}

The hashtag and brackets followed by lingua. are mandatory. The string after that is the key for the translation file located in /public/translations/transalations_x.json