Desenvolver o Aplicativo Web

O desenvolvimento de um aplicativo Web exige a conclusão destas tarefas:

Crie um Aplicativo do Visual Builder.
Crie um Novo aplicativo Web.
Inclua a biblioteca externa.
Crie uma interface de usuário.
Atualize o documento PDF carregado.
Crie um novo documento PDF.
Faça download do arquivo PDF.

Criar um Aplicativo do Visual Builder

Um aplicativo Visual Builder é um conjunto de recursos que você usa para desenvolver aplicativos web e móveis. Um aplicativo Visual Builder inclui metadados em arquivos JSON que descrevem origens de dados e objetos de negócios. Também inclui arquivos HTML e JavaScript para aplicativos web e móveis.

Para criar um novo aplicativo Visual Builder

:Na home page Aplicativos Visuais, clique em Novo.
Na caixa de diálogo Criar Aplicativo, digite o nome do aplicativo. O campo ID do Aplicativo é preenchido automaticamente com base no nome do aplicativo fornecido.
- Você pode modificar o ID do aplicativo, se necessário, mas o ID deve ser exclusivo no domínio de identidades.
- Deixe a seleção padrão do Aplicativo Vazio inalterada. Este modelo não cria artefatos, aplicativos ou outros recursos.
Clique em Concluir.
Um novo aplicativo Visual Builder é aberto automaticamente depois que você o cria e exibe a tela de Boas-vindas. O novo aplicativo não conterá artefatos, mas o assistente criará, por padrão, a estrutura de arquivos do aplicativo e alguns recursos e arquivos necessários.

Você pode usar a tela de Boas-vindas para ajudar a determinar quais artefatos deseja criar primeiro. Clique em qualquer um dos blocos na tela Bem-vindo para abrir seu painel associado no Navegador no qual você pode criar e gerenciar os artefatos. Você pode adicionar vários aplicativos web e móveis, todos eles podem acessar as origens de dados, os recursos e os serviços que você expõe no seu aplicativo Visual Builder.

Criar um Novo Aplicativo Web

Os aplicativos web no seu aplicativo Visual Builder são independentes entre si, mas todos eles podem usar as origens de dados definidas no aplicativo.

Para criar um novo aplicativo web em um aplicativo Visual Builder:

Clique no ícone Aplicativos Web no Navegador para abrir o painel Aplicativos Web.
O painel Aplicativos Web exibe representações estruturais de cada um dos aplicativos Web em seu aplicativo Visual Builder. Se nenhum aplicativo Web tiver sido criado, você verá uma mensagem no painel e um botão + Aplicativo Web. Clique nesta opção para abrir o assistente Criar Aplicativo Web.
Clique no ícone Criar Aplicativo Web no Navegador.
Na página Informações Gerais do assistente de Criação de Aplicativo Web, especifique um nome para o aplicativo Web que você está prestes a criar. Você também pode escolher entre três estilos de navegação:
- O estilo de navegação Horizontal, com três itens de navegação.
- Um estilo de navegação Vertical que permite criar uma página raiz que contém um painel de gaveta de navegação com um cabeçalho com um avatar, itens de navegação no meio e um rodapé com o nome do aplicativo.
- Um fluxo de página, com uma página inicial, que é gerado para cada item de navegação.
A seleção padrão é Nenhuma.
Clique em Criar para criar e gerar o aplicativo Web juntamente com todos os artefatos necessários.

Incluir Bibliotecas Externas

Para gerar, modificar e fazer download de um documento PDF, conforme especificado em "Antes de Começar", você precisa incluir duas bibliotecas externas: pdf-lib e downloadj.

pdf-lib, gerencia o documento PDF.
downloadj, faz download do documento PDF que foi gerado.

Os artefatos criados para este aplicativo podem ser acessados por meio do ícone de origem. Use as seguintes linhas para inserir as origens para a bibliotecária no arquivo index.html:

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

Criar uma Interface do Usuário

Agora, você cria uma interface de usuário. Essa interface deve conter componentes como contêineres, cabeçalhos, botões, campos de texto, código JavaScript e código HTML e permitirá que os usuários:

