TP : Création d'une boîte de dialogue modale en HTML/CSS

Mise en pratique guidée pour concevoir et intégrer une boîte de dialogue modale en HTML/CSS dans une WebView d'Ableton Live.

Contexte

Introduction au TP : Personnaliser l'interface d'Ableton Live

Les extensions pour Ableton Live ne se limitent pas à des scripts d'arrière-plan invisibles. Grâce au SDK d'extensions, vous pouvez concevoir des interfaces graphiques riches et interactives en utilisant les technologies web standards (HTML, CSS et JavaScript) intégrées dans des WebViews.

Dans ce TP concret, vous allez apprendre à créer une boîte de dialogue modale personnalisée qui permettra aux utilisateurs de renommer n'importe quel clip sélectionné (audio ou MIDI) d'un simple clic droit dans l'interface de Live.

Compétences visées :

Concevoir une interface graphique légère et responsive en HTML/CSS adaptée au thème d'Ableton Live.
Mettre en place une communication bidirectionnelle sécurisée (Message Passing) entre l'interface utilisateur et l'extension.
Manipuler l'API du SDK pour appliquer des modifications dynamiques sur les objets de la session.

Prérequis :

Pour tirer le meilleur parti de ce TP, assurez-vous d'avoir configuré votre environnement de développement local avec Node.js et Visual Studio Code, comme étudié dans le premier chapitre.