개선 사항

다양한 공통 개발용 리소스

즉시 사용 가능한 완성도 높은 리소스

다양한 공통 개발 리소스를 썸네일 이미지 형태로 제공합니다. 개발자들은 직관적으로 템플릿을 확인하고 코딩 과정 없이 마우스 클릭만으로 해당 리소스를 손쉽게 사용할 수 있습니다.

(1) 페이지 템플릿 (화면 파일 생성 시 선택 가능)

(2) 레이아웃 템플릿 (화면 파일 생성 시 선택 가능)

(3) 스니핏 (Design System에서 썸네일 이미지를 통해 제공)

개발 프로세스에 따른 구성

SP5는 아래의 각 개발 단계 별로 위저드와 매니저, 에디터 등을 제공하며, 각 단계에 적합한 공통 리소스를 제공합니다. 개발 프로세스를 준수하여 디자인 일관성을 유지할 수 있고 공통 리소스를 최대한 재사용할 수 있습니다.

컴포넌트화

모듈화된 개발이 가능

SP5에서 개발하는 화면 파일은 컴포넌트 형태로 사용할 수 있습니다. 특정 화면을 UDC나 프로젝트 컴포넌트로 등록하여 사용할 경우, 재사용이 가능합니다. 등록한 UDC를 수정할 경우, 변경 사항이 일괄 반영되어 개발 생산성과 유지보수 효율성을 뛰어납니다.

(1) API 추가

(2) API 문서 생성

(3) Palette 등록

(4) 스크립트 자동 완성 지원

속도 개선

웹 환경에 최적화된 코드 생성

웹스퀘어는 W-Pack 기능을 제공하여 화면 파일(XML)을 JavaScript 파일로 변환합니다. 웹스퀘어 엔진은 브라우저에 환경에 최적화된 JavaScript를 이용하여 화면을 더욱 빨리 그릴 수 있습니다.

(1) 파일 크기 감소

(2) 로딩 시간 감소

(3) 메모리 사용량 감소

개발 편의성 개선

직관적인 리소스 표시

Design System은 공통 개발에 사용하는 스니핏을 포함한 디자인 관련 리소스를 썸네일 형태로 스튜디오에 표시합니다. 개발자는 손쉽게 디자인을 확인하고 원하는 디자인을 화면에 추가하여 사용할 수 있습니다.

편리한 리소스 관리

공통 개발에 사용하는 각종 샘플 및 템플릿 등의 리소스를 쉽게 사용하고 관리할 수 있습니다. 리소스는 종류 별로 분류되어 서로 다른 폴더에 저장되어 있으며, 개발자는 해당 폴더를 직접 관리할 수 있습니다. 또한 각종 리소스는 화면 개발 과정에서 반영되어 썸네일 이미지 형태로 제공되며, 개발자는 각 개발 단계 별로 가용한 리소스를 편리하게 선택하여 이용할 수 있습니다.

(1) 페이지 템플릿

(2) 레이아웃 템플릿

(3) 내장 컴포넌트 템플릿

(4) 스니핏

(5) UDC

(6) 레이아웃

(7) 디자인 시스템

편리한 설정

서버 및 클라이언트 환경을 모두 스튜디오 상에서 설정할 수 있는 GUI를 제공합니다. 설정 항목에 대한 지식 없이도 에디터가 제공하는 설명을 참고하여 직접 편집할 수 있습니다.

(1) client.config.xml

(2) server.config.xml

최신 에디터 제공

ES6, ES2020 등 최신 문법을 지원하는 Monaco Editor기반의 웹 JavaScript 에디터를 제공합니다. 화면 파일을 UDC 등의 컴포넌트 등으로 등록해서 사용할 경우, 새로 추가한 컴포넌트의 API에 대한 자동 완성 기능을 지원합니다.

신규 기능

페이지 컴포넌트

SP5에서 개발하는 화면 파일은 컴포넌트 형태로 사용될 수 있고, 기존 SP4 페이지 파일을 모든 기능을 지원합니다. 페이지를 UDC로 등록하여 공통 컴포넌트로 사용할 경우, UDC의 API에 대한 주석을 기반으로 UDC 설명 문서를 작성할 수 있으며, Script 에디터에서 UDC의 API에 대한 자동 완성 기능을 사용할 수 있습니다.

모든 페이지는 컴포넌트로 등록 가능하며, 컴포넌트로 등록된 페이지는 간단한 클릭만으로 다른 화면 개발에서 사용할 수 있습니다.

리소스 관리