Carregue um arquivo.
Digite um texto de campo que aparecerá no documento PDF.
Clique em um botão para atualizar o documento PDF carregado com o texto informado.
Clique em um botão para criar um novo documento PDF que contenha o texto inserido.
Clique em um botão para fazer download do documento preparado.

Arrastar e Soltar o Arquivo e Exibir o Documento PDF

Primeiro, você precisa arrastar e soltar componentes essenciais na IU que está criando.

Na paleta de componentes, arraste e solte no designer de páginas uma Linha Flexível e nesse componente um Cabeçalho, você rotula Fazer Upload do Documento PDF. Em seguida, adicione um Seletor de Arquivos e um botão Seletor de Arquivos que será usado para fazer upload de um documento PDF.
Crie uma variável do tipo String com o nome fileURL. Esta variável armazenará no nível da página o URL do documento PDF que será exibido posteriormente na página.
Crie uma variável do tipo Qualquer com o nome holdFile. Esta variável armazenará no nível da página o conteúdo do documento PDF.
Na paleta de propriedades Seletor de Arquivos, crie o novo evento on Select Files. Este evento criará uma nova cadeia de ações chamada FilePickerSelectChain.
Defina e implemente a cadeia de ações FilePickerSelectChain junto com um JavaScript que lerá o conteúdo do objeto blob de upload. Esta função JavaScript será implementada no nível da página e armazenará duas variáveis: uma que converterá o arquivo PDF em uma string base64 e a segunda contendo o URL do documento que aparecerá na página. A cadeia de ações compreende três etapas:
1. Inicialize e redefina a variável fileURL.
2. Chame uma função addPDFDocument com o parâmetro de entrada o arquivo que foi submetido a upload.
3. Atribua o resultado da função addPDFDocument às variáveis fileURL e holdFile.

Exibir o Arquivo PDF Carregado na Tela Página Principal

No HTML de origem da página principal, adicione um objeto com sua origem a variável de página atribuída anteriormente fileURL. Adicione o objeto fileURL à página HTML principal. Nesse estágio, o aplicativo pode carregar e exibir um arquivo PDF.

Atribua a Saída da Função addPDFDocument às Variáveis de Página fileURL e holdFile

Atribua o URL e os dados das propriedades da função addPDFDocument retornados às variáveis de página fileURL e holdFile, respectivamente.

Atribua a Variável de Entrada da Função addPDFDocument

Na GUI, designe a variável de arquivo carregada ao parâmetro arg1 da função.

Criar função addPDFDocument

Crie a função addPDFDocument no nível da página. O aplicativo receberá um parâmetro de entrada. A função instanciará uma variável de URL com base no parâmetro do arquivo de entrada e lerá o documento carregado e o converterá em uma string base64. Você pode usar este exemplo de código para definir a função:

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

Atualizar Documento PDF Carregado

Na paleta de componentes, arraste e solte no designer de páginas um componente Campo de Texto e, abaixo dele, um novo botão.

Crie uma variável de página textIncludedIntoPDF para armazenar o conteúdo do campo de texto. Essa variável inserirá o conteúdo e atualizará o documento em PDF com ela.
Atribua esta variável ao componente Texto de Entrada.

Atualizar e Exibir PDF

Crie um novo evento em ação para o botão Atualizar PDF. O evento criará uma nova cadeia de ações rotulada como update_display_pdf.

A nova cadeia de ações usa uma função JavaScript para atualizar o PDF carregado e, em seguida, por meio de uma variável de página temporária, uma segunda função JavaScript gerará novamente e exibirá o novo documento PDF.

Crie a Função UpdatePDF

Em seguida, crie a função JavaScript createUpdatePDF. Esta é uma função assíncrona com dois parâmetros de entrada (o documento PDF carregado e o texto que o usuário digitou anteriormente na página principal). Ela retorna uma matriz de bytes.

Quando executada, esta função:

Declara constantes da API pdf-lib.
Cria uma entidade PDFDocument e carrega o array de bytes pdf de entrada.
Obtém uma matriz de todas as páginas contidas no documento.
Identifica a primeira página renderizada no index = 0 do documento.
Calcula a largura e a altura da página.
Escreve o texto que você inseriu (na cor vermelha, com e com um ângulo de 45 graus).

