Introduction aux Composants

Les composants sont les éléments fondamentaux pour construire des interfaces dans HarmonyOS. Chaque composant encapsule des données et des méthodes pour former une unité visuelle et interactive indépendante. Les composants peuvent être réutilisés dans différentes parties d'une application ou entre plusieurs applications.

Classificasion des Composants

Les composants peuvent être classés en six catégories principales selon leur fonction :

Principes de Mise en Page

La largeur de référence des appareils HarmonyOS est de 720px (pixels logiques, non physiques). L'affichage réel s'adapte à la largeur réelle de l'écran.

La relation de conversion est la suivante : lorsque la largeur d'un composant est définie à 100px, sur un écran de 720 pixels physiques, il s'affiche réellement à 100 pixels physiques ; sur un écran de 1440 pixels physiques, il s'affiche à 200 pixels physiques.

Une page typique contient des éléments de base tels que des zones de titre, de texte et d'images. Chaque élément de base peut contenir plusieurs sous-éléments, et selon les besoins, des boutons, des commutateurs, des barres de progression, etc., peuvent être ajoutés.

Ajout de Titres et de Zones de Texte

Le composant text est le plus couramment utilisé pour afficher du texte. Il permet de définir diverses propriétés et styles. Voici un exemple d'implémentation :

<div class="conteneur">
  <text class="titre-page">{{
  {titrePrincipal}}}</text>
  <text class="paragraphe">{{
  {premierParagraphe}}}</text>
  <text class="paragraphe">{{
  {deuxiemeParagraphe}}}</text>
</div>

Ajout de Zones d\\'Images

Le composant image est utilisé pour afficher des images. Les ressources d\\'image sont généralement placées dans le répertoire jsdefaultcommon.

<image class="illustration" src="{{
  {imageMilieu}}}"></image>

Création d\\'une Zone de Commentaires

La zone de commentaires permet aux utilisateurs de saisir un commentaire, de l\\'afficher après validation, et de le supprimer si nécessaire.

<div class="conteneur-commentaires">
  <text class="titre-commentaire">Commentaires</text>
  <div if="{{
  {!texteCommentaire}}">
    <input class="zone-saisie" value="{{
  {valeurSaisie}}" onchange="mettreAJourValeur()"></input>
    <text class="bouton-valider" onclick="valider" focusable="true">Valider</text>
  </div>
  <div if="{{
  {texteCommentaire}}">
    <text class="texte-commentaire" focusable="true">{{
  {valeurSaisie}}}</text>
    <text class="bouton-supprimer" onclick="valider" focusable="true">Supprimer</text>
  </div>
</div>

Utilisation de Composants Conteneur

Pour assembler les éléments d\\'une page, des composants conteneur sont nécessaires. Les trois conteneurs les plus couramment utilisés sont div, list et tabs.

Composant List

Le composant list est recommandé pour les listes longues car il offre un défilement plus fluide que l\\'utilisation de div avec rendu itératif. Notez que list ne supporte que list-item comme composant enfant.

<list class="liste-elements">
  <list-item type="listItem" for="{{
  {listeTextes}}">
    <text class="descripsion">{{
  {$item.contenu}}}</text>
  </list-item>
</list>

Composant Tabs

Le composant tabs est idéal pour les pages qui nécessitent un chargement dynamique. Il supporte l\\'événement change qui se déclenche lors du changement d\\'onglet.

<tabs>
  <tab-bar>
    <text>Accueil</text>
    <text>Index</text>
    <text>Détails</text>
  </tab-bar>
  <tab-content>
    <image src="{{
  {imageAccueil}}}"></image>
    <image src="{{
  {imageIndex}}}"></image>
    <image src="{{
  {imageDetail}}}"></image>
  </tab-content>
</tabs>

Le copmosant tab-content affiche le contenu des onglets et occupe par défaut l\\'espace restant dans le composant tabs.