Sviluppare un'applicazione Web

Lo sviluppo di un'applicazione web richiede il completamento delle seguenti attività:

Creare un'applicazione di Visual Builder.
Creare una nuova applicazione Web.
Includere la libreria esterna.
Creare un'interfaccia utente.
Aggiornare il documento PDF caricato.
Crea un nuovo documento PDF.
Scaricare il file PDF.

Creare un'applicazione di Visual Builder

Un'applicazione Visual Builder è una raccolta di risorse utilizzate per sviluppare applicazioni Web e mobile. Un'applicazione Visual Builder include metadati in file JSON che descrivono origini dati e business object. Include anche file HTML e JavaScript per le applicazioni Web e mobile.

Per creare una nuova applicazione Visual Builder

: nella home page di Visual Applications fare clic su Nuovo.
Nella finestra di dialogo Crea applicazione, digitare il nome dell'applicazione. Il campo ID applicazione viene popolato automaticamente in base al nome dell'applicazione fornito.
- Se necessario, è possibile modificare l'ID applicazione, ma l'ID deve essere univoco nel dominio di Identity.
- Non modificare la selezione predefinita dell'applicazione vuota. Questo modello non crea artifact, applicazioni o altre risorse.
Fare clic su Fine.
Una nuova applicazione di Visual Builder viene aperta automaticamente dopo la creazione e viene visualizzata la schermata di benvenuto. La nuova applicazione non conterrà alcun artifact, ma la procedura guidata crea, per impostazione predefinita, la struttura di file dell'applicazione e alcune risorse e file necessari.

È possibile utilizzare la schermata di benvenuto per determinare gli artifact da creare per primi. Fare clic su una delle caselle della schermata Benvenuti per aprire il pannello associato nel Navigator in cui è possibile creare e gestire gli artifact. È possibile aggiungere più applicazioni Web e mobile, tutte in grado di accedere alle origini dati, alle risorse e ai servizi esposti nell'applicazione Visual Builder.

Crea una nuova applicazione Web

Le applicazioni Web nell'applicazione Visual Builder sono indipendenti l'una dall'altra, ma possono utilizzare tutte le origini dati definite nell'applicazione.

Per creare una nuova applicazione Web all'interno di un'applicazione Visual Builder, procedere come segue.

Fare clic sull'icona Applicazioni Web nel Navigator per aprire il riquadro Applicazioni Web.
Nel pannello Applicazioni Web vengono visualizzate le rappresentazioni strutturali di ciascuna applicazione Web nell'applicazione Visual Builder. Se non sono state create applicazioni Web, nel riquadro verrà visualizzato un messaggio e un pulsante + Applicazione Web. Fare clic su questo pulsante per aprire la Creazione guidata applicazione Web.
Fare clic sull'icona Crea applicazione Web nel Navigator.
Nella pagina Informazioni generali della procedura guidata Crea applicazione Web, specificare un nome per l'applicazione Web che si sta per creare. È inoltre possibile scegliere tra tre stili di navigazione:
- Lo stile di navigazione Orizzontale, con tre elementi di navigazione.
- Stile di navigazione verticale che consente di creare una pagina radice contenente un pannello del cassetto di navigazione con un'intestazione con un avatar, elementi di navigazione al centro e un piè di pagina con il nome dell'applicazione.
- Un flusso di pagine, con una pagina iniziale, generato per ogni elemento di navigazione.
La selezione predefinita è Nessuna.
Fare clic su Crea per creare e generare l'applicazione Web insieme a tutti gli artifact necessari.

Includi librerie esterne

Per generare, modificare e scaricare un documento PDF, come specificato in "Prima di iniziare", è necessario includere due librerie esterne: pdf-lib e downloadj.

pdf-lib gestisce il documento PDF.
downloadj, scarica il documento PDF generato.

Gli artifact creati per questa applicazione sono accessibili tramite l'icona di origine. Utilizzare le righe seguenti per inserire le origini per entrambi i bibliotecarie inτο il file index.html:

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

Creazione di un'interfaccia utente

A questo punto, si crea un'interfaccia utente. Questa interfaccia deve contenere componenti quali contenitori, intestazioni, pulsanti, campi di testo, codice JavaScript e codice HTML e consentirà agli utenti di:

Caricare un file.
Inserire in un testo di campo che verrà visualizzato nel documento PDF.
Fare clic su un pulsante per aggiornare il documento PDF caricato con il testo immesso.
Fare clic su un pulsante per creare un nuovo documento PDF contenente il testo immesso.
Fare clic su un pulsante per scaricare il documento preparato.

