Nous sommes à mi-chemin de 2025, et je n'ai toujours pas créé de widget. Ajoutez à cela Mendix La version 11 est officiellement sortie et, soudain, je me sens un peu dépassé. C'est toujours une bonne idée de se tenir au courant de ses technologies préférées, alors j'ai décidé de créer quelque chose pour me tester et maintenir mes compétences à jour.

 Le défi

Créez un widget de lecteur vidéo simple pour une application web, sans aucun dépôt GitHub ni aucune autre plateforme de partage de code. Je travaillerai également en TypeScript.

1. Préparation

J'ai d'abord installé et mis à jour tous les outils nécessaires. Si vous suivez ce tutoriel, assurez-vous de télécharger et d'installer :

• Mendix StudioPro 11.1.0
• Node.js
• Visual Studio Code

Finalement, j'ai travaillé sur le tutoriel sur les widgets enfichables in Mendix Docs, pour rafraîchir les bases.

2. Pour commencer

Pour commencer le développement, j'ai créé une nouvelle application dans Studio Pro.

• Créez une nouvelle application dans Studio Pro à l’aide du modèle d’application Web vierge.
• Accédez au répertoire du projet.
• Créez un nouveau dossier nommé MyWidget
• Ouvrez un terminal et accédez au dossier

3. Échafaudage du widget

La génération de l'échafaudage de widgets est simple grâce au générateur de widgets Yeoman. Pour commencer, dans le terminal que j'avais ouvert, j'ai lancé le générateur avec la commande suivante :

npx @mendix/generator-widget MyVideoPlayer

Le générateur m'a ensuite guidé à travers la configuration restante avec quelques questions simples :

Widget name: MyVideoPlayer
Widget Description: My widget description
Organization Name: Mendix
Copyright: {Your copyright date}
License: {Your license}
Initial Version: {Your initial version number}
Author: {Your author name}
Mendix App path: ../../
Programming language: TypeScript
Which type of components do you want to use? Function Components
Widget type: For web and hybrid mobile apps
Widget template: Empty widget (recommended for more experienced developers)
Unit tests: No
End-to-end tests: No

Après avoir répondu à toutes les questions, le générateur de widgets a créé les fichiers requis dans le répertoire de mon application. J'ai ensuite ouvert le Mon lecteur vidéo fichier dans Visual Studio Code pour commencer à coder le widget.

4. Définition des propriétés des widgets

Maintenant que le squelette du widget existe, nous pouvons commencer à l'enrichir. J'ai mis à jour les propriétés du widget via XML dans le MyVideoPlayer.xml fichier.

<?xml version="1.0" encoding="utf-8"?>
<widget id="mendix.myvideoplayer.MyVideoPlayer" pluginWidget="true" needsEntityContext="true" offlineCapable="true" supportedPlatform="Web"
    xmlns="https://www.mendix.com/widget/1.0/"
    xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="https://www.mendix.com/widget/1.0/ ../node_modules/mendix/custom_widget.xsd">
    <name>My Video Player</name>
    <description>My widget description</description>
    <icon/>
    <properties>
        <propertyGroup caption="General">
            <property key="videoUrl" type="attribute" required="true">
                <caption>Video URL</caption>
                <description>Direct URL to the video file (e.g. CDN/API)</description>
                <attributeTypes>
                        <attributeType name="String"/>
                    </attributeTypes>
            </property>
            <property key="controls" type="boolean" defaultValue="true">
                <caption>Show controls</caption>
                <description>Toggles controls on or off</description>
            </property>
            <property key="autoPlay" type="boolean" defaultValue="true">
                <caption>Autoplay</caption>
                <description>Autoplay on video load</description>
            </property>
            <property key="muted" type="boolean" defaultValue="true">
                <caption>Muted</caption>
                <description>Include sound with your video</description>
            </property>
            <property key="loop" type="boolean" defaultValue="true">
                <caption>Loop</caption>
                <description>Enable back to back playback</description>
            </property>
            <property key="width" type="integer" defaultValue="640">
                <caption>Width (px)</caption>
                <description>Width of the video player in pixels</description>
            </property>
            <property key="height" type="integer" defaultValue="360">
                <caption>Height (px)</caption>
                <description>Height of the video player in pixels</description>
            </property>
        </propertyGroup>
    </properties>
</widget>

• L'URL de la vidéo (chaîne)
• Afficher les contrôles (booléen)
• Lecture automatique (booléen)
• Muet (booléen)
• Boucle (booléenne)
• Largeur (entier)
• Hauteur (entier)

Ce ne sont là que quelques options de base pour configurer les propriétés du widget dans Studio Pro, l'URL est transmise via l'attribut de chaîne VideoURL, qui devra être défini en dehors du widget et transmis via l'entité de contexte.

5. Implémentation du widget

Une fois les propriétés réglées, je suis passé à la création du widget lui-même. J'ai ouvert MyVideoPlayer.tsx dans Visual Studio Code. Pour relever le défi, je ne pouvais utiliser aucune bibliothèque vidéo pour créer le widget. J'ai donc décidé d'utiliser a pour lire la vidéo. Le code ci-dessous explique comment créer le lecteur vidéo, lui transmettre les propriétés et afficher la vidéo sur la page.

import {createElement, useRef} from "react";

import "./ui/MyVideoPlayer.css";

// The generator creates this file for you after editing the XML:
import type { MyVideoPlayerContainerProps } from "../typings/MyVideoPlayerProps";

