v0.3.0

새 기능

• 팔레트(Design 왼쪽)
  • 설치본 정의의 분류·컴포넌트 아이콘·검색 목록
  • 클릭하면 삽입 위치(안쪽 맨 앞·맨 뒤·앞·뒤)를 골라 넣음. 마지막 위치 기억
  • 캔버스로 끌어다 놓기: 그룹 중앙은 안쪽 맨 뒤, 가장자리는 앞·뒤. 놓을 위치 표시
  • 즐겨찾기: 행 오른쪽 별로 등록·해제, 맨 위에 접기 없이 표시, ⠿ 손잡이로 순서 변경(위·아래 방향키 지원). 목록·순서는 모든 화면에 공유
• 패널 접기: 탭 줄 왼쪽 버튼으로 팔레트, 맨 오른쪽 버튼으로 Property/Event·Outline/Data 패널을 접고 펼침(너비·선택 탭 유지)
• Design에서 끌어 옮기기: 배치된 컴포넌트를 끌어 순서·부모 그룹 변경(그룹 중앙은 안쪽 맨 뒤, 가장자리는 앞·뒤). 그리드는 통째로, 여러 개 선택도 가능. Outline과 같은 XML 부분 편집·Undo
• 톱니바퀴 메뉴(탭 줄 오른쪽): 코드 편집기 테마 변경, 테마 파일 가져오기, 테마 색 덮어쓰기, SQL 방언, 도구 경로 설정, 확장 설정 모두 보기
• 코드 편집기 테마(Script·Source·연결 탭 모두)
  • 테마 색 덮어쓰기 팝업: 편집기 색 7개·문법 색 14개를 색칸·색 코드·기울임/굵게/밑줄로 바꾸고 바로 미리 보기. 지금 테마만 또는 모든 테마에 저장
  • 설정 codeThemeCustomizations에 직접 적어도 됨(전체 공통 또는 "[테마 이름]"별)
  • VS Code 테마 .json 가져오기(주석·include 지원), 가져온 테마는 목록에서 삭제 가능
  • 기본 테마 "IntelliJ Dark"·"IntelliJ Light" 추가(IntelliJ New UI 느낌의 근사치)
• 데이터 id 바꾸면 바인딩도 같이: dataList·dataMap id나 그 column·key id를 바꾸면(트리 F2·Property·DataList/DataMap 팝업) data: 바인딩, 바인딩된 그리드 본문 열, 선택 항목(itemset)의 label·value, Submission·linkedDataList 참조도 함께 바뀜. Ctrl+Z 한 번에 되돌림. Script 코드 안 참조는 그대로
• 중복 id 막기: F2·Property·그리드 칸 편집에서 이미 쓰는 id로 바꾸면 막고 알림. 그리드 header·body 등과 데이터 컬럼은 그 안에서만 검사
• 화면 점검: Outline·Data 트리에 경고 아이콘(마우스를 올리면 이유, 접힌 줄은 안쪽 문제를 흐리게)
  • 겹치는 id
  • 화면에 있는 데이터의 없는 컬럼을 가리키는 바인딩
  • Script에 없는 이벤트 함수(scwin.함수)
  • 화면에 없는 데이터(스크립트에서 만드는 공통 코드 등)는 경고하지 않음
• 그리드 칸 편집 상자 새 디자인: 칸 종류·id 표시, 크기·속성 묶음(id·class, inputType·dataType, maxLength·maxByteLength 순), 값 있는 속성 강조, 취소·적용 버튼과 바꾼 속성 수
• 편집기 알림: 바인딩을 같이 바꿨거나 id가 겹쳐 막은 일을 편집기 오른쪽 아래에 5초 표시(VS Code 알림을 꺼 둬도 보임)
• 연결 실패 이유 표시: 이미 다른 탭에 연결된 파일 등 연결하지 못한 이유를 경로 입력 화면에도 표시

고친 것

• Java 등 언어 확장 자동완성에서 '.' 뒤에 메서드를 고르면 커서가 '.' 뒤에 남던 것 → 넣은 글자 끝으로
• 현재 줄 색이 불투명한 테마(IntelliJ Dark 등)에서 단어를 더블클릭해도 선택이 안 보이던 것
• 코드 편집기 검색창(Ctrl+F)이 고른 테마 색을 따르지 않던 것
• Java 어노테이션(@Override 등)이 변수 색으로 칠해지던 것
• 넓은 그리드 칸을 더블클릭하면 편집 상자가 칸 너비만큼 커지던 것(최대 480px)
• 코드 편집기 우클릭의 "코드 편집기 테마…" 항목 제거(톱니바퀴 메뉴로 이동, 명령 팔레트 명령은 유지)
• 끌기 미리보기: 컴포넌트 전체 반투명 잔상 대신 작은 아이콘·이름