Trascinare e rilasciare il file e visualizzare il documento PDF

In primo luogo, devi trascinare i componenti essenziali nell'interfaccia utente che stai creando.

Dalla tavolozza dei componenti trascinare e rilasciare sul designer di pagina una Riga flessibile e in questo componente un'intestazione, assegnare un'etichetta a Carica documento PDF. Aggiungere quindi un Selettore file e un pulsante Selettore file che verranno utilizzati per caricare un documento PDF.
Creare una variabile di tipo String con il nome fileURL. Questa variabile memorizzerà a livello di pagina l'URL del documento PDF che verrà visualizzato successivamente nella pagina.
Creare una variabile di tipo Qualsiasi con il nome holdFile. Questa variabile memorizzerà a livello di pagina il contenuto del documento PDF.
Nella tavolozza delle proprietà File Picker creare il nuovo evento on Select Files. Questo evento creerà una nuova catena di azioni denominata FilePickerSelectChain.
Definire e implementare la catena di azioni FilePickerSelectChain insieme a un JavaScript che leggerà il contenuto dell'oggetto blob di caricamento. Questa funzione JavaScript verrà implementata a livello di pagina e memorizzerà due variabili: una che convertirà il file PDF in una stringa base64 e la seconda contenente l'URL del documento che verrà visualizzato nella pagina. La catena di azioni prevede tre passi:
1. Inizializzare e reimpostare la variabile fileURL.
2. Chiamare una funzione addPDFDocument con il parametro di input del file caricato.
3. Assegnare il risultato della funzione addPDFDocument alle variabili fileURL e holdFile.

Visualizza il file PDF caricato nella schermata della pagina principale

Nell'HTML di origine della pagina principale, aggiungere un oggetto con la relativa origine la variabile di pagina assegnata in precedenza fileURL. Aggiungere l'oggetto fileURL alla pagina HTML principale. In questa fase, l'applicazione può caricare e visualizzare un file PDF.

Assegnare l'output della funzione addPDFDocument alle variabili di pagina fileURL e holdFile

Assegnare l'URL e i dati delle proprietà della funzione addPDFDocument restituiti alle variabili di pagina fileURL e holdFile, rispettivamente.

Assegna la variabile di input della funzione addPDFDocument

Nella GUI assegnare la variabile file caricata al parametro arg1 della funzione.

Crea funzione addPDFDocument

Creare la funzione addPDFDocument a livello di pagina. L'applicazione riceverà un parametro di input. La funzione creerà un'istanza di una variabile URL basata sul parametro del file di input, quindi leggerà il documento caricato e lo convertirà in una stringa base64. È possibile utilizzare questo esempio di codice per definire la funzione:

    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);
          }
        }
      );      
    };

Aggiorna documento PDF caricato

Dalla tavolozza dei componenti trascinare e rilasciare nella finestra di progettazione della pagina un componente Campo di testo e, sotto, un nuovo pulsante.

Creare una variabile di pagina textIncludedIntoPDF per memorizzare il contenuto del campo di testo. Questa variabile inserirà il contenuto e aggiornerà il documento PDF con esso.
Assegnare questa variabile al componente Testo input.

Aggiorna e visualizza PDF

Creare un nuovo evento in azione per il pulsante Aggiorna PDF. L'evento creerà una nuova catena di azioni denominata update_display_pdf.

La nuova catena di azioni utilizza una funzione JavaScript per aggiornare il PDF caricato e, tramite una variabile di pagina temporanea, una seconda funzione JavaScript rigenererà e visualizzerà il nuovo documento PDF.

Creare la funzione UpdatePDF

Creare quindi la funzione JavaScript createUpdatePDF. Si tratta di una funzione asincrona con due parametri di input (il documento PDF caricato e il testo immesso in precedenza dall'utente nella pagina principale). Restituisce un array di byte.

Quando eseguita, questa funzione::

Dichiara le costanti dall'API pdf-lib.
Crea un'entità PDFDocument e carica l'array di byte pdf di input.
Ottiene un array di tutte le pagine contenute nel documento.
Identifica la prima pagina visualizzata all'indirizzo index = 0 del documento.
Calcola la larghezza e l'altezza della pagina.
Scrive il testo immesso (in rosso e con angolo di 45 gradi).

Salva, serializza e restituisce PDFDocument ai byte (Uint8Array).

È possibile utilizzare il seguente esempio di codice per simulare la funzionalità precedente:

  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;
  };

