Corona SDK Utilisation des alertes

Les alertes sont une méthode système prédéfinie permettant d'afficher des informations à l'utilisateur. Elles sont généralement utilisées pour afficher des messages courts et peuvent inclure une ou plusieurs options permettant de déterminer une action postérieure. Dans ce didacticiel, nous allons découvrir comment mettre en œuvre ces alertes et comment créer des boutons de base et ouvrir une URL dans Safari. Continue de lire!

Aperçu de l'application d'alerte

Utiliser la couronne originaire de la classe et la showAlert () méthode, nous afficherons une alerte personnalisée à l'aide d'un simple bouton sur scène.


Sélectionner le périphérique cible

La première chose à faire est de sélectionner la plate-forme sur laquelle vous souhaitez exécuter votre application. Ainsi, vous pourrez choisir la taille des images que vous utiliserez..

La plateforme iOS présente les caractéristiques suivantes:

  • iPad: 1024x768px, 132 ppi
  • iPhone / iPod Touch: 320 x 480 pixels, 163 ppp
  • iphone 4: 960x640px, 326 ppi

Android étant une plate-forme ouverte, il existe de nombreux appareils et résolutions. Voici quelques-unes des caractéristiques d'écran les plus courantes:

  • Nexus One: 480x800px, 254 ppi
  • Droid: 854x480px, 265 ppi
  • HTC Legend: 320x480px, 180 ppp

Dans ce tutoriel, nous allons nous concentrer sur la plate-forme iOS, spécialement conçue pour la distribution sur un iPhone / iPod touch..


Interface

Nous allons créer une interface de base avec un bouton qui déclenchera une alerte lorsque vous appuierez dessus. Le titre de l'alerte, le message et les noms des boutons seront définis dans le code..


Exporter des PNG

Selon le périphérique que vous avez sélectionné, vous devrez exporter les graphiques dans l'IPP recommandé. Vous pouvez le faire dans votre éditeur d'images préféré..

J'ai utilisé le Ajuster la taille… fonction dans l'application Aperçu sous Mac OS X.

N'oubliez pas de donner un nom descriptif aux images et de les enregistrer dans votre dossier de projet..


Code!

Temps d'écrire notre application!

Ouvrez votre éditeur Lua préféré (tout éditeur de texte fonctionnera, mais vous n'aurez pas la coloration syntaxique) et préparez-vous à écrire votre superbe application.


Masquer la barre d'état

Tout d’abord, nous masquons la barre d’état, c’est la barre en haut de l’écran qui indique l’heure, le signal et d’autres indicateurs..

 display.setStatusBar (display.HiddenStatusBar)

Contexte

Maintenant, nous ajoutons le fond de l'application.

 fond local = display.newImage ("background.png")

Cette ligne crée la variable locale Contexte et utilise le afficher API pour ajouter l'image spécifiée à la scène. Par défaut, l'image est ajoutée à 0,0 en utilisant le coin supérieur gauche comme point de référence..


Bouton d'alerte

Répétez le processus avec l'image du bouton, en le plaçant au centre de la scène. La fonction de bouton sera créée plus tard dans le code.

 local alertButton = display.newImage ("alertButton.png") alertButton: setReferencePoint (display.CenterReferencePoint) alertButton.x = 160 alertButton.y = 240

Liste des clics d'alerte

Lorsque l'utilisateur clique sur l'un des boutons d'option dans la fenêtre Alerte a cliqué événement est déplacé, nous devons vérifier la indice du bouton cliqué afin de savoir quelle option a été sélectionnée. Une alerte permet d'inclure jusqu'à 6 boutons. Son index est défini par l'ordre dans lequel il a été écrit dans l'appel d'alerte..

La fonction suivante gère ce processus, son écouteur est créé dans l'appel d'alerte (affiché à l'étape suivante).

 fonction locale onClick (e) si e.action == "a cliqué" puis si e.index == 1 alors - Une action elseif e.index == 2 puis system.openURL ("http://mobile.tutsplus.com ") fin fin fin

Afficher l'alerte

Cette fonction sera exécutée lorsque vous appuierez sur le bouton d'alerte. Elle utilisera le native.showAlert () méthode d'affichage de l'alerte. L'alerte sera liée à une variable qui servira d'identifiant d'alerte, de cette manière, elle pourra être localisée, réutilisée ou supprimée par l'utilisateur. native.cancelAlert () méthode.

fonction alertButton: tapez sur (e)
alerte locale = native.showAlert ("MobileTuts +", "Didacticiels de développement mobile", "OK", "En savoir plus", onClick)
fin

Cette méthode a quatre paramètres, examinons-les:

native.showAlert (titre, message, badges, écouteur)

  • Titre: Le texte en haut de l'alerte.
  • message: Le corps de l'alerte.
  • boutons: Un tableau contenant les boutons qui seront affichés par l'alerte, vous pouvez afficher jusqu'à 6 boutons.
  • auditeur: Une fonction qui écoutera les événements de clic du bouton d'alerte.

Alerte Bouton Listener

Le bouton a maintenant une fonction à exécuter lorsque vous appuyez dessus, mais cette fonction seule ne pourra pas réagir sans un auditeur.

La ligne de code suivante définit cet auditeur:

 alertButton: addEventListener ("tap", alertButton)

Icône

Si tout fonctionne comme prévu, nous sommes presque prêts à créer notre application pour tester les appareils. Encore une chose: notre icône d'application.

En utilisant les graphiques que vous avez créés avant de pouvoir créer une belle et jolie icône, la taille de l'icône pour les icônes de l'iPhone est 57x57px, mais l'iTunes Store utilise un format de 512x512px. Si vous souhaitez optimiser vos images pour l'écran Retina de l'iPhone 4, vous aurez également besoin d'une version de 114x114px de l'icône de l'application..

Il n’est pas nécessaire d’avoir les angles arrondis ni l’éblouissement transparent, iTunes et le système d’exploitation iPhone l’appliqueront pour vous..


Conclusion

Avec ce tutoriel, vous apprendrez à afficher des alertes pour montrer un message à l'utilisateur et exécuter un code prédéterminé en fonction de l'option sélectionnée..

Merci d'avoir lu ce tutoriel, j'espère que vous l'avez trouvé utile!