Dieses Tutorial beschreibt die Image Verwendung der Komponente in Webanwendungen.

Look & Feel

01_lookNfeel

  • Upload - es ist möglich, ein Bild vorzudefinieren, indem man die Taste drückt und ein Bild aus dem Dateisystem auswählt;

1

  • Image alt [string] - Auch Alt-Tags und Alt-Beschreibungen genannt, ist der Alt-Text der schriftliche Text, der anstelle eines Bildes auf einer Webseite erscheint, wenn das Bild auf dem Bildschirm eines Nutzers nicht geladen werden kann. Dieser Text hilft Bildschirmleseprogrammen, Bilder für sehbehinderte Leser zu beschreiben, und ermöglicht es Suchmaschinen, Ihre Website besser zu durchsuchen und einzustufen;
  • Width [string] - Bildbreite standardmäßig;
  • Height [string] - Bildhöhe standardmäßig;
  • Visible [boolean] - legt fest, ob das Bild sichtbar ist oder nicht;
  • Name [string] - der Name der Komponente;

Verwandte Geschäftsprozesse

Image in HTML ist ein Verweis auf das Bildobjekt selbst. Daher arbeitet Image immer mit Links, und um Bilddaten zu verwenden, müssen Sie einen Link zu ihnen erhalten.

Die folgenden BPs sind für die Verwendung in Webanwendungen vorgeneriert:

  • Image Get Properties - ermittelt die Bildeigenschaften:
    • Component ID [string] - Bezeichner der Komponente;
    • Width [string] - Bildbreite;
    • Height [string] - Bildhöhe;
    • Image URL [string] - Bild-URL-Adresse;
    • Tooltip [string] - Tooltip-String, der bei Hover angezeigt wird;
    • Visible [boolean] - definiert, ob das Bild sichtbar ist oder nicht;
    • Loading [boolean] - setzt das Bild in den Zustand "Laden", wenn true;

03_getProperties

  • Image Set Properties - setzt alle Eigenschaften des ausgewählten Bildes zurück und setzt stattdessen die angegebenen Eigenschaften:
    • Component ID [string] - Bezeichner der Komponente;
    • Width [string] - Bildbreite;
    • Height [string] - Bildhöhe;
    • Image URL [string] - Bild-URL-Adresse;;
    • Tooltip [string] - Tooltip-String, der bei Hover angezeigt wird;
    • Visible [boolean] - definiert, ob das Bild sichtbar ist oder nicht;
    • Loading [boolean] - setzt das Bild in den Zustand "Laden", wenn true;

04_setProperties

  • Image Update Properties - aktualisiert die Bildeigenschaften:
    • Component ID [string] - Bezeichner der Komponente;
    • Width [string] - Bildbreite;
    • Height [string] - Bildhöhe;
    • Image URL [string] - Bild-URL-Adresse;
    • Tooltip [string] - Tooltip-String, der bei Hover angezeigt wird;
    • Visible [boolean] - definiert, ob das Bild sichtbar ist oder nicht;
    • Loading [boolean] - setzt das Bild in den Zustand "Laden", wenn true;

05_updateProperties

Verwendungsbeispiel

Betrachten Sie ein Beispiel für das Laden eines Benutzerprofil-Avatars. Das Webinterface besteht aus einem Bild und einer Schaltfläche, die den BP auslöst, und sieht wie folgt aus:

06_example_ui

BP startet von onClick Auslöser. Um die Dateien aus dem Dateisystem des Geräts des Benutzers zu holen, wird Select Files wird ein Block verwendet (Max files = 1, File types = Image). Wenn die Datei erfolgreich ausgewählt wurde, wird ein Array-Element mit index=0 ausgewählt werden.

07_example_1

Das resultierende Dateielement des Files Array muss zur weiteren Verwendung auf den Webanwendungsserver hochgeladen werden (Server request POST /_files/). Wenn die Anfrage erfolgreich ist, wird das Dateiobjekt am Ausgang desServer request POST /_files/ Blocks wird an den Eingang des Expand file Blocks übergeben, um dessen ID.

07_example_2

Um die URL zu erhalten, müssen Sie die Datei ID nehmen und ihren Wert in eine Zeichenkette umwandeln (To String). Der relative Dateipfad würde lauten /api/_files/<ID>/download/. Um also ein Bild hochzuladen, muss der Dateipfad in die Image URL Eigenschaft des Image Update Properties Blocks übergeben werden.

07_example_3

Die veröffentlichte Anwendung ist auf dem unten stehenden Beispiel

result

Was this article helpful?

AppMaster.io 101 Crash-Kurs

10 Module
2 Wochen

Sie wissen nicht, wo Sie anfangen sollen? Legen Sie los mit unserem Crashkurs für Anfänger und erkunden Sie AppMaster von A bis Z.

Kurs starten
Development it’s so easy with AppMaster!

Benötigen Sie weitere Hilfe?

Lösen Sie jedes Problem mit Hilfe unserer Experten. Sparen Sie Zeit und konzentrieren Sie sich auf die Erstellung Ihrer Anwendungen.

headphones

Kontaktieren Sie Support

Schildern Sie uns Ihr Problem und wir finden eine Lösung für Sie.

message

Community-Chat

Besprechen Sie Fragen mit anderen Benutzern in unserem Chat.

Community beitreten