Desarrollo de la Aplicación Web

El desarrollo de una aplicación web requiere realizar estas tareas:

Cree una aplicación de Visual Builder.
Cree una nueva aplicación web.
Incluya la biblioteca externa.
Cree una interfaz de usuario.
Actualice el documento PDF cargado.
Crear un nuevo documento PDF.
Descargue el archivo PDF.

Creación de una aplicación de Visual Builder

Una aplicación de Visual Builder es una recopilación de recursos que se utilizan para desarrollar aplicaciones web y móviles. Una aplicación de Visual Builder incluye metadatos en archivos JSON que describen orígenes de datos y objetos de negocio. También incluye archivos HTML y JavaScript para las aplicaciones web y móviles.

Para crear una nueva aplicación de Visual Builder

:En la página inicial de aplicaciones visuales, haga clic en Nuevo.
En el cuadro de diálogo Crear aplicación, escriba el nombre de la aplicación. El campo ID de aplicación se rellena automáticamente según el nombre de la aplicación que proporcione.
- Puede modificar el ID de aplicación si es necesario, pero el ID debe ser único en el dominio de identidad.
- Deje la selección por defecto de Empty Application sin modificar. Esta plantilla no crea artefactos, aplicaciones ni otros recursos.
Haga clic en Terminar.
Una nueva aplicación de Visual Builder se abre automáticamente después de crearla y muestra la pantalla de bienvenida. La nueva aplicación no contendrá ningún artefacto, pero el asistente crea, por defecto, la estructura de archivos de la aplicación y algunos recursos y archivos que necesitará.

Puede utilizar la pantalla de bienvenida para ayudarle a determinar qué artefactos desea crear primero. Haga clic en cualquiera de los mosaicos de la pantalla de bienvenida para abrir el panel asociado en el navegador en el que puede crear y gestionar los artefactos. Puede agregar varias aplicaciones web y móviles, todas las cuales pueden acceder a los orígenes de datos, recursos y servicios que expone en la aplicación Visual Builder.

Crear Nueva Aplicación Web

Las aplicaciones web de la aplicación Visual Builder son independientes entre sí, pero todas pueden utilizar los orígenes de datos definidos en la aplicación.

Para crear una nueva aplicación web en una aplicación de Visual Builder:

Haga clic en el icono Aplicaciones Web del navegador para abrir el panel Aplicaciones Web.
El panel Aplicaciones web muestra representaciones estructurales de cada una de las aplicaciones web de la aplicación Visual Builder. Si no se ha creado ninguna aplicación web, verá un mensaje en el panel y un botón + Aplicación web. Haga clic en este botón para abrir el asistente de creación de aplicaciones web.
Haga clic en el icono Crear aplicación web del navegador.
En la página Información general del asistente Crear aplicación web, especifique un nombre para la aplicación web que va a crear. También puede elegir entre tres estilos de navegación:
- Estilo de navegación horizontal, con tres elementos de navegación.
- Estilo de navegación vertical que permite crear una página raíz que contiene un panel del cajón de navegación con una cabecera con un avatar, elementos de navegación en el medio y un pie de página con el nombre de la aplicación.
- Flujo de página, con una página inicial, que se genera para cada elemento de navegación.
La selección por defecto es Ninguno.
Haga clic en Crear para crear y generar la aplicación web junto con todos sus artefactos necesarios.

Incluir bibliotecas externas

Para generar, modificar y descargar un documento PDF, como se especifica en "Antes de empezar", debe incluir dos bibliotecas externas: pdf-lib y downloadj.

pdf-lib, gestiona el documento PDF.
downloadj, descarga el documento PDF que se ha generado.

Se puede acceder a los artefactos creados para esta aplicación mediante el icono de origen. Utilice las siguientes líneas para insertar los orígenes de ambas bibliotecas en el archivo index.html:

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

Crear una interfaz de usuario

Ahora, creará una interfaz de usuario. Esta interfaz debe contener componentes como contenedores, cabeceras, botones, campos de texto, código JavaScript y código HTML, y permitirá a los usuarios:

