Erstellen Sie Widgets in Mendix mit React - Teil 1 - Farbzähler | Mendix

Direkt zum Inhalt

Seitensuche

Vertrieb kontaktieren
Kostenlos Testen

Erstellen Sie Widgets in Mendix mit React - Teil 1 - Farbzähler

Erstellen Sie Widgets in Mendix - Teil 1

Mendix ist eine Low-Code-Plattform, mit der Hersteller schneller Mehrwert schaffen und Anwendungen einfach erstellen können. Mit Mendix Das Frontend kann mit React und dem Pluggable Widget-Framework angepasst werden.

Dieser Blog ist der erste in einer Reihe von Build-Along-Widgets, um sich mit dem Erstellen eigener Pluggable Widgets vertraut zu machen für Mendix. Die Blogs behandeln zunehmend anspruchsvollere Konzepte und decken eine Reihe von Anwendungsfällen ab, darunter das Kennenlernen von Typescript und der Pluggable Widgets API, das Ausführen von Machine Learning-Modellen in Ihrem Browser und das Erstellen eines einfachen WebAssembly-Spiels.

Wo soll ich anfangen

Wenn Sie es noch nicht getan haben, sollten Sie sich das ausgearbeitete Beispiel ansehen, um Ihr erstes Pluggable Widget zu erstellen:

Pluggable Widgets verwenden das React-Javascript-Framework. Wir werden in dieser Serie einige React-Konzepte ansprechen, aber dies ist keineswegs eine umfassende Einführung in React. Wenn Sie also eine Einführung oder Auffrischung benötigen, empfehle ich Ihnen den folgenden Kurs (vielleicht finden Sie dort sogar die Inspiration für dieses Widget): React-Tutorial: Lernen Sie React JS – Kostenloser 11-Stunden-Kurs

Zweck dieses Blogs

In diesem Blog behandeln wir:

  • Pluggable-Widget-Projektstruktur
  • Testaufbau und Entwicklung
  • Einführung in React-Konzepte
  • Nutzung externer Bibliotheken

Was wir bauen

Wir werden einen Zähler bauen, der sich per Mausklick erhöhen oder verringern lässt und bei dem es beim Klicken zu einer zufälligen Farbänderung kommt.

Den Endstand des Projektes finden Sie hier: GitHub – joe-robertson-mx/Farbanzahl

Erste Schritte

Zunächst erstellen wir das Gerüst unseres Widgets mit dem Mendix Widget-Generator yo @mendix/widget color count. Dies gibt uns unsere HelloWorld-Implementierung.

Ordnerstruktur:

Unser Widget-Ordner hat folgende Struktur:

  • dist — wo unser erstellter und gebündelter Code ausgegeben wird
  • node-modules — unsere Knotenabhängigkeiten
  • src -unser src-Code-Ordner
  • Komponenten — jede Komponentenordner-JSX-Datei
  • ui – CSS zum Stylen des Widgets
  • package.xml — beschreibt die Widget-Struktur
  • colourCount.editorConfig.ts – Konfiguration für die Vorschau im Designmodus in Studio Pro und Studio
  • colourCount.editorPreview.jsx – Komponente, die eine Vorschau in Studio Pro und Studio bereitstellt
  • colourCount.tsx — der Einstiegspunkt für das Widget
  • colourcount.xml — das Markup, das die Schnittstelle zwischen dem Widget beschreibt und Mendix
  • package.json — beschreibt unser npm-Projekt und die Widget-Abhängigkeiten
  • prettier.config.js — damit wir die Prettier-Regeln für unseren Code ändern können

Test- und Entwicklungs-Setup

Um das Testen zu erleichtern, erstellen wir ein neues Blank Mendix Projekt in der Version, die wir für unser Widget anstreben, in ./colourCount/tests/testProject

Bringen Sie es zum Laufen

Sobald dies erledigt ist, führen wir unser Build-Skript aus und testen unser Widget.

Navigieren Sie von Ihrem Terminal zum Stammverzeichnis Ihres Widgets und geben Sie dann ein

npm run build

Dadurch wird ein Widget-Paket in unserem Ordner „dist/“ und im Ordner „Widgets“ unserer Test-App erstellt.

Um das Widget in Aktion zu sehen, müssen wir nur unsere Testanwendung in Studio Pro öffnen und F4 drücken, um unser Dateiverzeichnis zu synchronisieren. Anschließend können wir unser Widget auf dieselbe Weise zu einer Seite hinzufügen wie jedes andere Widget.

