StyleCSS Editor¶
목적¶
대상 애플리케이션 내에서 사용될 JavaScript를 정의하는 외부 에디터
주요 단계¶
1. Editor 실행¶
1.1. Workbench 상단 추가 기능 메뉴에서 "Edit -> StyleCSS editor"를 클릭¶
<사진 1> Application의 "Edit" - "StyleCSS editor" Menu
<사진 2>"StyleCSS editor" 팝업창
2. Editor 기능 설명¶
2.1. Editor의 UI와 주요 기능¶
<사진 3> CSS Editor UI 및 버튼 설명
기능 테스트 예제¶
3.1. Editor 코딩 영역에서 아래 코드 작성¶
.btn_red {
background-color: red;
}
3.2. Editor 팝업 우측 하단 "SAVE" 버튼 클릭¶
<사진 4> "SAVE" 버튼 클릭 시 처리에 대한 정상 메시지 표시
3.3. Workbench "UX Design Area"에서 "PAGE" 오브젝트 선택¶
<사진 5> "UX Design Area"에서 "PAGE" 오브젝트 선택
3.4. 선택한 "PAGE" 오브젝트에서 마우스 우클릭 → 메뉴에서 "Insert Elements" 클릭¶
<사진 6> "Page" Object에서 "Insert Elements" 클릭
3.5. "UI Object Select" 팝업에서 아래와 같이 처리¶
<사진 7>"UI Object Select" 팝업창
3.6. Workbench "UX Design Area" 및 "Preview Area"에 버튼 UI 생성 확인¶
<사진 8> 버튼 UI 생성 확인
3.7. 생성된 버튼 UI("BUTTON1")를 선택 후 "Properties"에 아래와 같이 입력¶
<사진 9> 버튼 Property의 styleClass에 정의한 Class ID를 입력
3.8. 메인 툴바의 활성화 (Activate) 버튼 클릭¶
<사진 10> Application Activate 버튼 클릭
3.9. 메인 툴바에서 실행 버튼 클릭 후 앱 실행¶
<사진 11> Background CSS 적용된 Button UI 화면
<사진 12> Style을 변경하지 않은 Button UI 화면
추가 정보¶
o CSS 기술에 대한 더 많은 정보를 원한다면 W3Schools CSS Tutorial 웹사이트 참고