Cargar un archivo.
Introduzca un texto de campo que aparecerá en el documento PDF.
Haga clic en un botón para actualizar el documento PDF cargado con el texto introducido.
Haga clic en un botón para crear un nuevo documento PDF que contenga el texto introducido.
Haga clic en un botón para descargar el documento preparado.

Arrastre y suelte el archivo y muestre el documento PDF

Primero, debe arrastrar y soltar los componentes esenciales en la interfaz de usuario que está creando.

En la paleta de componentes, arrastre y suelte en el diseñador de página una fila flexible y, en este componente, una cabecera, etiquete Cargar documento PDF. A continuación, agregue un selector de archivos y un botón selector de archivos que se utilizará para cargar un documento PDF.
Cree una variable de tipo Cadena con el nombre fileURL. Esta variable almacenará en el nivel de página la URL del documento PDF que se mostrará más adelante en la página.
Cree una variable de tipo Cualquiera con el nombre holdFile. Esta variable almacenará en el nivel de página el contenido del documento PDF.
En la paleta de propiedades del selector de archivos, cree el nuevo evento on Select Files. Este evento creará una nueva cadena de acción denominada FilePickerSelectChain.
Defina e implemente la cadena de acción FilePickerSelectChain junto con un JavaScript que leerá el contenido del objeto blob de carga. Esta función JavaScript se implantará en el nivel de página y almacenará dos variables: una que convertirá el archivo PDF en una cadena base64 y la segunda que contenga la URL del documento que aparecerá en la página. La cadena de acción consta de tres pasos:
1. Inicialice y restablezca la variable fileURL.
2. Llame a una función addPDFDocument con el parámetro de entrada del archivo que se ha cargado.
3. Asigne el resultado de la función addPDFDocument a las variables fileURL y holdFile.

Mostrar el archivo PDF cargado en la pantalla Página principal

En el HTML de origen de la página principal, agregue un objeto con su origen la variable de página asignada anteriormente fileURL. Agregue el objeto fileURL a la página HTML principal. En esta etapa, la aplicación puede cargar y mostrar un archivo PDF.

Asigne la salida de la función addPDFDocument a las variables de página fileURL y holdFile

Asigne la URL y los datos de las propiedades de la función addPDFDocument devueltos a las variables de página fileURL y holdFile, respectivamente.

Asigne la variable de entrada de la función addPDFDocument

En la GUI, asigne la variable de archivo cargada al parámetro arg1 de la función.

Crear función addPDFDocument

Cree la función addPDFDocument en el nivel de página. La aplicación recibirá un parámetro de entrada. La función instanciará una variable de URL en función del parámetro del archivo de entrada y, a continuación, leerá el documento cargado y lo convertirá en una cadena base64. Puede utilizar este ejemplo de código para definir la función:

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

Actualizar documento PDF cargado

Desde la paleta de componentes, arrastre y suelte en el diseñador de páginas un componente Campo de texto y, a continuación, un nuevo botón.

Cree una variable de página textIncludedIntoPDF para almacenar el contenido del campo de texto. Esta variable insertará el contenido y actualizará el documento PDF con él.
Asigne esta variable al componente Texto de Entrada.

Actualizar y mostrar PDF

Cree un nuevo evento en acción para el botón Actualizar PDF. El evento creará una nueva cadena de acción denominada update_display_pdf.

La nueva cadena de acción utiliza una función JavaScript para actualizar el PDF cargado y, a continuación, mediante una variable de página temporal, una segunda función JavaScript volverá a generar y mostrará el nuevo documento PDF.

Crear la función UpdatePDF

A continuación, cree la función JavaScript createUpdatePDF. Se trata de una función asíncrona con dos parámetros de entrada (el documento PDF cargado y el texto que el usuario ha introducido previamente en la página principal). Devuelve una matriz de bytes.

Cuando se ejecuta, esta función:

Declara constantes de la API pdf-lib.
Crea una entidad PDFDocument y carga la matriz de bytes pdf de entrada.
Obtiene una matriz de todas las páginas incluidas en el documento.
Identifica la primera página representada en index = 0 del documento.
Calcula el ancho y la altura de la página.
Escribe el texto que has introducido (en color rojo y con un ángulo de 45 grados).

Guarda, serializa y devuelve PDFDocument a bytes (un Uint8Array).

El siguiente ejemplo de código se puede utilizar para simular la funcionalidad anterior:

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

