Als ich anfing bei Mendix Letztes Jahr habe ich gleichzeitig in zwei Abteilungen gearbeitet. In der Abteilung Expert Service (CSM – Customer Success Management) war ich Berater, Lehrer und Entwickler von benutzerdefinierten Widgets. In der F&E-Abteilung half ich bei der Lösung von Problemen, die die Arbeit mit benutzerdefinierten Widgets betrafen.

In dieser einzigartigen Position konnte ich viel über die Entwicklung von benutzerdefinierten Widgets lernen, einschließlich der tatsächlichen Vorgehensweise unserer Partner und Kunden. Eine meiner Spezialitäten als Softwareentwickler und -architekt besteht darin, alle Informationen über die verschiedenen von den Benutzern verwendeten Prozesse zu sammeln und eine neue und verbesserte (Arbeits-)Methode zu entwickeln.

Mendix beschlossen, eine Auswahl von benutzerdefinierten Widgets, die wir in der Vergangenheit für die Mendix Plattform. Wir glauben, dass jeder, sobald Sie Code für benutzerdefinierte Widgets teilen, dazu beitragen kann und am Ende bessere Produkte liefern kann, die mehr Endbenutzergeschichten erfüllen. Außerdem kann die Entwicklung von benutzerdefinierten Widgets auf eine größere Gruppe von Entwicklern verteilt werden, was eine Win-Win-Situation für alle schafft, die Teil der Mendix Axion Community.

Erstellen eines benutzerdefinierten Widget-Boilerplates

Meine erste Initiative war die Erstellung des „AppStoreWidgetBoilerplate“. Aufbauend auf dem Mendix Client-API und Beispiele vorhandener Widgets Ich habe ein Custom Widget Boilerplate entwickelt, inspiriert von der HTML-Boilerplate, gepflegt von Mathias Bynens und Hans Christian Reinl. Dieser neue Boilerplate wäre allerdings nur für ein Custom Widget für das Mendix Plattform.

Mein Ziel war es, den neuen Boilerplate zur Grundlage für jedes neue Widget zu machen, das von Mendix. Darüber hinaus wäre dies die Vorlage, auf die vorhandene benutzerdefinierte Widgets portiert werden könnten, sodass jedes neue und portierte Widget, das in der Mendix GitHub würde eine gewisse Qualität aufweisen. Als dieses Ziel erreicht war, begann ich, mir die anderen Prozesse anzusehen, die zur Erstellung eines benutzerdefinierten Widgets durchgeführt werden mussten.

Erstellen eines Widget-Entwicklungs-Plugins für Brackets

Bisher war es nicht möglich, ein benutzerdefiniertes Widget in ein Mendix Das Projekt umfasste viele Aufgaben, die bei jeder Änderung am Quellcode wiederholt werden mussten.

Während ich Tickets für benutzerdefinierte Widgets löste, entwickelte ich einen Workshop für benutzerdefinierte Widgets, um meine Erkenntnisse weiterzugeben. Dies gab mir die Gelegenheit, eine Lösung für dieses wiederkehrende Arbeitsmuster zu entwickeln: das Widget Development Plugin für Adobe Brackets, das Brackets in eine IDE (Integrated Development Environment) zum Erstellen benutzerdefinierter Widgets für die Mendix Plattform. Das Plugin verwandelte das Packen eines Widgets basierend auf dem „AppStoreWidgetBoilerplate“ in einen Ein-Klick-Prozess in Adobe Bracket.

Mit dem „AppStoreWidgetBoilerplate“ und dem „Widget Development Plugin for Brackets“ können Sie schnell mit der Erweiterung beginnen Mendix mit coolen neuen User eXperiences! Wenn Sie daran interessiert sind, benutzerdefinierte Widgets für Mendix, Sehen Sie sich dieses Webinar auf Abruf an. Ich demonstriere diese beiden Tools, indem ich ein „Hallo Welt“ erstelle. Mendix Benutzerdefiniertes Widget.

Häufig gestellte Fragen

