웹 애플리케이션 개발

웹 응용 프로그램을 개발하려면 다음 작업을 완료해야 합니다.

Visual Builder 애플리케이션을 생성합니다.
새 웹 애플리케이션을 생성합니다.
외부 라이브러리를 포함시킵니다.
사용자 인터페이스를 만듭니다.
업로드된 PDF 문서를 업데이트합니다.
새 PDF 문서를 생성합니다.
PDF 파일을 다운로드합니다.

Visual Builder 애플리케이션 생성

Visual Builder 애플리케이션은 웹 및 모바일 애플리케이션을 개발하는 데 사용하는 리소스 모음입니다. Visual Builder 애플리케이션은 데이터 소스 및 비즈니스 객체를 설명하는 메타데이터를 JSON 파일에 포함합니다. 또한 웹 및 모바일 응용 프로그램용 HTML 및 JavaScript 파일도 포함합니다.

새 Visual Builder 애플리케이션을 생성하려면

: 시각적 애플리케이션 홈 페이지에서 새로 만들기를 누릅니다.
Create Application 대화상자에서 응용 프로그램 이름을 입력합니다. 애플리케이션 ID 필드는 제공한 애플리케이션 이름에 따라 자동으로 채워집니다.
- 필요한 경우 애플리케이션 ID를 수정할 수 있지만 ID는 ID 도메인에서 고유해야 합니다.
- Empty Application의 기본 선택 사항을 변경하지 않은 상태로 둡니다. 이 템플리트는 아티팩트, 앱 또는 기타 리소스를 생성하지 않습니다.
완료를 누릅니다.
새 Visual Builder 애플리케이션은 생성 후 자동으로 열리고 시작 화면이 표시됩니다. 새 애플리케이션은 아티팩트를 포함하지 않지만 마법사는 기본적으로 애플리케이션의 파일 구조와 필요한 일부 리소스 및 파일을 생성합니다.

시작 화면을 사용하면 먼저 생성할 아티팩트를 결정할 수 있습니다. 시작 화면에서 타일 중 하나를 눌러 아티팩트를 생성하고 관리할 수 있는 네비게이터에서 연관된 패널을 엽니다. Visual Builder 애플리케이션에 표시되는 데이터 소스, 리소스 및 서비스에 액세스할 수 있는 여러 웹 및 모바일 애플리케이션을 추가할 수 있습니다.

새 웹 애플리케이션 생성

Visual Builder 애플리케이션의 웹 앱은 서로 독립적이지만 모두 애플리케이션에 정의된 데이터 소스를 사용할 수 있습니다.

Visual Builder 애플리케이션 내에 새 웹 애플리케이션을 생성하려면 다음과 같이 하십시오.

Navigator에서 Web Applications 아이콘을 눌러 Web Apps 창을 엽니다.
[웹 앱] 패널에는 Visual Builder 애플리케이션에 있는 각 웹 애플리케이션의 구조적 표현이 표시됩니다. 웹 애플리케이션이 생성되지 않은 경우 창에 메시지가 표시되고 + Web Application 버튼이 표시됩니다. 이 단추를 눌러 Create Web Application 마법사를 엽니다.
Navigator에서 Create Web Application 아이콘을 누릅니다.
웹 애플리케이션 생성 마법사의 [일반 정보] 페이지에서 생성할 웹 애플리케이션의 이름을 지정합니다. 다음 세 가지 탐색 스타일 중에서 선택할 수도 있습니다.
- 세 개의 탐색 항목이 있는 가로 탐색 스타일입니다.
- 아바타가 있는 머리글, 가운데의 탐색 항목 및 애플리케이션 이름의 바닥글이 있는 탐색 서랍 패널을 포함하는 루트 페이지를 생성할 수 있는 세로 탐색 스타일입니다.
- 각 탐색 항목에 대해 생성되는 시작 페이지가 있는 페이지 흐름입니다.
기본 선택은 [없음]입니다.
생성을 눌러 필요한 모든 아티팩트와 함께 웹 애플리케이션을 생성하고 생성합니다.

외부 라이브러리 포함

"시작하기 전에"에 지정된 대로 PDF 문서를 생성, 수정 및 다운로드하려면 두 개의 외부 라이브러리(pdf-lib 및 downloadj)를 포함해야 합니다.

pdf-lib는 PDF 문서를 관리합니다.
downloadj는 생성된 PDF 문서를 다운로드합니다.

이 애플리케이션에 대해 생성된 아티팩트는 소스 아이콘을 통해 액세스할 수 있습니다. 다음 행을 사용하여 index.html 파일에 두 라이브러리 소스를 삽입합니다.

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

사용자 인터페이스 생성

이제 사용자 인터페이스를 만듭니다. 이 인터페이스에는 컨테이너, 헤더, 버튼, 텍스트 필드, JavaScript 코드 및 HTML 코드와 같은 구성요소가 포함되어야 하며 사용자가 다음을 수행할 수 있습니다.

