자바스크립트 따라하기- 단축 함수 사용하기(응용)
자바스크립트 따라하기- 단축 함수 사용하기(응용)
본 샘플엔 알람, 시나리오 등 다양한 스카다 객체들이 생성되어 있으며, 생성된 스카다 객체를 스크립트에서 접근하기 위해선 복잡한 명령어를 요구한다.
단축 함수를 사용하면 jQuery처럼 간단하게 객체의 이름으로 스카다 객체에 접근할 수 있다.
단축 함수 샘플 따라하기
1. 객체를 생성할 때는 도구를 클릭하고 마우스 커서를 Design
영역으로 옮겼을 때 커서가 십자 표시로 되면 생성할 위치에 클릭한 상태로 드래그한다.
2. SQLite DB를 생성한다.
인터넷에서 DB Browser for SQLite를 설치한다.
(https://sqlitebrowser.org/dl/)
3.자신의 컴퓨터 환경에 맞는 버전을 다운로드한다.
4. DB Browser (SQLite)를 실행한다.
5. 데이터베이스를 새로 생성한다.
6. 테이블 정보를
아래와 같이 설정한다.
id: INTEGER 타입. Primary key,
Autoincrement 설정
ctime: datetime 타입. Unique 설정. 기본값 -> CURRENT_TIMESTAMP
name: TEXT 타입
content: TEXT 타입
7. 생성한 테이블에 임의의 값을 채워넣는다.
8. SQLite데이터 소스를 추가한다.
9. 1.에서 생성한 db를 지정한다.
10. SELECT SQL 쿼리를 생성한다.
11. 리스트뷰와 레이블
객체를 생성한다.
12. 레이블 객체의 텍스트를 Select로 변경한다.
13. 리스트뷰에 열을 4개 추가한다.
14. 페이지 스크립트를 아래와 같이 작성한다.
15. 디자이너에서 F5키를 누르거나 실행 버튼을 눌러 뷰어를 실행한다.
16. 레이블 객체를 눌러 쿼리 결과를 리스트뷰에 띄울 수 있다.
스크립트 코드 해석
page_1 페이지
클릭 이벤트 추가
$XV(“label_1”).addEventListener(“click”, selectSQL);
$XV(“label_1”).addEventListener(“click”, selectSQL));
이름이 label_1인 뷰 객체를 가져와, 이벤트 리스너를 추가한다.
이벤트 유형: click
콜백 메소드: selectSQL
페이지 콘솔 창 결과: -
selectSQL 메소드
|
function selectSQL(event) { $XD("sqlite_1").execute("query_1", null, onSuccess, null); } |
$XD("sqlite_1").execute("query_1", null, onSuccess, null);
이름이 sqlite_1인 데이터소스 객체를 가져온다. 가져온 데이터소스의 SQL 객체들 중 이름이 query_1인 SQL 쿼리를 연결된 데이터베이스에 전송하고, 성공할 경우 onSuccess 메소드를 호출하고 파라미터에 쿼리의 반환값을 싣는다.
페이지 콘솔 창 결과: -
onSuccess 메소드
|
function onSuccess(data) { $XV("listview_1").items.clear(); $XV("listview_1").items.addAll(data); } |
$XV("listview_1").items.clear();
이름이 listview_1인 뷰 객체를 가져와, 목록을 초기화한다.
페이지 콘솔 창 결과: -
$XV("listview_1").items.addAll(data);
이름이 listview_1인 뷰 객체를 가져와 data 인수로 목록을 채운다. (data 인수는 DataResultCollection 타입이어야 한다.)
페이지 콘솔 창 결과: -
