Veuillez noter que ce tutoriel est basé sur une application native créée dans Mendix Version du modeleur 9.24.0. Les choses peuvent différer dans d'autres versions.

Pré-requis :

Pour comprendre le contenu de ce tutoriel, vous devez avoir des connaissances de base sur React Native et sur la façon d'implémenter le style d'une application mobile native dans Mendix Studio Pro. Si vous débutez dans le stylisme d'une application mobile native, veuillez consulter le matériel d'apprentissage pertinent du Mendix Academy d'abord.

De quoi parle cet article

Dans cet article, nous verrons comment modifier Mendix des widgets par défaut pour créer une interface utilisateur intuitive pour votre application mobile native. Ce sont des demandes que je reçois fréquemment en tant que consultant UX travaillant dans l'équipe Expert Services.

Qu'est-ce que ce post pas À propos

Veuillez noter que cet article n'est PAS un tutoriel sur la création d'un widget d'application mobile natif personnalisé. En fonction de la complexité du widget, cela peut prendre beaucoup plus de temps (et nécessiter un budget plus important), ce qui peut ne pas être une option pour certains clients.

L’objectif de cet article est de démontrer que nous pouvons obtenir un résultat raisonnablement agréable avec seulement React Native.

Toutes les interfaces utilisateur présentées dans cet article de blog sont ma propre création.

COURS

Vous trouverez ci-dessous les trois styles sur lesquels nous allons nous concentrer :

Leçon 1 : Extension de la section de la barre supérieure

Leçon 2 : Barre de recherche avec une loupe

Leçon 3 : Éléments de superposition

Leçon 1 : Extension de la section de la barre supérieure

L'une des demandes les plus courantes que je reçois pour les projets natifs est d'étendre la section de la barre supérieure. Cela permet à l'utilisateur d'inclure une instruction sur le contenu de la page. Vous trouverez ci-dessous un exemple du résultat :

Étape 1 : Configurer la structure du thème dans le modélisateur

Module thématique : Avant de travailler sur le style de l'application, assurez-vous d'avoir créé un module de thème pour cette application. Si vous ne savez pas comment procéder, veuillez vous référer aux cours de la Mendix Académie.

Créer une nouvelle page:Dans ce cas, je l'ai renommé « Arrière-plan ».

Étape 2 : ajouter des classes aux éléments

Sur la page « Arrière-plan », créez un conteneur autour de l’instruction de la page et donnez-lui une classe.

Sur la même page, j’ai ajouté du contenu pour montrer à quoi ressemblera la barre supérieure lorsqu’il y aura des éléments supplémentaires.

Dans votre module de thème, créez un nouveau fichier JS sous « natif » et renommez-le en conséquence, par exemple, « extension.js ». Cela correspond à la bonne pratique consistant à garder la structure des dossiers organisée et les fichiers reconnaissables.

Étape 3 : Mettre en œuvre le style des éléments

La clé pour créer une extension de barre supérieure est de l'attacher à la barre d'état sans laisser d'espace entre les deux. Dans la classe « topBarExtension », définissez « marginTop » sur 0.

// - top bar extension section background
export const topBarExtension = {
  container: {
    marginTop: 0,
    paddingTop: 12,
    paddingBottom: 25,
    width: "100%",
    backgroundColor: "#586F63"
  }
}

N'hésitez pas à personnaliser d'autres éléments selon le style de votre choix.

Créez un nouveau fichier « card.js ». Il est utilisé pour ajouter du style à la carte qui entoure chaque élément suivant.

Dans le fichier « card.js », ajoutez la classe « popCard » :

// - the card that wraps around each subsequent element
export const popCard = {
container: {
borderRadius: 10,
marginLeft: 15,
marginRight: 15,
marginTop: 5,
marginBottom: 5,
borderWidth: 1,
paddingLeft: 20,
paddingRight: 20,
paddingTop: 10,
paddingBottom: 15,
borderColor: "#DDDDDD",
backgroundColor: "#FFFFFF"
}
}

Assurez-vous d’importer les fichiers nouvellement créés dans votre fichier « main.js » :

Résultat final

Bonus

Un autre style courant consiste à faire en sorte que le contenu principal chevauche partiellement l'extension de la barre supérieure. Voici un aperçu du résultat final :

Pour y parvenir, nous devons étendre le rembourrage de l’extension de la barre supérieure afin que l’élément suivant ne couvre pas le contenu de la section de la barre supérieure.

Étape 1 : Mettre à jour le modélisateur

Étape 2 : Mettre à jour le code

Vous trouverez ci-dessous le code mis à jour pour l'extension de la barre supérieure. Je lui ai attribué une classe différente « topBarExtensionLong » et je l'ai ajoutée au même fichier « extension.js ».

// - top bar extension for the overlapping card style
export const topBarExtensionLong = {
container: {
marginTop: 0,
paddingTop: 12,
paddingBottom: 65,
width: "100%",
backgroundColor: "#586F63"
}
}

Pour créer l'effet de chevauchement, nous devons changer la marge supérieure en une unité négative afin qu'elle dépasse sa marge supérieure. Vous trouverez ci-dessous le code de ce style. Je lui ai attribué une classe distincte « cardOverlap » pour le différencier du précédent. Je l'ai également ajouté au même fichier « card.js ».

