개별 컴포넌트 (단일 컴포넌트/ 목록형 컴포넌트 / 컨테이너 컴포넌트) *좌우 스크롤 화면 하단버튼 Step기능으로 제공됨 (모바일환경) 확인은 view source 디자인 엑셀시트처럼 펼쳐서 볼 수 있음
- 마스크 에디트(정해진 자리수인 경우 사용) 속성 type, format *처리하는 방법 {} #,###.00
- 비밀번호는 에디트컴포넌트 속성 password 를 true로 설정
컨테이너 컴포넌트 Div, Tap 성능의 비교
div 속성 url 콤보는 어플리케이션 내 만들어진 전체 폼 정보 리스트를 볼 수 있음. 폼을 div 안으로 가져올 수 있음(인클루드).
tab 속성에도 동일적용
그러나 탭에서는 url을 통해 인크루드 하지 않고 직접 작성하게 되면 한번에 모든 탭의 내용을 로딩해서 느려짐
url방식으로 연결해주면 현재 활성화 된 탭만 로딩된다.
그럼에도 다른 탭의 컴포넌트를 참조해야 할 경우가 있다. 이 경우에는 다른 조치 없으면 undefined문제 발생하므로
속성 preload 속성값을 true로 설정해서 해결할 수 있다. 그러나 쓰지 않도록 한다. (다 로딩 해서 가져온 후 로딩되므로 직접 작성한 것처럼 시간이 걸림)
preload는 가급적 쓰지 않고 빠르게 undefined가 발생하지 않도록 로직으로 해결해야 함.
*프로젝트 확장자 .xprj
화면실습 데이터 바인드 _ employee 화면 만들기 (컴포넌트 넣고/ 디자인변경- cssclass적용/ 정렬/ 바인딩) *퀵뷰o/ 프로젝트런x
서비스가 준비되어있지 않아도(db없어도) Dataset컴포넌트 사용해서 값(깡통값_xml포맷)넣을수 있는데, 쉽게 말해 일반 테이블. 서버와 통신할 때 데이터 주고받는 형식.
테이블에서 원하는 데이터를 가져와서 새로운 테이블을 결과값으로 가져올 때 중요 한게 Type (#,##0.00 - 값이 없으면 null이 가지 않고 디폴트 0.00)
그리드에 넣어놓은 데이터 드래그해서 넣으면 바인딩 끝. 데이터셋에 멀티로우 여러정보(row)를 이동하며 확인가능
단일컴포넌트에 바인딩은 - 끌어다 놓으면 어떤 값을 로딩할지 선택하면 됨. 다만 형식이 맞지 않으면 데이터값이 보이지 않기 때문에 각 컴포넌트에서 중요한 속성들을 설정해야 한다 (마스크에디트는 type속성과 format)
콤보와 달력 컴포넌트를 함께 써서 결혼했으면 결혼날짜를 보여주고 아니면 안보여주는 게 가능 (속성에서 보는게 아니라 이벤트에서 visible - 데이터셋에서 married 연결)
배경색을 다른값과 연결하는 것도 가능.
ㅡ
목록형컴포넌트 바인딩 - 단일컴포넌트와 달리 바로 연결할 수 업고 리스트를 만들 수 있는 데이터셋이 있어야 함 (미리 만들어놓은 것_Inner Dataset) 끌어다 놓기 (데이터셋 설정)
ㅡ
바인딩 작업을 그다음 해햐 함. (다시 emp 끌어다 놓기)
성별 라디오박스 - 속성 innerdataset 에서 직접 목록을 설정할수도 있다, 줄겹침은 columncount, 써지는 방향은 direction
화면실습 그리드
개별 표시 형식 maskedittype string, maskeditformat AA-###
개별 표시 컴포넌트로 표시되도록 바꾸기 속성 displaytype (콤보텍스트와 콤보컨트롤)과 edittype 바꾸고, 추가적인 데이터셋, 코드컬럼과 데이터컬럼 설정!
체크박스는 displaytype과 edittype만 바꾸면 됨.
----
그리드의 Expression
위에서는 별도의 코딩 없이 데이터셋 바인딩해서 봤는데, 바인딩으로만 해결할 수 없는 사용자 요구사항 특히 그리드에서 많다.
상단에 타이틀, 바디로우에 합계 통계정보, 맨 앞에 넘버링, 전체 건수, 합계 등...
7가지 (예약어/ 메소드/ 삼항연산/ 사칙연산/ 변수참조/ 함수호출/ 변수참조)
1. 맨 앞에 넘버링 currow +1 (Row의 인덱스를 넘겨주는 예약어. 모든프로그램의 인덱스는 0부터니까)
2. 맨 하단에 합계 dataset.getRowCount()+'건' (그리드에 바인딩된 데이터셋 ds_emp을 지칭, 스코프 지정 후 그 데이터셋에 있는 메소드를 사용 )
- comp.parent.ds_emp.getRowCount()+'건' (comp는 그리드를 의미, 데이터셋에 직접 접근) 이 방법을 알고있어야 다른 데이터셋에 접근할 필요 있을 때 사용가능
2-2. 급여 합계 하단에 표시 dataset.getSum("SALARY") 이 때 해당 필드 속성이 integer여야 산출이 가능
3. 텍스트 컬럼의 값이 M이면 남자로 표시, W면 여자로 표시 - 콤보로도 가능하지만 javascript 삼항연산으로도 가능
GENDER == "M" ? "남자" : GENDER == "W"? "여자" : "기타"
4. 두개의 컬럼을 하나로 합쳐서 표현하기 EMPL_ID + "-" + FULL_NAME (컬럼이름사용_ 데이터셋의 컬럼타입을 기반으로 연산을 수행함)
지금까지 바인딩과 그리드의 익스프레스 기능으로 스크립트 코딩 없이 가능했음.
5. 변수참조가능여부
스크립트에
var var1 = "abc";
this.var2 = "123";
그리드 컴포넌트에서 이 변수를 참조할 수 있는가 comp.parent.var1 => var변수는 조회되지 않지만 comp.parent.var2 this변수는 접근가능
* 컴포넌트에서 Form에 선언한 this 변수를 접근할 때는 this.기술하지 않고 바로 변수를 작성한다.
comp.parent.this.var2(X)
6. 함수에 접근하는 방법 (col row정보를 넘겨받아서 그리드에서 해당 함수 호출하려면)
스크립트에 함수를 작성하고
this.fn_name = function(arg)
{
return arg + 'pos' ;
}
그리드에 comp.parent.fn_name(currow + 1) <<comp그리드의 상위(emp테이블)에 함수호출하면서 매개변수로 currow_1을 넘겨줌
7. 내부함수 nexacro. 으로 사용하는 함수
nexacro.round(12.1293,2)
javascript에서는 Math.round 무조건 소수점 첫 번째 자리에서 반올림하는 것과는 차이
+ 바인딩과 expression 함께 있으면 후자 우선
데이터 통신: 버튼 눌렀을 때 데이터 연동 추가 저장 삭제 구현하기 (스크립트)
저장기능은 db가 있어야 하고 , 서버에 서버 프레임워크가 구축되어야 함, 서비스가 있어야 함.
이미 만들어진 소스 서비스를 이용해서 연동만 할거임
그림설명
서버프레임워크는 별도 교육 현장에서 받고, 요즘 많이 쓰는 게 전자정부프레임워크 (사이트에 일주일무료교육)
이미 만들어진 소스
서버프레임워크는 Java프레임워크를 많이 사용함, 기타 asp, .net 프레임워크 php
서버(WAS구성된거기반)에 X-API모듈(라이브러리) 설치하면 끝나는데
서버담당자는 클라이언트와 서버간 데이터 통신 포멧(dataset(2차원배열 표 제이슨으로보통 함) layout)맞추게 도와주는 역할이(x-api)
http통신 할 때 N개의 dataset과 N개의 variable 주고받음 클->서(저장) input dataset 클<-서(조회) output dataset
넥사크로플랫폼에서 통신(서비스연동) 배울건 transaction 이라는 메서드 사용법
조회버튼
F1 transaction-Form
Sample Call: 예제 소스 복사해서 수정작업
this.transaction( "MyService01","DataSrv::samplexml.jsp","input1=Dataset02","Dataset03=output1","a=b","callbackFunction");
파라미터 6개 디폴트값 반드시 써야하는 것, 나머지는 생략 가능 / 유저서비스는 내가 만든 폼을 저장할 디렉토리 정의
type에서 JSP, ASP, SAP, bs는 서버 URL경로 설정하는 변수값 세팅할 때.
jsp 모든 자바계열설정시 .do .servelet
select_emp.jsp 앞부분 SvcURL:: 프리픽스
파라미터 구분은 띄어쓰기인데, 변수 값 자체에 공백이 있는 경우는 따로처리하지않으면 paging오류
"arg=1 arg2=" + nexacro.wrapQuote("2 3") 형태로 작성
추가삭제는 db아니고 dataset에 값넣고 삭제하기
code snippet 활용해서 저장버튼 만들기, 콜백함수 수정
콤보나 리스트박스 값도 연동해서 가져오기
이런 코드성 데이터는 폼이 로딩되는 시점에 가져옴/ 또는 Application의 Global에 보관했다가 필요시 가져와 쓸수도 있음
앞에거(폼로딩시점에 데이터가져오기) 해보면
폼 선택해서 onload이벤트를 더블클릭해서 작성
코드성 데이터 가져오는 서비스 호출 (아까 스니핏)
코드성 데이터를 가져오는 코드 완성 후 테스트용 더미 데이터를 지운다.
코드를 짤 때 this.을 사용하지 않아야 하는데?
메세지를 출력하는 방법과 디버깅(로그)을 하는 방법 2개: alert, trace Method
이건 많이 쓰기 때문에 nexacro에서 예외처리를 해놓음. this, trace는 그냥 써도 된다. 정석은 this.붙이는거
Fit to Contents 기능 적용할 컴포넌트가 Dataset에 바인딩 된 경우
반드시 써야 하는 Event와 Method 걸어야 한다.
Form 이벤트 중 onbindingvaluechanged 반드시 설정하고
script에sms this.resetScroll();
오늘 배운 내용
개발시유의사항링크
https://www.youtube.com/watch?v=PArLpGCTpxc
댓글