Introduction
La Blocs Developer API permet à des tiers de créer des Brics qui peut être utilisé dans le Blocs environnement de conception. Les composants de base d'une coutume Bric sont créés en utilisant HTML, JS et CSS (vous pouvez en savoir plus sur les données et la structure des fichiers ici). Il existe différents protocoles d'API accessibles via n'importe quel langage basé sur javascript.
Remarque: le Blocs Developer API est actuellement dans sa phase Alpha initiale, donc certaines fonctionnalités et la documentation peuvent changer.
Bric Constructeur
Blocs est livré avec un outil de développement appelé le Bric Builder conçu pour aider au développement et à la création de Brics. Il est accessible via Développeur> Bric Constructeur dans le menu principal. Le Bric Builder est le moyen le plus simple de commencer à créer des Brics, il est recommandé de suivre ce guide de base pour créer votre première personnalisation Bric.
Interfaces de construction
L'interface utilisateur pour une personnalisation Bric doit être créé en utilisant le Bric Outil de construction. Sous l'onglet interface, il y a divers champs et contrôles pour ajouter et gérer l'interface utilisateur pour votre personnalisé bric.
Ajouter un article
Pour ajouter un nouveau composant d'interface utilisateur, cliquez sur le bouton + situé en haut à droite de l'arborescence des couches de l'interface utilisateur et sélectionnez le type de composant d'interface à ajouter.
Réorganiser les articles
Les éléments de l'interface utilisateur peuvent être réorganisés en faisant glisser et en déposant la couche appropriée dans l'arborescence des couches.
Dupliquer des éléments
Les éléments de l'interface utilisateur peuvent être dupliqués simplement Clic droit la couche appropriée dans l'arborescence des couches et en sélectionnant Dupliquer dans le menu contextuel.
Il est également possible de dupliquer l'intégralité de la personnalisation Brics by Clic droit le Bric dans la liste principale sur le côté gauche du Bric Constructeur et sélection Dupliquer dans le menu contextuel.
Composants d'interface utilisateur disponibles
Titre - Un titre est un composant de texte visuel qui n'appelle pas de fonction.
Étiquette multiligne - Une étiquette multiligne est un composant de texte visuel qui n'appelle pas de fonction.
Champ de texte - Un champ de texte transmet une valeur de chaîne à sa fonction d'édition allouée.
Champ pas à pas - Un champ de texte avec contrôle pas à pas transmet une valeur entière à sa fonction d'édition allouée.
Zone de texte - Une zone de texte transmet une valeur de chaîne à sa fonction d'édition allouée.
Image bien - Une image passe bien un chemin de fichier à sa fonction d'édition allouée.
Menu déroulant - Un menu déroulant transmet l'index entier sélectionné et la valeur de la chaîne d'élément à sa fonction d'édition allouée.
Case à cocher - Une case à cocher transmet une valeur booléenne à sa fonction d'édition allouée.
Bouton - Un bouton appelle sa fonction d'édition allouée lorsqu'il est cliqué.
Sélecteur de polices - Un menu déroulant qui passe une sélection de police à sa fonction d'édition allouée.
Sélecteur de page - Un menu déroulant qui transmet un ID de page, un nom, un attribut et l'index entier de l'élément sélectionné à sa fonction d'édition allouée. Les ID de page sont remplacés par les URL de page réelles lors de l'exportation tant que l'ID est stocké sous l'attribut de données Les données-blocs-page.
Sélecteur d'identité – Un menu déroulant qui transmet un identifiant à sa fonction d'édition allouée. Ce menu est rempli automatiquement avec tous les identifiants d'élément du page actuelle.
Sélecteur de battage médiatique - Un menu déroulant qui transmet un nom de projet hype à sa fonction d'édition allouée. Ce menu est rempli automatiquement avec tous .hyperressources répertoires ajoutés au projet en cours.
Couleur bien - Une couleur passe bien une valeur hexadécimale à sa fonction d'édition allouée.
Slider - Un curseur transmet une valeur entière à sa fonction d'édition allouée.
Contrôle de l'alignement horizontal - Un contrôle segmenté align passe une valeur entière à sa fonction d'édition allouée (0 = Gauche | 1 = Centre | 2 = Droite).
Contrôle d'alignement vertical - Un contrôle segmenté align passe une valeur entière à sa fonction d'édition allouée (0 = Haut | 1 = Milieu | 2 = Bas).
Contrôle d'alignement du texte - Un contrôle segmenté align passe une valeur entière à sa fonction d'édition allouée (0 = Gauche | 1 = Centre | 2 = Droite | 3 = Justifier).
Contrôle de sélection d'appareil – Un contrôle segmenté d'appareil transmet une valeur entière à sa fonction d'édition allouée (1 = Bureau | 2 = Tablette | 3 = Mobile Paysage | 4 = Mobile).
Contrôle de sélection de bord – Une commande segmentée de sélection de bord transmet une valeur entière à sa fonction d'édition allouée (0 = Gauche | 1 = Haut | 2 = Droite | 3 = Bas).
Commande de sélection de direction – Une commande segmentée de direction transmet une valeur entière à sa fonction d'édition allouée (0 = Gauche | 1 = Haut | 2 = Droite | 3 = Bas).
Cloison - Un diviseur est un composant visuel qui n'appelle pas de fonction.
Attributs de données des composants de l'interface utilisateur
Chaque composant d'interface utilisateur possède divers attributs de données qui sont utilisés pour définir des caractéristiques d'interaction clés telles que la fonction appelée lorsqu'un composant interagit avec ou l'info-bulle qui s'affiche lorsque l'utilisateur déplace le curseur sur un composant.
Titre - Le titre de l'élément d'interface. Généralement affiché sur le côté gauche de la barre latérale.
Fonction - Le nom de la fonction appelée lorsque cet élément d'interface interagit. N'incluez que le nom de la fonction, n'incluez pas ().
Attribut - Le nom d'attribut utilisé pour stocker la valeur des données pour cet élément d'interface.
Valeur - La valeur initiale des données d'attribut de cet élément d'interface.
infobulle - Le texte de l'info-bulle affiché lorsque le curseur se trouve sur le composant.
Fonctions d'écriture
Pour manipuler le HTML d'une personnalisation Bric, vous devrez d'abord écrire votre propre fonctionnalité d'édition (basée sur javascript). Ces fonctions d'édition sont destinées à être utilisées dans le Blocs environnement de conception et ne sont pas utilisés lorsque votre Bric est inclus dans un projet exporté. Ces fonctions d'édition doivent toutes être placées dans un seul fichier JS chargé dans l'en-tête de votre Brics index.html déposer. Les fonctions d'édition sont liées à un composant d'interface utilisateur via les composants d'interface utilisateur attribut de données de fonction.
Lorsqu'un composant d'interface utilisateur interagit avec, il appelle la fonction d'édition désignée et lui transmet une valeur avec l'attribut cible auquel cette valeur est affectée. La charge de données pour la fonction d'édition dépendra du type de composant d'interface utilisateur utilisé pour l'appeler. Une fonction d'édition doit être écrite pour qu'elle déclare correctement la variable de charge utile. Dans l'exemple suivant, la fonction d'édition utilisée par une case à cocher est définie pour recevoir une charge utile BOOL en premier et la valeur de chaîne d'attribut cible en second.
Mise en situation :
function myCheckbox(isChecked,targetAttr)
{
if(isChecked)
{
// checkbox is checked
}
}
Débogage personnalisé Brics
Blocs est livré avec des fonctionnalités utiles intégrées pour aider au débogage personnalisé Brics. Vous pouvez en savoir plus sur ces fonctionnalités de débogage intégrées pour ici.