Leçon 2 : Utiliser les plug-ins Cordova Boîtes de dialogue et Ecran d'accueil

Cette leçon montre comment utiliser les plug-ins Boîtes de dialogue et Ecran d'accueil et exécuter l'application sur un émulateur de périphérique.

Avant de commencer

Avant de commencer, vous devez effectuer la Leçon 1 : Créer un projet Cordova avec les plug-ins Boîtes de dialogue et Ecran d'accueil.

Procédure

Faites un clic droit sur www > css > index.css et sélectionnez Ouvrir avec > Editeur CSS. Remplacez le code css existant par le suivant :

h1 {
	text-align:center;
    font-size:24px;
    font-weight:normal;
    overflow:visible;
    text-transform:uppercase;
}

/* Portrait layout (default) */
.headers {
	position: absolute;
	width: 60%;
	left: 20%;
	text-align: center;
}

/* Landscape layout */
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
	.headers {
		position: absolute;
		left: 20%;
		text-align:center;
	}
}

.textContent {
	position: absolute;
	top: 100px;
	width: 80%;
	left: 10%;
	text-align: left;
}

.event {
    border-radius:4px;
    -webkit-border-radius:4px;
    color:<FFFFFF;
    font-size:12px;
}

.event.listening {
    background-color:<333333;
    display:block;
}

.event.received {
    background-color:<4B946A;
    display:none;
}

@keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.4; }
    to { opacity: 1.0; }
}
 
@-webkit-keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.4; }
    to { opacity: 1.0; }
}

.blink {
    animation:fade 3000ms infinite;
    -webkit-animation:fade 3000ms infinite;
}

Faites un clic droit sur www > js > index.js et sélectionnez Ouvrir avec > Editeur JavaScript. Remplacez le code existant par le suivant :

var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicitly call 'app.receivedEvent(...);'
    onDeviceReady: function() {
		navigator.splashscreen.hide();
		navigator.notification.alert('Application ready to use', function(){}, 'Ready to use');
		var parentElement = document.getElementById('deviceready');
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');
    }
};

Faites un clic droit sur www > index.html et sélectionnez Ouvrir avec > Editeur HTML. Remplacez le code html existant par le suivant :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>SplashScreen Sample</title>
    </head>
    <body>
    	<div class="headers">
	   		<h1>Exemple d'écran d'accueil</h1>
	   		<div id="deviceready" class="blink">
	    		<p class="event listening">Connexion au périphérique</p>
	    		<p class="event received">Le périphérique est prêt</p>
	    	</div>
    	</div>
    	<div class="textContent">
    		<p>Cet exemple montre comment utiliser les plug-ins Boîtes de dialogue et Ecran d'accueil dans un projet Cordova.</p>
		<p>
			Notez que les fonctionnalités liées à la fermeture de l'écran d'accueil et à l'affichage
			de la boîte de dialogue de notification (lorsque l'application est prête à fonctionner) 
			sont fournies dans le fichier <code>js/index.js</code>
		</p>
		<p>
			Le point d'entrée pour appeler les fonctionnalités natives (splashscreen et
			dialogs dans cet exemple) est <code>cordova.js</code>, lequel est 
			ajouté au projet lors de la génération.
		</p>
	</div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
</html>

Faites un clic droit sur le projet SplashScreen et sélectionnez Exécuter en tant que > Exécuter sur un émulateur de périphérique mobile. L'émulateur de périphérique doit être lancé avant la sélection de de l'option Exécuter sur un émulateur de périphérique mobile. Si un périphérique Android est connecté à votre ordinateur, vous pouvez exécuter l'application dessus en sélectionnant Exécuter en tant que > Exécuter sur un périphérique mobile.

Résultats

L'application SplashScreen :

< Précédent | Suivant >

Vos commentaires