컴포넌트 그리기

YouTube 동영상 (https://youtu.be/nWohH0g2gzY)

YouTube 동영상 (https://youtu.be/a-ZuCnKQaH4)

Static Mode (클릭 & 클릭)

사용자는 Palette 뷰에서 컴포넌트를 선택한 후 Flexible Mode 혹은 Static Mode에서 해당 컴포넌트를 Design 뷰에 에 추가할 수 있습니다.

	Static	Absolute
방식	클릭&클릭 방식.	클릭&드래그 방식.
설명	Palette에서 선택한 컴포넌트를 기준으로 새로운 컴포넌트의 위치가 결정됩니다.	Design 탭에 직접 컴포넌트를 그릴 수 있습니다.
권장 환경	기존에 존재하는 화면을 수정하거나 기존 화면에 새로운 컴포넌트를 추가하는 경우	새로운 WebSquare XML 파일을 생성할 경우

툴바의 Change Draw Mode 아이콘을 클릭합니다.
Palette 탭에서 (컴포넌트를 검색하여) 추가할 컴포넌트를 선택합니다.
컴포넌트를 추가할 위치와 Float 속성을 정의합니다.
Component 뷰에서 컴포넌트가 추가되었는지 확인합니다.

Static 모드

Absolute Mode (클릭 & 드래그)

Palette 뷰에서 (컴포넌트를 검색하여) 추가할 컴포넌트를 선택합니다.
Design 탭에서 드래그하여 컴포넌트의 위치와 크기를 결정합니다. (더블 클릭할 경우 해당 위치에 기본 크기로 컴포넌트가 추가됩니다.)
Component 뷰에서 컴포넌트가 추가되었는지 확인합니다.

Absolute 모드

스타일 설정

모든 컴포넌트는 id, style, class 속성을 포함합니다. 개발자는 CSS 문법을 사용하여 각 컴포넌트 스타일을 확장할 수 있습니다.

Style 뷰

CSS 적용

CSS는 아래 설명하는 3가지 방법으로 적용 가능합니다.

YouTube 동영상 (https://youtu.be/OvGCDkFFZZQ)

Style 뷰에서 직접 입력

Design 탭에서 스타일을 설정할 컴포넌트를 클릭합니다.
Style 뷰를 클릭합니다.
스타일 트리나 에디터에서 스타일을 설정합니다.
설정한 스타일이 적용되는지 Design 탭에서 확인합니다.

Add Internal Style 버튼 및 class 속성 사용 (인라인 정의)

Style 뷰를 선택합니다.
우측 상단의 Add Internal Style 아이콘을 클릭합니다.
Source 탭이 열리고 아래의 코드가 생성되는지 확인합니다.

$r_title(스타일 설정)
<style type="text/css"><![CDATA[ ]]></style>

CDATA[ ] 대괄호 내에 스타일을 정의합니다.
Class 뷰를 클릭합니다.
정의한 스타일 Class 뷰에 목록으로 표시되는지 확인합니다.
해당 스타일을 적용할 컴포넌트의 class 항목을 설정합니다.

$r_title(스타일 설정 (예))
<script type="javascript">
	<![CDATA[
	.back {
	background-color: #C0C0C0;
	}

	.text {
	font-size: 25px;
	font-weight: bold;
	color: #0080FF;
	}

	.border {
	border-width: 5px;
	border-color: #800040;
	}

]]>
</script>

CSS 파일 임포트

Style 뷰를 선택합니다.
우측 상단의 Import External Style 아이콘을 클릭합니다.
CSS 파일을 선택합니다.
Class 뷰을 클릭합니다.
(혹은 위의 2 ~ 4 단계 대신, Project Explorer에 표시되는 CSS파일을 Design 뷰으로 드래그-앤-드롭합니다.)
Class 뷰에서 CSS가 추가되었는지 확인합니다.
외부 CSS를 적용할 컴포넌트를 Design 뷰에서 클릭합니다.
Style 뷰의 Class 뷰을 연 뒤, 위에서 추가한 외부 CSS를 클릭합니다.
(이미 적용된 CSS를 더블클릭하면 해제됩니다.)
CSS 파일에 정의된 스타일 클래스가 표시되는지 확인합니다.
적용하려는 스타일 클래스를 뎌블-클릭합니다.
해당 클래스가 반영되는지 Design 뷰에서 확인합니다.
(반영된 CSS는 Class 뷰에서 굵게 표시됩니다.)
해당 스타일을 적용할 컴포넌트의 class 항목을 설정합니다.

드래그-앤-드롭

Class 뷰에서 CSS 파일 확인

외부 CSS 파일 수정

외부 CSS 파일은 아래와 같이 직접 열어서 수정해야 합니다.

1. Style 뷰의 Class 뷰을 클릭합니다.

2. 수정하려는 Class를 우클릭한 후 [Open File]을 선택합니다.

3. 해당 Class가 포함된 CSS 파일이 Source 뷰에 표시되고, 해당 Class가 포커싱됩니다.

4. 해당 Class의 스타일을 수정하고 저장합니다.

CSS 팁

margin vs. padding

margin: 10px; padding: 5px;

YouTube 동영상 (https://youtu.be/m5nhn7-4_Vg)

Block 레벨의 요소 스타일링

아래와 같은 Block-level 컴포넌트의 경우 width 속성을 삭제할 경우 전체 화면 폭을 채울 수 있고 height 속성을 삭제할 경우 자식 높이에 따라 해당 컴포넌트의 높이를 결정할 수 있습니다.

Group
TextBox
GridView

width 속성을 삭제할 경우

height 속성을 삭제할 경우

YouTube 동영상 (https://youtu.be/Fri9OfVgPDQ)

float & overflow

float 속성은 컴포넌트의 좌우 배치를 결정합니다.

float: right;

float: left;

overflow 속성은 요소 내 컴포넌트가 넘칠 경우 처리하는 방식을 결정합니다.

overflow: hidden; 혹은 overflow: auto;

overflow: scroll;

YouTube 동영상 (https://youtu.be/z39Up6VLbnY)

Group 스타일링

여러 컴포넌트를 Group으로 감싼 후, Group에 스타일을 일괄 적용하여 속도 및 편의성을 높일 수 있습니다.

예제 파일

인터넷에서 다운로드 혹은

WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기

(/Group/styling_Group.xml)

YouTube 동영상 (https://youtu.be/N7kfGHs-CR4)

속성 설정

Design 뷰에서 그린 컴포넌트의 속성은 Property 뷰에서 정의할 수 있습니다.

Design 뷰에서 속성을 지정할 컴포넌트를 클릭합니다. (혹은 Outline 탭에서 해당 컴포넌트를 선택하십시오.)
Property 탭에서 각 속성을 정의하십시오. (컴포넌트 별 속성은 API 가이드를 참고하십시오.)

Property 뷰에서 속성 지정

이벤트 추가

Design 뷰에서 컴포넌트를 우클릭한 후, 이벤트를 추가할 수 있습니다. 추가할 이벤트를 선택하면, 이벤트 핸들러 작성 코드가 Script 탭에 자동 생성됩니다. Script 탭에서 직접 이벤트 핸들러를 구현하십시오.

YouTube 동영상 (https://youtu.be/ssuLp4x0cjA)

새 스크립트 작성

컴포넌트를 우클릭합니다.
[Add Event]를 클릭한 후 원하는 이벤트를 선택합니다. (각 컴포넌트에 별로 등록 가능한 이벤트는 API 가이드를 참고하십시오.)

이벤트 추가

Script 탭이 열리고 해당 이벤트에 대한 함수가 아래와 같이 생성되는지 확인합니다.

$r_title(이벤트 함수명)
// scwin.컴포넌트명_이벤트

아래와 같이 이벤트 함수를 정의합니다.

$r_title(함수 정의)
<head>
	<script type="javascript">
		<![CDATA[ 
		scwin.trigger4_onclick = function(e){
			var name = input1.getValue();
			output1.setValue( name );
		};
	]]>
	</script>
</head>
<body>
	<xf:trigger id="trigger4" style="" type="button" 
		ev:onclick="scwin.trigger4_onclick">
		<xf:label>
			<![CDATA[확인]]>
		</xf:label>
	</xf:trigger>
</body>

Info 탭 좌측의 목록에 추가한 이벤트가 표시되는지 확인합니다.
Property 뷰에서 Show Event Only 아이콘을 클릭하고 이벤트가 추가되었는지 확인합니다.

스크립트 확인

Script 탭에서 작성하는 모든 내용은 <head>의 <script type="javascript"><![CDATA[ ]></script> 내부에 포함되며, Script 탭은 <script> 노드에 작성된 모든 JavaScript 코드를 목록으로 표시합니다.

기존 스크립트 활용

Deisgn 탭이나 Component 뷰에서 컴포넌트를 우클릭합니다.
[Add Event]를 클릭한 후 원하는 이벤트를 선택합니다. (각 컴포넌트에 별로 등록 가능한 이벤트는 API 가이드를 참고하십시오.)
추가할 이벤트의 Value 칼럼을 클릭합니다.
이미 존재하는 함수명을 입력합니다.
Script 버튼을 클릭합니다.
Info 탭에 해당 함수가 생성되는지 확인합니다.

$r_title(기존 함수 활용)
<xf:trigger id="trigger4" style="" type="button" 
	ev:onclick="scwin.trigger4_onclick" 
	ev:ondblclick="dateCheck" 
	ev:onblur="Testing">
	<xf:label>
		<![CDATA[확인]]>
	</xf:label>
</xf:trigger>

생성된 이벤트 함수

이벤트가 발생한 컴포넌트 정보 확인

$p.getEventTarget() 혹은 WebSquare.util.getEventTarget() 함수를 사용하여 이벤트가 호출된 컴포넌트의 정보를 확인할 수 있습니다. 아래 예제와 같이 이벤트가 발생한 컴포넌트의 이름, ID, 전체 ID를 확인할 수 있습니다.

$r_title(사용 예)
scwin.trigger1_onclick = function(e) {
    var info = $p.getEventTarget(this);
 // var info = WebSquare.util.getEventTarget(this);
    var pluginName = info.pluginName;
    var id = info.id;
    var realId = info.realId;
    alert(pluginName + id + realId);
};

$r_title(반환되는 컴포넌트 정보)
{
     "pluginName": "플러그인 이름",
     "id": "개발소스에 입력한 실제 id",
     "realId": "최상위 WFrame을 포함하는 전체 ID
}

예제 파일

인터넷에서 다운로드 혹은

WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기

(/$p/_General/getEventTarget_$p_WebSquare_util.xml)

YouTube 동영상 (https://youtu.be/PgsaCUWAuho)

이벤트 디버깅

디버깅 메뉴 중 "현재 화면 이벤트 출력 실행" 및 "현재 화면 이벤트 출력 중단" 메뉴를 사용하면, 현재 화면에서 발생하는 이벤트 관련 로그들을 생성하거나 로그 생성을 중단할 수 있습니다. 또한, 이벤트와 바인딩된 컴포넌트, 스코프, 이벤트 이름, 이벤트 함수도 확인할 수 있습니다.

디버깅 메뉴

$r_title(로그 모양)
[EVENT LOG] id: [trigger3] scope id: [] ev: [onclick] : ev name: [scwin.trigger3_onclick]

YouTube 동영상 (https://youtu.be/bRAqROKjOew)

예제 파일

인터넷에서 다운로드 혹은

WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기

(/_Debugging/Event_Debugging.xml)

스니핏

자주 사용하는 디자인 요소의 경우 스니핏으로 등록한 후 사용할 수 있습니다. 매번 직접 그려할 필요가 없기 때문에 화면 개발 시간을 줄일 수 있으며, 분산된 개발 환경에서도 동일한 지정된 디자인 요소를 사용하기 때문에 디자인 일관성을 유지할 수 있습니다.

YouTube 동영상 (https://youtu.be/4RTDZwFc8Ic)

스니핏 추가

스니핏으로 추가할 요소를 디자인합니다. (해당 디자인 요소가 여러 컴포넌트로 구성된 경우 해당 컴포넌트들을 그룹으로 묶습니다.)
디자인 요소를 우클릭 하여 Add Snippet 메뉴를 선택합니다.

디자인 요소 우클릭 후 Add Snippet 메뉴 선택

아래와 같이 스니핏을 저장할 디렉토리를 지정하고 스니핏 정보를 입력합니다.

스니핏 추가

다음과 같이 스니핏이 추가된 것을 확인할 수 있습니다.

스니핏이 추가된 모습

스니핏 을 저장할 폴더는 Snippet 뷰에서 추가하거나 삭제할 수 있습니다.

스니핏 폴더 추가 및 삭제

스니핏 폴더 추가

스니핏 사용

Palette 탭에서 Go to Snippet View 아이콘을 클릭하면 스니핏 뷰를 열 수 있습니다.

스니핏 뷰 열기

Studio 우측 하단에 아래와 같이 Snippets 뷰가 표시됩니다. 원하는 스니핏을 클릭하면 화면에 추가해서 사용할 수 있습니다.

Snippets 뷰

컴포넌트 동적 생성

$p.dynamicCreate() 함수를 이용하여 컴포넌트를 동적으로 생성할 수 있습니다.

$r_title(사용 예)
scwin.trigger1_onclick = function(e) {

  // Group 생성
  $p.dynamicCreate("group1", "group", {
    style: "width: 200px; height: 40px; margin: 50px"
  });

  // Group 내에 TextBox 생성 및 값 설정. 
  $p.dynamicCreate("textbox1", "textbox", {
    style: "border: solid black 2px; float: left; width: 200px; height: 20px; float: left; text-align: center; margin-bottom: 20px"
  }, group1);

  var comObj = WebSquare.util.getComponentById("textbox1");
  comObj.setValue("Select the date.");

  // Group 내에 Calendar 생성.
  $p.dynamicCreate("calendar1", "calendar", {
    style: "width: 200px; float: left; height: 40px; float: left"
  }, group1);
};

예제 파일

인터넷에서 다운로드 혹은

WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기

(/$p/_General/dynamicCreate_$p.xml)

YouTube 동영상 (https://youtu.be/mLJnDEBfavc)

객체 추가

Script 탭에서 아래와 같은 객체를 정의할 수 있습니다.

브라우저 객체

$r_title(브라우저 제공 객체)
window.open('http://');

사용자 정의

변수, 함수, 객체 등을 직접 정의할 수 있습니다.

var userName = "WebSquare";

function getUserName() {
    return userName;
};

var info = {
    name: "WebSquare",
    city: "Seoul"
};

var common = {
    isNumber: function(tmpVal) {
        return Number(tmpVal);
    }
};

WebSquare 객체

WebSquare 객체는 전역 공간에 정의됨.

Browser 객체 혹은 사용자 정의 객체의 이름과 중복되지 않아야 함.

유틸리티

$r_title(유틸리티)

var curDate = $p.getCurrentServerDate('yyyy-MM-dd'); 
// WAS에서 오늘 날짜를 꺼내오는 예

UI 객체

$r_title(UI 객체)
inputbox1.setValue("WebSquare"); 
// "inputbox1" ID에 해당하는 컴포넌트의 value를 "WebSquare"로 설정

데이터 객체

$r_title(데이터 객체)

curRowDataObj = datalist1.getRowJSON(0); 
//"datalis1" ID에 해당하는 DataCollection 객체(DataList)에 접근한 후,
//  0번째 행의 데이터를 꺼내오는 예

브라우저에서 확인하기

완성한 페이지는 브라우저에서 직접 확인할 수 있습니다.

YouTube 동영상 (https://youtu.be/8PUCBzRhGHg)