본문으로 바로가기

Xplatform

category Frontend/X-Internet 2020. 6. 3. 21:09
    반응형

    레퍼런스

    UX Studio에서 F1를 누르면 레퍼런스가 나온다. 참고해서 개발하도록 하자.

    서버-클라이언트 구조

    1. 인터넷 브라우저랑 같은 원리로 동작한다.
    2. XML을 통해서 오브젝트를 구성하고 자바스크립트를 통해서 오브젝트를 조작한다.
    3. 웹서버에 설치파일에 접근하면 플러그인으로 설치가 진행된다.
    4. 플로그인으로 설치된 프로그램 화면으로 xplatform 데이터를 가져와 보여준다.
    5. 화면은 MVVVM 패턴으로 화면에서 서버와 통신하여 데이터를 가져온다.

    MVVM 패턴

    웹 서버를 통해서 화면 정보(xfdl)를 클라이언트로 전송한다. 화면에서 서버로 데이터를 요청하여 화면에 보여준다.

    서블릿 : XplatformServlet

    Xplatform 화면에서 전송된 데이터를 비즈니스 로직으로 전달하는 서블릿 클래스로 Xplatform 라이브러리에서 제공한다.(Xplatform Dataset)

    프로젝트 구조

    xui.xadl 실행 → ADL 로딩 → CF_Loading → fm_load → fm_loading(메뉴정보로딩) → top, left, bottom 로딩

    1. ADL 프로그램 실행 단위
    2. Frame을 통해서 레이아웃을 배치
    3. TypeDefinition을 통해서 컴포넌트, 서비스(실제 소스 위치)를 가져온다.
    4. Frame에 서비스를 호출하여 화면을 보여준다.
    5. GlobalVariables를 통해서 전역변수와 전역 Dataset을 관리
    6. 공통프레임과 공통라이브러리를 따로 관리
    7. 탭, DIV 를 사용해서 다양한 레이아웃 구성 및 화면 공유가 가능하다.
    8. Javascript 로직은 크게 Transaction, Logical, Event Handler 구분할 수 있다.

    서비스

    TypeDefinition을 통해서 Service를 생성하고 다음과 같이 접근한다.

    "educ0062::listMyHistoryTab.xfdl"

    언어특성

    1. 자바스크립트와 달리 id로 직접 element접근이 가능하다.
    2. 자바스크립와 비슷한 element 조작 함수를 제공한다.

    디버깅, 로그

    1. 로그 파일 위치

      • C:\Users\User\AppData\LocalLow\TOBESOFT\XPlatform[Version]\XPLATFORM_[URL].log
    2. 로그 저장
      alert로 데이터 확인이 가능하지만 trace를 통해서 로그를 저장할 수 있다.

      trace(dataSet.saveXML());

    바인딩

    이벤트 바인딩

    이벤트별 호출할 함수를 설정한다.

    • Properties -> Event Info

    데이터셋 바인딩

    • 클라이언트는 데이터셋을 가지고 있다.
    • 데이터셋과 객체 바인딩을 통해서 데이터 동기화를 진행한다.
    • Properties -> Bind Info 창에서 프로퍼티별로 데이터셋 바인딩을 설정할 수 있다.

    UI 툴

    • debug
      • 프로젝트 디버깅 F5
      • 현재 폼 디버깅 F6
      • break point F9
      • step out F10
      • step into f11

    Grid

    expr 넘버링

    각 로우의 번호를 순차적으로 카운트해서 보여준다.

    expr:currow+1

    Grid조회 시 컬럼값이 여러줄 일 경우 height 자동 조정하기

    Grid.property.autosizingtype = row
    Grid.property.cellsizingtype = row
    Grid.property.extendsizetype = row

    style과 테마

    style은 css를 의미하며 테마는 css와 이미지가 합쳐져 있는 것을 의미한다. Xplatform UI툴에서 style과 테마를 수정하기 위해서는 ADL을 클릭하여 수정하면 된다.

    div

    Div 컴포넌트를 사용해서 다른 xfdl을 불러와서 사용한다. 이렇게하면 소스 복잡도를 줄일 수 있다.

    라이브러리

    1. Excel to Grid
      서버 업로드없이 바로 그리드에 엑셀정보를 추가할 수 있다.

    2. Grid to Excel
      그리드 정보를 엑셀로 다운로드할 수 있다.

    주요기능

    filter, copy

    데이터셋 필터링 후 임시 dataset에 데이터 복사

    datasetA.filter("empNo=='A'"); //filter 
    var temp = new Dataset();
    
    temp.copyData(datasetA, true) //copy
    

    라이센스

    • http://support.tobesoft.co.kr/ -> Downloads -> 개발용라이센스 -> XPLATFORM
    • 라이브러리에 서버 라이센스
    • xfdl에 클라이언트 라이센스
    반응형