넥사크로 2 - 컴퍼넌트

송용준·2023년 4월 11일
넥사크로

컴포넌트(ui 도구) 기능들

1. 단일 컴포넌트

  • Static : 라인 만드는 칸
  • Edit : 한 줄의 문자열 입력
  • MaskEdit : edit를 원하는 모양대로 format하여 입력
  • TextArea : 여러 줄 문자열 입력

2. 목록형 컴포넌트

  • Combo : 여러 후보 중 선택, 후보 노출x
  • ListBox : 여러 후보 중 선택, 후보 노출O
  • Radio : 점으로 후보 선택, 후보 노출O

3. 컨테이너 컴포넌트

  • div : 한 화면에 여러 부분을 구성

셋팅

  • 프로젝트 불러 오기
    eclipse열기 -> 우클릭 -> import -> svn -> Project from SVN -> 신규시 url, authentication 맞추기 -> server 생성하고 port 주의하여 만들기

  • 넥사크로 svn 연결해서 어플 실행
    eclipse 열기 -> 프로젝트 우클릭 -> team -> Synchronize Repository 로 동기화 -> 서버연결 -> 이클립스 ui-nxui-nxui.xprj 로 넥사크로 연결 -> launch(ctril+f5) 로 어플리케이션 연결

파일 위치

  • 어플 실행 파일 : ui -> nxui -> nxui.xprj
  • 이클립스 쿼리 위치 : WebContent -> WEB-INF -> fsp -> sqlmap

업데이트 / 커밋

  • 업데이트시 synchronize 하고 refresh

  • 커밋시 커밋한 부분 간단하게 설명 첨부해서 보내기

  • 빨간 동그라미 왼쪽에 +,- 네모상자 누르면 업데이트, 커밋부분만 따로 따로 확인가능(Expand All, Collapse All 버튼)

화면

공통 클릭 이벤트 vs 마스터 vs 팝업 vs 콤보 vs 디테일 vs 그리드

공통 클릭 이벤트

마스터 2

팝업

콤보

디테일

그리드

상세 페이지 만들기

우선 상세페이지 같은 경우 이미 만들어져 있는 페이지에 돋보기 버튼을 클릭하거나 상세버튼 tab 이동으로 상세하게 값을 보여줄 때 사용한다. 새로운 폼에 화면을 만들고 기존 화면에서 상세페이지 화면을 불러오는 방식으로 사용한다.

순서

  1. 해당 부서에 P10, P20.. 추가해서 상세페이지 만들기
  2. 이전에 만들어 놓은 그리드 폼 가져오기
  3. 메인 스크립트에서 팝업창에 맞는 DS 가져와서 Invisible Object에 붙여넣기
  4. 기존의 사내 어플리케이션 보고 Edit(기본), Calendar(날짜형), MaskEdit(합계, 액수등) 결정하고 id 만들고 bindable에 Action에 value값 채워넣기
  5. 화면에 상세페이지를 불러올 클릭이벤트 넣어주기

크기수정

++ 기존 칼럼 크기과 위치대로 수정하고 싶으면 쉬프트하고 수정할 컬럼 누르고 따라 만들 칼럼 선택 후 컴퍼넌트 Design에서 크기, 칸등을 align, space, size를 이용하면 된다.

maskEdit (1)

액수 1000단위로 값 보여주고 값 없을시 0 : MaskEdit -> bindable 값 가져오기 -> Action에 format에 ###.##0

이게

요롷게

++ 받아올 번호 원하는 만큼으로 끊기 (maskEdit)

이게

요롷게

format : @@@@@@-@@@@@@@ (123456-789101 이런식으로 됨)
type : string

maskEdit (2)

숫자와 String을 같이 쓰고 싶다. 예를 들어 2222222을 2,222,222KM 요롷게

그러면 뭘 바꿔줘야 되나면

Action에 format을 #,#으로 postfixtext를 KM으로 바꾸면 된다.

