Es ist Mitte 2025 und ich habe noch kein Widget erstellt. Hinzu kommt, dass Mendix 11 ist offiziell erschienen und plötzlich fühle ich mich aus der Übung. Es ist immer eine gute Idee, über die eigenen Lieblingstechnologien auf dem Laufenden zu bleiben, also habe ich beschlossen, etwas zu bauen, um mich selbst zu testen und meine Fähigkeiten zu schärfen.

 Die Herausforderung

Erstellen Sie ein einfaches Videoplayer-Widget für eine Web-App, ohne Repositories von GitHub oder anderen Code-Sharing-Plattformen. Darüber hinaus arbeite ich in TypeScript.

1. Vorbereitung

Meine ersten Schritte bestanden darin, alle benötigten Tools zu installieren und zu aktualisieren. Wenn Sie mitmachen, laden Sie Folgendes herunter und installieren Sie es:

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

Schließlich arbeitete ich mich durch die Tutorial zum steckbaren Widget in Mendix Dokumente, um die Grundlagen aufzufrischen.

2. Erste Schritte

Um mit der Entwicklung zu beginnen, habe ich in Studio Pro eine neue App erstellt.

• Erstellen Sie mithilfe der Vorlage „Leere Web-App“ eine neue App in Studio Pro.
• Navigieren Sie zum Projektverzeichnis.
• Erstellen Sie einen neuen Ordner mit dem Namen MyWidget
• Öffnen Sie ein Terminal und navigieren Sie zum Ordner

3. Gerüst des Widgets

Das Generieren des Widget-Gerüsts ist mit dem Yeoman Widget Generator ganz einfach. Um zu beginnen, habe ich den Generator im bereits geöffneten Terminal mit diesem Befehl gestartet:

npx @mendix/generator-widget MyVideoPlayer

Der Generator führte mich dann mit ein paar einfachen Fragen durch die restliche Einrichtung:

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

Nachdem ich alle Fragen beantwortet hatte, erstellte der Widget-Generator die benötigten Dateien in meinem App-Verzeichnis. Anschließend öffnete ich die MeinVideoPlayer Datei in Visual Studio Code, um mit der Codierung des Widgets zu beginnen.

4. Definieren der Widget-Eigenschaften

Nachdem das Widget-Gerüst nun vorhanden ist, können wir mit der Erweiterung beginnen. Ich habe die Widget-Eigenschaften mithilfe von XML im MyVideoPlayer.xml Datei.

<?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>

• Die Video-URL (String)
• Steuerelemente anzeigen (Boolesch)
• Automatische Wiedergabe (Boolesch)
• Stummgeschaltet (Boolesch)
• Schleife (Boolesch)
• Breite (Ganzzahl)
• Höhe (Ganzzahl)

Dies sind nur einige grundlegende Optionen zum Konfigurieren der Widget-Eigenschaften in Studio Pro. Die URL wird über das Zeichenfolgenattribut VideoURL übergeben, das außerhalb des Widgets festgelegt und über die Kontextentität übergeben werden muss.

5. Implementierung des Widgets

Nachdem ich die Eigenschaften festgelegt hatte, ging ich zur Erstellung des Widgets selbst über. Ich öffnete MyVideoPlayer.tsx in Visual Studio Code. Als Teil der Herausforderung, die ich gestellt habe, konnte ich keine Videobibliotheken verwenden, um das Widget zu erstellen. Ich habe mich entschieden, einfach zu verwenden a, um das Video abzuspielen. Mit dem folgenden Code erstelle ich den Videoplayer, übergebe die Eigenschaften und zeige das Video auf der Seite an.

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. Ein schönes Extra

Ein letzter Schritt vor der Fertigstellung des Widgets ist die Aktualisierung der MyVideoPlayer.editorPreview.tsx Datei. Dies wird von Studio Pro zur Entwurfszeit verwendet, um im Editorfenster anzuzeigen (wie das Widget in Studio Pro aussieht, nicht im Browser).
Dies gibt lediglich ein Div mit einigen daran angehängten einfachen Stilen zurück, sodass das Widget in der Designansicht gut aussieht.

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. Hinzufügen des Widgets zu Studio Pro

Nachdem die Arbeit erledigt war, habe ich das Widget mit dem Build-Befehl im Terminal kompiliert.

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

