Création et Ajoute de modèles et de composants

Remarque

Adobe recommande d’utiliser l’éditeur d’application d’une seule page (SPA) pour les projets nécessitant un rendu côté client basé sur la structure SPA (par exemple, React). En savoir plus.

AEM Mobile On-Demand fournit un modèle d’application entièrement configuré, un modèle d’article et des composants d’article.

L'application We.Unlimited est un exemple de modèle représentant l'interpréteur de commandes d'une application AEM Mobile On-Demand entièrement configurable et gérable.

La sélection de cet exemple de modèle lors de la création d’une application fournit un tableau de bord riche en fonctionnalités AEM Mobile.

chlimage_1-70

Remarque

Pour gérer le contenu de votre application et de votre application mobile depuis AEM Mobile Apps Control Center, consultez le Tableau de bord de l’applicationAEM Mobile.

Création de modèles d’application

Un modèle d’application est utilisé pour créer une nouvelle application et agit comme un ensemble de modèles de page et de composants qui représentent une base ou une base d’application. Le modèle estampille certaines propriétés fondamentales pour diriger l’application de la manière appropriée. En général, un client ne créerait pas trop d’applications au total.

Les modèles d’application offrent un moyen facile d’exploiter les conceptions existantes créées par les développeurs, utilisées pour la création de nouvelles applications dans AEM.

Lors de la création d’une application basée sur le modèle d’une autre application, vous obtenez une application dont le point de départ est représentatif de l’application à partir de laquelle elle a été créée.

Procédure de création d’une application à partir d’un modèle d’application :

  1. Accédez au catalogue de l’application AEM Mobile : <server-url>/aem/apps.html/content/mobileapps
  2. Sélectionnez Créer —> Application comme illustré ci-dessous.

Une fois que vous avez créé une application à l’aide de ce modèle, vous pouvez ajouter des articles, des bannières et des collections à votre application. Pour effectuer une nouvelle visite, création d’articles, de bannières et de collections, voir Actions deGestion de contenu.

Remarque

Vous pouvez également sélectionner un exemple de modèle d’application, par exemple une application We.Unlimited , mise à votre disposition par un développeur AEM. Si vous utilisez cet exemple de modèle pour votre application, vous obtenez des exemples d’articles et de collections sur lesquels travailler. Vous aurez la possibilité d’utiliser les exemples de modèles et de composants, de personnaliser les modèles existants ou de créer de nouveaux modèles pour votre application.

ATTENTION

Définition de la propriété redirectTarget

Lors de l’utilisation de l’un des modèles d’application, le développeur définit le contenu de l’application. Cependant, le développeur doit savoir où l’application est créée dans le fichier jcr et la valeur de la propriété redirectTarget .

Le paramètre redirectTarget est calculé dans le cadre de l’opération de création d’application et tente de résoudre un chemin d’accès, s’il existe une propriété redirectTarget disponible dans le cadre du modèle d’application, et si la valeur de redirectTarget est définie comme relative. Lorsque le processus de création d’application détecte une valeur relative pour redirectTarget dans le modèle d’application, la valeur est ajoutée à l’emplacement résolu où l’application a été créée.

Par exemple, si un modèle d’application définit une redirectTarget avec la valeur "lanugage-masters/fr" et que l’application a été créée dans "/content/mobileapps/fooApp", la valeur finale de redirectTarget après la création de l’application sera "/content/mobileapps/fooApp/language-masters/fr" .

Création de modèles de contenu

Chaque type d’entité comporte deux modèles prêts à l’emploi. à savoir :

  • Modèles par défaut : utilisé pour la création de contenu avec les propriétés/structures par défaut applicables
  • Modèles importés : utilisé pour importer du contenu d’AEM Mobile avec les propriétés/structures par défaut applicables

Modèles d’article

