Webanwendung entwickeln

Für die Entwicklung einer Webanwendung müssen folgende Aufgaben ausgeführt werden:

Visual Builder-Anwendungen erstellen
Erstellen Sie eine neue Webanwendung.
Nehmen Sie die externe Bibliothek auf.
Erstellen Sie eine Benutzeroberfläche.
Aktualisieren Sie das hochgeladene PDF-Dokument.
Neues PDF-Dokument erstellen.
Laden Sie die PDF-Datei herunter.

Visual Builder-Anwendung erstellen

Eine Visual Builder-Anwendung ist eine Sammlung von Ressourcen, mit denen Sie Webanwendungen und Apps entwickeln. Eine Visual Builder-Anwendung enthält Metadaten in JSON-Dateien, die Datenquellen und Geschäftsobjekte beschreiben. Es enthält auch HTML- und JavaScript-Dateien für die Web- und Mobilanwendungen.

So erstellen Sie eine neue Visual Builder-Anwendung:

:Klicken Sie auf der Homepage von Visual Applications auf Neu.
Geben Sie im Dialogfeld "Anwendung erstellen" den Anwendungsnamen ein. Das Feld Anwendungs-ID wird basierend auf dem von Ihnen angegebenen Anwendungsnamen automatisch aufgefüllt.
- Sie können die Anwendungs-ID bei Bedarf ändern, die ID muss jedoch in Ihrer Identitätsdomain eindeutig sein.
- Lassen Sie die Standardauswahl "Leere Anwendung" unverändert. Diese Vorlage erstellt keine Artefakte, Apps oder anderen Ressourcen.
Klicken Sie auf Beenden.
Eine neue Visual Builder-Anwendung wird automatisch geöffnet, nachdem Sie sie erstellt haben, und der Begrüßungsbildschirm wird angezeigt. Die neue Anwendung enthält keine Artefakte. Der Assistent erstellt standardmäßig die Dateistruktur der Anwendung sowie einige Ressourcen und Dateien, die Sie benötigen.

Im Begrüßungsbildschirm können Sie bestimmen, welche Artefakte Sie zuerst erstellen möchten. Klicken Sie auf eine der Kacheln im Begrüßungsbildschirm, um den zugehörigen Bereich im Navigator zu öffnen, in dem Sie die Artefakte erstellen und verwalten können. Sie können mehrere Webanwendungen und Apps hinzufügen, von denen alle auf die Datenquellen, Ressourcen und Services zugreifen können, die Sie in Ihrer Visual Builder-Anwendung bereitstellen.

Neue Webanwendung erstellen

Die Webanwendungen in Ihrer Visual Builder-Anwendung sind voneinander unabhängig. Sie können jedoch alle in der Anwendung definierten Datenquellen verwenden.

So erstellen Sie eine neue Webanwendung in einer Visual Builder-Anwendung:

Klicken Sie im Navigator auf das Symbol "Webanwendungen", um den Bereich "Webanwendungen" zu öffnen.
Im Bereich "Web-Apps" werden strukturelle Darstellungen der einzelnen Webanwendungen in Ihrer Visual Builder-Anwendung angezeigt. Wenn keine Webanwendungen erstellt wurden, werden im Fensterbereich eine Meldung und die Schaltfläche + Webanwendung angezeigt. Klicken Sie auf diese Option, um den Assistenten "Webanwendung erstellen" zu öffnen.
Klicken Sie im Navigator auf das Symbol "Webanwendung erstellen".
Geben Sie auf der Seite "Allgemeine Informationen" des Assistenten "Webanwendung erstellen" einen Namen für die Webanwendung an, die Sie gerade erstellen möchten. Sie können auch aus drei Navigationsstilen wählen:
- Der horizontale Navigationsstil mit drei Navigationselementen.
- Ein vertikaler Navigationsstil, mit dem Sie eine Hauptseite erstellen können, die einen Navigationsbereich mit einem Header mit einem Avatar, Navigationselementen in der Mitte und eine Fußzeile mit dem Anwendungsnamen enthält.
- Ein Seitenablauf mit einer Startseite, die für jedes Navigationselement generiert wird.
Die Standardeinstellung ist Keine.
Klicken Sie auf Erstellen, um die Webanwendung zusammen mit allen erforderlichen Artefakten zu erstellen und zu generieren.