( @ : 모든 아스키문자 (한글X) )
( # : 0~9 사이 10진수 숫자 )
++ # 뒤에 0을 붙이면 값이 없을때 0이 나옴

Properties에서 자주 사용하는 것들

  1. Property
    cssclass - css에 적용될 함수를 공통함수(class)로 만들어 놓는다.
    enable - edit,mask등 사용가능 여부
    enableevent - 이벤트 발생 시킬지 여부
    visible - 화면에 표시되게 할지
    readonly - 읽기만 가능
    format - 데이터 모양 바꾸기
    id - 컴퍼넌트 타입 맞춰서 만들기
    wordWrap - textArea일때 칸 넘어갈시 자동 줄바꿈
    binding - 공통코드 쓸때
    buttonsize - 캘린더나 콤보 버튼 사이즈 조절, 버튼 없어지게 할 수도 있음
  2. Event
    onitemchanged - value값이 바뀌었을때
    oncellclick - cell 클릭했을때
    onclick - 클릭 했을때
  3. Bindable
    value - ds에서 값 가져올 때

url 값 가져오기 or 웹 에디터 가져오기

url 불러오고 싶다면 컴포넌트에 있는 WebBrowser로 창을 만들고

Property에 있는 Misc에 url에 가고 싶은 url 넣으면 끝이지만

미리 공통함수로 만들어져 있는 웹 에디터 페이지에 접근하고 싶다면 

this.div_MasterInput.form.tab_Master.tpg_02.form.web_ContNm.set_url(this.gfn_GetServerUrl("View"));//웹에디터 Url 설정

이 코드의 위치는 초기 함수 설정부분에 넣어준다.
당연히 gfn_GetServerUrl은 미리 정해놓은 공통함수

this.div_MasterInput.form.tab_Master.tpg_02.form.web_ContNm.set_url(["https://www.naver.com/"]);//웹에디터 Url 설정

이런식으로 네이버에도 보낼 수 있다. 보낼 때 대괄호( [ ] ) 넣어줘야 된다. 위에 Misc에 url에 넣는 것과 동일한 결과가 나온다.

콤보 드롭다운 버튼 없애기


이걸

이렇게 드롭다운 버튼 없앨라면

해당 콤보폼 누르고 Properties에 Property에 Apperance에 buttonsize를 0으로 바꾸기

능동적 콤보 / 수동적 콤보

콤보는 능동적 콤보가 있고 수동적 콤보가 있다.
능동적 콤보는 콤보값에 따라 데이터 로직이 바뀌는 경우로 쿼리를 이용해서 가져와야 하고
수동적 콤보는 데이터셋으로 가져온 값에 공통코드 콤보에 따라 값을 바꿔주면 되는 경우로 스크립트에 초기설정만 해주면 된다.
수동적,능동적 콤보를 둘 다 사용해야 하는 칼럼이 존재하는 경우도 있다.

Grid에 body VS right, left, head, summary

Grid에 body부분은 스크롤로 이동이 가능하지만 나머지(right,left,head...) 는 화면에 고정

TextArea로 자동 줄 바꾸기

Properties에 Style에 wordWrap을 char로 바꾸면 Cell의 너비를 넘어갔을 때 글자 단위로 자동 줄 바꿈. english는 Cell의 넘어갔을 때 단어 단위로 자동 줄 바꿈

cssclass

Properties에 information에 cssclass : 미리 지정해 놓은 class를 사용 하여 css를 컨트롤 할 수 있다. 예를 들어 cssclass에 "essential"을 넣으면 필수로 값을 넣어 주어야 하고 예외처리 따로 만들어 두어 벨리데이션 체크 기능을 만들 수 있다. 또 expr써서 계산식 만들수도 있다. 또 그림도 넣어줄 수 있다.

그리드안에 돋보기(상세보기) 만들기

Grid Contenets Editor을 연후 expandshow를 hide에서 show로 바꿔주면

이 돋보기 모양이 나온다.

돋보기는 이런식으로 디자인 하며 내용을 상세하게 보고 싶을 때 주로 사용한다.

this.div_MasterView_tab_Master_tpg_01_grd_Master10_oncellclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{	
if (e.col == 23) 
	{
      if (!this.gfn_IsNull(this.ds_Master10.getColumn(this.ds_Master10.rowposition, "REMK_NM"))) 
      {
        var sPopupId = "B_REMK_01"; //팝업ID - 비고상세
        var sTitle = "인사발령 비고"; //팝업 타이틀
        var oArg = {  Remk:this.ds_Master10.getColumn(this.ds_Master10.rowposition, "REMK_NM")};//Argument처리
        this.gfn_RemkPop(sPopupId, sTitle, oArg);		
      }		
	}	
};

추가적으로 script안에 이벤트 함수 코드를 넣어주어야 한다.
e.col으로 비고상세 칼럼위치를 맞춰주고 각 경로도 맞춰줘야 한다.
gfn_RemkPop는 팝업 불러오는 공통함수이다.

피드백 및 조언 및 훈수 대환영입니다 !!

profile
송용준
용용
이전 포스트

SI it회사(넥사크로 사용) 첫 입사

다음 포스트

SNS 포토그램 만들기 (셋팅 + 어노테이션 정리)

0개의 댓글