Nexacro

1. 넥사크로 개발과정
오라클자바

2. 넥사크로의 특징
• 완벽한 HTML5기반
• OSMU(One Source Multi Use ) 가능
• GUI(넥사크로 스튜디오) 기능 향상
• 배포 원활
• 가상 엔진 설치 통해 windows, ios, android에서 실행가능

3. 넥사크로 스크립트 언어
• HTML5 표준 준수
• ECMA, CSS, XML, DOM등 국제 표준에 맞는 기술 적용
• 기존의 자바스크립트의 객체 지향 문법 접목
• 이벤트 처리가 장비에 관계없이 동일하다
• 데이터 송수신은 XML/Ajax 로 처리(비동기 처리)
• 스타일과 테마 편집 가능(디자이너와 협업)

4. 넥사크로 스튜디오 설치
• tobesoft로부터 내려받은 Nexacro17_SetupStudio.exe 실행
• 라이선스는 정식 라이선스나 개발자용 라이선스를 입력

5. Hello nexacro platform
• File -> New -> Project 작성 (프로젝트 이름: HelloWorld)
• File -> New -> Form (Hello.xfdl) 작성
this.Button00_onclick =
function(obj:nexacro.Button,e:nexacro.ClickEventInfo){
this.alert("Hello World");
};

6. 테스트 서버 환경 설치
• JDK 1.8
• Tomcat 9.0
• https://tomcat.apache.org/download-90.cgi
• apache-tomcat-9.0.11-windows-x64.zip을 다운받아 압축해제
• bin폴더의 startup.bat 더블클릭
• http://localhost:8080 접속확인
실행이 안된다면 환경변수
JAVA_HOME에
JDK설치장소가
설정되었는지 확인

7. 톰캣과 연동
• 옵션창에서 Generate 경로를 로컬PC에 설정한 웹서버 디렉
토리로 변경
• 변경후 Generate -> Application 메뉴를 이용하여 Generate
수행함
• QuickView창에서 하단의 체크를 해제하고 로컬에 설정한
웹 서버 경로를 입력

8. 이클립스 통합 개발 환경 연동
• Eclipse 4.7 Oxygen 다운로드
• https://www.eclipse.org/oxygen/
• Eclipse IDE for Java EE Developers 선택
• File -> New -> Dynamic Web Project 작성(이름:
test1)
• Eclipse에 Tomcat 등록
• Window -> Show View -> Servers ->
• New -> Server
• 서버 타입: Apache Tomcat 9.0
• Browse: Tomcat폴더 지정
• 이미 만들어놓은 test1이란 프로젝트를 추가

9. 화면 작성(야구선수 조회)
• 야구선수 이름을 입력하면 그 야구선수의 정보를 조회해서 표시
• 예)손아섭
• 이름: 손아섭, 타율: 0.326, 안타:1531, 홈런:136, 타점:649 , 볼넷:605
• ==> "손"이라고 입력하면 여러명 검색가능

10. 폼 작성
• Static00
• Div00
• edtSearch
• btnSearch
• grdPlayers

11. 데이터셋 작성
<ColumnInfo>
<Column id="id" type="INT" size="4"/>
<Column id="name" type="STRING"
size="20"/>
<Column id="age" type="INT" size="4"/>
<Column id="hr" type="INT" size="4"/>
<Column id="hit" type="INT" size="4"/>
<Column id="bb" type="INT" size="4"/>
<Column id="rbi" type="INT" size="4"/>
</ColumnInfo>

12. 넥사크로 xml 형식
• <Root …>
• <Parameters>
• </Parameters>
• <Dataset>
• <ColumnInfo>
• </ColumnInfo>
• <Rows><Row>~</Row>…</Rows >
• </Dataset>
• </Root>

13. 트랜잭션 처리
this.Div00_btnSearch_onclick =
function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
var id = "search";
var url = "SvcList::PlayerList/sample.xml";
var reqDs = '';
var respDs = 'dsPlayer = players';
var args = 'search=' + this.Div00.form.edtSearch.value;
var callback = 'received';
//this.alert(args);
this.transaction(id, url, reqDs, respDs, args, callback);
};