Visualizza il documento PDF aggiornato

Il risultato della funzione UpdatePDF verrà assegnato alla variabile di pagina temporanea tmpPDFBytes. Dopo questa assegnazione, una funzione JavaScript riceverà l'array di byte base64 e creerà un'istanza di una nuova entità blob da questo array di byte. Infine, la funzione creerà e restituirà un URL corrispondente a questo documento PDF.

È possibile utilizzare il seguente esempio di codice per simulare la funzionalità precedente:

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; 
    };

L'output di questa funzione verrà assegnato alla variabile di pagina fileURL, che verrà utilizzata per visualizzare il documento PDF aggiornato nella pagina.

A questo punto l'applicazione è pronta per caricare un documento PDF, modificarlo con il testo immesso dall'utente nel campo di testo della schermata e quindi visualizzare il documento PDF aggiornato sullo schermo.

Crea un nuovo documento PDF

A questo punto l'applicazione è pronta a creare un documento PDF, modificarlo con un testo immesso dall'utente nel campo di testo della schermata, quindi visualizzare il documento PDF appena creato sullo schermo. Per generare un nuovo documento PDF che includerà il testo immesso dall'utente dell'applicazione, dalla tavolozza dei componenti trascinare un componente pulsante nella finestra di progettazione delle pagine.

Crea e visualizza documento

Creare un nuovo evento per definire l'azione avviata dal pulsante Crea nuovo PDF. L'evento creerà una nuova catena di azioni con l'etichetta create_display_pdf.

La nuova catena di azioni utilizzerà una funzione JavaScript per creare un nuovo PDF (che includerà il testo immesso in precedenza nel campo di testo) e quindi, tramite una variabile di pagina temporanea, una seconda funzione JavaScript rigenererà e visualizzerà il nuovo documento PDF.

Creazione della funzione PDF

Creare quindi la funzione JavaScript createPDF. Questa è una funzione asincrona che assume il testo immesso in precedenza dall'utente nella pagina principale come parametro di input e restituisce un array di byte.

Quando viene eseguita, questa funzione:

Dichiara le costanti dall'API pdf-lib.
Crea un'entità PDFDocument.
Incorpora il carattere Times Roman.
Aggiunge una pagina vuota all'oggetto documento PDF.
Calcola la larghezza e l'altezza della pagina.
Scrive il testo immesso dall'utente.

Salva, serializza e restituisce PDFDocument ai byte (Uint8Array).

Utilizzare questo esempio di codice per simulare le funzionalità precedenti:

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;

Visualizza il nuovo documento PDF creato

La funzione createPDF verrà assegnata alla variabile di pagina temporanea tmpPDFBytes. Dopo questa assegnazione, una funzione JavaScript riceverà l'array di byte base64 e creerà un'istanza di una nuova entità blob da questo array di byte. .

La funzione creerà e restituirà un URL che corrisponde a questo documento PDF. La stessa funzione implementata per la catena di azioni update_display_pdf verrà riutilizzata. L'output di questa funzione viene quindi assegnato alla variabile di pagina fileURL, che verrà utilizzata per visualizzare il nuovo documento PDF nella pagina

Scarica il file PDF

Nella tavolozza dei componenti è possibile includere nel designer di pagine trascinando un componente Pulsante.

Scarica il documento

Creare una nuova azione evento per il pulsante Scarica PDF. L'evento creerà una nuova catena di azioni con l'etichetta downloadPDF. La nuova catena di azioni utilizzerà una funzione JavaScript per scaricare un file PDF (contenente il testo immesso dall'utente nel campo di testo).

Scarica il file PDF

La funzione JavaScript downloadPDFfile utilizza l'array di byte del documento PDF caricato e modificato o creato da zero come parametro di input e scarica il documento con un nome predefinito: pdf-lib_modification_example.pdf e di tipo application/pdf.

La funzione utilizza la funzione download() (dalla libreria downloadj inizialmente nascosta e quindi importata nell'applicazione). Gli argomenti di input per download() possono essere di uno qualsiasi di questi tipi di dati:

URL
Stringa
BLOB
Array con tipo

oppure, tramite un dataURL che rappresenta i dati del file come stringa base64 o codificata con URL, il nome e il tipo del nuovo file inserito nella directory di download del browser.

Utilizzare questo esempio di codice per simulare le funzionalità precedenti:

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