Externe Bibliotheken einschließen

Um ein PDF-Dokument zu generieren, zu ändern und herunterzuladen, wie unter "Bevor Sie beginnen" angegeben, müssen Sie zwei externe Librarys aufnehmen: PDF-lib und downloadj.

PDF-lib verwaltet das PDF-Dokument.
downloadj, lädt das generierte PDF-Dokument herunter.

Auf die für diese Anwendung erstellten Artefakte kann über das Quellsymbol zugegriffen werden. Verwenden Sie die folgenden Zeilen, um die Quellen für beide Librarie-Dateien in die Datei index.html einzufügen:

<script src="https://unpkg.com/pdf-lib@1.4.0"></script> 
<script src="https://unpkg.com/downloadjs@1.4.7"></script>

Erstellen einer Benutzeroberfläche

Jetzt erstellen Sie eine Benutzeroberfläche. Diese Schnittstelle sollte Komponenten wie Container, Header, Schaltflächen, Textfelder, JavaScript-Code und HTML-Code enthalten und Benutzern Folgendes ermöglichen:

Laden Sie eine Datei hoch.
Geben Sie einen Feldtext ein, der im PDF-Dokument angezeigt wird.
Klicken Sie auf eine Schaltfläche, um das hochgeladene PDF-Dokument mit dem eingegebenen Text zu aktualisieren.
Klicken Sie auf eine Schaltfläche, um ein neues PDF-Dokument zu erstellen, das den eingegebenen Text enthält.
Klicken Sie auf eine Schaltfläche, um das vorbereitete Dokument herunterzuladen.

Datei per Drag-and-Drop verschieben und PDF-Dokument anzeigen

Zunächst müssen Sie wichtige Komponenten per Drag-and-Drop in die von Ihnen erstellte Benutzeroberfläche verschieben.

Verschieben Sie in der Komponentenpalette per Drag-and-Drop eine Flexzeile und in diese Komponente eine Überschrift mit dem Label PDF-Dokument hochladen. Fügen Sie dann eine Dateiauswahl und eine Schaltfläche Dateiauswahl hinzu, die zum Hochladen eines PDF-Dokuments verwendet wird.
Erstellen Sie eine Variable des Typs "Zeichenfolge" mit dem Namen fileURL. Diese Variable speichert auf Seitenebene die URL des PDF-Dokuments, das später auf der Seite angezeigt wird.
Erstellen Sie eine Variable vom Typ "Beliebig" mit dem Namen holdFile. Diese Variable speichert den Inhalt des PDF-Dokuments auf Seitenebene.
Erstellen Sie in der Eigenschaftspalette für die Dateiauswahl das neue Ereignis on Select Files. Dieses Ereignis erstellt eine neue Aktionskette mit dem Namen FilePickerSelectChain.
Definieren und implementieren Sie die Aktionskette FilePickerSelectChain zusammen mit einem JavaScript, der den Inhalt des Upload-Blob-Objekts liest. Diese JavaScript-Funktion wird auf Seitenebene implementiert und speichert zwei Variablen: eine, die die PDF-Datei in eine base64-Zeichenfolge konvertiert, und die zweite mit der Dokument-URL, die auf der Seite angezeigt wird. Die Aktionskette umfasst drei Schritte:
1. Initialisieren und setzen Sie die Variable fileURL zurück.
2. Rufen Sie eine Funktion addPDFDocument mit dem Eingabeparameter der hochgeladenen Datei auf.
3. Weisen Sie das Ergebnis der Funktion addPDFDocument den Variablen fileURL und holdFile zu.

Hochgeladene PDF-Datei im Hauptseitenbildschirm anzeigen