Um unser Widget zu konfigurieren und zu überprüfen, ob Parameter vom Modellierer an das Widget im Frontend weitergegeben werden, können wir Text zur Weitergabe hinzufügen.

Wenn wir die Anwendung ausführen, können wir sehen

Dieser Bereitstellungs- und Testprozess für unser Widget funktioniert, ist aber etwas langsam. Um den Prozess zu beschleunigen, können wir den Widget-Server starten, indem wir

npm-Laufstart

Dadurch wird unser Code auf Änderungen überwacht. Um diese anzuzeigen, müssen wir lediglich den Cache leeren und ein Neuladen erzwingen.

Dies ist in Chrome möglich, indem Sie die Chrome Developer Tools (Strg + Umschalt + i) öffnen, mit der rechten Maustaste auf die Schaltfläche „Aktualisieren“ klicken und „Cache leeren und neu laden“ auswählen.

Code schreiben

Zeit zum Coden!

Ein paar kleine Änderungen, bevor wir beginnen

Beginnen wir mit unserem Reaktionscode. Benennen wir zunächst unsere Komponenten in etwas Sinnvolleres um: „Count“.

Zuerst benennen wir die Komponenten in HelloWorld.jsx um.

import { createElement } from "react";
import { Count } from "./components/Count";
import "./ui/ColourCount.css";
export function ColourCount({ sampleText }) {
   return <Count sampleText={sampleText ? sampleText : "World"} />
}

Es empfiehlt sich außerdem, die Datei so umzubenennen, dass sie mit der Komponente in ColourCount übereinstimmt.

Wir müssen die CSS-Datei unter src/ui in ColourCount.css umbenennen, damit sie korrekt importiert wird. Außerdem müssen wir die untergeordnete Komponente aktualisieren. Dazu benennen wir zunächst HelloWorldSample.jsx in Count.jsx um und aktualisieren den Namen der Komponente darin in Count.

export function Count({ sampleText }: HelloWorldSampleProps) {
    return <div className="widget-hello-world">
              Hello {sampleText}
           </div>;
 }

Um den Entwicklungsprozess zu beschleunigen, werden wir unsere editorPreview-Datei so ändern, dass sie nicht vom Rest des Codes abhängig ist, indem wir sie wie folgt aktualisieren

import { ReactElement, createElement } from "react";
export function preview() {
    return <div />;
}
export function getPreviewCss() {
    return require("./ui/ColourCount.css");
}

Bevor wir mit der Aktualisierung unserer Komponenten beginnen, benennen wir unsere untergeordnete Komponente in etwas Sinnvolleres um: „Count“. Dazu müssen wir die übergeordnete ColourCount-Komponente aktualisieren, damit sie auf die Count-Komponente verweist, die in der Datei „components/Count“ enthalten ist.

Unser Widget-Build kann in drei Teile unterteilt werden:

  • Aktualisieren Sie die Mendix Widget-Schnittstelle zur Annahme einer Zahl für den Startwert des Zählers
  • Erstellen Sie die Logik zum Ändern dieser Nummer
  • Fügen Sie der Zahl den zufälligen Farbwechsel hinzu

Update Mendix Widget-Schnittstelle

Die Schnittstelle zwischen dem Mendix Modell und Ihr Widget sind im ColourCounter.xml-Markup definiert. Wir müssen unser Widget aktualisieren, um einen Zahlenwert zu akzeptieren, indem wir das 'Beispieltext' Resorts Zu dem Folgendem:

<property key="initialValue" type="integer" required="true" defaultValue="5">
    <caption>Initial Value</caption>
    <description>The initial value of the counter</description></property>

Wenn wir unsere öffnen Mendix Modell, drücken Sie F4 und aktualisieren Sie das Widget. Beim Öffnen des Widgets sehen Sie unsere neue Benutzeroberfläche.

Dieses ist allerdings noch nicht mit unserem Bauteil verbunden.

Dazu müssen wir ersetzen Beispieltext und Ursprünglicher Wert in der ColourCount-Datei:

import { createElement } from "react";
import { Count } from "./components/Count";
import "./ui/ColourCount.css";
export function ColourCount({ initialValue }) {
    return <Count initialValue={initialValue} />;
}

