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.
Files used:
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">
<head>
<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>
</head>
<body onload="innovaphone.lib1.Start(function (start) { new innovaphone.UiSample1(start); })">
</body>
</html>
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",
}
}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",
},
};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) {
...
};Definition of the CSS classes specific to the App
Sample (innovaphone.ui-sample1.css);
html {
height:100%
}
div::-webkit-scrollbar {
width: 9px;
height: 9px;
}
div::-webkit-scrollbar-thumb {
background-color: var(--bg3);
}
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;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.
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.
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
...
}
}
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 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 httpfiles.zip, so it can be uploaded together with the generic App Service to an innovaphone Application platform
httpfiles