안녕하세요.
이번 시간에는 앱인벤터에서 오름차순, 내림차순 등의 정렬 방법에 대해 알아보겠습니다.
앱인벤터에서는 자체적으로 정렬 기능을 제공하지 않아, 여간 불편한 일이 아닌데요.
그래도 앱인벤터에서는 자바스크립트를 이용할 수 있어서 이를 이용해 간편하게 정렬을 할 수 있습니다.
(저도 자바스크립트에 대해서는 쌩초보 인데도 해냈으니 여러분들도 충분히 할 수 있을 것입니다.~)
먼저 소스를 내려받아 참고하시기 바랍니다.
| 화면 구성 |
| 구성요소 | 주요 속성 | 구성요소의 역할 |
| VerticalArrangement1 | ▶ Width: 96% | 전체 화면의 좌우여백을 주기 위해 넓이를 96%로 설정합니다. |
| └ Hor_TopBlank | 여백을 주기 위한 요소입니다. | |
| └ Horizontal Arrangement4 | 정렬 방식에 대한 요소를 둘러싸는 요소입니다. | |
| └└ Label1 | "정렬 선택"을 나타내는 레이블입니다. | |
| └└ Spinner1 | ▶ ElementsFromString: 숫자, 문자 | 정렬할 내용이 숫자인지 문자인지 선택하기 위한 스피너입니다. |
| └└ chk_Ascend | 오름차순을 선택하기 위한 체크박스입니다. | |
| └└ chk_Descend | 내림차순을 선택하기 위한 체크박스입니다. | |
| └ Hor_Blank1 | 여백을 주기 위한 요소입니다. | |
| └ Horizontal Arrangement2 | 원본 리스트에 대한 요소를 둘러싸는 수평 정렬 프레임입니다. | |
| └└ lbl_Original | "원본 리스트"를 나타내는 레이블입니다. | |
| └└ lbl_OrigianlList | 원본 리스트를 보여 줄 레이블입니다. | |
| └ Horizontal Arrangement3 | 정렬 리스트에 대한 요소를 둘러싸는 수평 정렬 프레임입니다. | |
| └└ lbl_Sort | "정렬 리스트"를 나타내는 레이블입니다. | |
| └└ lbl_SortList | 정렬된 리스트를 보여 줄 레이블입니다. | |
| └ Hor_Blank2 | 여백을 주기 위한 요소입니다. | |
| └ Horizontal Arrangement1 | 버튼을 둘러싸는 수평 정렬 프레임입니다. | |
| └└ btn_Sort | "정렬하기" 명령 버튼입니다. | |
| Web_Sort | ▶ Visible: 체크 해제 | 자바스크립트를 이용하기 위한 WebViewer 요소입니다. |
| Clock1 | ▶ TimerAlwaysFires: 체크 해제 ▶ TimerEnabled: 체크 해제 ▶ TimerInterval: 2000 ※ 1000 = 1초 |
자바스크립트 명령을 통해 값을 받을 때까지 시간을 확보하기 위한 요소입니다. |
| 블록 코딩 |
먼저 전체 블록입니다.
조금 복잡해 보이긴 하지만
숫자로 된 데이터, 문자로 된 데이터, 오름차순 정렬, 내림차순 정렬을 모두 보여드리기 위해 작성한 코드입니다.
하나씩 뜯어보면 크게 복잡하지는 않으며, 여기서 제공해 드리는 소스를 조금만 바꾸시면 바로 이용 가능할 것입니다.
이제 블록 하나씩 상세히 설명을 드리도록 하겠습니다.
① : 변수 numTest에 리스트 ["12", "202", "20"]을 저장하라.
② : 변수 textTest에 리스트 ["오이", "토마토", "가지"]를 저장하라.
① : "sort"라는 함수를 만드는데, sort 함수를 나중에 호출할 때, list와 isNum, Order 값을 받아라.
- list: 정렬할 리스트를 받을 인수
- isNum: 정렬할 리스트가 숫자인지 문자인지 구분할 인수
- Order: 정렬 방법을 오름차순으로 할 것인지, 내림차순으로 할 것인지 구분할 인수
② : Web_Sort의 WebViewString을 공백으로 하라.
③ ~ ⑪ : 자바스크립트로 WebViewString을 입력하라.
③ : window.AppInventor.setWebViewString(" ") 명령은 " "의 내용을 WebViewString에 입력하라는 명령어입니다.
☞ 두 번째 닫는 따옴표와 닫는 괄호는 ⑦ ~ ⑪에 나옵니다.
④ : list라는 리스트에서 각 항목을 콤마(,)를 사용하여 하나로 합쳐라.
☞ 예를 들어, numTest 리스트에는 ["12", "202", "20"]이 저장되어 있는데 이를 12,202,20으로 가져오라는 것입니다.
☞ 앱인벤터와 자바스크립트의 리스트(배열) 사용방법이 다르기 때문입니다.
⑤ : 만약 isNum의 값이 Num이라면, ⑥으로, 그렇지 않다면 ⑨으로
☞ 나중에 sort 함수를 호출할 때, 숫자라면 Num을 입력하고, 그렇지 않으면 Text로 입력할 것입니다.
⑥ : 만약 Order의 값이 Ascend라면 ⑦으로, 그렇지 않다면 ⑧으로
☞ 나중에 sort 함수를 호출할 때, 오름차순이라면 Ascend를 입력하고, 내림차순이라면 Descend로 입력할 것입니다.
⑦ : ".split(",").sort(function(a, b){return a - b}).toString());
☞ 첫 번째 따옴표는 ③에서 이어지는 것입니다.
☞ split(",") : 콤마가 있는 곳에서 항목을 분리하여 자바스크립트 배열로 바꾸어라. ex.) 12,202,20 → ["12", "202", "20"]
☞ sort(function(a, b){return a - b}) : 숫자를 오름차순하는 자바스크립트 명령어입니다.
☞ toString() : 정렬된 리스트를 String형식으로 바꾸어 주어라. (블록코딩 #4의 ④ 참조)
☞ 마지막 닫는 괄호는 ③에서 이어지는 것이며 세미콜론 ; 은 자바스크립트의 명령을 종료할 때 쓰입니다.
⑧ : ".split(",").sort(function(a, b){return b - a}).toString());
☞ 나머지는 ⑦과 동일하며 b - a는 숫자를 내림차순하라는 것입니다.
⑨ : - else : ⑤과 연결되어 만약 isNum의 값이 Num이 아니고,
- 만약 Order 값이 Ascend라면 ⑩으로, 그렇지 않다면 ⑪으로
⑩ : ".split(",").sort().toString());
☞ ⑦과 나머지는 모두 동일하며 .sort()는 문자를 정렬할 때 오름차순하는 명령입니다.
⑪ : ".split(",").sort().reverse().toString());
☞ ⑦, ⑩과 나머지는 모두 동일하며 .reverse()는 역순으로 배열하라는 명령어입니다.
① : btn_Sort를 클릭했을 때
② : 만약 chk_Ascend에 체크가 되어 있다면
③ : Spinner1의 선택항목의 순서가 1(숫자)이라면(화면 구성할 때 숫자, 문자순으로 썼기 때문)
④으로, 그렇지 않다면 ⑤으로
④ : sort 함수를 호출하는데,
- list는 numTest 값(["12", "202", "20"]을
- isNum에는 Num을
- Order에는 Ascend를 입력하라.
⑤ : sort 함수를 호출하는데,
- list는 textTest 값(["오이", "토마토", "가지"])을
- isNum에는 Num을
- Order에는 Ascend를 입력하라.
⑥ : Clock1의 Timer기능을 실행하여라.
☞ 화면구성할 때 Clock1의 시간간격을 2000(2초)으로 설정하였습니다.
이것은 자바스크립트 명령어를 처리할 시간을 확보하기 위한 것입니다.
① : Clock1의 시간이 지났을 때(버튼을 클릭하고 2초가 지났을 때)
② : 만약 Spinner1의 선택 항목 순서가 1(숫자)이라면, 또는 1이 아니라면(문자)
③ 또는 ⑤
③ : OriginalList 레이블의 텍스트를 변수 numTest(["12", "202", "20"])로 하라.
⑤ : OriginalList 레이블의 텍스트를 변수 textTest(["오이", "토마토", "가지"])로 하라.
④ 또는 ⑥ : lbl_SortList 레이블의 텍스트에 WebViewString의 값을 리스트형식으로 가져오라. (블록코딩 #3의 ⑦ 참조)
☞ CSV 형식(쉼표로 구분)으로 되어있는 텍스트를 리스트로 가져옵니다.
⑦ : Clock1의 Timer기능을 멈추어라.
이상 앱인벤터 정렬 방법이었습니다. 질문 있으시면 댓글 남겨주세요~
유용하게 활용하시기 바랍니다.
p.s: 서두에도 언급되어 있듯이 저도 아직 초보로써 자바스크립트에는 서투른 편입니다. 혹시 본문 내용 중에 잘못된 것이 있거나, 더 좋은 방법이 있으면 공유해 주세요~
댓글