Zum Inhalt

Erste Schritte

Im ersten Beispel wird eine einfache HTML-Datei index.html mit den Standardelementen angelegt.

Nicht jeder Browser unterstützt Webcomponents vollständig. Dieses Manko lässt sich oft mit Polyfills umgehen. In diesme Beispiel wird polyfill.js und webcomponents.js verwendet. Das Alvine Frontend Framework kann als letztes über das CDN cdn.alvine.io eingebunden werden.

<!DOCTYPE html>
<html lang="de-DE">
    <head>
        <meta charset="utf-8">
        <script src="//cdn.polyfill.io/v2/polyfill.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.22/webcomponents.js"></script>
    </head>
    <body>

    <script>
      // Eigener Code ....
    </script>

    <script src="//cdn.alvine.io/libs/alvine/framework/alvine.framework-1.0.1.min.js"></script>
    </body>
</html>

In dieser Testdatei lassen sich jetzt die einzelnen Objekte der Komponente testen. Dazu einfach im Script-Bereich die gewünschten Funktionen definieren.

Testing

Sollte das Framework auf einem Endgerät nicht richtig funktionieren, so kann dies über die integrierten Tests gepürft werden. Mit deren Hilfe sich Fehler auf verschiedenen Platformen aufspüren lassen. Dazu muss man einfach die Testdatei http://cdn.alvine.io/%%PLACEHOLDER_TESTFILE%% im gewünschten Browser aufrufen. Im Standard wird mit der Min-Version getestet. Über den Parameter framework kann die Debug-Version verwendet werden http://cdn.alvine.io%%PLACEHOLDER_TESTFILE%%?framework=alvine.framework.js.

Kommentare