[WebSquare 5] 웹스퀘어란? & 웹스퀘어 스튜디오 사용법

Notice

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

관리 메뉴

여씨의 개발이야기

[WebSquare 5] 웹스퀘어란? & 웹스퀘어 스튜디오 사용법 본문

🐾 Programming Lang/🌃 WebSquare SP5

[WebSquare 5] 웹스퀘어란? & 웹스퀘어 스튜디오 사용법

yeossi 2024. 10. 29. 16:04

드디어 정리합니다,,, 웹스퀘어에 대해서!

곧 들어갈 프로젝트에서 기본적으로 사용중인 UI 툴이 웹스퀘어란 소식을 듣고 구글링을 해보았다.

이렇게 연관검색어만 봐도 웹스퀘어는 악명높기로 유명한 UI 툴인 것 같다...
그렇다고 내가 이걸 안 쓸 수 있냐? 절대 Nope... 회사에서 쓰라면 써야지예...

그래서 유투브 강의 좀 들으며 공부를 해봤는데 이제야 블로그에 조금씩 찌끄려보려한다.

나같은 분들이 많을 것 같거든요,,,🥲

일단 웹스퀘어란?

웹스퀘어5는 글로벌 웹 표준 HTML5 기술 적용과 파워풀한 성능, 개발 생산성과 편의성을 향상시킨 차세대 UI 플랫폼입니다. 쉽고 빠른 코딩을 위해 80여종의 다양한 UI컴포넌트를 제공하고있으며, 복잡한 업무 시스템 화면 개발에 필요한 재사용 가능한 빌트인(built-in) UI컴포넌트를 다양하게 제공하여 사용자 편의성을 고려한 UX 를 제공합니다.
(출처: https://wtech.inswave.kr/websquare/websquare.html?w2xPath=/cm/xml/index.xml&inPath=/ui/pub/webSquare5.xml )

뭔 복잡스러운 설명을 하고 있는데 결국엔 그냥 80여개의 컴포넌트를 제공하고 있는 UI툴이란 소리...

웹스퀘어 개발은 <스튜디오>에서 가능하다. (또는 이클립스에서 plugin을 이용해 개발할 수도 있다. 참고로 jdk 1.8 이상 돌아간다고 합니다.)

WebSquare5는 엔진과 스튜디오(개발도구)로 구성됩니다. 스튜디오는 웹스퀘어 화면 파일을 개발할 수 있는 환경을 제공하고, 엔진은 웹스퀘어 화면 파일을 브라우저에 표시합니다. 웹스퀘어 스튜디오는 WYSIWYG 방식의 통합 개발 도구로, 개발자는 컴포넌트 그리기, 스크립트 추가, 화면 확인, 디버깅을 한번에 수행할 수 있습니다.
(출처 : https://docs1.inswave.com/sp5_user_guide/dde1408893e6e120 )

라고 하네요,,, 스튜디오의 UI는 뭔가 예전에 잠깐 공부했던 C# 툴 Dev Express가 생각나게 한다.

이제 이 스튜디오의 기본 구성과 사용법에 대해 알아보겠다.

제일 먼저, 웹스퀘어 프로젝트에서 파일을 생성할 때에는 반드시 WebRoot 이하에서 생성해야 한다. 클라이언트 자원이기 때문이다. 예로 인스웨이브에서 제공받은 예제 프로젝트에서는 WebContent 하위에 구성해야 한다.

파일은 기본적으로 xml 파일을 생성하여 사용할 수 있으며, 파일을 실행하면 5개의 workspace(Design, Script, DataCollection, Submission, Source) 영역을 이용해 개발할 수 있다.

Design 탭
컴포넌트를 선택하여 배치할 수 있다. (브라우저 실행하려면 F7를 누른다) 만약 시스템 브라우저 외에 다른 브라우저를 등록하려면, 'Excute external program'을 클릭하여 브라우저를 등록할 수 있다. 컴포넌트는 속성(P), 이벤트(E), API로 제어된다. 컴포넌트에 id를 부여하면, 해당 id가 페이지 내에서 전역 변수로 자동으로 등록되므로, Script 탭에서 사용 가능하다.

Script 탭
JavaScript 로직을 작성한다. 파일을 생성하면 아래의 이벤트가 자동으로 등록된다.

onPageload : 페이지 로딩 후 실행(모든 컴포넌트를 그려준 이후에 반영됨)
onPageunload : 페이지 종료 후 실행

참고로 WebSquare는 기본 namespace 기반의 코딩을 하며, 디폴트로 사용하는 객체명은 scwin이다. 페이지를 닫을 때 해당 자원을 자동으로 삭제하는 기능을 이용할 수 있다고 한다.

DataCollection 탭
data 객체를 생성하고 관리한다.

DataMap : 단건 data 관리
DataList : 다건 data 관리
LinkedDataList : 생성된 dataList에서 별도의 조건을 주어 filter된 data를 확인한다(뷰어용으로 제한적으로 사용됨)
AlliasDataMap : Page Coding에서 자식에서 부모의 dataMap 객체를 참조할 때 사용
AlliasDataList : Page Coding에서 자식에서 부모의 dataList 객체를 참조할 때 사용

Submission 탭
웹스퀘어의 통신 객체를 생성 및 관리한다. 웹스퀘어에서는 <form>을 이용한 전송 방식으로 통신하지 않고, Submission 객체를 생성하여 통신한다.

Source 탭
각 탭에서 정의한 내용을 xml 파일로 확인할 수 있다. 직접 코딩도 가능하지만, 실수 방지를 위해 코딩은 Script탭에서 하는 것을 권장한다. 아래는 WebSquare XML 파일의 기본 구조이다.

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ev="http://www.w3.org/2001/xml-events"
    xmlns:w2="http://www.inswave.com/websquare" 
 xmlns:xf="http://www.w3.org/2002/xforms">
    <head>
        <w2:type>DEFAULT</w2:type>
        <w2:buildDate />
        <xf:model>
            <xf:instance>
                <data xmlns="" />
            </xf:instance>
            <w2:dataCollection baseNode="map"></w2:dataCollection>
            <w2:workflowCollection></w2:workflowCollection>
        </xf:model>
        <script type="javascript"><![CDATA[ ]]></script>
        <style type="text/css"><![CDATA[ ]]></style>
    </head>
    <body></body>
</html>

웹스퀘어로 개발 된 화면 파일(이하 화면파일)은 단독으로 브라우저에서 실행할 수 없다. 화면 파일은 웹스퀘어 JavaScript 엔진(이하 웹스퀘어 엔진)를 통해 실시간 해석되어 브라우저에 표현되는데, 웹스퀘어 엔진은 서버에 배포된 websquare.html 파일을 통해 호출되고 엔진 로딩이 끝나면 실행된다.

즉, 모든 웹스퀘어 화면 파일은 websquare.html을 통해 실행된다. 일반적으로 화면 파일의 정보는 Get방식의 파라메터를 통해 웹스퀘어 엔진에 전달되는 방식이다.

다음은 웹스퀘어 화면을 브라우저에서 호출하는 URL의 예시와 URL을 분리하여 설명한 표이다.

예시 ) http://domain.com/websquare/websquare.html?w2xPath=/MA/MA01M01.xml