Développer l'application Web

Pour développer une application Web, vous devez effectuer les tâches suivantes :

Créez une application Visual Builder.
Créez une application Web.
Incluez la bibliothèque externe.
Créez une interface utilisateur.
Mettez à jour le document PDF chargé.
Créez un document PDF.
Téléchargez le fichier PDF.

Créer une application Visual Builder

Une application Visual Builder est un ensemble de ressources que vous utilisez pour développer des applications Web et mobiles. Une application Visual Builder inclut des métadonnées dans des fichiers JSON qui décrivent des sources de données et des objets métier. Il inclut également des fichiers HTML et JavaScript pour les applications Web et mobiles.

Pour créer une application Visual Builder

:Sur la page d'accueil Visual Applications, cliquez sur Nouveau.
Dans la boîte de dialogue Créer une application, saisissez le nom de l'application. Le champ ID application est automatiquement renseigné en fonction du nom d'application que vous indiquez.
- Vous pouvez modifier l'ID d'application si nécessaire, mais cet ID doit être unique dans votre domaine d'identité.
- Laissez la sélection par défaut Empty Application inchangée. Ce modèle ne crée pas d'artefacts, d'applications ou d'autres ressources.
Cliquez sur Terminer.
Une nouvelle application Visual Builder s'ouvre automatiquement une fois que vous l'avez créée et que vous avez affiché l'écran d'accueil. La nouvelle application ne contient aucun artefact, mais l'assistant crée par défaut la structure de fichiers de l'application, ainsi que certaines ressources et fichiers dont vous aurez besoin.

Vous pouvez utiliser l'écran de bienvenue pour déterminer les artefacts à créer en premier. Cliquez sur l'une des mosaïques de l'écran de bienvenue pour ouvrir le panneau associé dans le navigateur sur lequel vous pouvez créer et gérer les artefacts. Vous pouvez ajouter plusieurs applications Web et mobiles, toutes pouvant accéder aux sources de données, aux ressources et aux services que vous exposez dans votre application Visual Builder.

Créer une application Web

Les applications Web de votre application Visual Builder sont indépendantes les unes des autres, mais elles peuvent toutes utiliser les sources de données définies dans l'application.

Pour créer une application Web dans une application Visual Builder, procédez comme suit :

Cliquez sur l'icône Web Applications dans le navigateur pour ouvrir le volet Web Apps.
Le panneau Applications Web affiche des représentations structurelles de chacune des applications Web de votre application Visual Builder. Si aucune application Web n'a été créée, un message s'affiche dans le volet et un bouton + Application Web. Cliquez sur ce bouton pour ouvrir l'assistant Create Web Application.
Cliquez sur l'icône Create Web Application (Créer une application Web) dans le navigateur.
Sur la page Informations générales de l'assistant Créer une application Web, indiquez le nom de l'application Web que vous êtes sur le point de créer. Vous pouvez également choisir parmi trois styles de navigation :
- Style de navigation Horizontal, avec trois éléments de navigation.
- Style de navigation verticale qui permet de créer une page racine contenant un panneau de tiroir de navigation avec un en-tête avec un avatar, des éléments de navigation au milieu et un pied de page avec le nom de l'application.
- Un flux de pages, avec une page de démarrage, qui est généré pour chaque élément de navigation.
La sélection par défaut est Aucun.
Cliquez sur Créer pour créer et générer l'application Web avec tous les artefacts nécessaires.

Inclure les bibliothèques externes

Pour générer, modifier et télécharger un document PDF, comme indiqué dans "Avant de commencer", vous devez inclure deux bibliothèques externes : pdf-lib et downloadj.

pdf-lib, gère le document PDF.
downloadj, télécharge le document PDF généré.

Les artefacts créés pour cette application sont accessibles via l'icône source. Utilisez les lignes suivantes pour insérer les sources pour le fichier librarie inτο index.html :

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

Créer une interface utilisateur

Vous allez maintenant créer une interface utilisateur. Cette interface doit contenir des composants tels que des conteneurs, des en-têtes, des boutons, des champs de texte, du code JavaScript et du code HTML, et permet aux utilisateurs de :

Téléchargez un fichier.
Entrez le texte d'un champ qui apparaîtra dans le document PDF.
Cliquez sur un bouton pour mettre à jour le document PDF chargé avec le texte saisi.
Cliquez sur un bouton pour créer un document PDF contenant le texte saisi.
Cliquez sur un bouton pour télécharger le document préparé.

