안녕하세요. 포건시 Product Manager 제이크입니다. 

댓글에서의 호칭도 그냥 '제이크님' 정도로 가볍게 불러 주시면 됩니다.

오늘은 Forguncy로 JavaScript API를 사용하는 방법에 대해 알려드리겠습니다. 

1. Forguncy API 개요

Forguncy는 기본적으로 웹개발도구이기 때문에 CSS, JavaScript를 사용하실 수 있습니다. 가장 호환성이 높은 외부 라이브러리는 JQuery입니다. Forguncy의 초기 버전 설계 시  JQuery를 받아들였기 때문에 Foguncy Web API는 JQuery와 비슷한 구조로 되어 있습니다.

포건시 사용자 매뉴얼에서 Forguncy API와 관련된 내용을 작성 중에 있습니다. 완성하지 못해서 2022년 중 완성을 사업 목표로 잡았습니다. 아직 많이 부족하지만 보시고 필요하신 내용이 있으시면 알려주십시오. GCK싸이먼님과 제가 최선을 다해 정보를 보충하겠습니다. 

https://forguncy-korea.github.io/

2. ListView를 만들고 API로 특정 값 불러오기

(1) 먼저 가상 데이터테이블을 하나 만들었습니다.

(2) 그리고 리스트뷰를 페이지에 생성하였습니다. (리스트뷰를 만드는 방법의 자세한 내용은 생략합니다.)

(3) 이제 UI를 만들려고 합니다. UI는 사용자에게 '문자' 혹은 '숫자'를 선택 후 몇 번 째를 원하는 지 선택하면 해당 항목을 보여주도록 하려 합니다.

① 아래의 화면에서 "선택"이라는 항목은 「문자/숫자」 를 선택하는 항목이며,

② "몇 번 째 열"이라는 항목은 선택한 열의 몇 번 째 항목을 가져올 것인 지를 지정하는 항목입니다.

③ 이후, 「가져오기」 버튼을 클릭하면 「가져오기」 부분에 결과가 표시될 것입니다.

(4) 실제 작동 결과를 먼저 보여드리면 아래와 같습니다.

(5) 자, 이제 이를 구현해 보겠습니다. 먼저 Forguncy API를 이용하시려면 셀에 '셀이름(CellName)'을 지정하시는게 편합니다. 아래와 같이 UI로 사용할 셀을 선택하시고, 원래는 셀의 좌표가 표시되는 부분에 셀이름을 지정합니다.

(6) 그래서 아래와 같이 사용할 3개의 UI 요소에 대해 다음과 같이 이름을 붙였습니다.

① 문자/숫자 선택 : selectionResult

② 몇 번 째 항목을 가져올 지 선택 : getRowNumber

③ 결과를 표시 : theResultDisplay

(7) 이제 버튼에 마우스 우클릭하여 명령을 추가하겠습니다.

(8) 추가할 명령은 "자바스크립트로 직접 프로그래밍하기" 입니다. 코드는 아래에 따로 복사하실 수 있도록 다시 남겨 두겠습니다.

[ Forguncy API - 자바스크립트로 직접 프로그래밍하기 ]

// ① 현재 페이지를 불러옵니다. 

var page = Forguncy.Page;

// ② 페이지 내 ListView1이라는 리스트뷰를 불러와 메모리에 저장합니다.

var listview = page.getListView("ListView1");

// ③ 페이지에서 사용자가 지정한 값을 불러옵니다.

var cellSelectionResult = page.getCell("selectionResult").getValue();

var cellGetRowNumber = page.getCell("getRowNumber").getValue();

// ④ 사용자 입력 값을 기반으로 listview의 특정 행의 값을 가져옵니다.

var listviewResult = listview.getValue(cellGetRowNumber-1, cellSelectionResult);

// ⑤ 결과를 표시할 셀로 지정된 셀에 결과를 기록합니다.

page.getCell("theResultDisplay").setValue(listviewResult );

아래는 프로그래밍을 아시는 전문가들을 위한 설명입니다. 첨부파일에도 해당 구현 결과를 업데이트 해 두었으니 다운로드하셔서 직접 확인하실 수 있습니다.

①은 Forguncy API namespace를 지정한 내용입니다.

②는 getListView API를 이용하여 화면의 리스트뷰 요소를 메모리에 저장합니다.

③은 화면의 특정 UI 요소들에서 사용자가 입력한 값을 변수에 저장합니다.

④에서는 ListView API 중 getValue API를 이용해서 특정 좌표의 값을 가져옵니다.

⑤에서는 가져온 값을 화면의 특정 UI 요소에 입력해 줍니다.

(9) 작업하신 명령을 저장하고, 프로젝트를 실행합니다. 

(10) 값을 설정하고 버튼을 누르면 아래와 같이 결과가 나와야 합니다.

관련하여 문의사항이 있으시면 언제든 Q&A게시판에 질의하여 주십시오.

감사합니다.

GCK제이크드립니다.