Und in der Count-Datei

export function Count({ initialValue }) {
    return <div>{initialValue}</div>;
}

Wenn wir unsere Anwendung erneut ausführen, können wir unseren ursprünglichen Wert sehen:

Die Eigenschaften (oder Props) werden weitergegeben von der Mendix Anwendung an die ColourCount-Komponente, wo es in der Funktion destrukturiert und an die Count-Komponente weitergegeben wird.

Lesen Sie mehr über die Destrukturierung von JavaScript-Objekten.

Erstellen Sie die Logik zum Ändern dieser Nummer

Props sollten in React nicht direkt geändert werden. Stattdessen speichern wir Eigenschaften, die im Komponentenstatus geändert werden.

Um den Status in einer funktionalen Komponente zu nutzen, verwenden wir den useState-Hook.

Hooks wurden in React 16.8 eingeführt. Sie ermöglichen die Nutzung von Status und anderen React-Funktionen, ohne eine Klasse zu schreiben. Hooks sind Funktionen, die sich in React-Status- und Lebenszyklusfunktionen von Funktionskomponenten einklinken. Innerhalb von Klassen funktionieren sie nicht. Lesen Sie mehr über Hooks in React.

Zunächst müssen wir hinzufügen useState zu den Importen.

import { createElement, useState } from "react";

Anschließend fügen wir der Count-Komponente den folgenden Code hinzu.

export function Count({ initialValue }) {
    const [count, setCount] = useState (initialValue)
    return <div>{count}</div>;
}

Wenn wir anrufen useState Es gibt ein Array der Zustandsvariable und eine Funktion zum Setzen der Zustandsvariable zurück. Dies wird sofort in das zählen Zustand und setCount Funktion.

Es akzeptiert die Ursprünglicher Wert als Parameter, der den Wert der Zählvariable bei der Erstellung festlegt.

Nun können wir den Status ändern, indem wir setCountBeim Setzen des Status können Sie entweder einfach einen Wert übergeben oder, wie in diesem Fall, den vorherigen Status als Parameter in der Funktion verwenden.

Wenn wir dies wissen, können wir eine Funktion hinzufügen, um den Statuswert zu erhöhen.

export function Count({ initialValue }) {
   const [count, setCount] = useState (initialValue)
   
   const increment = () => {
      setCount(prevState => prevState + 1);
   };
   return <div>{initialValue}</div>;
}

Dasselbe können wir für eine Dekrementfunktion tun.

Jetzt müssen wir JSX aktualisieren, um das gewünschte HTML für unsere Anwendung darzustellen:

export function Count({ initialValue }) {
    const [count, setCount] = useState (initialValue)
    const increment = () => {
         setCount(prevState => prevState + 1);
    };
    const decrement = () => {
        setCount(prevState => prevState - 1);
    };
    return (
        <div>
              <p>{count}</p>
              <button onClick={increment}>+</button>
              <button onClick={decrement}>-</button>
       </div>
    );
}

Wenn wir unsere Anwendung ausführen, können wir nun den Wert im Zustand, die im Widget angezeigt wird:

Fügen Sie der Zahl den zufälligen Farbwechsel hinzu

Wir möchten nun eine zufällige Farbe generieren, wenn sich die Anzahl ändert. Das Schreiben dieses Codes wäre zeitaufwändig. Glücklicherweise können wir ein vorgefertigtes Softwarepaket verwenden, das im npm-Register gespeichert ist: zufällige Farbe

Das Paket bietet eine Funktion, die beim Aufruf eine zufällige Farbe als Zeichenfolge zurückgibt. Die Nutzung dieses Pakets ist einfach: Zuerst installieren wir das Paket, indem wir ausführen npm install randomcolor in unserem Widget-Ordner.

Dann beginnen wir, Code in unserer Count-Datei zu ändern. Zuerst importieren wir die Funktion

import randomColor from 'randomcolor';

Dann müssen wir einen Zustand initiieren, um unsere Farbeigenschaft beizubehalten

const [colour, setColour] = useState('')

Wir müssen die Farbe auch im Stil des Widgets widerspiegeln. Dazu können wir die Stileigenschaft für das HTML-Tag verwenden. Die Stileigenschaft akzeptiert ein JS-Objekt mit den Stileigenschaften, die Sie anwenden möchten.

Lesen Sie mehr über das Stylen von Dom-Elementen mit React.