파일을 업로드합니다.
PDF 문서에 표시할 필드 텍스트를 입력하십시오.
업로드된 PDF 문서를 입력한 텍스트로 업데이트하려면 단추를 누르십시오.
버튼을 눌러 입력한 텍스트가 포함된 새 PDF 문서를 생성합니다.
단추를 눌러 준비된 문서를 다운로드합니다.

파일 끌어 놓기 및 PDF 문서 표시

먼저 필수 구성요소를 작성 중인 UI로 끌어 놓아야 합니다.

구성요소 팔레트에서 페이지 디자이너에 가변 행을 끌어 놓고 이 구성요소에 머리글을 붙여 PDF 문서 업로드에 레이블을 지정합니다. 그런 다음 PDF 문서를 업로드하는 데 사용할 파일 선택기 및 파일 선택기 단추를 추가합니다.
이름이 fileURL인 String 유형의 변수를 생성합니다. 이 변수는 나중에 페이지에 표시할 PDF 문서의 URL을 페이지 레벨에서 저장합니다.
holdFile 이름을 사용하여 Any 유형의 변수를 생성합니다. 이 변수는 PDF 문서의 콘텐츠를 페이지 레벨에서 저장합니다.
File Picker 속성 팔레트에서 새 이벤트 on Select Files를 생성합니다. 이 이벤트는 FilePickerSelectChain이라는 새 작업 체인을 생성합니다.
업로드 BLOB 객체의 콘텐츠를 읽을 JavaScript과 함께 작업 체인 FilePickerSelectChain를 정의하고 구현합니다. 이 JavaScript 함수는 페이지 레벨에서 구현되며 두 개의 변수, 즉 PDF 파일을 base64 문자열로 변환하는 변수와 페이지에 나타날 문서 URL을 포함하는 두번째 변수를 저장합니다. 작업 체인은 다음 세 단계로 구성됩니다.
1. fileURL 변수를 초기화하고 재설정합니다.
2. 업로드된 파일을 입력 매개변수로 addPDFDocument 함수를 호출합니다.
3. addPDFDocument 함수의 결과를 fileURL 및 holdFile 변수에 지정합니다.

기본 페이지 화면에 업로드된 PDF 파일 표시

기본 페이지의 소스 HTML에서 이전에 지정된 페이지 변수 fileURL를 소스와 함께 객체를 추가합니다. 기본 HTML 페이지에 fileURL 객체를 추가합니다. 이 단계에서 응용 프로그램은 PDF 파일을 업로드하고 표시할 수 있습니다.

addPDFDocument 함수의 출력을 페이지 변수 fileURL 및 holdFile에 지정

반환된 addPDFDocument 함수 속성 URL 및 데이터를 페이지 변수 fileURL 및 holdFile에 각각 지정합니다.

addPDFDocument 함수의 입력 변수 지정

GUI에서 업로드된 파일 변수를 함수의 arg1 매개변수에 지정합니다.

addPDFDocument 함수 생성

페이지 레벨에서 addPDFDocument 함수를 생성합니다. 응용 프로그램은 하나의 입력 파라미터를 수신합니다. 이 함수는 입력 파일 매개변수를 기반으로 URL 변수를 인스턴스화한 다음 업로드된 문서를 읽고 base64 문자열로 변환합니다. 이 코드 샘플을 사용하여 함수를 정의할 수 있습니다.

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

업로드된 PDF 문서 업데이트

컴포넌트 팔레트에서 [텍스트 필드] 컴포넌트를 페이지 디자이너로 끌어 놓고 이 아래의 새 단추로 끌어 놓습니다.

텍스트 필드의 콘텐츠를 저장할 페이지 변수 textIncludedIntoPDF를 생성합니다. 이 변수는 콘텐츠를 삽입하고 PDF 문서와 함께 업데이트합니다.
이 변수를 Input Text 구성 요소에 할당합니다.

PDF 업데이트 및 표시

PDF 업데이트 버튼에 대해 작업 시 새 이벤트를 생성합니다. 이벤트가 update_display_pdf이라는 새 작업 체인을 생성합니다.

새 작업 체인은 JavaScript 함수를 사용하여 업로드된 PDF를 업데이트한 다음 임시 페이지 변수를 통해 두번째 JavaScript 함수를 사용하여 새 PDF 문서를 재생성하고 표시합니다.

UpdatePDF 함수 생성

그런 다음 JavaScript 함수 createUpdatePDF를 생성합니다. 두 개의 입력 매개변수(업로드된 PDF 문서 및 사용자가 이전에 기본 페이지에 입력한 텍스트)가 있는 비동기 함수입니다. 바이트 배열을 반환합니다.

실행되면 이 함수는 다음과 같습니다.

pdf-lib API에서 상수를 선언합니다.
PDFDocument 엔티티를 생성하고 입력 PDF 바이트 배열을 로드합니다.
문서에 포함된 모든 페이지의 배열을 가져옵니다.
문서의 index = 0에 렌더링된 첫번째 페이지를 식별합니다.
페이지의 너비와 높이를 계산합니다.
입력한 텍스트(빨간색 및 45도 및 각도로)를 씁니다.

