자바스크립트 따라하기 – DB 주간 데이터

Script

자바스크립트 따라하기 – DB 주간 데이터

스크립트에서 DB에 쿼리를 요청할 수 있다.


1. X-SCADA 디자이너에서 빈 프로젝트를 연다.

1) DB Browser for SQLite 프로그램을 실행해 데이터베이스를 생성한다.

(다운로드: https://sqlitebrowser.org/dl/)

f4334c00ad652cd0cd9f95c16c9c8d2e_1638517360_8716.png
 

2) 테이블을 생성한다.

f4334c00ad652cd0cd9f95c16c9c8d2e_1638517370_1201.png
 

3) Browse Data 탭에서 아래와 같이 행을 추가한다.

f4334c00ad652cd0cd9f95c16c9c8d2e_1638517378_9331.png
f4334c00ad652cd0cd9f95c16c9c8d2e_1638517378_9699.png
 

· 데이터를 설정한다.

f4334c00ad652cd0cd9f95c16c9c8d2e_1638517386_8737.png
 

· Write Changes 버튼을 누른다.

f4334c00ad652cd0cd9f95c16c9c8d2e_1638517392_4808.png
 

4) 리스트뷰를 1개 생성한다.

f4334c00ad652cd0cd9f95c16c9c8d2e_1638517402_9918.png
 

5) 리스트뷰의 속성을 설정한다.

· Listview 영역의 Columns 속성을 변경한다.

f4334c00ad652cd0cd9f95c16c9c8d2e_1638517415_6116.png
 

· 열을 두 개 생성한다.

f4334c00ad652cd0cd9f95c16c9c8d2e_1638517426_7432.png
 

· 각 열을 설정한다.

f4334c00ad652cd0cd9f95c16c9c8d2e_1638517437_9405.png
f4334c00ad652cd0cd9f95c16c9c8d2e_1638517438_0196.png
 

· 설정 완료 후 확인 버튼을 누른다.



6) 데이터 소스를 생성한다.

f4334c00ad652cd0cd9f95c16c9c8d2e_1638517456_1679.png
f4334c00ad652cd0cd9f95c16c9c8d2e_1638517456_2038.png
f4334c00ad652cd0cd9f95c16c9c8d2e_1638517456_2431.png
 

1)에서 생성한 DB 파일을 지정한다.


7) 쿼리를 생성한다.

f4334c00ad652cd0cd9f95c16c9c8d2e_1638517471_6586.png
f4334c00ad652cd0cd9f95c16c9c8d2e_1638517471_7021.png
 

8) 페이지에 레이블을 1개 생성한다.

f4334c00ad652cd0cd9f95c16c9c8d2e_1638517481_7412.png
 

9) page_1의 스크립트를 다음과 같이 작성한다.

f4334c00ad652cd0cd9f95c16c9c8d2e_1638517489_9305.png
 

10) 레이블의 스크립트 속성을 다음과 같이 설정한다.

f4334c00ad652cd0cd9f95c16c9c8d2e_1638517498_6224.png
 

11) 실행이나 F5 버튼을 눌러 뷰어를 실행한다.

f4334c00ad652cd0cd9f95c16c9c8d2e_1638517505_5811.png
 

12) 레이블 객체를 클릭하여 스크립트 동작을 확인할 수 있다.

f4334c00ad652cd0cd9f95c16c9c8d2e_1638517511_4009.png
 



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);

리스트뷰에 아이템을 채운다

· 페이지 콘솔 창 결과: -


0 답글
제목