프로젝트에서 사용하는 다양한 리소스를 폴더 단위로 관리할 수 있습니다. 프로젝트의 Configure WebSquare Project 혹은 Properties 메뉴를 선택한 후 WebSquare – Resource Folder 항목을 선택하여 흩어진 리소스 파일 위치를 한눈에 확인하고 관리할 수 있습니다.

Design System

Design System은 개발자와 퍼플리셔 간의 유기적인 협업을 위한 기능으로, 디자인 관련 리소스를 썸네일 이미지로 표시합니다. 개발자는 직관적으로 디자인을 확인할 수 있고 클릭만으로 원하는 디자인 리소스를 화면 파일에 복사할 수 있습니다.

설정 에디터

웹스퀘어 프로젝트를 생성하면, 클라이언트 환경 및 서버 환경을 설정할 수 있는 XML 파일이 /WebSquare Configure/ 폴더 아래에 생성됩니다.

클라이언트 환경

client.config.xml (클라이언트 환경)

브라우저 상의 UI 화면 출력과 관련된 내용을 설정할 수 있습니다.

서버 환경

server.config.xml (서버 환경)

WebSquare5 Engine의 동작과 관련된 내용을 설정할 수 있습니다.

(1) WebSquare 엔진 모듈 처리 설정

(2) Excel, CSV 업로드/다운로드 설정

(3) Framework 연계관련 adaptor 설정

(4) 다국어 처리 설정

(5) WebSquare Hybrid 관련 설정

W-Pack

웹스퀘어5는 화면 소스를 JavaScript로 빌드할 수 있는 W-Pack을 제공합니다. 스튜디오에서 개발한 화면 파일은 XML 형식으로 생성되며, W-Pack은 웹스퀘어 화면 파일(XML)을 JavaScript 파일로 번들링합니다. 웹스퀘어 엔진은 브라우저 환경에 최적화된 JavaScript 파일을 이용하여 화면을 그릴 수 있습니다.

W-Pack이 제공하는 이점은 다음과 같습니다.

• 압축 및 최소화를 통한 파일 크기 감소

• 난독화를 통환 코드 보안성 개선

• XML과 비교하여 로딩 시간 및 메모리 사용량 개선

• 페이지 로딩 속도 개선

SP4 Vs. SP5

비교표

컴포넌트 별 변경 사항

GridView

sortType

"numberFirst" (SP5 기본 값) : GridView 컬럼 혹은 바인딩된 DataList 컬럼의 dataType이 "number" 또는 "bigDecimal"인 경우 number 기준으로 정렬을 수행.

"dataType" (SP4 기본 값): GridView와 바인딩된 DataList 컬럼의 dataType을 기준으로 정렬을 수행. GridView 컬럼의 dataType을 사용하지 않음.

"number" : 항상 number 기준으로 정렬

"text" : 항상 text 기준으로 정렬

"bigDecimal" : number 설정과 동일

TabControl

addTab()

SP5에서 addTab() 함수는 아래와 같이 Promise.then 비동기 방식으로 동작합니다.

$r_title(SP5에서의 addTab() (비동기))
scwin.trigger1_onclick = function(e) {
    scwin.tabIdx++;
    var menuId = "tabInx" + scwin.tabIdx;
    var tabOptions = {
        label: "메인탭" + scwin.tabIdx,
        openAction: "new"
    };
    var contentsOptions = {
        frameMode: "wframePreload",
        wframe: true,
        scope: true,
        src: "test_child" + scwin.tabIdx + ".xml"
    };
   Promise.resolve().then(function() {
     return tab1.addTab(menuId, tabOptions, contentsOptions);
   }).then(function(tabID) {
     var tabIndex = tab1.getTabIndex(tabID);
     return tab1.setSelectedTabIndex(tabIndex);
  });
};

$r_title(SP4에서의 addTab() (동기))
scwin.trigger1_onclick = function(e) {
    scwin.tabIdx++;
    var menuId = "tabInx" + scwin.tabIdx;
    var tabOptions = {
        label: "메인탭" + scwin.tabIdx,
        openAction: "new"
    };
    var contentsOptions = {
        frameMode: "wframePreload",
        wframe: true,
        scope: true,
        src: "test_child" + scwin.tabIdx + ".xml"
    };
    var tabID = tab1.addTab(menuId, tabOptions, contentsOptions);
    var tabIndex = tab1.getTabIndex(tabID);
    tab1.setSelectedTabIndex(tabIndex);
};

WFrame

WindowContainer