export default function MyVideoPlayer(props: MyVideoPlayerContainerProps) {
  const videoUrl = props.videoUrl?.value ?? "";//assing video url to entity attribute in Studio Pro
  const {
    controls,
    autoPlay,
    muted,
    loop,
    width,
    height,
    class: className,
    style,
    tabIndex
  } = props;

  const videoRef = useRef(null);

  if (!videoUrl || videoUrl.length === 0) {//URL String validation
    return (
//Video Player error message
        No video URL provided


);
    }

  return (//return video player
     ); }

6. Un bon à avoir

Une dernière étape avant de finaliser le widget consiste à mettre à jour le MyVideoPlayer.editorPreview.tsx fichier. C'est ce que Studio Pro utilise au moment de la conception pour afficher dans la fenêtre de l'éditeur (à quoi ressemble le widget dans Studio Pro, pas dans le navigateur).
Il s'agit simplement de renvoyer un div avec quelques styles simples qui lui sont attachés, afin que le widget ait une belle vue de conception.

import { createElement } from "react";

export function preview() {
  return (
    <div
      style={{
        width: 320,
        height: 180,
        border: "1px dashed #bbb",
        borderRadius: 12,
        display: "grid",
        placeItems: "center",
        fontSize: 12,
        color: "#666"
      }}
    >
      Video Player (bind Video URL)
    </div>
  );
}

export function getPreviewCss() {
  return "";
}

7. Ajout du widget à Studio Pro

Maintenant que le travail était terminé, j'ai compilé le widget en utilisant la commande build dans le terminal.

npm run build //(You can also use npm start to have the widget autocompile after every change)

Cette commande compile le code dans un package et le copie dans le dossier du widget de l'application.

8. Dans Studio Pro

Il est important de synchroniser l'application avec le répertoire du projet et de mettre à jour tous les widgets après avoir créé le widget avec succès, sinon il risque de ne pas apparaître dans la boîte à outils.

• J'ai créé une entité persistante dans le modèle de domaine appelé Vidéos. L'entité est une généralisation de FichierDocument et possède trois attributs : Titre (chaîne), ID vidéo (numéro automatique)et URL de la vidéo (chaîne).
• Le widget attend une URL pour lire la vidéo. Pour ce faire, j'ai décidé d'exposer les vidéos sous forme d'API REST et d'utiliser l'API ID vidéo (numéro automatique) comme la clé dans le Obtenir_par_clé point de terminaison. L'URL de l'API REST peut fonctionner comme une URL pour le lecteur vidéo.

J'ai choisi de générer l'API REST à partir du modèle de domaine, en cliquant avec le bouton droit sur l'entité Vidéo et en choisissant de l'exposer en tant que API REST. J'ai laissé Studio Pro créer l'API et utilisé le Numéro automatique champ comme clé pour le service (j'ai créé le ObtenirTout et Obtenir par clé points de terminaison pour l'API, mais uniquement le Obtenir par clé est nécessaire). J'ai modifié le Obtenir par clé point de terminaison, en mettant à jour le microflux qui gère la réponse.

Pour que le service fonctionne correctement, l'en-tête Content Type correct doit être joint à la réponse. J'ai ajouté l'en-tête HTTP avec les valeurs suivantes :

• Clé : Type de contenu
• Valeur : vidéo/mp4

J'ai également défini l'association sur l'entité Réponse HTTP.

9. Configuration du widget

Le widget attend un attribut d'une entité de contexte, je l'ai donc placé dans une vue de données lors de son ajout à la page.

J'ai ensuite ouvert ses propriétés pour le configurer.

• URL de la vidéo (chaîne de l'entité contextuelle)
• Afficher les contrôles (vrai)
• Lecture automatique (vrai)
• Muet (faux)
• Boucle (fausse)
• Largeur (640)
• Hauteur (360)

10. Définition de l'URL

Dernière étape : définition automatique de l'URL de la vidéo lors de son enregistrement. Dans le microflux associé au bouton d'enregistrement de la vidéo, j'ai ajouté une action de modification et défini la chaîne à l'aide de l'action Java « Obtenir l'URL de l'application » de Community Commons.

• $AppURL+'/rest/myvideoservice/v1/video/'+$Video/VideoID
• (par exemple https://localhost:8080/rest/myvideoservice/v1/video/2)

11. Test du widget

Après tout cela, il était enfin temps de tester le widget. J'ai créé un écran simple pour télécharger des vidéos dans l'entité et afficher le champ VideoID, ainsi que l'URL du point de terminaison de l'API GetByKey pour cette vidéo.

Après avoir exécuté l'application et téléchargé une vidéo de test, j'ai pu obtenir une URL complète pour la vidéo et mettre à jour la propriété URL de la vidéo du widget.
Un dernier essai de l'application, et j'ai pu voir mon widget se charger correctement et lire ma vidéo correctement ! Enfin un succès !

Réflexions finales

C'était un défi intéressant, car je n'ai pas beaucoup travaillé avec le multimédia dans mes projets. À l'avenir, j'aimerais étendre le widget dans plusieurs domaines clés :

1. 1. Un style plus raffiné
   2. Fonctionnalités optionnelles (vitesse 2x, sous-titres, etc.)
   3. Ajoutez des « affiches » pour la vidéo (vignettes, images comme espaces réservés)

J'ai vraiment aimé me tester avec ce défi amusant, et j'espère que vous avez apprécié sa lecture. Si vous avez des suggestions, des critiques ou des commentaires, n'hésitez pas à me les faire parvenir et je publierai peut-être une mise à jour ultérieurement.