Thunkable FR
  • 👋 Bienvenue dans Thunkable
  • 👶Pour Commencer
    • S'inscrire
    • Votre page de projets Thunkable
    • Tutoriels
    • L'application Thunkable Live
  • 🆕Créer un nouveau projet
    • Modifier les paramètres du projet
    • Actifs et taille des projets
    • Exemples de projets Thunkable
    • Galerie publique des projets
  • 🛠️ Composants
    • 🔘Interface Utilisateur
      • Button (Bouton)
      • Label (Etiquette)
      • Text Input (Saisie de texte)
      • List Viewer (Visionneuse de liste) (relecture en cours)
      • Web Viewer (Visionneuse Web)
      • Switch (commutateur)
      • Slider (curseur)
      • Alert (Alerte)
      • Loading Icon (Chargement de l'icône)
      • Date Input (Saisie de la date)
      • Time Input (Saisie du temps)
      • PDF Reader (Lecteur de PDF)
      • Rating (Classement)
      • 📊Data Viewers (Visualiseurs de données)
        • Data Viewer List (Liste de visualisation de données)
        • Data Viewer Grid (Grille de visualisation des données)
        • Custom Data Viewer Layout (Disposition personnalisée du visualiseur de données)
    • 📐Mise en page
      • Top Tab Navigator (Onglet supérieur Navigateur)
      • Bottom Tab Navigator (Onglet de navigation inférieur)
      • Stack Navigator (Navigateur à pile)
      • Drawer Navigator (Navigateur à tiroir)
      • Screen (Ecran)
      • Row (Ligne)
      • Column (Colonne)
    • 🔊Voix
      • Sound (Son)
      • Audio Recorder (Enregistreur Audio)
      • Text to Speech (Texte au discours)
      • Speech Recognizer (Reconnaissance de discours)
      • Assistant by Dialogflow (Assistant par Dialogflow)
      • Translator by Yandex (Traducteur par Yandex)
    • 📷 Image
      • Image
      • Photo Library (Photothèque)
      • Camera (Appareil photo)
      • Barcode Scanner (Lecteur de codes-barres)
      • Image Recognizer (Reconnaissance d'image)
      • Animation by Lottie (Animation par Lottie)
      • Video (Vidéo)
      • Video Recorder (Enregistreur vidéo)
    • 🗄️ Stockage des Données
      • Local Storage (Stockage local)
      • LocalDB (base de données locale)
      • Airtable
      • Media DB par Cloudinary
      • RealtimeDB par Firebase
      • Web API (API Web)
      • Smart Contract by Oasis (Contrat intelligent par Oasis)
      • Blockchain Wallet by Oasis (Portefeuille Blockchain par Oasis)
    • 🌍Localisation
      • Maps By Google and Apple (Cartes de Google et Apple)
      • Location Sensor (Capteur de localisation)
    • ⏲️ Capteurs
      • Timer
      • Accéléromètre
      • Gyroscope
      • Magnétomètre
      • Bluetooth Low Energie
    • ✉️ Authentification
      • Email Sign In by Firebase (Connexion au courrier électronique par Firebase)
    • 🤝Social
      • Share (Partager)
      • Notifications Push par One Signal
    • 💲Monétisation
      • Ads by Admob (Annonces par AdMob)
    • 🎮Gaming
      • Canvas (toile)
      • Sprites
      • Canvas Label
  • 🤖Blocs
    • Control (Contrôle)
    • Logic (Logique)
    • Math
    • Text (Texte)
    • Lists (Listes)
    • Color (Couleur)
    • Objects (Objets)
    • Device (Appareil)
    • Variables
    • Functions (Fonctions)
    • "Any Component" Blocks (Blocs "Généraliste")
    • Data Sources
    • 🤖🎮Gaming Blocks (en cours)
      • Events (événements)
      • Motion (Mouvement)
      • Looks (Apparence)
      • Direction
      • Sensing (Détection)
      • Add & Remove (Ajouter et Supprimer)
      • Stage (Scène)
      • Canvas Label (Etiquette de la Toile)
  • Post-Developpement
    • 🖥️ Emulateurs et test de l'application (en cours)
    • 🔒Confidentialité des données de l'application
    • 🔗Blockchain & Data Privacy
    • ➕Faire une Copie
    • 📥Téléchargement
    • 📤Partager
    • 📱Publication
      • Publier dans l'App Store (iOS)
      • Publier sur Play Store (Android)
      • Publier en tant qu'application Web (PRO)
    • Générer des captures d'écran
    • 🔎Résolution des problèmes
      • Problèmes de connexion
      • FAQs
    • 📏Introduction à l'espacement
    • 🖼️ Introduction au dimensionnement
    • 🔤Polices
    • 💾Gérer le stockage
    • 📝Bugs et demandes de fonctionnalités
  • Non-Officiel (à faire)
    • Google, Facebook and Github Sign In/Up (à faire)
    • 4 Keys To Designing A Great Mobile App
Powered by GitBook
On this page
  • Vue d'ensemble
  • Tutoriel vidéo
  • Comment utiliser une mise en page personnalisée dans votre application
  • Concevez votre mise en page personnalisée
  • Enregistrez votre mise en page personnalisée
  • Utilisez votre mise en page personnalisée
  • Reliez vos données à votre mise en page personnalisée
  • Gestion de vos mises en page personnalisées
  • Sources de données

Was this helpful?

  1. 🛠️ Composants
  2. Interface Utilisateur
  3. Data Viewers (Visualiseurs de données)

Custom Data Viewer Layout (Disposition personnalisée du visualiseur de données)

Concevoir une mise en page personnalisée pour afficher vos données dans un visualiseur de données

PreviousData Viewer Grid (Grille de visualisation des données)NextMise en page

Last updated 4 years ago

Was this helpful?

Vue d'ensemble

Bien que la et la de visualisation des données aient des options de présentation différentes, vous pouvez concevoir une présentation personnalisée pour vos données. Cela peut être réalisé avec les composants et .

Tutoriel vidéo

Comment utiliser une mise en page personnalisée dans votre application

Concevez votre mise en page personnalisée

Si vous souhaitez définir la hauteur ou la largeur de la ligne/colonne parentale pour remplir le récipient, nous vous recommandons de la régler sur Taille relative - 100% pour de meilleurs résultats.

Enregistrez votre mise en page personnalisée

Sélectionnez votre rangée/colonne parentale et cliquez sur le bouton Save as Data Viewer Layout (Enregistrer sous la forme d'un visualiseur de données)

De base

Lorsque vous cliquez sur "Save as Data Viewer Layout", vous verrez le dialogue suivant :

Pour enregistrer un schéma de base du visualiseur de données :

  • Entrez un Layout Name (nom de mise en page)

  • Sélectionnez si votre Layout Type (type de mise en page) est List (Liste) ou Grid (Grille)

  • Laisser le paramètre "Advanced Binding" sur faux

  • Cliquez sur OK

Avancé

Pour enregistrer une mise en page avancée du visualiseur de données :

  • Entrez un Layout Name (nom de mise en page)

  • Sélectionnez si votre Layout Type (type de mise en page) est List (Liste) ou Grid (Grille)

  • Mettre le paramètre Advanced Binding (reliure avancée) sur True

Vous pouvez maintenant sélectionner les propriétés des composants de votre rangée/colonne parentale que vous souhaitez lier aux valeurs de votre Data Source (source de données).

Une fois que vous avez sélectionné toutes les propriétés que vous voulez lier aux valeurs de votre source de données, cliquez sur OK pour enregistrer votre présentation personnalisée du visualiseur de données.

Utilisez votre mise en page personnalisée

Reliez vos données à votre mise en page personnalisée

Vous pouvez lier les propriétés de vos données à une source de données.

De base

Avec le Basic Data Binding, Thunkable sélectionnera automatiquement les propriétés de base de vos composants pour les lier aux valeurs de votre source de données.

Avancé

Avec Advanced Data Binding, Thunkable vous permettra de lier les propriétés que vous avez spécifiées à votre source de données :

Gestion de vos mises en page personnalisées

Sources de données

Lorsque vous connectez une source de données à votre projet, vous avez également accès à un deuxième tiroir de bloc. Ces blocs Data Source vous permettent d'effectuer diverses opérations CRUD (Create, Read, Update, Delete) sur vos données.

Cliquez sur le lien ci-dessous pour savoir comment utiliser les blocs Sources de données dans votre projet.

Utilisez une ou une pour créer la mise en page personnalisée que vous souhaitez. Dans la suite de ce document, nous appellerons cela la "rangée/colonne parentale".

Cette disposition est une rangée qui contient deux colonnes. La première colonne contient 3 : TitleLabel, DescriptionLabel, et PriceLabel. La deuxième colonne contient une , une ProductImage (image produit) et un classement, appelé ProductRating (classement produit). Ces composants seront référencés dans les prochaines captures d'écran de ce document.

Une fois que vous avez enregistré votre mise en page personnalisée, vous pouvez la sélectionner comme mise en page pour votre Data Viewer. Si votre mise en page a été enregistrée avec la liste des types de mise en page, elle peut être utilisée avec la . S'il a été enregistré avec la grille des types de mise en page, il peut être utilisé avec la .

Vous pouvez gérer vos mises en page de données personnalisées en vous rendant sur la page d'accueil de Thunkable à l'adresse et en cliquant sur l'onglet "Mes modules" en haut de la page. À partir de là, vous pouvez modifier et supprimer vos mises en page de données personnalisées.

🔘
📊
ligne
colonne
étiquettes
image
Data Viewer List
Data Viewer Grid
x.thunkable.com/projects
liste
grille
Row
Column
Gestion de vos mises en pages
Tutoriel Vidéo
Comment utiliser une mise en page personnalisée dans votre application
Sources de données