Créer un espace de travail
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Un espace de travail Blockly est le composant de niveau supérieur de Blockly. Il s'agit de l'UI que vous utilisez pour programmer avec des blocs.
Pour en savoir plus sur l'espace de travail et ses sous-composants, consultez le glossaire visuel.
Div d'injection
Un espace de travail Blockly doit être injecté dans un <div>, appelé "div d'injection".
L'injection div peut être dimensionnée de manière statique ou dynamique. Les éléments Blockly dans div mettent à jour leur taille lorsque la fenêtre est redimensionnée.
L'extrait de code suivant montre le code HTML d'une injection de taille statique div :
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
Injection
L'injection crée tous les sous-éléments HTML qui composent l'UI d'un espace de travail. Il effectue également toute l'initialisation nécessaire pour préparer l'espace de travail à l'utilisation.
La fonction d'injection peut accepter l'ID de l'injection div ou l'injection div elle-même :
// Passes the ID.
const workspace = Blockly.inject('blocklyDiv', { /* config */ });
// Passes the injection div.
const workspace = Blockly.inject(
document.getElementById('blocklyDiv'), { /* config */ });
Configuration
L'espace de travail peut être configuré avec de nombreuses options (telles que la mise en page et le style) lors de l'injection.
Pour en savoir plus sur les options de configuration, consultez Options de configuration.
Sauf indication contraire, le contenu de cette page est régi par une licence Creative Commons Attribution 4.0, et les échantillons de code sont régis par une licence Apache 2.0. Pour en savoir plus, consultez les Règles du site Google Developers. Java est une marque déposée d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/09/11 (UTC).
[[["Facile à comprendre","easyToUnderstand","thumb-up"],["J'ai pu résoudre mon problème","solvedMyProblem","thumb-up"],["Autre","otherUp","thumb-up"]],[["Il n'y a pas l'information dont j'ai besoin","missingTheInformationINeed","thumb-down"],["Trop compliqué/Trop d'étapes","tooComplicatedTooManySteps","thumb-down"],["Obsolète","outOfDate","thumb-down"],["Problème de traduction","translationIssue","thumb-down"],["Mauvais exemple/Erreur de code","samplesCodeIssue","thumb-down"],["Autre","otherDown","thumb-down"]],["Dernière mise à jour le 2025/09/11 (UTC)."],[],["Blockly workspaces, the UI for block programming, are injected into a designated `\u003cdiv\u003e` element called the \"injection div.\" This div can have a fixed or dynamic size, with Blockly elements resizing accordingly. Injection initializes the workspace UI and readies it for use. The `Blockly.inject()` function, which creates the workspace, accepts either the injection div's ID or the div itself. Workspace configuration, including layout and style, is set during the injection process.\n"]]
