SBM UI Customizing with jQuery

jQuery를 이용하여 어떻게 SBM UI를 수정할 수 있는지 간략하게 살펴 보겠습니다.
여기서 다루는 예시는 기본 테이블의 모양을 변경하는 것입니다.
애플리케이션 안에서의 변경이기 때문에 SBM 패키지 서비스 전체에 영향을 주지 않습니다.
아주 간단한 예시이므로 같은 방법으로 다양하게 응용해 볼 수 있을 것입니다.

1. jQuery 홈페이지(http://jquery.com)에 들어가서 최근 버전의 JavaScript를 다운로드 합니다.



첨부한 아래 파일을 다운받으셔도 됩니다!

jquery-1.6.2.min.js

2. Composer 를 실행한 후, 애플리케이션을 오픈합니다.



3. 다운로드한 jQuery Javascript를 추가합니다.

Composer에서 JavaScripts 항목을 선택 후 마우스 우클릭. Add New JavaScript 버튼을 누릅니다.


그리고, Import 합니다.


4. GroupBox의 Control name을 설정합니다. 이번 예시의 경우 'MyContent'라고 정의하였습니다.



5. 이제 GroupBox 안의 테이블 형태를 변경하는 작업을 해보겠습니다.
jQuery 구문을 이용하여 다음과 같은 코드를 생성 후 Composer의 JavaScripts에 추가합니다. (3번과 같음)

// for state forms
$(document).ready(function() {
    var mycontent = $('#MyContent div table');
    mycontent.addClass('sbm-content');
    mycontent.attr("border", "");
    mycontent.css("width", "");
    mycontent.css("height", "");
});

간략히 설명하면, ID가 MyContent인 것을 찾아내어 sbm-content라는 클래스를 추가하고, 각 속성값을 초기화하는 작업으로 이해하시면 됩니다.

6. 수정할 폼화면으로 이동합니다. Property Editor에서 새로 추가된 2개의 JavaScripts를 등록시켜줍니다.


그리고 폼화면에 HTML/Javascript 위젯을 새로 추가합니다.


위젯에 Style 코드를 다음과 같이 작성합니다. 5번에서 추가한 클래스명, 그리고 스타일 속성값을 지정합니다.

7. 이제 어떻게 폼이 바뀌는지 미리보기를 해봅니다!

우측 상단의 'Enable JavaScripts'를 선택하면 아래와 같이 설정한대로 테이블의 모양이 바뀌어 있는 것을 확인하실 수 있습니다!




참고로... 검색해보다가 발견한 사이트인데, jQuery를 어떻게 사용하지는 아래 웹사이트에 가보면 한글로 설명이 아주 잘 되어있으니 방문 한번 해보세요.

http://www.sqler.com/pjQuery