웹스퀘어 개발자 과정1(웹스퀘어의 scwin)

웹스퀘어는 자동으로 확장자 명이 xml으로 되어있기 때문에 따로 폴더명을 설정하지않고 설정한다. 

script에서는 javascript의 로직을 작성한다. 
websquare5 파일을 생성하면 onpageload-페이지로딩 후 실행 ,onPageunload-페이지종료 후 실행 이벤트가 자동 등록된다. 

그리고 웹스퀘어 5에서는 기본 namespace기반의 코딩을 하며 default로 사용하는 객체의 명은 scwin이다.
웹스퀘어 5에서는 제공하는namespace를 사용하면 페이지를 닫을 때 해당자원을 자동을 delete시켜주는 기능을 이용할 수 있으며 scwin이라는 namespacea명은 설정을 통해 변경이 가능하다. 

DataColletion에서는 data객체를 생성하고 관리한다. 
Datamap은 단건 data관리, dataList는 다건 data관리인다. 
linkendDataList - 생성된 dataList에서 별도의 조건을 주어 filter된 data를 확인한다. (viewer용으로만 제한적으로 사용된다.)
AlliasDataMap - pageCoding에서 자식에서 부모의 dataMap객체를 참조할 때 사용한다
AlliasDataList - pageCoding에서 자식에서 부모의 dataList객체를 참조할 때 사용한다. 

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

source에서는 design,script,dataCollecction,submission에서 정의한 내용을 하나의 xml의 파일로 확인할 수 있다. 직접코딩하는 것이 가능하지만, 기본적인 화면의 구성요소를 실수로 변경할 수 있기 때문에 가급적 코딩은 script를 이용할 수 있도록 한다. 

만들기 - 생성된 웹스퀘어 화면에서 컴포넌트를 배치할 것으로 Tool상단의 손가락 버튼을 클릭하여 그리기 모드를 Absolute로 적용한다. 포지션 오드에서 ok를하고 팔레트에서 생성할 수 있다. 객체를 선택할 때에는 마우스 왼쪽 클릭을 한다. 한번더 클릭하면 선택이 해제되므로 더블클릭으로는 선택할 수 없다 
디자인에서 생성된 객체를 확인하면, 객체에 대한 designTooltip기능이 제공되며 이 부분을 닫고 싶다면 마우스우클릭으 하고 표시와 숨김표시를 이용하여 적용할 수 있다. 

하나를 더추가하고 싶다면 F7을 누른다. 

만일 system browser이외에 다른 브라우저를 등록하려면 빨간색버튼 여에 있는 excute external program버튼을 클릭하여 browser를 등록할수 있습니다. 나타나는 팝업에서 location에서 브라우져의 실행파일을 등록할 수 있습니다. 2개이상의 browser를 사용할 수 있다. 객체의 상세기능은 F1을 누르면 핻당속성, 이벤트, api의 제어로 각각의 기능에 대한 내용을 확인 할 수 있다. 

placeholer- 해당inputbox에 보여질 단어 
initVallue - inputbbox에 해당 속성을 통해 초기값을 입력하는 것이 가능하다.
displayforrmat - 적용된 값에 대해 숫자형태의 format을 적용하고 싶다면 displayformat속성을 사용하고, data의 type은 number값으로 displayforma은 내가 나타내고 싶은 #,###으로 설정한다. 
단, 이기능은 inputbox에 focus가 없는 경우에만 적용이되며, 유무에 상관없이 적용하려면 applyFormate의 속성값을 all로 변경하면 된다. 

API에 대한 제어를 하고 싶다면 우선 객체에 대한 id를 속성으로 적용해야한다. id를 부여하고 script로 이동한다. 
웹스퀘어의 컴포넌트는 id를 부여하면 해당 id가 페이지내에서 전역변수로 자동으로 등록됨으로 id의 기준으로API를 작성하면된다. 
즉!!!!!ipt1(객체의 id) == document.getElementById("ipt1")로 값이 설정되어있는 것이다. 

컴포넌트의 id입력후 콤마를 작성하면 해당컴포넌트가 사용할 수 있는 API의 목록이 나타난다. 만약나타나지 않는다면 Ctrl + space를 눌러서 나타낼수 있다. 또한 Help를 만들어(F1) API부분을 확인하면 상세한 SampleCode를 확인할 수 있다. 해당 컴포넌트가 HTML에서 윳사한 컴포넌트를 확인할수 있다. 

setValue - API에 값을 적용할 수 있다. initvalue라는 속성과 setValue를 함께 적용한다면 setValue의 값이 최종반영되며 onpageload부분에서 setValue를 실행하면 onpageloda부분의 수행시점은 모든 컴포넌트를 그려준 이후에 반영된다. 

이벤트는 컴포넌트의 id를 기준으로 자동생성된다. 웹스퀘어에서는 자바스크립트의 로직을 그대로 사용할 수 있다. 
style에서 해당 컴포넌트의 css이벤트를 확인할 수 있다. 만약 파일내에 직접 css를 사용하는 internalCSS를 적용한다면style에서 우측의 AddInternalStyle버튼을 클릭한다. 해당souce로 가고, 직접적인 css를 부여할 수 있다.  projecctExplorer에서 해당 css와 자바스크립트를 드래그하면 자동으로 값이 부여된다. 

Component를 통해서 생성된 파일의 전체적인 구조를 알수있다. head부는 자바스크립트의 로직, data객체 및 통신객체 ,body부는 화면상에 그려진 컴포넌트, 컴포넌트의 id및 class 등으로 검색하는 기능을 제공한다. 

Snippet기능을 사용하여 미리 디자인된 컴포넌트를 쉽게 복사하여 사용할 수 있다. 

 

 

 

일단 F1을 눌러서 확인하면 아래에 상세한 컴포넌트의 값을 확인할 수 있다.