웹스퀘어 정리 (수정중)

지난 4월 부터 iframwork 에서 웹스퀘어로 변경하는

파이낸셜 프로젝트에 참여중이다. 

사실,, 웹스퀘어라는 프레임워크 자체를 이번 프로젝트때에 처음 들어보기도 하였고

그동안 사용하던 방식과 다른점이 많아서 많이 해매는 중이다 ㅠㅠ (아직까지도..)

 

웹스퀘어 교육 강의, 구글 검색 에서 내가 실업무에서 

사용했던 부분들만 정리해보았다.

 

 

•  script에서는 javascript의 로직을 작성한다. 
•  websquare5 파일을 생성하면 onpageload-페이지로딩 후 실행 가 자동 등록된다. 
• scwin.onpageload = function() { };
•  웹스퀘어 5에서는 기본 namespace기반의 코딩을 하며 default로 사용하는 객체의 명은 scwin이다.
•  DataColletion에서는 data객체를 생성하고 관리한다. 
      1) Datamap은 단건 data관리   2) dataList는 다건 data관리
• submission에서는 웹스퀘어의 통신, 객체를 생성 및 관리를 한다.
• 웹스퀘어에서는 form을 이용한 전송, 이동방식으로 통신하지 않고, submission이라는 객체를 생성하여 통신하게 된다.
•  source에서는 design,script,dataCollecction,submission에서 정의한 내용을 하나의 xml의 파일로 확인할 수 있다. 직접코딩하는 것이 가능하지만, 기본적인 화면의 구성요소를 실수로 변경할 수 있기 때문에 가급적 코딩은 script를 이용할 수 있도록 한다.
• API에 대한 제어를 하고 싶다면 우선 객체에 대한 id를 속성으로 적용해야한다. id를 부여하고 script로 이동한다. 웹스퀘어의 컴포넌트는 id를 부여하면 해당 id가 페이지내에서 전역변수로 자동으로 등록됨으로 id의 기준으로API를 작성하면된다. 컴포넌트의 id입력후 콤마를 작성하면 해당 컴포넌트가 사용할 수 있는 API의 목록이 나타난다. 만약나타나지 않는다면 Ctrl + space를 눌러서 나타낼수 있다.
• 이벤트는 컴포넌트의 id를 기준으로 자동생성된다. 웹스퀘어에서는 자바스크립트의 로직을 그대로 사용할 수 있다. 
  style에서 해당 컴포넌트의 css이벤트를 확인할 수 있다. ( 만약 파일내에 직접 css를 사용하는 internalCSS를 적용한다면style에서 우측의 AddInternalStyle버튼을 클릭한다. 해당souce로 가고, 직접적인 css를 부여할 수 있다.  projecctExplorer에서 해당 css와 자바스크립트를 드래그하면 자동으로 값이 부여된다. )
• Component를 통해서 생성된 파일의 전체적인 구조를 알수있다. head부는 자바스크립트의 로직, data객체 및 통신객체 ,body부는 화면상에 그려진 컴포넌트, 컴포넌트의 id및 class 등으로 검색하는 기능을 제공한다. 

 

 

도움 주신분 :

https://lionpower.tistory.com/m/338