Dieser Befehl kompiliert den Code in ein Paket und kopiert es in den Widget-Ordner für die App.

8. In Studio Pro

Es ist wichtig, die App mit dem Projektverzeichnis zu synchronisieren und alle Widgets zu aktualisieren, nachdem das Widget erfolgreich erstellt wurde, da es sonst möglicherweise nicht in der Toolbox angezeigt wird.

• Ich habe im Domänenmodell eine persistente Entität namens VideoDie Entität ist eine Verallgemeinerung von DateiDokument und hat drei Attribute: Titel (String), VideoID (Autonummer) und VideoURL(String).
• Das Widget erwartet eine URL zum Abspielen des Videos. Um dies zu erreichen, habe ich beschlossen, die Videos als REST-API bereitzustellen und die VideoID (AutoNummer) als Schlüssel in der Get_ByKey Endpunkt. Die URL für die REST-API kann als URL für den Videoplayer fungieren.

Ich habe mich entschieden, die REST-API aus dem Domänenmodell zu generieren, indem ich mit der rechten Maustaste auf die Video-Entität geklickt und sie als REST API. Ich ließ Studio Pro die API erstellen und verwendete die Auto Nummer Feld als Schlüssel für den Dienst (ich habe das Alle abrufen und GetByKey Endpunkte für die API, aber nur die GetByKey ist erforderlich). Ich habe die GetByKey Endpunkt, indem der Mikrofluss aktualisiert wird, der die Antwort verarbeitet.

Damit der Dienst korrekt funktioniert, muss der Antwort der richtige Content Type-Header beigefügt werden. Ich habe den HTTPHeader mit den folgenden Werten hinzugefügt:

• Schlüssel: Inhaltstyp
• Wert: video/mp4

Ich habe auch die Zuordnung zur HTTP-Antwortentität festgelegt.

9. Konfigurieren des Widgets

Das Widget erwartet ein Attribut von einer Kontextentität, daher habe ich es beim Hinzufügen zur Seite in eine Datenansicht eingefügt.

Dann habe ich die Eigenschaften geöffnet, um es zu konfigurieren.

• Video-URL (String aus Kontext-Entität)
• Steuerelemente anzeigen (true)
• Autoplay (wahr)
• Stummgeschaltet (falsch)
• Schleife (falsch)
• Breite (640)
• Höhe (360)

10. Festlegen der URL

Ein letzter Schritt – das automatische Festlegen der URL für das Video beim Speichern der Videodatei. Im Microflow, der an die Schaltfläche „Speichern“ für das Video angehängt ist, habe ich eine Änderungsaktion hinzugefügt und die Zeichenfolge mithilfe der Java-Aktion „Anwendungs-URL abrufen“ von Community Commons festgelegt.

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

11. Testen des Widgets

Nach all dem war es endlich Zeit, das Widget zu testen. Ich habe einen einfachen Bildschirm erstellt, um Videos in die Entität hochzuladen und das Feld VideoID sowie die URL für den GetByKey-API-Endpunkt für dieses Video anzuzeigen.

Nachdem ich die App ausgeführt und ein Testvideo hochgeladen hatte, konnte ich eine vollständige URL für das Video abrufen und die Video-URL-Eigenschaft des Widgets aktualisieren.
Nach einem letzten erneuten Ausführen der App konnte ich sehen, dass mein Widget korrekt geladen und mein Video korrekt abgespielt wurde! Endlich Erfolg!

Abschließende Gedanken

Das war eine tolle Herausforderung, da ich noch nicht viele Projekte mit Multimedia-Elementen durchgeführt habe. In Zukunft möchte ich das Widget in mehreren Schlüsselbereichen erweitern:

1. 1. Verfeinertes Styling
   2. Optionale Funktionen (doppelte Geschwindigkeit, Untertitel usw.)
   3. Fügen Sie „Poster“ für das Video hinzu (Vorschaubilder, Bilder als Platzhalter)

Ich habe es wirklich genossen, mich mit dieser spannenden Herausforderung zu testen, und ich hoffe, es hat euch Spaß gemacht, sie zu lesen. Wenn ihr Vorschläge, Kritik oder Kommentare habt, lasst es mich wissen, und ich schreibe vielleicht bald ein Update.