Fügen Sie im Quell-HTML der Hauptseite ein Objekt mit der Quelle der zuvor zugewiesenen Seitenvariablen fileURL hinzu. Fügen Sie das Objekt fileURL zur HTML-Hauptseite hinzu. In dieser Phase kann die Anwendung eine PDF-Datei hochladen und anzeigen.

Weisen Sie die Ausgabe der Funktion addPDFDocument den Seitenvariablen fileURL und holdFile zu.

Assign the returned addPDFDocument function properties URL and data to the page variables fileURL and holdFile, respectively.

Eingabevariable der Funktion addPDFDocument zuweisen

Weisen Sie in der GUI die hochgeladene Dateivariable dem Parameter arg1 der Funktion zu.

addPDFDocument-Funktion erstellen

Erstellen Sie die Funktion addPDFDocument auf Seitenebene. Die Anwendung erhält einen Eingabeparameter. Die Funktion instanziiert eine URL-Variable basierend auf dem Parameter der Eingabedatei und liest dann das hochgeladene Dokument und konvertiert es in eine base64-Zeichenfolge. Mit diesem Codebeispiel können Sie die Funktion definieren:

    PageModule.prototype.addPDFDocument = function(arg1) {
      return new Promise(
        resolve=>{
          const blobURL = URL.createObjectURL(arg1);
          const reader  = new FileReader();
          reader.addEventListener("load", function () {
            // convert image file to base64 string         
            resolve({ data: reader.result, url: blobURL });
          }, false);
          if (arg1) {
            reader.readAsDataURL(arg1);
          }
        }
      );      
    };

Hochgeladenes PDF-Dokument aktualisieren

Ziehen Sie eine Textfeldkomponente aus der Komponentenpalette per Drag-and-Drop in den Seitendesigner, darunter eine neue Schaltfläche.

Erstellen Sie eine Seitenvariable textIncludedIntoPDF, um den Inhalt des Textfelds zu speichern. Diese Variable fügt den Inhalt ein und aktualisiert das PDF-Dokument damit.
Weisen Sie diese Variable der Komponente "Eingabetext" zu.

PDF aktualisieren und anzeigen

Erstellen Sie ein neues Ereignis für eine Aktion für die Schaltfläche PDF aktualisieren. Das Ereignis erstellt eine neue Aktionskette mit der Bezeichnung update_display_pdf.

Die neue Aktionskette verwendet die Funktion JavaScript, um die hochgeladene PDF zu aktualisieren. Anschließend wird über eine temporäre Seitenvariable eine zweite Funktion JavaScript neu generiert und das neue PDF-Dokument angezeigt.

UpdatePDF-Funktion erstellen

Erstellen Sie als Nächstes die Funktion JavaScript createUpdatePDF. Dies ist eine asynchrone Funktion mit zwei Eingabeparametern (dem hochgeladenen PDF-Dokument und dem Text, den der Benutzer zuvor auf der Hauptseite eingegeben hat). Es gibt ein Bytearray zurück.

Wenn diese Funktion ausgeführt wird:

Deklariert Konstanten von der pdf-lib-API.
Erstellt eine PDFDocument-Entity und lädt das Eingabe-PDF-Bytearray.
Ruft ein Array aller Seiten im Dokument ab.
Gibt die erste Seite an, die unter index = 0 des Dokuments gerendert wird.
Berechnet die Breite und Höhe der Seite.
Schreibt den eingegebenen Text (rot und mit einem Winkel von 45 Grad).

Speichert, serialisiert und gibt PDFDocument in Byte zurück (Uint8Array).