Salva, serializa e retorna PDFDocument para bytes (um Uint8Array).

A seguinte amostra de código pode ser usada para simular a funcionalidade acima:

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

Exibir o Documento PDF Atualizado

O resultado da função UpdatePDF será atribuído à variável de página temporária tmpPDFBytes. Após essa designação, uma função JavaScript receberá o array de byte base64 e instanciará uma nova entidade blob desse array de byte. Finalmente, a função criará e retornará um URL correspondente a este documento PDF.

A seguinte amostra de código pode ser usada para simular a funcionalidade acima:

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

A saída desta função será atribuída à variável de página fileURL, que será usada para exibir o documento PDF atualizado na página.

Neste ponto, o aplicativo está pronto para fazer upload de um documento PDF, modificá-lo com o texto que o usuário inseriu no campo de texto da tela e, em seguida, exibir o documento PDF atualizado na tela.

Criar um Novo Documento PDF

Neste ponto, o aplicativo está pronto para criar um documento PDF, modificá-lo com um texto que o usuário inseriu no campo de texto da tela e, em seguida, exibir o documento PDF recém-criado na tela. Para gerar um novo documento PDF que incluirá o texto que foi inserido pelo usuário do aplicativo, na paleta de componentes, arraste e solte um componente de botão no designer de página.

Criar e Exibir Documento

Crie um novo evento para definir a ação iniciada pelo botão Criar novo PDF. O evento criará uma nova cadeia de ações com o label create_display_pdf.

A nova cadeia de ação usará uma função JavaScript para criar um novo PDF (que incluirá texto digitado anteriormente no campo de texto) e, em seguida, por meio de uma variável de página temporária, uma segunda função JavaScript gerará novamente e exibirá o novo documento PDF.

Criar a Função PDF

Em seguida, crie a função JavaScript createPDF. Essa é uma função assíncrona que utiliza o texto que o usuário inseriu anteriormente na página principal como seu parâmetro de entrada único e retorna uma matriz de bytes.

Quando executada, esta função:

Declara constantes da API pdf-lib.
Cria uma entidade PDFDocument.
Incorpora a fonte Times Roman.
Adiciona uma página em branco ao objeto do documento PDF.
Calcula a largura e a altura da página.
Grava o texto que o usuário digitou.

Salva, serializa e retorna PDFDocument para bytes (um Uint8Array).

Use este exemplo de código para simular a funcionalidade acima:

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;

Exibir o Documento PDF Recém-Criado

A função createPDF será designada à variável de página temporária tmpPDFBytes. Após essa designação, uma função JavaScript receberá o array de byte base64 e instanciará uma nova entidade blob desse array de byte. .

A função criará e retornará um URL correspondente a este documento PDF. A mesma função que foi implementada para a cadeia de ação update_display_pdf será reutilizada. A saída desta função é então atribuída à variável de página fileURL, que será usada para exibir o novo documento PDF na página

Fazer download do arquivo PDF

Na paleta de componentes, incluímos no designer de páginas arrastando e soltando um componente Botão.

Fazer Download do Documento

Crie uma nova ação de evento para o botão Fazer Download do PDF. O evento criará uma nova cadeia de ações, identificada como downloadPDF. A nova cadeia de ações usará uma função JavaScript para fazer download de um arquivo PDF (contendo o texto informado pelo usuário no campo de texto).

Fazer download do arquivo PDF

A função JavaScript downloadPDFfile usa o array de bytes do documento PDF que foi submetido a upload e modificado ou criado do zero como seu único parâmetro de entrada e faz download do documento com um nome predefinido: pdf-lib_modification_example.pdf e do tipo application/pdf.

A função usa a função download() (da biblioteca downloadj que foi inicialmente oculta e depois importada para seu aplicativo). Os argumentos de entrada para download() podem ser qualquer um destes tipos de dados:

URL
String
Blob
Matriz Digitada

ou, por meio de um dataURL representando os dados do arquivo como uma string codificada em base64 ou URL, o nome e o tipo do novo arquivo colocado no diretório de download do browser.

Use este exemplo de código para simular a funcionalidade acima:

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