Mostrar el documento PDF actualizado

El resultado de la función UpdatePDF se asignará a la variable de página temporal tmpPDFBytes. Después de esta asignación, una función JavaScript recibirá la matriz de bytes base64 y creará una nueva entidad blob a partir de esta matriz de bytes. Por último, la función creará y devolverá una URL que corresponda a este documento PDF.

El siguiente ejemplo de código se puede utilizar para simular la funcionalidad anterior:

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 salida de esta función se asignará a la variable de página fileURL, que se utilizará para mostrar el documento PDF actualizado en la página.

En este punto, la aplicación está lista para cargar un documento PDF, modificarlo con el texto que el usuario ha introducido en el campo de texto de la pantalla y, a continuación, mostrar el documento PDF actualizado en la pantalla.

Crear un nuevo documento PDF

En este punto, la aplicación está lista para crear un documento PDF, modificarlo con un texto que el usuario haya introducido en el campo de texto de la pantalla y, a continuación, mostrar el documento PDF recién creado en la pantalla. Para generar un nuevo documento PDF que incluya el texto introducido por el usuario de la aplicación, desde la paleta de componentes, arrastre y suelte un componente de botón en el diseñador de página.

Crear y mostrar documento

Cree un nuevo evento para definir la acción iniciada por el botón Crear nuevo PDF. El evento creará una nueva cadena de acción con la etiqueta create_display_pdf.

La nueva cadena de acción utilizará una función JavaScript para crear un nuevo PDF (que incluirá el texto introducido previamente en el campo de texto) y, a continuación, mediante una variable de página temporal, una segunda función JavaScript se regenerará y mostrará el nuevo documento PDF.

Crear la función PDF

A continuación, cree la función JavaScript createPDF. Se trata de una función asíncrona que toma texto que el usuario ha introducido previamente en la página principal como un parámetro de entrada y devuelve una matriz de bytes.

Cuando se ejecuta, esta función:

Declara constantes de la API pdf-lib.
Crea una entidad PDFDocument.
Incorpora la fuente Times Roman.
Agrega una página en blanco al objeto de documento PDF.
Calcula el ancho y la altura de la página.
Escribe el texto que el usuario ha introducido.

Guarda, serializa y devuelve PDFDocument a bytes (un Uint8Array).

Utilice este ejemplo de código para simular la funcionalidad anterior:

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;

Mostrar el documento PDF recién creado

La función createPDF se asignará a la variable de página temporal tmpPDFBytes. Después de esta asignación, una función JavaScript recibirá la matriz de bytes base64 y creará una nueva entidad blob a partir de esta matriz de bytes. .

A continuación, la función creará y devolverá una URL que corresponda a este documento PDF. Se volverá a utilizar la misma función que se ha implementado para la cadena de acción update_display_pdf. La salida de esta función se asigna a continuación a la variable de página fileURL, que se utilizará para mostrar el nuevo documento PDF en la página

Descargar el archivo PDF

Desde la paleta de componentes, se incluye en el diseñador de página arrastrando y soltando un componente Button.

Descargar el documento

Cree una nueva acción de evento para el botón Descargar PDF. El evento creará una nueva cadena de acción, con la etiqueta downloadPDF. La nueva cadena de acción utilizará una función JavaScript para descargar un archivo PDF (con el texto que el usuario ha introducido en el campo de texto).

Descargar el archivo PDF

La función JavaScript downloadPDFfile toma la matriz de bytes del documento PDF que se ha cargado y modificado o creado desde cero como un parámetro de entrada y descarga el documento con un nombre predefinido: pdf-lib_modification_example.pdf y de tipo application/pdf.

La función utiliza la función download() (de la biblioteca downloadj que se ocultó inicialmente y, a continuación, se importó a la aplicación). Los argumentos de entrada para download() pueden ser cualquiera de estos tipos de datos:

Dirección URL
Cadena
Objeto binario grande
Matriz con tipo

o, mediante una dataURL que represente los datos del archivo como una cadena codificada por base64 o URL, el nombre y el tipo del nuevo archivo situado en el directorio de descarga del explorador.

Utilice este ejemplo de código para simular la funcionalidad anterior:

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