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

Quelques tutorials accessibles pour débuter et progresser sur UI5

C’est la rentrée, on s’y remet ! Cela fait un moment maintenant que j’ai un peu laissé tomber ce blog, mais que serait la rentrée sans les bonnes résolutions qui vont avec 🙂 Pour ma part, je vais donc essayer de revenir ici un peu plus souvent.

Pour commencer, voici une bonne liste de tutorials pour progresser à son rythme sur UI5 : https://openui5.hana.ondemand.com/#docs/guide/8b49fc198bf04b2d9800fc37fecbb218.html

Ceux-ci sont assez bien fichus avec des étapes simples et documentées à l’aide d’explications détaillées, de captures d’écrans et de codes sources téléchargeables.

Il y a pas moins de 7 tutorials en fonction de son niveau et de son domaine d’application (basics, concept, testing, apps) :

Capture d’écran 2016-09-03 à 09.09.32 1

Je vous propose de commencer par le début avec le tutorial « Hello World » dans un second billet, suivi des autres.