Glissez-déposez le fichier et affichez le document PDF

Tout d'abord, vous devez faire glisser et déposer les composants essentiels dans l'interface utilisateur que vous créez.

A partir de la palette de composants, glissez-déplacez vers le concepteur de page une ligne flexible et dans ce composant un en-tête, vous marquez Télécharger un document PDF. Ajoutez ensuite un sélecteur de fichier et un bouton Sélecteur de fichier qui seront utilisés pour télécharger un document PDF.
Créez une variable de type String nommée fileURL. Cette variable stocke au niveau de la page l'URL du document PDF qui sera affiché ultérieurement sur la page.
Créez une variable de type Any avec le nom holdFile. Cette variable stocke au niveau de la page le contenu du document PDF.
Dans la palette de propriétés du sélecteur de fichiers, créez l'événement on Select Files. Cet événement crée une chaîne d'actions appelée FilePickerSelectChain.
Définissez et implémentez la chaîne d'action FilePickerSelectChain avec un élément JavaScript qui lira le contenu de l'objet BLOB de téléchargement. Cette fonction JavaScript est implémentée au niveau de la page et stocke deux variables : une qui convertit le fichier PDF en chaîne base64 et la deuxième contenant l'URL du document qui apparaîtra sur la page. La chaîne d'action comprend trois étapes :
1. Initialisez et réinitialisez la variable fileURL.
2. Appelez une fonction addPDFDocument avec le paramètre d'entrée le fichier qui a été téléchargé.
3. Affectez le résultat de la fonction addPDFDocument aux variables fileURL et holdFile.

Afficher le fichier PDF chargé dans l'écran de la page principale

Dans le code HTML source de la page principale, ajoutez un objet dont la source est la variable de page précédemment affectée fileURL. Ajoutez l'objet fileURL à la page HTML principale. A ce stade, l'application peut télécharger et afficher un fichier PDF.

Affecter la sortie de la fonction addPDFDocument aux variables de page fileURL et holdFile

Affectez l'URL et les données des propriétés de la fonction addPDFDocument renvoyées aux variables de page fileURL et holdFile, respectivement.

Affecter la variable d'entrée de la fonction addPDFDocument

Dans l'interface graphique, affectez la variable de fichier téléchargée au paramètre arg1 de la fonction.

Créer une fonction addPDFDocument

Créez la fonction addPDFDocument au niveau de la page. L'application recevra un paramètre d'entrée. La fonction instancie une variable d'URL en fonction du paramètre du fichier d'entrée, puis lit le document téléchargé et le convertit en chaîne base64. Vous pouvez utiliser cet exemple de code pour définir la fonction :

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

Mettre à jour le document PDF chargé

A partir de la palette de composants, glissez-déplacez dans le concepteur de page un composant Champ de texte et, en dessous, un nouveau bouton.

Créez une variable de page textIncludedIntoPDF pour stocker le contenu du champ de texte. Cette variable insère le contenu et met à jour le document PDF avec lui.
Affectez cette variable au composant Saisie texte.

Mettre à jour et afficher le PDF

Créez un nouvel événement en action pour le bouton Mettre à jour le PDF. L'événement crée une chaîne d'actions intitulée update_display_pdf.

La nouvelle chaîne d'actions utilise une fonction JavaScript pour mettre à jour le PDF téléchargé, puis, via une variable de page temporaire, une deuxième fonction JavaScript régénérera et affichera le nouveau document PDF.

Création de la fonction UpdatePDF

Créez ensuite la fonction JavaScript createUpdatePDF. Il s'agit d'une fonction asynchrone avec deux paramètres d'entrée (le document PDF chargé et le texte saisi précédemment par l'utilisateur sur la page principale). Elle renvoie un tableau d'octets.

Lorsqu'elle est exécutée, cette fonction :

Déclare des constantes à partir de l'API pdf-lib.
Crée une entité PDFDocument et charge le tableau d'octets PDF d'entrée.
Extrait un tableau de toutes les pages contenues dans le document.
Identifie la première page affichée à l'emplacement index = 0 du document.
Calcule la largeur et la hauteur de la page.
Ecrit le texte que vous avez saisi (en rouge et avec un angle de 45 degrés).

Enregistre, sérialise et renvoie PDFDocument en octets (Uint8Array).