v0.2.0

새 기능

• 더블클릭 편집 확대(캔버스·Outline 모두)
  • 선택 항목 팝업: checkcombobox(selectbox와 같음), multiselect(All·Choose Option 없음) 추가
  • multiupload 파라미터 팝업(Name·Value 표, 자식 <param>으로 저장)
  • output 글자 바로 편집
  • 그리드 칸(헤더·본문·footer·subTotal): 문구 아래에 width·height·inputType·dataType·id·class·maxLength 등 자주 쓰는 속성 입력
• 그리기: 자리 표시로만 보이던 checkcombobox·multiselect·spinner·searchbox·output·calendar·multiupload를 화면에 그림
• 셀 병합: 그리드 컬럼·group th/td를 우클릭 "병합" 또는 Ctrl+M (붙은 직사각형만)
• 화면 XML 사이 복사·붙여넣기: a.xml에서 복사한 컴포넌트를 b.xml에 붙여넣기
• Outline·Data 트리 F2: id 바꾸기, id가 없는 노드는 새로 붙이기
• Data 트리 끌어 옮기기: Submission·DataList 등 순서 변경
• 탭
  • Design·Script·Source 탭 줄을 위·아래로 옮기기(기본 위)
  • Property/Event·Outline/Data 탭 끌어서 순서 변경
• 연결 탭(Controller·Service 등)
  • VS Code 문제(Java 언어 서버 등)를 그대로 오류 밑줄로 표시
  • 자동완성 설명을 마크다운으로 표시(코드 블록 등)

개선

• 기본 입력 컴포넌트(input·select·textarea·checkbox·radio) 디자인 통일, VS Code 테마 색 사용
• 팝업 디자인 정리: Submission·DataList·DataMap·선택 항목 팝업을 섹션으로 나누고 라벨을 입력칸 위에
• 선택 항목 팝업
  • 행을 끌어서 순서 변경
  • 데이터 바인딩(itemset)의 NodeSet·Label·Value에 직접 입력 가능(화면에서 동적으로 만드는 dataList)
• Property에서 고를 값이 있는 칸도 직접 입력 가능
• 탭 버튼 디자인(둥근 배경), 저장 안 한 표시 점 위치, Ctrl+F 찾기 창을 위로
• 캔버스 선택 정보 칩 크기 키움
• 자동완성 팝업을 Property/Event 패널 위로
• 연결 탭 자동완성 목록을 먼저 보여주고 자동 import·설명은 뒤따라 받음(Java 첫 표시가 빨라짐)
• Script 포맷을 VS Code에 설정한 JS 포매터로(확장 크기 약 4MB 감소)
• 내부 정리(안 쓰는 코드 제거, 큰 함수 분리)

버그 수정

• 선택 항목 팝업에서 All Option·Choose Option 체크 해제, Span Direction none, ref 비우기가 저장되지 않던 문제
• 연결 탭 Java 포맷이 "포매터 준비 중" 알림만 뜨고 적용되지 않던 문제(프로젝트 불러오기가 오래 걸리는 경우)
• 연결 탭을 열 때 오류 표시가 안 뜨던 문제
• 붙여넣기로 xf:model 등 화면 구조가 중복되던 문제
• 글자 편집 중 편집 상자 위로 컴포넌트 테두리가 보이던 문제
• Git 변경 표시 띠가 줄보다 위에 그려지던 문제

---

설치: 아래 websquare5-editor-0.2.0.vsix를 받아 code --install-extension websquare5-editor-0.2.0.vsix

이 확장은 Inswave Systems의 공식 제품이 아닌 비공식 도구이며, 사용 권한이 있는 WebSquare5 환경이 있어야 동작합니다. WebSquare 엔진·스킨·컴포넌트 정의 등 Inswave의 파일은 포함하지 않습니다.

v0.1.0

첫 공개 버전입니다. VS Code에서 WebSquare5 에디터를 사용할 수 있게 해주는 비공식 확장입니다.

포함된 기능

• 화면 XML 디자이너 (Design · Script · Source, Property/Event, Outline/Data, 팔레트)
• 연결 파일 탭 (Controller · Service · Mapper · MyBatis)
• 저장 시 wpack 변환

설치

code --install-extension websquare5-editor-0.1.0.vsix

설치 후 F1 → WebSquare5: 환경 설정에서 WebSquare5 설정 파일 폴더를 지정하세요. 자세한 내용은 README를 참고하세요.

참고

WebSquare5 교육용 개발팩 기준으로 확인했습니다. 다른 환경에서 안 맞는 부분은 Issues로 알려 주세요.