Während wir hier sind, können wir das Aussehen unserer Schaltflächen verbessern, indem wir die eingebauten Mendix Klassen:

import { createElement, useState } from 'react'
import randomColor from 'randomcolor'
export function Count({ initialValue }) {
  const [count, setCount] = useState(initialValue)
  const [colour, setColour] = useState('')
  
  const increment = () => {
    setCount((prevState) => prevState + 1)
  }
  
  const decrement = () => {
    setCount((prevState) => prevState - 1)
  }
  
  return (
    <div>
      <p style={{ color: colour }}>{count}</p>
      <button className="mx-button btn-primary" onClick={increment}>
        +
      </button>
      <button className="mx-button" onClick={decrement}>
        -
      </button>
    </div>
  )

Wir müssen nun die Farbänderung auslösen, wenn sich unsere Zählvariable ändert. Dafür können wir eines der wichtigsten in React verfügbaren Dienstprogramme verwenden: useEffekt.

useEffekt ist ein Hook, der bei jedem Rendern der Komponente eine Funktion (einen Nebeneffekt) aufruft. Indem wir Folgendes hinzufügen, können wir die Farbe beim Rendern auf einen zufälligen Wert setzen:

import { createElement, useState } from 'react'
import randomColor from 'randomcolor'
export function Count({ initialValue }) {
  const [count, setCount] = useState(initialValue)
  const [colour, setColour] = useState('')
  
  useEffect(() => {
    setColour(randomColor())
  }, [])
  
  const increment = () => {
    setCount((prevState) => prevState + 1)
  }
  
  const decrement = () => {
    setCount((prevState) => prevState - 1)
  }
  
  return (
    <div>
      <p style={{ color: colour }}>{count}</p>
      <button className="mx-button btn-primary" onClick={increment}>
        +
      </button>
      <button className="mx-button" onClick={decrement}>
        -
      </button>
    </div>
  )

Wenn wir dies im Browser ausführen, erhalten wir … DISCO COUNT!

Das ist cool, aber definitiv nicht das, was wir wollen. Warum also passiert das?

Wenn wir console.log('Render') in useEffect einfügen, können wir sehen, dass die Komponente wiederholt neu gerendert wird, und das liegt daran, dass Komponenten bei jeder Änderung des Status oder der Eigenschaften neu gerendert werden. Wenn wir also den Farbstatus in useEffect festlegen es verursacht ein erneutes Rendern und eine Endlosschleife.

Glücklicherweise lässt sich das leicht beheben. Der useEffect-Hook akzeptiert einen zweiten Parameter, nämlich ein Array von zu überwachenden Zuständen und/oder Eigenschaften. Das bedeutet, dass die Funktion nur ausgeführt wird, wenn sich einer der überwachten Zustände/Eigenschaften ändert. Wir möchten, dass sich die Farbe nur ändert, wenn sich unsere Anzahl ändert, also aktualisieren wir unseren useEffect wie folgt:

useEffect(() => {
    setColour(randomColor())
  }, [count])

Hinweis: Um useEffect nur einmal auszuführen, fügen Sie beim Laden der Komponente ein leeres Array als zweiten Parameter hinzu

Wenn wir jetzt unser Widget aktualisieren … VOILA!

Rekapitulieren

In diesem Blog haben wir die Verwendung von Pluggable Widgets mit Mendix, wie Sie Ihre Entwicklungsumgebung einrichten und einige grundlegende React-Konzepte, einschließlich Status, Props und UseEffect.

Den endgültigen Code für das Widget finden Sie hier: GitHub – joe-robertson-mx/Farbanzahl

Was als nächstes?

Als nächstes werden wir mit der Verwendung von Typescript beginnen und direkt integrieren mit Mendix Entitäten und Attribute und erfahren Sie, wie Sie Aktionen in unserem Mendix Modell aus unserem Widget.

Teilen Sie uns mit, was Sie von diesem Beitrag halten. Gibt es Widgets, die Sie gerne sehen würden? Bitte hinterlassen Sie Ihre Vorschläge für zukünftige Widgets hier in den Kommentaren.

Ressourcen

Um mehr über steckbare Widgets zu erfahren, könnten die folgenden Ressourcen hilfreich sein: Erste Schritte – React, Erstellen Sie steckbare Web-Widgets,

 

Wählen Sie Ihre Sprache