PDFDocument를 저장, 직렬화 및 바이트(Uint8Array)로 반환합니다.

다음 코드 샘플을 사용하여 위 기능을 시뮬레이트할 수 있습니다.

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

업데이트된 PDF 문서 표시

UpdatePDF 함수의 결과가 임시 페이지 변수 tmpPDFBytes에 지정됩니다. 이 지정 이후 JavaScript 함수는 base64 바이트 배열을 수신하고 이 바이트 배열에서 새 blob 엔티티를 인스턴스화합니다. 마지막으로 이 함수는 이 PDF 문서에 해당하는 URL을 생성하고 반환합니다.

다음 코드 샘플을 사용하여 위 기능을 시뮬레이트할 수 있습니다.

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

이 함수의 출력은 페이지에 업데이트된 PDF 문서를 표시하는 데 사용되는 페이지 변수 fileURL에 지정됩니다.

이 시점에서 응용 프로그램은 PDF 문서를 업로드하고 사용자가 화면의 텍스트 필드에 입력한 텍스트로 수정한 다음 업데이트된 PDF 문서를 화면에 표시합니다.

새 PDF 문서 생성

이제 응용 프로그램이 PDF 문서를 만들고 사용자가 화면의 텍스트 필드에 입력한 텍스트로 수정한 다음 새로 만든 PDF 문서를 화면에 표시할 준비가 되었습니다. 애플리케이션 사용자가 입력한 텍스트를 포함하는 새 PDF 문서를 생성하려면 구성요소 팔레트에서 단추 구성요소를 페이지 디자이너로 끌어 놓습니다.

문서 생성 및 표시

새 이벤트를 생성하여 새 PDF 생성 단추로 실행되는 작업을 정의합니다. 이벤트가 create_display_pdf 레이블을 사용하여 새 작업 체인을 만듭니다.

새 작업 체인은 JavaScript 함수를 사용하여 새 PDF(텍스트 필드에 이전에 입력한 텍스트 포함)를 생성한 다음 임시 페이지 변수를 통해 두번째 JavaScript 함수를 사용하여 새 PDF 문서를 재생성하고 표시합니다.

PDF 기능 생성

그런 다음 JavaScript 함수 createPDF를 생성합니다. 사용자가 기본 페이지에 한 개의 입력 매개변수로 이전에 입력한 텍스트를 가져와서 바이트 배열을 반환하는 비동기 함수입니다.

이 함수가 실행되면 다음이 수행됩니다.

pdf-lib API에서 상수를 선언합니다.
PDFDocument 엔티티를 생성합니다.
Times Roman 글꼴을 포함합니다.
PDF 문서 객체에 빈 페이지를 추가합니다.
페이지의 너비와 높이를 계산합니다.
사용자가 입력한 텍스트를 작성합니다.

PDFDocument를 저장, 직렬화 및 바이트(Uint8Array)로 반환합니다.

이 코드 샘플을 사용하여 위 기능을 시뮬레이트합니다.

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;

새로 생성된 PDF 문서 표시

createPDF 함수가 임시 페이지 변수 tmpPDFBytes에 지정됩니다. 이 지정 이후 JavaScript 함수는 base64 바이트 배열을 수신하고 이 바이트 배열에서 새 blob 엔티티를 인스턴스화합니다.

그러면 함수가 이 PDF 문서에 해당하는 URL을 생성하고 반환합니다. update_display_pdf 작업 체인에 대해 구현된 동일한 함수가 재사용됩니다. 그러면 이 함수의 출력이 페이지 변수 fileURL에 지정됩니다. 이 변수는 페이지에 새 PDF 문서를 표시하는 데 사용됩니다.

PDF 파일 다운로드

구성요소 팔레트에서 버튼 구성요소를 끌어 놓아 페이지 디자이너에 포함합니다.

문서 다운로드

PDF 다운로드 단추에 대한 새 이벤트 작업을 생성합니다. 이벤트가 downloadPDF라는 새 작업 체인을 만듭니다. 새 작업 체인은 JavaScript 함수를 사용하여 사용자가 텍스트 필드에 텍스트를 입력한 텍스트를 포함하는 PDF 파일을 다운로드합니다.

PDF 파일 다운로드

JavaScript 함수 downloadPDFfile는 업로드 및 수정되었거나 처음부터 생성된 PDF 문서의 바이트 배열을 하나의 입력 매개변수로 사용하고 사전 정의된 이름 pdf-lib_modification_example.pdf 및 application/pdf 유형의 문서를 다운로드합니다.

이 함수는 처음에 숨긴 후 애플리케이션으로 임포트한 downloadj 라이브러리에서 download() 함수를 사용합니다. download()에 대한 입력 인수는 다음 데이터 유형일 수 있습니다.

URL
문자열
BLOB
형식화된 배열

또는 파일의 데이터를 base64 또는 URL로 인코딩된 문자열로 나타내는 dataURL를 통해 브라우저의 다운로드 디렉토리에 배치된 새 파일의 이름과 유형입니다.

이 코드 샘플을 사용하여 위 기능을 시뮬레이트합니다.

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