Mit dem folgenden Codebeispiel können Sie die oben genannte Funktionalität simulieren:

  PageModule.prototype.createUpdatePDF = async function (arg1 , inputText ) {
    // declare constants from the pdf-lib API.
    const { degrees, PDFDocument, rgb, StandardFonts , grayscale} = PDFLib;
    console.log("createUpdatePDF: input file " + arg1);
    console.log("createUpdatePDF: input argument " + inputText);
    const existingPdfBytes = arg1;
    // create a PDFDocument entity and load the input pdf byte array 
    const pdfDoc = await PDFDocument.load(existingPdfBytes);
    // get an array of all the pages contained in this document. The pages are stored in the array in the     
    // same order that they are rendered in the document with the first page page in the 0 position. 
    const pages = pdfDoc.getPages();
    // get the first page rendered at the index = 0 of the document
    const firstPage = pages[0];
    // get the first page width and height
    const { width, height } = firstPage.getSize();
    console.log("createUpdatePDF: The width : " + width + "and height : " + height +" of the first page");
    // Embed a Helvetica font into the pdf document
    const helveticaFont = await pdfDoc.embedFont(StandardFonts.Helvetica);
    // write the text that you had entered and draw a rectangle 
    firstPage.drawText(inputText, {
      x: 5,
      y: height / 2 + 300,
      size: 50,
      font: helveticaFont,
      color: rgb(0.95, 0.1, 0.1),
      rotate: degrees(-45),
    });
    // createUpdatePDF: save and serialize the PDFDocument to bytes (a Uint8Array)
    const pdfBytes = await pdfDoc.save();
    return pdfBytes;
  };

Aktualisiertes PDF-Dokument anzeigen

Das Ergebnis der Funktion UpdatePDF wird der temporären Seitenvariablen tmpPDFBytes zugewiesen. Nach dieser Zuweisung erhält eine JavaScript-Funktion das Bytearray base64 und instanziiert eine neue Blob-Entity aus diesem Bytearray. Schließlich erstellt und gibt die Funktion eine URL zurück, die diesem PDF-Dokument entspricht.

Mit dem folgenden Codebeispiel können Sie die oben genannte Funktionalität simulieren:

PageModule.prototype.displayPDFDocument = function (arg1) { 
    const bytes = new Uint8Array( arg1 ); 
    // create a new blobfrom the byte array with type of application: pdf 
    const blob = new Blob( [ bytes ], { type: "application/pdf" } ); 
    // create the url of the generated blob entity 
    const newdocURL = URL.createObjectURL(blob); 
    // return the updated pdf's url 
    return newdocURL; 
    };

Die Ausgabe dieser Funktion wird der Seitenvariablen fileURL zugewiesen, mit der das aktualisierte PDF-Dokument auf der Seite angezeigt wird.

An dieser Stelle kann die Anwendung ein PDF-Dokument hochladen, es mit dem Text ändern, den der Benutzer in das Textfeld des Bildschirms eingegeben hat, und dann das aktualisierte PDF-Dokument auf dem Bildschirm anzeigen.

Neues PDF-Dokument erstellen

An dieser Stelle kann die Anwendung ein PDF-Dokument erstellen, es mit einem Text ändern, den der Benutzer in das Textfeld des Bildschirms eingegeben hat, und dann das neu erstellte PDF-Dokument auf dem Bildschirm anzeigen. Um ein neues PDF-Dokument zu generieren, das den vom Anwendungsbenutzer eingegebenen Text aus der Komponentenpalette enthält, ziehen Sie eine Schaltflächenkomponente per Drag-and-Drop in den Seitendesigner.

Dokument erstellen und anzeigen

Erstellen Sie ein neues Ereignis, um die Aktion zu definieren, die mit der Schaltfläche Neue PDF erstellen gestartet wird. Das Ereignis erstellt eine neue Aktionskette mit dem Label create_display_pdf.

Die neue Aktionskette verwendet die Funktion JavaScript, um eine neue PDF-Datei zu erstellen (die zuvor in das Textfeld eingegebenen Text enthält). Anschließend wird über eine temporäre Seitenvariable eine zweite Funktion JavaScript neu generiert und das neue PDF-Dokument angezeigt.

PDF-Funktion erstellen

Erstellen Sie als Nächstes die Funktion JavaScript createPDF. Diese asynchrone Funktion verwendet Text, den der Benutzer zuvor als Eingabeparameter auf der Hauptseite eingegeben hat, und gibt ein Bytearray zurück.

Wenn diese Funktion ausgeführt wird:

