VOS - realisatie UC aanmelden

De homepagina waarmee de gebruiker zich kan aanmelden. Zonder zich aan te melden kan de gebruiker alleen informatie zien maar geen acties ondernemen zoals bellen, sms'en versturen. We realiseren die use case in de index.html. We maken de HTML op Cloud9 en pas als de CSS en de HTML afgewerkt is, brengen we die over naar Cordova. Op Cloud9 zijn de index.html pagina's genummerd te beginnen met 001 zodat jullie de ontwikkeling van de app goed kunnen volgen.

Onepage applicatie
1. Een Cordova app ontwikkelen we best als een onepage applicatie. Hiervoor hebben we een tower pattern ontwikkeld.
2. Om te navigeren in een onepage app gebruiken we de techniek van de CSS pseudoklasse target klasse. Op CSS pseudo-klassen vind je uitleg over pseudo-klassen.
Om iconen te maken gebruiken we de techniek van de Icon font knoppen.
VOS - UC aanmelden - wireframe naar HTML
Intel XDK - new project
Download de CSS map van Cloud9 naar het XDK project. Het gedownloade bestand is een zip bestand dat je moet uitpakken in een css map in de www map.

Kopieer de HTML van Cloud9 in de index.html pagina van het project op Intel XDK. Zorg ervoor dat je niets verandert in de standaard HTML die door de XDK is gegenereerd, behalve dan

<!DOCTYPE html>
<html>
<!--
  * Please see the included README.md file for license terms and conditions.
  -->
<head>
    <title>Veilig op school</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">

    <!-- see http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag -->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <style>
        /* following two viewport lines are equivalent to the meta viewport statement above, needed for Windows */
        /* see http://www.quirksmode.org/blog/archives/2014/05/html5_dev_conf.html and http://dev.w3.org/csswg/css-device-adapt/ */
        @-ms-viewport { width: 100vw ; zoom: 100% ; }  @viewport { width: 100vw ; zoom: 100% ; }
        @-ms-viewport { user-zoom: fixed ; }           @viewport { user-zoom: fixed ; }
    </style>

    <script src="cordova.js"></script>          <!-- phantom library, needed for Cordova api calls, added during build -->
    <script src="js/app.js"></script>           <!-- recommended location of your JavaScript code relative to other JS files -->
    <script src="xdk/init-dev.js"></script>     <!-- normalizes device and document ready events, see README for details -->
    
    <link rel="stylesheet" type="text/css" href="css/vos.css">
    <link type="text/css" rel="stylesheet" href="css/iconfont.css">
    <script>
        window.onload = function() {
            // bij het openen van de website wordt de home-index view getoond
            window.location.href = '#home-index';
        }
    </script>
</head>
<body>
    <div id="tower" class="tower">
        <!-- elke floor komt overeen met één view -->
        <div class="floor" id="home-index">
            <header class="front">
                <nav class="control-panel">
                    <button class="tile" name="uc" value="home/index">
                    <span class="icon-menu2"></span>
                    <span class="screen-reader-text">Home</span>
                </button>
                </nav>
                <h1>veilig<br/><span>op school</span></h1>
            </header>
            <div class="show-room index" id="home">
                </button>
                <button class="tile" name="uc" value="home/login">
                <span class="icon-enter"></span>
                <span class="screen-reader-text">Login</span>
            </button>
                <button class="tile" name="uc" value="fire/index">
                <span class="icon-fire"></span>
                <span class="screen-reader-text">Brand</span>
            </button>
                <button class="tile" name="uc" value="poison/index">
                <span class="icon-skull"></span>
                <span class="screen-reader-text">Gif</span>
            </button>
                <button class="tile" name="uc" value="lighting/index">
                <span class="icon-lightning"></span>
                <span class="screen-reader-text">Bliksem</span>
            </button>
                <button class="tile" name="uc" value="bomb/index">
                <span class="icon-bomb"></span>
                <span class="screen-reader-text">Bliksem</span>
            </button>
                <button class="tile" name="uc" value="aidkit/index">
                <span class="icon-aid-kit"></span>
                <span class="screen-reader-text">Eerste hulp</span>
            </button>
            </div>
        </div>
    </div>
</body>
</html>

het title element: <title>Veilig op school</title>;
in het body element plaats je de div waarvan de id gelijk is aan tower.

Klik op de SIMULATE tab
1. Selecteer een platform: Android, iOS of Windows
2. Selecteer een device
3. Run de app
Intel XDK - simulate
En dat is het resultaat:

Intel XDK - VOS 001 - simulate vertical

Intel XDK - VOS 001 - simulate horizontal

2017-01-01 20:10:53