최근 프로젝트에서 WebSquare를 처음으로 사용하게 되었다. 프로젝트에서 사용하기 위해 WebSquare 공부를 시작하지만, 이 점을 항상 명심하려고 한다.
편하게 제공된 UI 툴을 쓰다 보면, 화면을 찍어내는 느낌과 웹 기술에서 점점 퇴보되가는 느낌을 받는다고 한다. 따라서 회사에서 UI 툴을 쓰더라도, 회사 밖에서 의식적으로 react, vue 등의 기술을 공부하는 습관을 들이자.
지금부터 유튜브 사용자 가이드, API를 통해 WebSquare의 기본적인 사용법을 적어보려고 한다.
웹스퀘어
인스웨이브사에서 만든 웹스퀘어는 웹표준을 따르는 UI/UX 개발툴로 현재 버전 5까지 나와있다. 함께 언급되는 툴로는 투비소프트의 Nexacro, xPlatform, 토마토시스템의 eXbuilder 등이 있다.
웹스퀘어 설치
웹스퀘어는 웹스퀘어5 Studio를 설치해서 실행하는 방법과 이클립스에 웹스퀘어5 Plugin을 설치하는 방법이 있다. 아래는 이클립스에서 웹스퀘어5 Plugin을 설치한 모습이다. 이후 Tomcat 서버를 시작하고 http://localhost:8080/ws5 로 접속하면 화면을 확인할 수 있다.
이클립스 우측 상단의 [Open Perspective]을 누르면 WebSquare Designer 모드와 WebSquare Developer 모드가 나타난다. Designer 모드는 퍼블리셔가, Developer 모드는 개발자가 사용하는 모드이다.
WebSquare 스튜디오
WebSquare 파일은 반드시 WebRoot 이하에서 생성해야 한다. 클라이언트 자원이기 때문이다. 예를 들어 Dynamic Web Project일 경우에는 WebContent 하위에 구성된다. 또한 web.xml 파일에서 websquare 엔진(.wq)을 처리할 수 있도록 servlet에 등록할 수 있다.
프로젝트 파일 생성
WebContent에서 마우스 우클릭하여 'WebSquare Page' 파일을 선택한다. 이 파일은 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>
|
아래는 WebSquare XML를 도식화한 구조이다.
팁
- Workspace 탭 분리
- [Window] - [New Editor]에서 Script 탭과 Source 탭만 따로 분리할 수 있다.
- 분리되어 수정한 내용은 Ctrl+F5를 통해 Design 탭에 반영할 수 있다.
- 또한 WebSquare5 Studio 화면을 추가할 수 있다. 듀얼 모니터 환경에서 유용한 기능이다.
'Frontend > WebSquare' 카테고리의 다른 글
| WebSquare5 유튜브 동영상 출력하기 (4) | 2021.03.25 |
|---|