Deklariert Konstanten von der pdf-lib-API.
Erstellt eine PDFDocument-Entity.
Embeds the Times Roman Schriftart.
Fügt dem PDF-Dokumentobjekt eine leere Seite hinzu.
Berechnet die Breite und Höhe der Seite.
Schreibt den vom Benutzer eingegebenen Text.

Speichert, serialisiert und gibt PDFDocument in Byte zurück (Uint8Array).

Mit diesem Codebeispiel können Sie die oben genannte Funktionalität simulieren:

PageModule.prototype.createPDF = async function (arg1) {
    const { degrees, PDFDocument, rgb, StandardFonts , grayscale} = PDFLib;
    console.log("createPDF: input file " + arg1);
    // create a PDFDocument entity and load the input pdf byte array 
    const pdfDoc2 = await PDFDocument.create();
    // Embed the Times Roman font
    const timesRomanFont = await pdfDoc2.embedFont(StandardFonts.TimesRoman);
    // Add a blank page to the document
    const page2 = pdfDoc2.addPage();
    // Get the width and height of the page
    const { width2, height2 } = page2.getSize();
    // Draw a string of text toward the top of the page
    const fontSize2 = 30;
    page2.drawText(arg1, {
      x: 50,
      y: 450,
      size: fontSize2,
      font: timesRomanFont,
      color: rgb(0, 0.53, 0.71),
    });
    // createUpdatePDF: save and serialize the PDFDocument to bytes (a Uint8Array)
    const pdfBytes2 = await pdfDoc2.save();
    return pdfBytes2;

Neu erstelltes PDF-Dokument anzeigen

Die Funktion createPDF wird der temporären Seitenvariablen tmpPDFBytes zugewiesen. Nach dieser Zuweisung erhält eine JavaScript-Funktion das Bytearray base64 und instanziiert eine neue Blob-Entity aus diesem Bytearray. .

Die Funktion erstellt dann eine URL, die diesem PDF-Dokument entspricht, und gibt sie zurück. Die gleiche Funktion, die für die Aktionskette update_display_pdf implementiert wurde, wird wiederverwendet. Die Ausgabe dieser Funktion wird dann der Seitenvariablen fileURL zugewiesen, mit der das neue PDF-Dokument auf der Seite angezeigt wird.

PDF-Datei herunterladen

Über die Komponentenpalette können Sie per Drag-and-Drop eine Schaltflächenkomponente in den Seitendesigner aufnehmen.

Dokument herunterladen

Erstellen Sie eine neue Ereignisaktion für die Schaltfläche PDF herunterladen. Das Ereignis erstellt eine neue Aktionskette mit der Bezeichnung downloadPDF. Die neue Aktionskette verwendet eine JavaScript-Funktion zum Herunterladen einer PDF-Datei (mit dem Text, den der Benutzer in das Textfeld eingegeben hat).

PDF-Datei herunterladen

Die Funktion JavaScript downloadPDFfile verwendet das Bytearray des PDF-Dokuments, das entweder hochgeladen und geändert oder neu erstellt wurde, als einen Eingabeparameter und lädt das Dokument mit einem vordefinierten Namen herunter: PDF-lib_modification_example.PDF und vom Typ application/PDF.

Die Funktion verwendet die Funktion download() (aus der Bibliothek downloadj, die anfänglich ausgeblendet und dann in Ihre Anwendung importiert wurde). Bei den Eingabeargumenten für download() kann es sich um einen der folgenden Datentypen handeln:

URL
Zeichenfolge
BLOB
Eingegebenes Array

oder über einen dataURL, der die Daten der Datei als base64- oder URL-codierte Zeichenfolge darstellt, den Namen und Typ der neuen Datei, die im Downloadverzeichnis des Browsers gespeichert ist.

Mit diesem Codebeispiel können Sie die oben genannte Funktionalität simulieren:

  PageModule.prototype.downloadPDFFile = function (arg1) {
    download(arg1, "pdf-lib_modification_example.pdf", "application/pdf");
  };