14. 에러 발생시 크롬에서 로
그확인하는 방법
this.received = function(id, code, message) {
if (code == 0) {
this.alert(this.dsPlayer.rowcount + "건이 검
색되었습니다.");
trace(this.dsPlayer.rowcount + "건이 검색되
었습니다.");
} else {
this.alert("Error[" + code + "]:" + message);
trace("Error[" + code + "]:" + message);
}
}

15. X-API 설치
• WEB-INF/lib에 복사
• Nexacro-xapi-1.0.jar
• Server_licence.xml
• Commons-logging.jar

16. jsp 소스 – pseudo 코드
• <!--
• //1. 자바 라이브러리 지정
• //2.MIME Type 정의
• //3.nexacro patform 기본 객체(PlatformData) 생성
• try {
• //4. Data 처리
• //5.ErrorCode, ErroMsg 처리(성공 메시지)
• } catch(Error) {
• //5.ErrorCode, ErroMsg 처리(실패 메시지)
• }
• //6. 결과 Data Client에게 보내기
• -->

17. x-api객체 정보
PlatformData : 기본객체
PlatformRequest: JSP에서 XML 폼 데이터를 요청받아
처리하는 객체
PlatformResponse: JSP에서 XML 폼 데이터를 출력하는
객체
DatasetList, Dataset : 데이터를 Table형태로 보관하는
객체
VariableList, Variable : 단일값 보관하는 객체

18. 공통 스크립트(xjs) 활용하기
• Base에 작성
• 다른 폴더에 작성하기 위해선 서비스로 등록 필요
• 함수를 선언할 때는 this 키워드를 붙인다
• 폼에서 공통 스크립트를 사용하려면 include 문을 선언
/* lblCommon.xjs */
this.fn_add = function(x, y)
{
var retAdd = nexacro.toNumber(x) + nexacro.toNumber(y);
return retAdd;
}
include "Base::lblCommon.xjs";
this.btn_calc_onclick =
function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
var result = this.fn_add(this.edt_fNum.text,
this.edt_sNum.text);
trace(result);
this.edt_res.set_value(result.toString());
};

19. Form
• 화면 크기에 따라 레이아웃 바꾸기
• Layout
• default 레이아웃: 자동생성(이름
변경 안됨)
• 레이아웃 추가하기
• 새로운 레이아웃의 컨텐츠 배치
• onlayoutchanged
• 레이아웃이 변경되었을 때 발생

20. Form
• 화면을 스탭 단위로 나누기
• stepcount (화면을 값만큼 분할해서
보여준다)
• positionstep (해당 컴포넌트가 어느
화면이 표시될지 설정(인덱스값: 0부
터 시작)
• setStepIndex (특정 인덱스의 화면으
로 이동하고자 할 때 사용)

21. Form
• 엔터키로 컴포넌트 이동하기
• onkeydown (포커스가 있
는 상태에서 키 입력시 발
생)
• getFocus (현재 포커스를
가지고 있는 컴포넌트 반
환)
• getNextComponent (탭키
입력시 포커스가 이동할
컴포넌트 반환)
• setFocus(해당 컴포넌트
로 포커스 이동)

22. Form
• 타이머로 시간 표시하기
• setTimer (키값과 시간간격 지정.
시간 간격은 밀리세컨드)
• ontimer( setTimer에 지정한 시
간 간격에 따라 이벤트 함수 실
행)
• killTimer (실행중인 타이머 중지)
자바 스크립트에서도 구현할 수
있지만(setInterval 사용), 한번에 하나만
가능. 넥사크로는 id를 사용하여 여러 개의
타이머 구현 가능

23. Form
• 화면 크기에 따라 Grid 포맷 바꾸기
• onlayoutchanged : 화면 크기가 변경되면서 레이아웃이 변경됐을 때 발생하는
이벤트. 이 시점에 Grid의 속성을 바꾸어 준다. (특정 컴포넌트의 visible 속성
값 수정 가능)
• Grid포맷 복사해서 추가하기
this.frm_flexgrid_onload =
function(obj:nexacro.Form,e:nexacro.LoadEventInfo)
{
if (this.parent.name == "TEST") {
this.Grid00.set_visible(true);
this.btnOpen.set_visible(false);
} else {
this.Grid00.set_visible(false);
this.btnOpen.set_visible(true);
}
};

24. Form
• 스탭 기능을 활용하여 슬라이드쇼 만
들기
• 첫화면이 로딩되고 2초마다 화면이 전환
• stepselector : StepControl에 접근하기 위
한 속성. 이 속성을 사용하여 하위 속성과
메서드 사용 가능
• stepIt : stepindex 속성값을 1씩 증가하거
나 감소하면서 다음 화면으로 이동
this.frm_slideshow_onload =
function(obj:nexacro.Form,e:nexacro.LoadEventInfo)
{
this.setTimer(1, 2000);
};
this.frm_slideshow_ontimer =
function(obj:nexacro.Form,e:nexacro.TimerEventInfo)
{
if (e.timerid == 1) {
this.stepselector.stepIt(true, true);
}
};

25. Form
• 서버와 트랜잭션 처리하기
• transaction
• 예제: xml파일을 읽어서(로컬 파일) 지정된 DataSet에 해당 값을 받아 처리
• bAsync 참: 비동기, 거짓: 동기
• 콜백 함수
• 데이터 수신이 정상적으로 처리되면 콜백함수로 지정된 함수 실행
• [함수명] = function(strSvcID, nErrorCode, strErrorMsg) { }

26. Form
var bAsync = true;
this.btnTransaction_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
this.TextArea00.set_value("");
this.fn_addlog("트랜잭션 전...");
this.transaction("TEST", "FileSample::test.xml", null, "Dataset00=TEST", null,
"fn_test", bAsync);
this.fn_addlog("트랜잭션 후...");
};
this.fn_addlog = function(strMessage) {
this.TextArea00.set_value(this.TextArea00.text + strMessage + 'n');
}

27. Form
this.fn_test = function(strSvcID, nErrorCode,
strErrorMsg) {
this.fn_addlog("행 수: " +
this.Dataset00.rowcount);
}
this.radioTransaction_onitemchanged =
function(obj:nexacro.Radio,e:nexacro.ItemC
hangeEventInfo)
{
bAsync = obj.value;
};

28. Frame
• 독립적인 창구조를 가짐
• 메뉴를 다양한 형식으로 표현
• 상단 메인 메뉴, 왼쪽 서브 메뉴

29. Frame 구성하기
• 프로젝트 작성시 MidThree 템플릿 선택
• 추후에 추가도 가능

30. Top메뉴 구성하기
• 주류와 음료를 판매하는 쇼핑몰
• 나이를 체크해서 19세 미만이면
주류 메뉴가 비활성화 된다.

31. Top메뉴 소스코드
• this.Menu00_onmenuclick =
function(obj:nexacro.Menu,e:nexacro.MenuClickEventInfo){
• …
• }
var d1ColumnRow = this.dsMenu.findRow("idcolumn", "D-1");
var d2ColumnRow = this.dsMenu.findRow("idcolumn", "D-2");
trace(e.id);
if(e.id == "D-1") { //19세 미만
this.dsMenu.setColumn(d1ColumnRow, "checkboxcolumn", true);
this.dsMenu.setColumn(d2ColumnRow, "checkboxcolumn", false);
...
} else if(e.id == "D-2") { // 19세 이상
this.dsMenu.setColumn(d1ColumnRow, "checkboxcolumn", false);
this.dsMenu.setColumn(d2ColumnRow, "checkboxcolumn", true);
...
}

32. Top메뉴 소스코드
• 메뉴를 전진하면서 19금 메뉴가 있는지 검사
var currentAgeColumnRow = -1;
do {
currentAgeColumnRow++;
currentAgeColumnRow = this.dsMenu.findRow("userdatacolumn", "19", currentAgeColumnRow);
this.dsMenu.setColumn(currentAgeColumnRow, "enablecolumn", false);
//trace(currentAgeColumnRow);
} while (currentAgeColumnRow != -1); 19세 이상이면
true로 설정

33. Top메뉴 소스코드 – 주류메뉴 구성
• this.Menu00_onmenuclick =
function(obj:nexacro.Menu,e:nexacro.MenuClickEventInfo){
• …
• this.fn_showMenu(e.id);
• }
this.fn_showMenu = function(id) {
var objApp = nexacro.getApplication();
//로우 정보 제거
objApp.gds_menu.clearData();
if (id == "A-1") {
//this.alert("한국술 메뉴 표시");
} else if (id == "A-2") {
//this.alert("일본술 메뉴 표시");
}
}

34. Top메뉴 소스코드 – 주류메뉴 구성
• 각각의 메뉴 구성
objApp.gds_menu.addRow();
objApp.gds_menu.setColumn(0, "MENU_ID", 1);
objApp.gds_menu.setColumn(0, "MENU_NAME", "소주");
objApp.gds_menu.setColumn(0, "FORM_URL", "Base::Soju.xfdl");
objApp.gds_menu.addRow();
objApp.gds_menu.setColumn(1, "MENU_ID", 2);
objApp.gds_menu.setColumn(1, "MENU_NAME", "맥주");
objApp.gds_menu.setColumn(1, "FORM_URL", "Base::Beer.xfdl");

35. Left메뉴 구성
• 글로벌 데이터셋 작성
<ColumnInfo>
<Column id="MENU_ID" type="STRING" size="256"/>
<Column id="MENU_NAME" type="STRING" size="256"/>
<Column id="MENU_LEVEL" type="STRING" size="256"/>
<Column id="FORM_URL" type="STRING" size="256"/>
</ColumnInfo>

36. Left메뉴 구성
• 그리드 – 트리형식으로 작성

37. Left 메뉴 구성
• 메뉴 셀 더블클릭시
이벤트
this.Grid00_oncelldblclick =
function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
var objApp = nexacro.getApplication();
var strID = objApp.gds_menu.getColumn(e.row, "MENU_ID");
var strURL = objApp.gds_menu.getColumn(e.row, "FORM_URL");
this.fn_openForm(objApp, strID, strURL);
};
this.fn_openForm = function(pObj, pID, pURL)
{
if(pID.length <= 0) return;
pObj.mainframe.VFrameSet00.HFrameSet00.WorkFrame.set_formurl(pURL);
};

38. 전체 화면 구성
• 나이는 현재 19세 이상으로 선택되어 있
다.
• 나이를 19세 미만으로 체크하면 주류는
선택할 수 없다.
• 각 메뉴를 선택하면 왼쪽에 서브 메뉴가
나온다.