자바스크립트 따라하기 – DB 주간 데이터
스크립트에서 DB에 쿼리를 요청할 수 있다.
1. X-SCADA 디자이너에서 빈 프로젝트를 연다.
1) DB Browser for SQLite 프로그램을 실행해 데이터베이스를 생성한다.
(다운로드: https://sqlitebrowser.org/dl/)
2) 테이블을 생성한다.
3) Browse Data 탭에서 아래와 같이 행을 추가한다.
· 데이터를 설정한다.
· Write Changes 버튼을 누른다.
4) 리스트뷰를 1개 생성한다.
5) 리스트뷰의 속성을 설정한다.
· Listview 영역의 Columns 속성을 변경한다.
· 열을 두 개 생성한다.
· 각 열을 설정한다.
· 설정 완료 후 확인 버튼을 누른다.
6) 데이터 소스를 생성한다.
1)에서 생성한 DB 파일을 지정한다.
7) 쿼리를 생성한다.
8) 페이지에 레이블을 1개 생성한다.
9) page_1의 스크립트를 다음과 같이 작성한다.
10) 레이블의 스크립트 속성을 다음과 같이 설정한다.
11) 실행이나 F5 버튼을 눌러 뷰어를 실행한다.
12) 레이블 객체를 클릭하여 스크립트 동작을 확인할 수 있다.
2. 스크립트 코드 해석
1) page_1 페이지
① select 메소드
function select() { $XD("sqlite_1").execute("query_1", null, add, null); } |
(1) $XD("sqlite_1").execute("query_1", null, add, null);
데이터소스의 sqlite_1에서 query_1 쿼리를 요청하고, 성공 시 add를 데이터와 같이 호출한다.
· 페이지 콘솔 창 결과: -
② add 메소드
function add(data) { $XV("listview_1").items.clear(); $XV("listview_1").items.addAll(data); } |
(1) $XV("listview_1").items.clear();
리스트뷰를 비운다.
· 페이지 콘솔 창 결과: -
(2) $XV("listview_1").items.addAll(data);
리스트뷰에 아이템을 채운다
· 페이지 콘솔 창 결과: -