Q: Wer sollte benutzerdefinierte Widgets erstellen?
A: Dies kann mit jedem beantwortet werden, der JavaScript / HTML und CSS lebt und atmet! Sie können ein benutzerdefiniertes Widget nur auf der Grundlage dieser Skriptsprachen erstellen. Lernen Sie sie also auswendig, bevor Sie mit der Entwicklung eines benutzerdefinierten Widgets für das beginnen Mendix Plattform. Sie benötigen außerdem fundierte Kenntnisse über die Mendix Plattform und wie man damit eine App modelliert.

Q: Was ist ein benutzerdefiniertes Widget?
A: Ein Custom Widget ist ein DIJIT Widget mit Mendix Client-API-JavaScript-Funktionen, die innerhalb eines Mendix modifizierte DOJO-Umgebung. Um tatsächlich ein richtiges DIJIT-Widget zu schreiben, benötigen Sie ein solides Verständnis von JavaScript und den Designmustern von JavaScript und DOJO / DIJIT. Beginnen Sie mit einem DIJIT-Widget, indem Sie diesem Tutorial folgen: https://dojotoolkit.org/reference-guide/1.10/quickstart/writingWidgets.html

A: Wann sollten Sie benutzerdefinierte Widgets erstellen oder verwenden?
F: Ein benutzerdefiniertes Widget soll eine bestimmte UX-Funktion für Ihre Mendix App(s). Es bietet Ihnen eine Lösung, wenn Sie eine spezielle UX (User eXperience) benötigen, die Mendix bietet keine „Out-of-the-Box“-Lösung.

Beispiele für ein benutzerdefiniertes Widget könnten sein:

Ein Auto zusammenbauen: Angenommen, Sie haben eine Anwendung, mit der Sie ein Auto visuell zusammenstellen möchten. An diesem Punkt sollten Sie über die Erstellung eines benutzerdefinierten Widgets nachdenken.

Ein Menü, das sich basierend auf einem Suchfilterwert ändert: Wenn Sie ein dynamisches Menü zum Anzeigen von Seitenlinks basierend auf einem Suchergebnis wünschen.

Ziehen und ablegen: Wenn Sie möchten, dass Produkte per Drag & Drop in einen Einkaufswagen gezogen werden.

Q: Gibt es einen fortgeschrittenen Custom Widgets Workshop im Rahmen des Mendix Akademie?
A: Ja! Mendix bietet einen fortgeschrittenen Custom Widget-Workshop mit dem Titel „Die Kunst des Custom Widget-Erstellens meistern“ an. Wenn Sie das Beste aus dem Custom Widget-Erstellen herausholen möchten, prüfen Sie, wann der nächste Kurs in Ihrer Gegend angeboten wird: https://academy.mendix.com/#1418913294132-2

Zusätzliche Links:

Grundausbildung der Mendix Modeler
Benutzerdefinierte Widget-Entwicklung für Mendix erfordert Kenntnisse der Mendix App-Plattform und Business Modeler. Sie können loslegen mit dem Online Kurs, oder melden Sie sich hier für einen persönlichen Einführungskurs an: https://academy.mendix.com/#1418913294132-2

Wo finde ich das AppStoreWidgetBoilerplate?
Sie finden es an folgendem Ort: https://github.com/mendix/AppStoreWidgetBoilerplate

Mendix GitHub-Repository mit benutzerdefinierten Widgets
Beispiele für Widgets finden Sie in unserem GitHub-Repository: https://github.com/mendix/

Entwurfsmuster für JavaScript
Ein hervorragendes Buch über JavaScript-Designmuster ist das Open Source-Buch von Addy Osmani. Sie finden es hier: https://addyosmani.com/resources/essentialjsdesignpatterns/book/

Schreiben Sie Ihr erstes Dijit-Widget
Eine hervorragende Anleitung zum Schreiben von Dijit-Widgets finden Sie hier: https://dojotoolkit.org/reference-guide/1.10/quickstart/writingWidgets.html

Mendix Client-API
Der Mendix Die Client-API finden Sie hier: https://apidocs.mendix.com/5/client/