OnsenUI – HDpublish GmbH

Ein Javascript Framework für WebApp Development | Entwicklung, Mini-HowTo:

Unser Grundannahme ist dass Ihr Cordova verwendet, darin integriert Ihr dann folgendes… .

Framework herunterladen @ https://onsen.io/ und lokal z.B. in den Cordova-www-Ordner „onsenui“ legen.

In den Header gehört dann Folgendes:

<link rel="stylesheet" href="onsenui/css/onsenui.css">
  <link rel="stylesheet" href="onsenui/css/onsen-css-components.min.css">
  <script src="onsenui/js/onsenui.min.js"></script>

Beispiel-Seite in die index.html kopieren:

<ons-navigator swipeable id="myNavigator" page="page1.html"></ons-navigator>

<template id="page1.html">
  <ons-page id="page1">
    <ons-toolbar>
      <div class="center">Page 1</div>
    </ons-toolbar>

    <p>This is the first page.</p>

    <ons-button id="push-button">Push page</ons-button>
  </ons-page>
</template>

<template id="page2.html">
  <ons-page id="page2">
    <ons-toolbar>
      <div class="left"><ons-back-button>Page 1</ons-back-button></div>
      <div class="center"></div>
    </ons-toolbar>

    <p>This is the second page.</p>
  </ons-page>
</template>

dazu gehört dann noch folgender Javascript Code, entweder direkt in die Site kopieren oder in einen separate Javascript-Datei, z.B. onsen.custom.js

document.addEventListener('init', function(event) {
  var page = event.target;

  if (page.id === 'page1') {
    page.querySelector('#push-button').onclick = function() {
      document.querySelector('#myNavigator').pushPage('page2.html', {data: {title: 'Page 2'}});
    };
  } else if (page.id === 'page2') {
    page.querySelector('ons-toolbar .center').innerHTML = page.data.title;
  }
});

Wichtig, wenn Ihr den folgenden Fehler erhaltet:

[Error] Refused to execute a script because its hash, its nonce, or ‚unsafe-inline‘ appears in neither the script-src directive nor the default-src directive of the Content Security Policy. (onsen.html, line 41)

Dann ergänzt Content-Security-Policy in der Meta-Info um:

 'unsafe-inline'

So lautet es dann:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">