L'exemple de code suivant peut être utilisé pour simuler la fonctionnalité ci-dessus :

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

Afficher le document PDF mis à jour

Le résultat de la fonction UpdatePDF sera affecté à la variable de page temporaire tmpPDFBytes. Après cette affectation, une fonction JavaScript reçoit le tableau d'octets base64 et instancie une nouvelle entité blob à partir de ce tableau d'octets. Enfin, la fonction crée et renvoie une URL correspondant à ce document PDF.

L'exemple de code suivant peut être utilisé pour simuler la fonctionnalité ci-dessus :

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

La sortie de cette fonction sera affectée à la variable de page fileURL, qui sera utilisée pour afficher le document PDF mis à jour dans la page.

A ce stade, l'application est prête à télécharger un document PDF, à le modifier avec le texte saisi par l'utilisateur dans le champ de texte de l'écran, puis à afficher le document PDF mis à jour à l'écran.

Créer un document PDF

A ce stade, l'application est prête à créer un document PDF, à le modifier avec un texte que l'utilisateur a saisi dans le champ de texte de l'écran, puis à afficher le nouveau document PDF créé à l'écran. Pour générer un nouveau document PDF contenant le texte saisi par l'utilisateur de l'application, faites glisser un composant de bouton vers le concepteur de page à partir de la palette de composants.

Créer et afficher un document

Créez un événement pour définir l'action lancée par le bouton Créer un fichier PDF. L'événement crée une chaîne d'actions portant le libellé create_display_pdf.

La nouvelle chaîne d'actions utilisera une fonction JavaScript pour créer un nouveau PDF (qui inclura du texte saisi précédemment dans le champ de texte), puis, via une variable de page temporaire, une deuxième fonction JavaScript régénérera et affichera le nouveau document PDF.

Créer la fonction PDF

Créez ensuite la fonction JavaScript createPDF. Il s'agit d'une fonction asynchrone qui prend le texte saisi précédemment sur la page principale en tant que paramètre d'entrée unique et renvoie un tableau d'octets.

Lorsqu'elle est exécutée, cette fonction :

Déclare des constantes à partir de l'API pdf-lib.
Crée une entité PDFDocument.
Intègre la police Times Roman.
Ajoute une page vide à l'objet document PDF.
Calcule la largeur et la hauteur de la page.
Ecrit le texte saisi par l'utilisateur.

Enregistre, sérialise et renvoie PDFDocument en octets (Uint8Array).

Utilisez cet exemple de code pour simuler la fonctionnalité ci-dessus :

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;

Afficher le document PDF nouvellement créé

La fonction createPDF sera affectée à la variable de page temporaire tmpPDFBytes. Après cette affectation, une fonction JavaScript reçoit le tableau d'octets base64 et instancie une nouvelle entité blob à partir de ce tableau d'octets. .

La fonction va ensuite créer et renvoyer une URL correspondant à ce document PDF. La même fonction qui a été implémentée pour la chaîne d'actions update_display_pdf sera réutilisée. La sortie de cette fonction est ensuite affectée à la variable de page fileURL, qui sera utilisée pour afficher le nouveau document PDF dans la page

Télécharger le fichier PDF

A partir de la palette de composants, nous incluons dans le concepteur de page par glisser-déplacer un composant Button.

Télécharger le document

Créez une action d'événement pour le bouton Télécharger au format PDF. L'événement va créer une chaîne d'actions intitulée downloadPDF. La nouvelle chaîne d'actions utilise une fonction JavaScript pour télécharger un fichier PDF (contenant le texte saisi par l'utilisateur dans le champ de texte).

Télécharger le fichier PDF

La fonction JavaScript downloadPDFfile prend le tableau d'octets du document PDF téléchargé et modifié ou créé à partir de zéro en tant que paramètre d'entrée unique et télécharge le document avec un nom prédéfini : pdf-lib_modification_example.pdf et de type application/pdf.

La fonction utilise la fonction download() (à partir de la bibliothèque downloadj initialement masquée, puis importée dans votre application). Les arguments d'entrée pour download() peuvent être n'importe lequel de ces types de données :

URL
Chaîne
BLlob
Tableau typé

ou, via un dataURL représentant les données du fichier en tant que chaîne base64 ou encodée en URL, le nom et le type du nouveau fichier placé dans le répertoire de téléchargement du navigateur.

Utilisez cet exemple de code pour simuler la fonctionnalité ci-dessus :

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