Définition du comportement d'une vue

Accédez à Comportement pour définir la fonctionnalité et l'apparence de la vue :

• Ajoutez un style dynamique pour contrôler l'aspect de la vue.
  Le style dynamique combine une feuille de style Less avec des définitions de style définies dans le parent, qui est généralement l'application. Pour plus d'informations sur le langage Less, voir http://lesscss.org/ . La combinaison de la feuille de style LESS et la définition de style génère des fichiers CSS d'exécution. Les fichiers CSS d'exécution sont utilisés pour afficher les instances de vue dans l'application. En définissant les valeurs de définition au niveau du conteneur, les instances de la vue au sein du conteneur peuvent avoir un style uniforme. De plus, les changements globaux apportés au style peuvent être effectués à partir d'un seul emplacement.
• Ajoutez un script et un style existants et des fichiers de feuille de style à partir de la bibliothèque en utilisant Scripts inclus.
  En général, ces fichiers sont des fichiers .js et .css réutilisables. Vous pouvez ajouter ces fichiers à la bibliothèque sous forme de fichiers Web individuels ou les regrouper dans un fichier .zip et ajouter ce fichier sous forme de fichier Web. Le regroupement des fichiers dans un fichier .zip signifie qu'ils maintiennent leurs relations relatives. Par exemple, si vous regroupez un fichier .css et incluez les images auxquelles il fait référence à l'aide de liens relatifs, le système trouve les images. Toutefois, le système ne trouve pas les images si vous regroupez un fichier .css dans un fichier .zip et que vous regroupes les images auxquelles il fait référence dans un fichier .zip différent.

  Si vous ajoutez des fichiers .css sous forme de fichiers Web individuels, vous pouvez les éditer dans le concepteur à faible code. Vous ne pouvez pas éditer les fichiers .css qui sont conditionnés dans un fichier .zip dans le concepteur. En revanche, vous devez les modifier en externe, les regrouper à nouveau, puis remplacer le fichier Web .zip par le fichier .zip mis à jour.

• Définissez un prototype de la feuille de style en cascade nécessaire pour le style de la vue à l'aide de CSS en ligne. Après avoir développé la feuille de style en cascade, copiez-la dans un fichier .css et importez ce fichier en tant que script inclus.
  Comme les noms de classe CSS en ligne sont globaux, il peut se produire des collisions de noms. La conséquence est que seule la dernière définition de style est alors appliquée. Pour cette raison, utilisez CSS en ligne comme emplacement temporaire pour développer les styles CSS pour votre vue.

  Si vous pointez vers un fichier image dans un fichier .zip, utilisez le format suivant pour l'URL : file.zip!chemin/fichier.extension.

  Remarque: La notation'!'pour référencer un fichier dans une archive est prise en charge uniquement dans le comportement CSS en ligne.

  Lorsque vous travaillez dans le concepteur à faible code, les styles de vue spécifiés dans les fichiers .css et dans la feuille de style en ligne sont appliqués à la vue dans le panneau Présentation, ce qui vous permet de voir comment la vue s'affiche lors de l'exécution sans qu'il soit nécessaire d'exécuter ou de tester votre vue. Certaines restrictions s'appliquent à cette prise en charge du style de la phase de conception :

  • Si vous utilisez les instructions de requête de support dans votre feuille de style en cascade (CSS), seules les requêtes de support dont le type est screen sont analysées et seules les spécifications max-width et min-width sont appliquées lors de la phase de conception. Ce style de phase de conception prend en charge uniquement les syntaxes simples. Par exemple, les instructions de requête de support suivantes sont traitées au moment de la conception :

    @media screen ….
    	@media all
    	@media (min-width: 520 px ) 

    En revanche, les instructions suivantes ne sont pas traitées au moment de la conception :

    @media not screen
    @media not print
    @media not (tty and screen)

  • Si vous utilisez Internet Explorer 9 (obsolète), le style de phase de conception s'applique uniquement aux 25 premières vues ou applications qui sont ouvertes. Aucun style de phase de conception ne sera appliqué aux vues ou pages suivantes dans les applications.
  • Les importations incluses dans les scripts et les fichiers CSS en ligne ne sont traitées que sur un seul niveau d'imbrication. Par exemple, si vous avez une feuille de style en cascade en ligne qui inclut l'instruction @import url('File1.css'), la feuille de style en cascade dans File1 est reflétée lors de la phase de conception, mais toutes les instructions d'importation dans File1 ne sont pas reflétées lors de la phase de conception.

  Si vous disposez de pages et de vues volumineuses ou complexes, le style de la phase de conception peut provoquer des problèmes de performances. Pour désactiver le style de phase de conception dans la session en cours, accédez à Agencement, cliquez avec le bouton droit de la souris n'importe où sur la grille, puis choisissez Désactiver le style de la phase de conception. Les styles de la vue ne sont plus appliqués jusqu'à la fin de la session. Pour réactiver le style, cliquez de nouveau avec le bouton droit de la souris sur la grille et choisissez Activer le style de la phase de conception..

• Ajoutez un style conditionnel pour gérer les différences entre des navigateurs et des types de support.
  Le style conditionnel remplace les styles par défaut lorsque la condition s'applique.
  Par exemple, vous pouvez appliquer un fichier .css pour Microsoft Internet Explorer et un fichier .css différent pour les autres navigateurs. Vous utilisez le style conditionnel pour appliquer le fichier approprié.
  Pour ajouter des styles conditionnels :
  1. Ajout d'un style spécifique à la taille de l'écran ou d'un navigateur à un fichier .css .
     Par exemple, vous pouvez ajouter des styles adaptés aux tablettes afin d'utiliser une police plus petite pour les libellés et réduire le remplissage.
  2. Ajoutez le fichier .css sous la forme d'un script inclus.
  3. Dans les zones Condition IE ou Support , ajoutez la condition qui applique les styles dans le fichier .css .
     Par exemple, si le fichier .css contient des styles pour une présentation sur tablette, ajoutez une condition de type screen and (max-width: 600px) au champ Media. Si l'écran de l'utilisateur a une largeur inférieure ou égale à 600 pixels, la vue utilise les styles du fichier .css à la place des valeurs par défaut.
  Vous pouvez également ajouter un style conditionnel en ajoutant du code JavaScript en ligne et une feuille de style en cascade en ligne.

  Remarque: Tout style JavaScript en ligne et toute condition de style entrée dans les zones Condition IE et Support sont traités uniquement lors de l'exécution et ne sont pas reflétés lors de la phase de conception.
• Définissez des variables et des fonctions communes pour les gestionnaires d'événements de la vue à l'aide de JavaScripten ligne.
  L'éditeur contient un fragment de code. L'éditeur n'affiche pas les messages de validation pour les fragments de code.
• Définissez des variables qui identifient les gestionnaires d'événements définis par l'utilisateur.
• Pour insérer du code tel que des balises <meta> dans l'en-tête de la vue, utilisez Header HTML.
• Si nécessaire, définissez les fonctions utilisées par la vue dans les gestionnaires d'événements appropriés.
  Si vous avez sélectionné Peut déclencher un événement limite dans les propriétés Présentation, ajoutez le code nécessaire pour déclencher les événements limites. Pour déclencher l'événement, codez le JavaScript pour appeler this.context.trigger(callback) au moment approprié.