ScriptCode Editor¶

목적¶

대상 애플리케이션 내에서 사용될 JavaScript를 정의하기 위한 외부 편집기

주요 단계¶

1. Editor 실행¶

o Workbench 상단의 추가 기능 메뉴에서 Edit → StyleCSS Editor 클릭

<사진 1> "Edit -> StyleCSS editor"를 클릭한 화면

2. Editor 기능 설명¶

o 편집기 내 주요 기능에 대한 설명

<사진 2> Editor UI 화면 및 주요 기능 설명 이미지

3. 기능 테스트 예제¶

3.1. Editor의 코딩 영역에서 다음 스크립트를 입력¶

   function jsPopup(){
      alert("Hello U4A WorkSpace!!");
   }

3.2. Editor의 우측 하단에서 SAVE 버튼 클릭¶

<사진 3> "SAVE" 버튼 클릭시 처리에 대한 정상 메시지 표시

3.3. Workbench의 UX Design Area에서 PAGE 오브젝트를 선택¶

<사진 4> 테스트를 위한 UI 추가 대상 위치의 "PAGE" 선택

3.4. PAGE 오브젝트에서 마우스 우클릭 -> Insert Elements 클릭¶

<사진 5> Insert Elements 선택

3.5. UI Object Select 팝업에서 오브젝트 추가¶

<사진 6> UI Object 추가

3.6. UX Design Area와 Preview Area에서 버튼 UI 확인¶

<사진 7> Button UI 추가된 화면

3.7. 생성된 버튼 UI("BUTTON1") 선택 -> 속성(Attributes) 영역의 Properties에서 설정¶

<사진 8> Button의 Property 설정

3.8. 속성 영역의 Events에서 지정된 아이콘 클릭¶

<사진 9> "Button" Press Event의 JavaScript Editor 호출 버튼

3.9. 활성화된 JavaScript Editor 팝업에서 jsPopup 함수를 선언 후 저장¶

o 주의: JavaScript는 대소문자를 구분하므로 정확하게 입력

<사진 10> ScriptCode Editor에 등록한 스크립트 호출 설정

3.10. 정상적으로 스크립트가 등록되었는지 확인¶

<사진 11> 정상 스크립트 등록시 아이콘이 붉게 변함

<사진 12> Application Activate 클릭

3.12. Application 실행¶

<사진 13> "JS 스크립트 Popup 실행" 버튼 클릭

3.14. 브라우저 팝업에서 JavaScript Function의 정상 작동 확인¶

<사진 14> JavaScript Function의 정상 작동 확인

주의사항¶

o UI5 APP은 HTML5 JavaScript 기반으로 개발되었으며, 무분별한 스크립트 사용은 APP의 심각한 오류를 초래할 수 있음

o 특수한 경우가 아니라면 JavaScript 사용을 최소화하는 것이 권장됨