Hello World !

 

Je vous propose de réaliser avec moi ce premier tutorial « Hello World! » disponible ici : https://openui5.hana.ondemand.com/#docs/guide/592f36fd077b45349a67dcb3efb46ab1.html

Il s’agit d’une simple application affichant le titre « Hello World ! » et permettant, à l’aide d’un bouton, de naviguer vers une seconde page :
Capture d’écran 2016-09-03 à 15.36.59

Cela devra ressembler à ça : https://openui5.hana.ondemand.com/#test-resources/sap/m/demokit/helloworld/index.html

Etape 1 – Création de l’application en cliquant sur « New Application » :
Capture d’écran 2016-09-03 à 15.39.38

Nommer votre application :
Capture d’écran 2016-09-03 à 15.41.09

L’application a été créée :
Capture d’écran 2016-09-03 à 15.46.01

Démarrer Web IDE en cliquant sur l’icône crayon depuis la colonne « Actions » :
Capture d’écran 2016-09-03 à 15.48.10

Here we go :

Capture d’écran 2016-09-03 à 15.48.48

L’environnement de développement SAP Web IDE est chargé à l’écran :
Capture d’écran 2016-09-03 à 15.53.38

Etape 2 – Création d’un nouveau projet à partir d’un template :
Capture d’écran 2016-09-04 à 11.17.52

Sélectionner « SAPUI5 Application » :
Capture d’écran 2016-09-04 à 11.18.40

Renseigner les informations générales du projet :
Capture d’écran 2016-09-04 à 11.22.55

Capture d’écran 2016-09-04 à 11.23.52

Le projet est initialisé :
Capture d’écran 2016-09-04 à 11.29.37

Etape 3 – Initialisation de l’application

Comme indiqué dans le tutorial, la librairie sap.m fourni un contrôle « App » agissant en tant que contrôle racine d’une application, et qui nous permettra ici de gérer les pages multiples ainsi que les animations de navigations.

On peut remarquer que la page index, générée automatiquement lors de la création du projet, contient une fonction attachée à l’event « attachInit » :
Capture d’écran 2016-09-04 à 11.46.20

Cet event est appelé automatiquement lors de l’initialisation de OpenUI5. Nous allons ainsi modifier la fonction attachée à cet event pour instancier le contrôle « App » et définir la page à afficher à l’initialisation de l’application :
Capture d’écran 2016-09-04 à 11.52.06

Etape 4 – Création des pages

Nous allons maintenant ajouter les pages 1 et 2 à notre application.

Création de la page 1 avec un titre ainsi qu’un bouton nous permettant de naviguer vers la page 2 :
Capture d’écran 2016-09-04 à 11.56.57

Création de la page 2 avec un titre. Le retour vers la page précédente est géré par l’implémentation du clic sur le bouton de navigation de la page :
Capture d’écran 2016-09-04 à 11.59.51

Enfin, nous ajoutons les deux pages à l’application :
Capture d’écran 2016-09-04 à 12.01.59

Etape 5 – Test de l’application :
Capture d’écran 2016-09-04 à 12.06.04

L’application se lance et la page 1 est automatiquement affichée :
Capture d’écran 2016-09-04 à 12.06.46

En cliquant sur le bouton, on arrive à la page 2 :
Capture d’écran 2016-09-04 à 12.08.14

Le clic sur le bouton de navigation retour nous ramène vers la page 1 :
Capture d’écran 2016-09-04 à 12.06.46

 

Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s