L’article illimité est un exemple de modèle représentant une mise en page d’article à la demande AEM Mobile standard.

  1. Cliquez sur + dans Gérer les articles pour créer un nouvel article. Vous pouvez choisir un article ​illimité ou un article de texte enrichi. L’image ci-dessous présente l’option qui vous permet de choisir parmi ces deux modèles d’article.

  2. Cliquez sur Suivant pour définir les métadonnées d’article telles que le nom/titre de l’article, la description, l’auteur, l’extrait, le département, l’image miniature, l’accès à l’article, etc.

  3. Cliquez sur Suivant pour renseigner les propriétés de la publicité.

  4. Cliquez sur Suivant pour entrer une image d’article ou une image de réseau social.

  5. Cliquez sur Suivant pour choisir un lien de collection vers lequel ce nouvel article sera associé.

  6. Cliquez sur Suivant pour entrer les détails du partage sur les réseaux sociaux.

  7. Cliquez sur Créer pour terminer le processus de création d’un article à l’aide de l’exemple. Pour modifier les propriétés de cet article, cliquez sur Terminé ou sur Modifier l’article .

chlimage_1-71

Ajouter des composants à l’article

Une fois créé, l’auteur peut modifier le contenu d’un article en ajoutant des composants tels que du texte et des images. Les articles sont une extension des modèles de page AEM.

Sélectionnez un article, vous souhaitez le modifier, puis cliquez sur Modifier pour ajouter des composants à l’article.

chlimage_1-72 chlimage_1-73

Sélectionnez "+" dans le panneau de gauche pour ajouter des composants à votre article.

chlimage_1-74

Création de modèles prêts à l’emploi

Il n’existe pas de modèles d’article prêts à l’emploi. Cependant, il existe un modèle par défaut que les modèles personnalisés doivent étendre, voir l’exemple de modèle d’article de l’application Geometrixx Unlimited.

Les propriétés clés au-delà du modèle d'AEM normal requises sont les suivantes :

dps-resourceType="dps:Article"

Cette propriété garantit que la page AEM est reconnue comme une page d’article ciblée AEM Mobile.

Selon les modèles AEM, vous pouvez ajouter n’importe quelle propriété par défaut ou noeud enfant à jcr:content du modèle.

ATTENTION

Les bannières et les collections ne comportent pas de contenu et leur création ne prend donc pas en charge les modèles personnalisés.

Création et Ajoute de composants

Les composants utilisent et autorisent l’accès aux widgets et ceux-ci sont utilisés pour générer le contenu.

Un composant simple est inclus dans le référentiel de code, dont la source se trouve dans AEM. Par la suite, il peut également être ouvert localement en CRXDE Lite.

Remarque

Il n'existe actuellement aucun composant prêt à l'emploi fourni pour AEM Mobile.

Vous pouvez ajouter des composants à votre page. N’importe quel composant peut être utilisé dans une application AEM Mobile, mais lorsqu’il est appliqué, le rendu peut ne pas être correct.

Cependant, il se peut que les composants personnalisés n’exportent pas et ne téléchargent pas correctement vers AEM Mobile On-demand Services sans un gestionnaire de synchronisation de contenu d’exportation personnalisé qui effectue le rendu dans AEM.

Une fois que le composant a déjà été inclus dans une page AEM, ainsi que quelques autres composants de bloc de construction, vous pouvez ajouter un autre composant à la page ou en modifier un existant.

Pour ajouter un autre composant à la page :

  1. Sélectionnez cette page et assurez-vous que vous êtes en mode d’édition, via la liste déroulante en haut à droite de l’en-tête de l’éditeur.
  2. Active/désactive le panneau latéral à l’aide de l’icône située le plus à gauche dans l’en-tête de l’éditeur
  3. Select the Components tab
  4. Faire glisser et déposer l’un des composants disponibles sur la page

chlimage_1-75

Pour modifier un composant existant :

  1. Sélectionnez cette page et assurez-vous que vous êtes en mode Edition et sélectionnez le composant.
  2. Appuyez sur l’icône de clé à molette pour configurer le composant.
Remarque

Vous pouvez créer un composant dans AEM et en personnaliser un à l’aide de l’option Développer avec CRXDE Lite. Une fois que vous avez personnalisé le composant existant en fonction de vos besoins, vous pouvez l’ajouter dans votre page à l’aide de l’option Modifier sous Gérer les articles , comme illustré dans la figure ci-dessus.

Remarque

Reportez-vous aux Bonnes pratiques relatives au développement de modèles et de composants en AEM Mobile.

Étapes suivantes

Sur cette page