This document describes patterns for a model view controller structure of innovaphone Apps together with some more conventions. The goal is to allow other developer to quickly find their way in code written by someone else.

Covered by the patterns are


The pattern defines the minimum different files used. For larger Apps the code can be split in more files. The placeholder <app> is used for the name of the App and <manufacturer> for the name of the manufacturer/publisher of the App. For example <manufacturer>.<app>.htm would define a file name of "innovaphone.calculator,htm" for a calculater app published by innovaphone.

For all samples in the following text, the App "ui-sample1" from innovaphone is used.

The normal innovaphone JavaScript coding standards apply.

General Strcuture

Files used:

HTML start page <manufacturer>.<app>.htm

This file is used to load all script and css files. An onload handler of the body is used to start the JavaScript code of th App.

Sample (innovaphone.ui-sample1.htm):

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8" />
    <title>UI Sample1</title>
    <link rel="stylesheet" type="text/css" href="web/lib1/innovaphone.lib1.css" />
    <link rel="stylesheet" type="text/css" href="innovaphone.ui-sample1.css" />
    <script type="text/javascript" src="web/lib1/innovaphone.lib1.js"></script>
    <script type="text/javascript" src="web/appwebsocket/innovaphone.appwebsocket.Connection.js"></script>
    ... more libs ...
    <script type="text/javascript" src="innovaphone.ui-sample1.colors.js"></script>
    <script type="text/javascript" src="innovaphone.ui-sample1.texts.js"></script>
    <script type="text/javascript" src="innovaphone.ui-sample1.model.js"></script>
    <script type="text/javascript" src="innovaphone.ui-sample1.js"></script>

<body onload="innovaphone.lib1.Start(function (start) { new innovaphone.UiSample1(start); })">

Color Schemes <manufacturer>.<app>.colors.js

This file is used to define the VARS for all colors of our color schemes dark and light.

Sample (innovaphone.ui-sample1.colors.js);

var innovaphone = innovaphone || {};
innovaphone.uiSample1Colors = innovaphone.uiSample1Colors || {
    dark: {
        "--bg1": "#282828",
        "--bg2": "#333333",
        "--bg3": "#474747",
        "--c1": "#efefef",
        "--c2": "#939393",
        "--c3": "#808080",
    light: {
        "--bg1": "#ffffff",
        "--bg2": "#f5f5f5",
        "--bg3": "#e3e3e3",
        "--c1": "#000000",
        "--c2": "#404040",
        "--c3": "#606060",

Texts for localization <manufacturer>.<app>.texts.js

This file is used to define the texts for the different languages

Sample (innovaphone.ui-sample1.texts.js);

var innovaphone = innovaphone || {};
innovaphone.uiSample1Texts = innovaphone.uiSample1Texts || {
    en: {
        "send": "Send",
        "delete?": "Delete?",
        "yes": "Yes",
        "no": "No",
    de: {
        "send": "Senden",
        "delete?": "Löschen?",
        "yes": "Ja",
        "no": "Nein",

Model/Controller <manufacturer>.<app>.model.js

This file implements model and controller. It contains a constructor function <manufacturer>.<app>.Model, which is used by the view to allocate the Model.

Sample (innovaphone.ui-sample1.model.js);

var innovaphone = innovaphone || {};
innovaphone.uiSample1 = innovaphone.uiSample1 || {};
innovaphone.uiSample1.Model = innovaphone.uiSample1.Model || function (start) {



App CSS <manufacturer>.<app>.css

Definition of the CSS classes specific to the App

Sample (innovaphone.ui-sample1.css);

html {

div::-webkit-scrollbar {
    width: 9px;
    height: 9px;

div::-webkit-scrollbar-thumb {
    background-color: var(--bg3);

View <manufacturer>.<app>.js

This file implements the view. It contains a constructor function <manufacturer>.<App>, which is used in the html start page to allocate the view

Sample (innovaphone.ui-sample1.js);

var innovaphone = innovaphone || {};
innovaphone.UiSample1 = function (start) {


innovaphone.UiSample1.prototype = innovaphone.ui1.nodePrototype;

Model View Controller implementation

The Model View Controller achitecture is used to structure the App code in parts with different functionality. The model holds all the App data. The controller processes the the user actions and implements the App logic. The view displays the model data and provides the elements for the user interaction.

Basic implementation idea in innovaphone Apps

The Model is implemented together with the controller functionality as a Javascript Object, which is created by the View. It may contain more objects.

The view accesses the data from the Model and displays it in the UI. For the communication from the Model to the View, e.g. about updates of the model data, innovaphone.lib1.Event() objects are used. The view attaches itself to events the model provides and the model notifies with the events on updates.

The view uses the (controller) functions provided, by the model, so signal any user interactions.

Ideally the model implements all the app logic including the communication to any backend service, without any user interface elements, whereas the view does not hold any application data, but only displays, what is provided by the model. Any user interaction e.g. click of a button, is transparently signaled via the controller functions to the model.

Structure of Model/Controller Code

The model source file contains the model constructor, which is structured as follows:

<manufacturer>.<app>.Model(...) {
    // private variables, initialization code

    // private functions

    // public model data

    // controller functions

    // events

    // more constructor functions for model objects, which in itself follow the same structure as the main
    // model objects
    function <any model object>(...) {
        // private variable, initialization code

Structure of View code

The view source file contains the view constructor, which is structured as follows:

<manufacturer>.<App>(...) {
    // create HTML body
    // initialize color schemes

    // initialize localization texts

    // attach to scheme and language changed events

    // create model object

    // create initial UI

    // attach to model events

    // internal functions

The UI-Sample1 code

The UI Sample1 App uses the Genric App Service to provide a very basic functionality: The user can enter a text and submit the text to a list, which can be view by all users. The texts are stored off in the app service and synchronized to a local indexedDb, so they can be viewed offline as well. Any text which is submitted while offline is sent as soon the App is online.

The App is provided as, so it can be uploaded together with the generic App Service to an innovaphone Application platform