웹 애플리케이션 개발

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

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

Visual Builder 애플리케이션 생성

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

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

    새 Visual Builder 애플리케이션은 생성 후 자동으로 열리고 시작 화면이 표시됩니다. 새 애플리케이션은 아티팩트를 포함하지 않지만 마법사는 기본적으로 애플리케이션의 파일 구조와 필요한 일부 리소스 및 파일을 생성합니다.

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

새 웹 애플리케이션 생성

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

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

외부 라이브러리 포함

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

  • 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로 끌어 놓아야 합니다.

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

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

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

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

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

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 문서 업데이트

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

  1. 텍스트 필드의 콘텐츠를 저장할 페이지 변수 textIncludedIntoPDF를 생성합니다. 이 변수는 콘텐츠를 삽입하고 PDF 문서와 함께 업데이트합니다.
  2. 이 변수를 Input Text 구성 요소에 할당합니다.
PDF 업데이트 및 표시
PDF 업데이트 버튼에 대해 작업 시 새 이벤트를 생성합니다. 이벤트가 update_display_pdf이라는 새 작업 체인을 생성합니다.
새 작업 체인은 JavaScript 함수를 사용하여 업로드된 PDF를 업데이트한 다음 임시 페이지 변수를 통해 두번째 JavaScript 함수를 사용하여 새 PDF 문서를 재생성하고 표시합니다.
UpdatePDF 함수 생성

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

실행되면 이 함수는 다음과 같습니다.
  1. pdf-lib API에서 상수를 선언합니다.
  2. PDFDocument 엔티티를 생성하고 입력 PDF 바이트 배열을 로드합니다.
  3. 문서에 포함된 모든 페이지의 배열을 가져옵니다.
  4. 문서의 index = 0에 렌더링된 첫번째 페이지를 식별합니다.
  5. 페이지의 너비와 높이를 계산합니다.
  6. 입력한 텍스트(빨간색 및 45도 및 각도로)를 씁니다.
  7. 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를 생성합니다. 사용자가 기본 페이지에 한 개의 입력 매개변수로 이전에 입력한 텍스트를 가져와서 바이트 배열을 반환하는 비동기 함수입니다.

이 함수가 실행되면 다음이 수행됩니다.
  1. pdf-lib API에서 상수를 선언합니다.
  2. PDFDocument 엔티티를 생성합니다.
  3. Times Roman 글꼴을 포함합니다.
  4. PDF 문서 객체에 빈 페이지를 추가합니다.
  5. 페이지의 너비와 높이를 계산합니다.
  6. 사용자가 입력한 텍스트를 작성합니다.
  7. 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.pdfapplication/pdf 유형의 문서를 다운로드합니다.
이 함수는 처음에 숨긴 후 애플리케이션으로 임포트한 downloadj 라이브러리에서 download() 함수를 사용합니다. download()에 대한 입력 인수는 다음 데이터 유형일 수 있습니다.
  • URL
  • 문자열
  • BLOB
  • 형식화된 배열
또는 파일의 데이터를 base64 또는 URL로 인코딩된 문자열로 나타내는 dataURL를 통해 브라우저의 다운로드 디렉토리에 배치된 새 파일의 이름과 유형입니다.
이 코드 샘플을 사용하여 위 기능을 시뮬레이트합니다.
  PageModule.prototype.downloadPDFFile = function (arg1) {
    download(arg1, "pdf-lib_modification_example.pdf", "application/pdf");
  };