스크롤 그것이 알고 싶다. (Feat : 스크롤은 마법사 ???)

안녕하세요.

오늘의 포스팅 내용은 스마트메이커의 아톰 메뉴 파헤치기 시리즈 5탄 입니다.

오늘은 앱을 개발하는데 자주 쓰이기도 하고 중요한 개념이 들어있는 스크롤 설정도구를 시작으로 데이터조회도구를 파헤져 보도록 하겠습니다. 그럼 바로 시작하겠습니다.

 

10. 스크롤 설정도구

스크롤 설정도구는 스크롤 묶기, 행번호 표시란 2개의 아톰으로 구성되어 었습니다.

 

10-1 스크롤 묶기

 

스크롤 설정도구에는 스크롤묶기와 행번호표시란 아톰으로 구성되어 있습니다.
스크롤묶기 아톰은 여러 개의 아톰들을 묶어 동시에 각각 아톰에 맞는 데이터를 출력할 수 있게 해주는 아주 편리한 기능을 가지고 있습니다.  즉 서로 다른 아톰을 여러 개 배치하지 않고 각각의 아톰 하나씩만 배치하여 실행하면 설정한 행수에 맞게 아톰의 수가 자동으로 증가하여 화면에 표시되는 아주 신기한 마법을 연출합니다. 또한 다수의 데이터입력란을 묶어 사용자가 여러 개의 데이터를 직접 입력하거나 데이터베이스로부터 조회된 값을 화면상에 표시해 줄 때 사용할 수도 있습니다.

 

스크롤 묶기 화면

 

위 이야기가 쉽게 와닿지 않은 초보자 분들을 위해 한 가지 예를 들어 보겠습니다.

예를 들어 앱의 한 폼에 입력란이 100개 정도가 필요하다고 하면 초보자는 100개의 입력란 아톰을 화면에 배치하고 각각의 아톰별로(100개) 이벤트에 해당하는 값을 할당할 것입니다. 이 과정은 정말 지루하고 반복적인 작업이 될텐되요, 하지만, 스크롤을 이용하면 이런 일은 없으니 걱정하지 않으셔도 됩니다. 스크롤을 이용하면 쉽게 아톰들을 컨트롤할 수 있습니다. 입력란 뿐만아니라 원하는 아톰에 대해서도 쉽게 컨트롤 할 수 있습니다. 프로그래밍 언어를 공부해 보신 분은 알겠지만 일종의 배열과 비슷하게 컨트롤 할 수 있습니다. 간단히 배열에 대해 설명드리면 배열은 프로그래밍에서 데이터를 저장하고 관리하기 위한 자료 구조 중 하나인데 동일한 데이터들의 집합 정도로 생각하시면 쉽습니다. 그리고 배열은 고유한 인덱스를 가지고 있으며 이 인덱스를 사용하여 배열 내의 특정 위치에 있는 데이터에 접근하거나 값을 변경할 수 있습니다. 스마트메이커에서는 입력란(1), 입력란(2), 입력란(3).... 입력란(100) 이런 식으로 해당 아톰에 접근하여 사용할 수 있습니다.

 

10-2 행번호 표시란

행번호 표시란 아톰은 스크롤의 행번호를 자동으로 체크하여 숫자형태로 스크롤행의 번호를 표시할 수 있게 해주는 아톰입니다. 

 

행번호 표시란 화면

 

11. 데이터 조회도구

데이터 조회도구에는 검색창, 게시판, 검색조건, 트리, 그리드, 차트, 이미지배너 7개의 아톰으로 구성되어 있습니다.
데이터조회 도구의 아톰은 데이터베이스의 데이터를 조회하여 그 결과를 쉽게 조회할 수 있게 하는 기능의 아톰이며 데이터 조회 아톰을 활용하여 보고서 작성이나 차트 분석 등과 같은 기능을 구현할 때 쉽게 사용할 수 있는 데이터 조회 도구 아톰입니다. 쉽게 말하면 데이터를 조회할 때 사용하는 아톰입니다.

 

데이터 조회도구 화면

 

검색창 : 데이터베이스에 저장된 데이터를 검색하거나 조회를 위한 아톰입니다. 검색창 아톰은 앱을 개발할 때  자주 사용됩니다. 스마트메이커는 데이터베이스와 관련된 작업을 쉽게 처리할 수 있는 장점이 있는데 그 이유는 쉽게 데이터베이스에 저장된 자료를 몇 번의 클릭으로 조회가 가능하다는 것입니다. 

 

검색창 조회 화면

게시판 : 데이터 검색과 조회가 가능하며 답글형태와 페이지처리가 가능한 아톰입니다. 보통 스마트메이커 카페에서 볼 수 있는 질문 게시판과 유사한 아톰 입니다.

검색조건 : 검색창, 게시판에서 검색어와 검색조건을 설정하여 원하는 데이터를 화면에 표시할 수 있는 아톰 입니다.

트리 : 윈도우 탐색기처럼 상하위 계층 구조를 가진 데이터를 조회하여 트리형식으로 표시할 수 있는 아톰이며 회사의 조직관리에서 많이 사용되는 데이터 구조인 상하위체계를 활용하면 쉽게 트리구조의 조직도를 구현할 수 있습니다.

그리드 : 데이터베이스에 저장된 데이터를 행과 열로 즉 셀단 위로 데이터를 입력, 수정, 삭제할 수 있습니다. 그리드 아톰을 사용하여 엑셀데이터도 불러올 수 있으며 엑셀로 불러온 데이터를 데이터베이스에 저장할 수도 있습니다.  

차트 : 데이터베이스의 검색된 데이터를 막대, 꺾은선, 원 등 다양한 유형의 2차원 또는 3차원식의 차트로 표시해 주는 아톰입니다. 쉽게 차트를 작성할 수 있고 사용 방법도 직관적이어서 사용하기도 쉬운 장점이 있습니다.

이미지 배너 :  데이터베이스에 저장되어 있는 이미지를 순서대로 표시해 주는 아톰입니다. 페이드인아웃, 좌우슬라이딩, 입체박스효과, 커버플로우, 수평, 수직회전목마 등의 효과를 쉽게 줄 수 있는 장점이 있습니다.

 

이미지베너 스타일속성 화면

 

 

오늘은 여기까지...

감사합니다.

 

네이버블로그 링크

https://blog.naver.com/ymsemail/223262910351

스크롤 그것이 알고 싶다. (Feat : 스크롤은 마법사 ???)