// - card for the overlap style
export const cardOverlap = {
container: {
borderRadius: 10,
marginLeft: 15,
marginRight: 15,
marginTop: -35,
marginBottom: 5,
borderWidth: 1,
paddingLeft: 20,
paddingRight: 20,
paddingTop: 10,
paddingBottom: 15,
borderColor: "#DDDDDD",
backgroundColor: "#FFFFFF"
}
}

Résultat final

Leçon 2 : Barre de recherche avec une loupe

Une autre demande fréquente des clients est d'ajouter une icône en forme de loupe à la barre de recherche. Cela peut aider l'utilisateur à identifier immédiatement le champ de recherche.

Étape 1 : Configurer les données et créer un nanoflow

Notez que vous devez avoir une entité configurée dans le modélisateur de domaine comme suit avant d'implémenter le style de l'élément.

In Mendix, la barre de recherche est essentiellement une zone de texte avec une fonctionnalité de recherche. Par défaut, il n'est pas possible d'ajouter une icône à la zone de texte. Par conséquent, nous devons créer une grille de mise en page et placer l'icône dans une colonne avec la zone de texte dans une autre.

Sur le modeleur, faites glisser un vue des données et récupérer la source de données en appelant un nanoflow. Créez un nouveau nanoflow « DS_SearchHelper ».

Dans la vue de données, créez un conteneur et attribuez-lui une classe « searchBar ». Cela simulera la bordure de la barre de recherche.

À l'intérieur du conteneur, créez une grille de mise en page à deux colonnes (au format 2:10). Ajoutez une image de loupe sur la gauche. (Vous devrez d'abord la télécharger dans une collection d'images).

À droite, ajoutez une zone de texte avec l’attribut « SearchText » et une classe « SearchInput ». Il s’agit de la zone de texte proprement dite. Nous allons lui donner un style de manière à ce qu’elle se fonde dans cette barre de recherche.

Vous pouvez également ajouter un texte d'espace réservé facultatif pour votre zone de recherche.

Étape 2 : Mettre en œuvre le style

Créez un fichier « search.js ». Assurez-vous qu’il est importé dans le fichier « main.js ». Nous y ajouterons le code de la classe « searchBar » et de la classe « searchInput ».

//the container that acts as a search bar (with the icon)
export const searchBar = {
container: {
borderRadius: 8,
backgroundColor: "#ffffff",
borderWidth: 2,
borderColor: "#555555",
height: 50,
paddingLeft: 10,
paddingRight: 10
}
}

//the actual search input field
export const searchInput = {
input: {
backgroundColor: 'transparent',
borderColor: 'transparent',
//placeholder text color
placeholderTextColor: "#A4A4A6",
fontSize: 16,
borderRadius: 50
}
}

Résultat final :

Leçon 3 : Éléments de superposition

Enfin, nous verrons comment créer un effet de superposition dans lequel un élément chevauche partiellement un autre. Dans cet exemple, nous allons créer un bouton qui chevauche partiellement une image.

Étape 1 : Configurer la mise en page

Depuis la boîte à outils, faites glisser une image et un bouton vers la page. Modifiez l'icône du bouton en conséquence.

Donnez à l'image une classe « proPic » et au bouton « overlapBtn ». Nous les styliserons plus tard.

J'ai créé une mise en page avec quelques éléments de texte sous l'image et le bouton. Ceci est cependant facultatif. Si vous souhaitez faire de même, voici les instructions :

1. Créez un conteneur qui entoure l'image et le bouton. Ajoutez un espacement « support extérieur » au conteneur. Alignez le conteneur au centre.

2. Sous le conteneur, créez une grille de mise en page et ajoutez-y quelques éléments de texte. Enveloppez le tout dans un conteneur et attribuez-lui la classe « popCard » (que nous avons utilisée dans la leçon 1).

Étape 2 : Mettre en œuvre le style

Créez un nouveau fichier « overlay.js ». Assurez-vous de l’avoir importé dans « main.js ». La clé pour créer un élément superposé est de manipuler la marge gauche et/ou droite de l’élément de manière à ce qu’il soit délibérément positionné contre un autre élément à l’écran.

Pour y parvenir, nous devons ajouter une unité négative à la marge associée. Le raisonnement est similaire à celui qui consiste à créer l'effet d'éléments qui débordent sur la barre supérieure (dans la section bonus de la leçon 1).

//profile pic
export const proPic = {
image: {
borderRadius: 100,
width: 150,
height: 150,
},
container: {
borderWidth: 2,
borderColor: "#777777",
borderRadius: 100,
width: 150,
height: 150,
marginTop: 25
}
}

//button to edit the profile pic
export const overlapBtn = {
container: {
borderWidth: 2,
borderRadius: 50,
width: 32,
height: 32,
backgroundColor: "#E7E7E7",
marginRight: -75,
marginTop: -32,
borderRadius: 50,
borderColor: "#777777"
},
icon: {
color: "#000000",
size: 18
}
}

Résultat final :

C'est tout pour aujourd'hui ! Merci d'avoir suivi le tutoriel. Si vous avez des questions, n'hésitez pas à me le faire savoir ([email protected]).