[make app] #앱인벤터 드래그로 순서 변경 목록, aia 프로그램 소스 제공

 

현재 자체 component로 구현이 안 된 목록 드래그 위치 변경 기능을 webviewer의 javascript 실행 기능을 활용하여 구현한 것입니다.

 

- webviewer를 통해 javascript를 실행하실 수 있습니다.

- 간단한 로컬DB 사용법을 알 수 있습니다.

 

---

 

앱 구상

[참고 앱]

http://puravidaapps.com/sortable.php

App Inventor Tutorials and Examples: Sortable | Pura Vida Apps

A Sortable List using Drag-and-Drop with App Inventor and jQuery UI The example displays an App Inventor list in a jQuery UI Sortable . Thank you furf , together with your jQuery UI Touch Punch library we can use drag and drop on the mobile device to order the list items manually. 

 

기본기능

1. 드래그로 목록 순서를 변경

2. 목록 순서를 휴대폰에 저장

 

---

앱 제작

 

1. 화면 디자인

 

- 필요한 파일들을 올려주세요.

jquery-ui.css

ui-lightness-jquery-ui.css

ui-icons_ef8c08_256x240.png

jquery-1.7.2.min.js

jquery-ui.min.js

jquery.ui.touch-punch.min.js

 

 

2. 블록 코딩

 

- WebViewer에 띄울 html file을 셋팅하는 루틴

- 로컬 DB를 읽어오기, 자료가 없으면 목록을 초기값으로 설정

 

 

- 순서바꾸기를 터치하면 webviewer를 띄우고 html에 전달할 목록을 셋팅 후 web page javascript 실행

 

 

- 저장버튼을 터치하면 webviewer를 감추면서 webviewer의 CurrentPageTitle을 통해 결과값 가져오고 로컬DB에 저장

 

 

3. 실행 화면

 

 

4. 소스 파일(aia)

sortable_20200704.aia

0.11MB

 

---

 

관련글 : 앱인벤터 소개

https://blog.naver.com/sfex/221994450104

 

 

---