Responsive design pour ADF Faces (12c)

Responsive design pour ADF Faces (12c)

Les interfaces utilisateur (UI) des smartphones et des tablettes sont limitées par la taille d’affichage de l’appareil, l’absence de clavier physique et l’utilisation de gestes du doigt au lieu de pointeurs de souris. Pour ces raisons, les interfaces utilisateur mobiles natives sont généralement conçues plus simplement et plus proprement, et avec plus de visuels que les interfaces utilisateur de bureau équivalentes. Les interfaces utilisateur mobiles ont tendance à se concentrer davantage sur l’affichage des informations dérivées des données que sur les données elles-mêmes, à l’opposé de ce que fournissent la plupart des interfaces utilisateur de bureau.

Pour réduire l’effort de développement et le délai de mise en place des applications d’entreprise mobiles, les équipes de développement créent souvent des applications Web qui peuvent s’exécuter à la fois sur les navigateurs de bureau et mobiles. Pour garantir l’acceptation de ces applications par les utilisateurs, les développeurs doivent envisager de mettre en œuvre une conception d’interface utilisateur optimisée pour le mobile, une approche connue sous le nom de stratégie «Mobile-first». Les conceptions Mobile-first sont moins encombrées que les interfaces de bureau traditionnelles. La navigation dans les pages est adaptée aux mobiles et évite les barres de défilement et le défilement horizontal. Et une conception axée sur le mobile utilise des scripts et des feuilles de style en cascade (CSS) pour mettre en œuvre des mises en page réactives.

Alta UI Responsive Design - ADF 12c

Avec la sortie d’Oracle JDeveloper 12.1.3, l’interface utilisateur d’Oracle Alta est désormais disponible. Oracle Alta UI est un système de conception et un ensemble de directives qui favorisent une conception Mobile-first pour les applications Web Oracle Application Development Framework (Oracle ADF).

Dans ce tutorial, je vais expliquer dans la conception comment appliquer le modèle Alta Ui avec un menu de navigation réactif. Le résultat final est quelque chose comme ça:

Wide Layout

Narrow Layout

Le tutoriel

Ajoutez le fichier JAR « Oracle page Templates » dans vos bibliothèques et votre projet d’interface utilisateur UI. vous pouvez trouver le fichier dans les bibliothèques de Jdeveloper.

Ajoutez un MetaContainer à votre page JSP/JSF avec le meta « apple-mobile-web-app-capable » et le meta « viewport » :

<f:facet name="metaContainer">
<trh:meta name="apple-mobile-web-app-capable" content="yes"/>
<trh:meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui"/>
</f:facet>

Pour jouer avec l’affichage et le masquage des composants, veuillez configurer vos panels d’une manière adaptable à chaque type de terminal (desktop ou mobile). Par exemple, vous pouvez créer un header avec un logo et un menu totalement affiché pour la version desktop, et aussi un autre header avec seulement un petit logo et un menu sous forme d’un bouton (sandwich) qui affiche une liste pour la versions mobile, tout dépend de vos besoins.

Et pour cela, vous allez besoin d’ajouter ce CSS dans votre skin ADF:

.wide { 
display:
inline;
}
.narrow {
display: none;
}
@media screen and (max-width:950px) {
.narrow {
display: inline;
}
.wide {
display: none;
}
}

Qu'est-ce que l'attribut apple-mobile-web-app-capable?

Syntaxe:
<trh:meta name="apple-mobile-web-app-capable" content="yes"/>

Disponible pour iOS, si le contenu est défini sur yes, l’application Web s’exécute en mode plein écran; sinon, ce n’est pas le cas. Le comportement par défaut consiste à utiliser Safari pour afficher du contenu Web.

Qu'est-ce que les attributs initial scale, user-scalable, minimum-scale, maximum-scale dans la balise meta ?

Syntaxe:
<trh:meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui"/>

Ce sont des balises méta de la fenêtre d’affichage et sont plus applicables sur les navigateurs mobiles.

width=device-width

Cela signifie que nous disons au navigateur « mon site Web s’adapte à la largeur de votre appareil ».

initial-scale

Cela définit l’échelle du site Web. Ce paramètre définit le niveau de zoom initial, ce qui signifie qu’un pixel CSS est égal à 1 pixel de la fenêtre d’affichage. Ce paramètre aide lorsque vous changez d’orientation ou empêchez le zoom par défaut. Sans ce paramètre, le site réactif ne fonctionnera pas.

maximum-scale

L’échelle maximale définit le zoom maximal. Lorsque vous accédez au site Web, la priorité absolue est échelle maximale = 1 et ne permet pas à l’utilisateur de zoomer.

minimum-scale

L’échelle minimale définit le zoom minimum. Cela fonctionne de la même manière que ci-dessus, mais il définit l’échelle minimale. Ceci est utile lorsque l’échelle maximale est grande et que vous souhaitez définir une échelle minimale.

user-scalable

Évolutif par l’utilisateur attribué à 1.0 signifie que le site Web permet à l’utilisateur de faire un zoom avant ou un zoom arrière.

  • user-scalable = yes (par défaut) pour permettre à l’utilisateur de faire un zoom avant ou arrière sur la page Web;
  • user-scalable = no pour empêcher l’utilisateur d’effectuer un zoom avant ou arrière.

Vous pouvez obtenir des informations plus détaillées en lisant les articles suivants :

L'utilisation de matchMediaBehaviour

ADF 12.2.1 offre une meilleure prise en charge de l’interface utilisateur réactive par rapport à la version précédente ADF 12.1.3. Auparavant, nous utilisions des requêtes multimédias CSS pour masquer / afficher les facettes. Cela a fonctionné, mais ce n’était pas génial du point de vue des performances. La même région a été dupliquée dans différentes facettes, toutes deux chargées en mémoire, mais une seule est affichée. ADF 12.2.1 est livré avec la nouvelle balise af:matchMediaBehaviour, cette balise utilise une requête multimédia CSS pour détecter la taille de l’écran et met à jour la propriété du composant de mise en page. Plus besoin d’utiliser différentes facettes, nous pouvons directement mettre à jour les propriétés.

C’est le cas par exemple de deux blocs implémentés avec les régions ADF sont réorganisés dans une disposition de haut en bas, lorsque la taille de l’écran devient trop étroite pour rendre la disposition gauche-droite.
Voici l’exemple du composant PanelSplitter avec les balises af:matchMediaBehavior:

Cette balise contient trois propriétés – propertyName, matchedPropertyValue, mediaQuery. Vous pouvez définir la propriété du composant de mise en page à remplacer via propertyName. La nouvelle valeur de la propriété est définie par matchedPropertyValue. La requête multimédia CSS est définie pour définir la condition, lorsque la valeur de la propriété du composant de mise en page doit être modifiée en fonction de la taille de l’écran (si la taille de l’écran est inférieure à celle définie par exemple).

Deux régions de l’ADF sont affichées de droite à gauche, lorsque la taille de l’écran est suffisamment large:

Les deux mêmes régions sont réorganisées pour s’afficher de haut en bas:

Le deuxième exemple est le changement de la valeur pour titre de l’application (entre « Mobile » et « Desktop »):

Le résultat final est quelque chose comme ça:

Version Mobile:

Version Desktop:

C’est tout! Vous pouvez télécharger l’application et trouver toutes les fonctionnalités depuis l’exemple sur Github ici:

Veuillez consulter aussi la documentation officielle d’Oracle « Build Responsive Web Applications with Oracle ADF » :

https://docs.oracle.com/cd/E53569_01/tutorials/tut_rich_web_app/tut_rich_web_app.html

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

العربيةEnglishFrançais