app model 템플릿을 활용한 앱개발...

App Model 템플릿을 활용한 앱개발 실습

1


교재사용 안내

1. 스마트메이커는 인공지능 기술을 채택한 GUI방식의 도구를 활용해서, 그림을 그리듯이

화면 디자인만 해주면 앱을 자동으로 만들어주는 새로운 프로그램 방식입니다.

2. 스마트메이커는 사용자의 편의를 위해 앱Model 템플릿 7종, 웹Model 템플릿 7종,

SmartBook Model 7종의 기본 템플릿을 제공하고 있습니다.

사용자가 앱 만드는 과정을 시행착오로 혼자 학습할 수도 있지만, 기본 템플릿을 활용

하면, 누구나 2~3시간 정도 학습으로 쉽게 만들 수 있습니다.

3. 본 교재는 템플릿을 활용하여 앱,웹,디지털북을 만드는 방법을 기술하였습니다. 사용자

들은 본 교재의 절차에 따라, 템플릿의 내용을 변경해 주는 방법으로 손쉽게 개발작업

을 수행 할 수 있습니다.

템플릿에서 제공하는 기능외에 기능을 추가할 때는 사용자가이드북을 참조하시면 더욱

풍성한 기능의 프로그램을 만들수 있습니다.

구성

1. 단순데이터 입력유형 템플릿 활용방법 -------------------------------------------- 3 page

2. 헤더아이템 입력유형 템플릿 활용방법 -------------------------------------------- 8 page

3. 헤더탭아이템 입력유형 템플릿 활용방법 -------------------------------------------- 14 page

4. 다중데이터 검색유형 템플릿 활용방법 -------------------------------------------- 21 page

5. 검색데이터 처리유형 템플릿 활용방법 -------------------------------------------- 24 page

6. 챠트작성 보기유형 템플릿 활용방법 -------------------------------------------- 29 page

7. 트리메뉴 작성유형 템플릿 활용방법 -------------------------------------------- 33 page

2


스마트메이커에서 제공하는 App Model 템플릿은 빈폼, 단순데이터 입력 유형, 헤더아이

템 입력 유형, 헤더탭아이템 입력 유형, 다중데이터 검색 유형, 검색데이터 처리 유형,

차트작성 및 보기 유형, 트리메뉴 작성 유형 등 총 8개로 구성되어 있습니다. 사용자들

은 여러가지 상황과 업무에 맞게 변경해서 사용만 하시면 됩니다.

이 장에서는 스마트메이커의 앱 Model 템플릿을 활용하여 앱프로그램을 디자인

및 구현하는 과정을 실습합니다. 구현대상은 매장, 판매점, 회사 등에서 필요할

만한, “영업관리 프로그램”을 만들어 보겠습니다.

본 실습은 템플릿을 활용하여 앱을 만들어 보는 것임으로, 섬세한 기능을 구현하

거나, 구체적인 기술을 배우는 목적보다는, 템플릿을 활용하는 절차와 과정에 대

하여 익히는데 주안을 두도록 하겠습니다.

1. 단순데이터 입력유형 템플릿 활용방법

단순데이터 입력 유형 템플릿은 데이터입력 및 처리에서 기본이 되는 유형입

니다. 즉 입력항목들로 구성된 앱(APP)형태로서, 이미지와 텍스트 등을 포함

한 기초정보를 등록, 관리하는 단순 등록 앱입니다.

실무에서 정보시스템에서 요구되는 가장 기본적인 기초정보 등록화면들을 구

현할 때 사용하시면 편리합니다.

실습대상은 단순데이터 입력유형 템플릿을 이용하여 판매할 제품을 등록하는

“제품등록” 프로그램 앱입니다.

▣ 최종 완성화면 및 기능 디자인

사진 촬영을 하거나 앨범에서 사진을 찾아 입력

하는 기능

달력에서 날짜를 입력하는 기능

입력된 정보를 저장하는 기능

등록번호를 기준으로 앞, 뒤 데이터를 보는 기능

저장된 데이터를 삭제하는 기능

폼을 닫는 기능


템플릿(Template)

템플릿이란 일반적으로 많이 사용되

는 페이지의 폼을 미리 만들어 놓은

것으로, 사용자들이 페이지를 쉽게

만들 수 있도록 도와주는 정형화된

폼을 말합니다.

3


1) 1단계 : 템플릿 생성하기

제품등록 앱을 만들 템플릿을 생성합니다.

[파일]-[새로 만들기] 대화상자에서 단순 데이터 입력 유형 템플릿을 선택 하고 [확인]을 누릅니

다.

어플리케이션 모델의 단순 데이터 입력 유형의 페이지가 생성됩니다.

2) 2단계 : 제목 설정하기

프로그램 제목을 설정해 줍니다.

프로그램 제목에서 클릭 이후 F2버튼을 눌러, 앱의 제목을 “제품 등록”으로 변경합니다.

3) 3단계 : 항목명 설정하기

템플릿의 항목1,2,3으로 디자인 되어있는 각각의 항목을 원하는 항목명으로 바꾸어 줍니다.

왼쪽그림과 같이 항목명 1은 제품명, 항목명 2는 공급자명, 항목명 3은 가격, 항목명 4는 크기, 항목명 5는 설명, 항목명 6은 제조년월, 항목명 7은 판매여부, 항목명 8는 공급수량으로 변경합니다.

4


4) 4단계 : 입력란 설정하기

입력항목은 “데이터입력란”으로 구성되어 있습니다. 따라서 각각의 입력란을 성

격에 맞게 아톰을 변경해 주겠습니다. 즉 입력할 자료의 성격에 따라 날짜입력란, 콤보박스, 라디오박스, 이미지입력란등으로 변경합니다.

① 자료형변경

템플릿의 항목은 기본적으로 “문자형”으로 구성

되어 있습니다. 따라서 각각의 입력란 아톰들의

자료형(정수형, 실수형 등)과 길이를 알맞게 설

정합니다.

가격 항목의 입력란에서 [우클릭]-[데이터속성]을 통해 데이터입력란 설정에 들어갑니다. 가격 항

목의 자료형태를 문자형에서 실수형으로 변경 합니다. 이제 가격항목에는 숫자만 입력이 가능

해지고 자동으로 우측정렬과 세자리마다 콤마를 찍습니다.

최대자릿수는 실행모드에서 입력란에 입력할 수

있는 최대 글자 수입니다. 각 항목의 특성에 길이

를 조절하시면 됩니다.

② 날짜입력란 아톰으로 변경

템플릿의 항목은 기본적으로 “데이터입력란”으

로 구성되어 있습니다. 따라서 각각의 입력란의

성격에 맞게 아톰을 변경해 주겠습니다.

“제조년월” 항목은 날짜를 입력하는 항목이므로, 데이터입력란 아톰을 지우고, “데이터입력도구”에서 날짜입력란 아톰을 선택 후 그려넣어 줍니

다.

이제 “제조년월”항목을 데이터는 달력을 통해 입력할 수 있습니다.

5


③ 콤보박스 아톰으로 변경

“판매여부” 항목의 입력란은 미리 설정된 데이

터들을 리스트 형태로 보여주고, 사용자가 선택

해서 데이터를 입력하는 콤보박스 아톰으로 변

경합니다.

“판매여부” 항목의 데이터입력란 아톰을 지우고,

“데이터 입력도구”에서 콤보박스 아톰을 선택후

그려넣어줍니다.

“판매여부의 콤보박스에서 [우클릭]-[스타일속성]

을 통해 콤보박스 설정에 들어갑니다.

자체정의를 선택하고 표시데이터에 “판매대기”, “판매중”, “품절”을 적고 추가합니다.

속성설정에서 항목정렬은 체크해제하고, 기본값

없음은 체크설정 합니다.

5) 5단계 : 디자인 및 레이아웃 변경하기

전체 배경 및 각각의 항목, 입력란, 버튼등의

색상을 변경해 줍니다.

또한 화면속에 디자인 및 배치되어 있는 각

각의 항목, 입력란, 버튼들의 간격조정을 설

정하실 수 있습니다.

색상 교체를 원하는 객체를 클릭하고 상단 아톰

편집도구로 배경색과 테두리색을 설정합니다.

전체적인 레이아웃에서 어느정도의 상, 하,

좌, 우 여백 및 간격을 맞춰줄지를 설정합니

다.

6


6) 6단계 : 테이블 정보 생성하기

입력한 데이터를 저장 및 관리해 줄 데이터베이

스(DB)를 설계하고 생성해 줍니다.

F5버튼을 누르면 스마트메이커 인공지능 저작엔

진이, 사용자가 작성한 화면의 내용을 분석해서, 좌측화면과 같이 테이블명 및 필드명을 자동으로 설정해줍니다.

F10버튼을 누르고 [자세히]를 클릭하면 좌측화면

과 같이 ERD 설계도와 질의문을 확인할수 있습

니다.

내용을 검토 후 [적용]버튼을 누르면 앱에 필요

한 DB테이블을 생성해 줍니다.

만약 데이터베이스에 접속할 수 없다는 메시지가 나오면 [파일]-[서버접속]을 클릭후 아이디 sa, 비밀번호 1을 입력후 접속하기를 눌러 데이터베이

스에 로그인합니다.

7) 7단계: 프로그램 저장하기

DB테이블 생성작업까지 모두 끝마친 앱프로그

램 모듈을 파일형태로 PC에 저장합니다.

상단 메뉴중 [파일]–[다른저장]을 선택후 “제

품등록”으로 파일명칭을 입력하고 저장버튼

을 누릅니다.

B.

7


8) 8단계: 모의실행 및 보완작업 하기

저작도구의 좌측 상단에 있는 실행버튼을 눌

러 실행모드로 전환하고, 앱이 제대로 작동

하는 테스트합니다.

화면상의 모든 항목들에 데이터를 입력한 후

에 저장하고, 앞장으로 이동, 뒷장으로 이동

등의 버튼을 눌러서 정상 작동하는지 점검합

니다.

테스트 과정에서 추가 또는 제거할 항목들이

발견되면, 실행버튼을 다시 눌러 편집모드로

전환하고, 앞서 수행했던 방법과 동일하게

변경할 항목은 그려넣거나 삭제한 후에

“F10”키를 눌러서 다시 DB테이블 구조까

지 변경하여 줍니다.

이렇게 수정작업을 하고, 다시 실행버튼을 눌러

실행결과를 확인합니다. 다음 예제 테스트를 위

해 3개 이상의 데이터를 입력, 저장합니다.

※ 좌측은 예시입니다.

2. 헤더아이템 입력유형 템플릿 활용방법

헤더아이템 입력유형은 상관관계 프로그램이나 상하위구조 프로그램 형태를

의미 합니다.

상관관계 프로그램에서는 리스트 형태의 입력 화면으로, 사용자는 상단에 기

본 정보를 입력하고, 하단에는 해당 업무건에 대한 상세 정보를 리스트 형태

로 등록하는 프로그램 입니다. 한 건의 업무 등록에 해당하는 여러 건의 상세

아이템 정보가 존재할 경우에 사용하면 됩니다.

상하위구조 프로그램에서는 관리하는 정보들이 서로 상하위 관계를 가지고 있

는 단계형 데이터 입력 프로그램으로 사용 하실 수도 있습니다. 이런 경우는

데이터들의 상하위 관계에 따라 체계적으로 관리하고자 하는 경우에 유용하게

사용 하실 수 있습니다.

이 2가지 프로그램 유형 모두 주로 사용하는 아톰이 역시 데이터입력란 이고,

스크롤묶기 아톰 및 팝업묶기 아톰도 적용되어 있습니다. 따라서 필요하실 경

우 사용하실 수 있습니다.

헤더아이템 입력유형 템플릿을 이용하여 매출을 관리하는 “매출장”을 만들어

보겠습니다. 매출장의 기능은 하나의 거래처에 여러건의 제품을 판매할 수

있도록 하겠습니다.

8



제품정보를 입력하는 기능

입력란을 클릭하면 팝업창이 나와 선택하는 기능

여러가지 버튼중 하나를 선택하는 라디오버튼 기능

여러 데이터 중 하나를 선택하는 콤보박스기능

서로 다른 테이블을 저장하는 기능


[파일]-[새로 만들기] 대화상자에서 헤더아이템 입

력 유형 템플릿을 선택하고 확인을 누릅니다.

어플리케이션 모델의 헤더아이템 입력 유형의 페

이지가 생성됩니다.



프로그램 제목에서 클릭 이후 F2버튼을 눌러, 앱의 제목을 “매출장”으로 변경합니다.

3) 3단계 : 항목명 설정 및 편집하기

템플릿에서 제공하는 항목명을 변경하거나, 항목을 추가 또는 삭제하여 줍니다.

① 헤더의 항목명 변경하기

상단에 있는 헤더 항목명을 원하는 명칭으로 변경

해 줍니다.

항목명1은 거래처, 항목명2는 담당부서, 팝업항목1은 납품장소, 라디오1은 거래유형, 콤보항목은 결제

조건, 항목명3은 적요, 날짜항목은 납품예정으로 변경합니다.

9


② 헤더의 불필요한 항목 삭제하기

템플릿에서 사용하지 않는 항목명4, 항목명5은 삭제

합니다.

항목을 삭제하고 난 뒤 다른 아톰들의 위치를 적절

하게 조절해줍니다.

.

③ 아이템의 항목명 변경하기

하단에 있는 아이템 항목명을 원하는 명칭으로 변경

해 줍니다.

사각형그리기 아톰의 아이템 정보를 매출상세정보, 아이템1은 모델, 아이템2는 규격, 아이템3은 단가, 아이템4는 수량, 아이템5는 부가세, 아이템6은 금액

으로 변경합니다.

4) 4단계 : 입력란 처리방식 설정하기

템플릿의 항목은 자료형은 “문자형”으로 구성되어 있습니다. 따라서 각각의 입

력란 아톰들의 자료형(정수형, 실수형 등)과 길이를 알맞게 설정합니다. 또한

입력항목은 “데이터입력란”으로 구성되어 있습니다. 따라서 각각의 입력란을 성격에 맞게 아톰을 변경해 주겠습니다. 즉 입력할 자료의 성격에 따라 날짜입력

란, 콤보박스, 라디오박스, 이미지입력란등으로 변경합니다.

① 자료형 변경




정합니다.

“단가”, “수량”, “부가세”, “금액” 항목의 자료형

태를 문자형에서 실수형으로 변경합니다. 이로써 단가항목에는 숫자만 입력이 가능해지고 자동으

로 우측정렬과 세자리마다 콤마가 찍힙니다.

모델, 규격, 단가, 수량, 부가세, 금액에 해당하는 데이터 입력란의 경우 데이터 속성의 DB 정보 설정에서 필드명을 항목명과 같게 만듭니다. 이 과정으로 더 정확한 테이블을 생성가능합니다.

10


② 팝업묶기 아톰 설정

“납품장소” 항목의 입력란은 데이터 입력이 필

요한 곳에서 팝업(Pop-up)창을 띄워서 나타난

정보 중에서 선택 입력하는 도구인 팝업묶기 아톰입니다.

“납품장소”의 팝업묶기에서 [우클릭]-[데이터속

성]을 통해 팝업묶기 설정에 들어갑니다.

자체정의를 선택하고 팝업1, 내용1을 선택후 팝

업항목에서 서울물류, 서울특별시로 변경합니다. 같은 방법으로 팝업2, 내용2도 대전창고, 대전광

역시로 변경합니다. 또한 더 많은 내용을 추가하

고 싶으면 팝업항목에 추가할 내용을 적고 추가 버튼을 눌러 팝업항목을 추가합니다.

③ 콤보박스 아톰 설정

“결제조건” 항목의 입력란은 미리 설정된 데이터

들을 리스트 형태로 보여주고, 사용자가 선택해

서 데이터를 입력하는 콤보박스 아톰입니다.

“결제조건”의 콤보박스에서 [우클릭]-[스타일속

성]을 통해 콤보박스 설정에 들어갑니다.

자체정의를 선택하고 콤보항목1을 선택후 표시

데이터에 카드결제로 적고 변경버튼을 누릅니다. 이후 콤보항목2에는 현금결제, 콤보항목3에는 분할결제로 변경합니다.

④ 라디오버튼 아톰 설정

“거래유형”항목의 입력란은 사용자가 직접 타이

핑해서 입력하는 형식의 데이터가 아니라, 몇 개

의 버튼항목 중에서 하나의 값만 선택하는 형태

데이터인 라디오버튼 아톰입니다.

11


라디오버튼 내 항목을 각각 내수, 수출로 변경합

니다.

내수 라디오버튼에서 [우클릭]-[스타일속성]을 통해 라디오버튼 설정에 들어갑니다.

그룹설정이 체크설정이 되어있는 것을 확인하고 설정값을 “d”로 변경합니다.

수출 라디오버튼에서 동일한 방법으로 라디오버

튼 설정에 들어가 그룹설정이 체크 해제 되어있

는 것을 확인하고 설정값을 “e”로 변경합니다.

설정 값은 라디오 버튼 아톰을 사용자가 선택하

여 저장했을 때 실제로 DB에 저장되는 값입니다.

5) 5단계 : 테이블정보 생성하기


스(DB)를 설계하고 생성해줍니다.

매출장 테이블에는 “등록번호”~”납품예정” 항목

들의 데이터 값이 저장되어야 하며, 매출상세정보 테이블에는 “품목코드”~”금액” 항목들의 데이터 값이 저장되어야 합니다.

2개의 테이블 매출장, 매출상세세정보가 한 폼에

서 동시에 만들어집니다. 따라서 테이블 이름과

필드명을 정의하는 추가 작업이 필요합니다.

스크롤 묶기 아톰에서 [우클릭]-[테이블명설정]을 통해 스크롤묶기(테이블명) 설정에 들어갑니다.

테이블명을 “프로그램상세”에서 “매출상세정보”로 바꾸고 변경 체크설정합니다.

12


F5-F10를 통해 현재 폼의 DB테이블을 자동으

로 설계하고 생성합니다.

자세히를 클릭하면 좌측과 같이 ERD 설계도와 질의문을 확인할수 있습니다. [적용]버튼을 눌러 DB에 반영합니다.

6) 6단계 : 프로그램 저장하기

DB테이블 생성작업까지 모두 끝마친 앱프로

그램 모듈을 파일형태로 PC에 저장합니다.

상단 메뉴중 [파일]–[다른저장]을 선택후 “매

출장”으로 파일명칭을 입력하고 저장버튼을

누릅니다.

※ 만약 [모델 저장]을 하게되면 템플릿 자체에 실

습내용이 저장되어 다시 템플릿을 사용하기 어

려울 수 있으니 [다른 저장]을 권장합니다.








니다.











13


3. 헤더탭아이템 입력유형 템플릿 활용방법

헤더탭아이템 입력유형 템플릿은 구분입력 프로그램이라고 보시면 됩니다. 특정

기준에 따라 항목들이 그룹별로 분리 되어 있는 형태로, 여러 분류의 기초 정보

를 관리하는 복수의 항목 등록 프로그램입니다.

즉, 입력하고자 하는 여러 항목들을 관련성 / 유사성 등의 여러 기준에 따라 분

류하여 체계적으로 등록 및 관리하고자 할 경우에 사용하시면 유용한 프로그램

입니다.

어떠한 것을 등록할 때 필수적으로 입력하고 확인 해야 하는 기본정보가 존재하

고, 추가적으로 관리할 상세 정보들을 구분하여 등록 및 관리 하고자 할 경우에

도 사용하시면 됩니다. 헤더탭 아이템 입력유형 템플릿을 이용하여 매출을 관리하는 “매출장”을 만들어

보겠습니다. 매출장의 기능은 하나의 거래처에 여러건의 제품을 판매할 수 있도

록 하겠습니다.


제품정보를 입력하는 기능

입력란을 클릭하면 팝업창이 나와 선택하는 기능

여러가지 버튼중 하나를 선택하는 라디오버튼 기능

여러 데이터 중 하나를 선택하는 콤보박스기능

서로 다른 테이블을 저장하는 기능

탭을 통해 더 많은 자료를 입력하는 기능


[파일]-[새로 만들기] 대화상자에서 헤더탭아이

템 입력 유형 템플릿을 선택하고 확인을 누릅니

다.

어플리케이션 모델의 헤더탭아이템 입력 유형의 페이지가 생성됩니다.

탭뷰(Tab view)

탭뷰를 사용해 관리하는 정보들의 속

성 및 업무처리 유형에 따라 하나의

화면에 여러 개의 탭으로 분리하여

구성하게 되어있습니다.

스마트폰의 특성상 크기가 제한된 하

나의 화면에서 많은 항목을 나타낼수

없고, 또 서로 속성이 다른 항목을

구분하여 보여주고자 할 경우 사용하

시면 편리한 큰 장점이 있습니다.

14




프로그램 제목을 클릭 이후 F2버튼을 눌러, 앱의 제목을 “탭매출장”으로 변경합니다.

3) 3단계 : 항목명 설정 및 편집하기

템플릿에서 제공하는 항목명을 변경하거나, 항목을 추가 또는 삭제하여 줍니다.

① 헤더의 항목명 변경하기

상단에 있는 헤더 항목명을 원하는 명칭으로 변

경해 줍니다.

항목명1은 거래처, 항목명2는 담당부서, 팝업항

목1은 납품장소, 라디오1은 거래유형, 콤보항목

은 결제조건, 항목명3은 적요, 날짜항목은 납품예

정으로 변경합니다.

② 헤더의 불필요한 항목 삭제하기

템플릿에서 사용하지 않는 항목명4, 항목명5은 삭제합니다.

항목을 삭제하고 난 뒤 다른 아톰들의 위치를 적절하게 조절해줍니다.

③ 탭뷰의 항목명 변경하기

하단에 있는 탭 항목명을 원하는 명칭으로 변경

해 줍니다.

첫번째 탭 사각형그리기 아톰의 아이템 정보(1)을 매출상세정보, 아이템1은 모델, 아이템2는 규격, 아이템3은 단가, 아이템4는 수량, 아이템5는 부가세, 아이템6은 금액으로 변경합니다.

두번째 탭 사각형그리기 아톰의 아이템 정보(2)를 참고자료, 항목명6은 결제방식, 항목명7은 납품방식, 항목명8은 비고로 변경합니다.

15


④ 탭뷰의 항목명 변경하기

탭뷰 아톰에서 [우클릭]-[스타일 속성]을 통해 탭뷰(스타일 속성)설정에 들어갑니다.

탭 제목1을 클릭한 후 “매출정보”로 바꾼뒤 변경 버튼을 클릭합니다. 탭 제목 항목의 첫번째가 매출정보로 바뀌게 됩니다.

동일한 방법으로 탭 제목2도 “참고정보”로 바꾸

게 됩니다.

4) 4단계 : 입력란 처리방식 설정하기

템플릿의 항목은 자료형은 “문자형”으로 구성되어 있습니다. 따라서 각각의

입력란 아톰들의 자료형(정수형, 실수형 등)과 길이를 알맞게 설정합니다.

또한 입력항목은 “데이터입력란”으로 구성되어 있습니다. 따라서 각각의 입력

란을 성격에 맞게 아톰을 변경해 주겠습니다. 즉 입력할 자료의 성격에 따라 날짜입력란, 콤보박스, 라디오박스, 이미지입력란등으로 변경합니다.

① 자료형 변경




정합니다.

“단가”, “수량”, “부가세”, “금액” 항목의 자료형

태를 문자형에서 실수형으로 변경합니다. 이로써 단가항목에는 숫자만 입력이 가능해지고 자동으

로 우측정렬과 세자리마다 콤마가 찍힙니다.

모델, 규격, 단가, 수량, 부가세, 금액에 해당하는 데이터 입력란의 경우 데이터 속성의 DB 정보 설정에서 필드명을 항목명과 같게 만듭니다. 이 과정으로 더 정확한 테이블을 생성 가능합니다.

16


② 팝업묶기 아톰 설정

“납품장소” 항목의 입력란은 데이터 입력이 필

요한 곳에서 팝업(Pop-up)창을 띄워서 나타난

정보 중에서 선택 입력하는 도구인 팝업묶기 아톰입니다.

“납품장소”의 팝업묶기에서 [우클릭]-[데이터속

성]을 통해 팝업묶기 설정에 들어갑니다.

자체정의를 선택하고 팝업1,내용1을 선택후 팝업

항목에서 서울물류,서울특별시로 변경합니다. 같

은 방법으로 팝업2,내용2도 대전창고,대전광역시

로 변경합니다. 또한 더 많은 내용을 추가하고 싶으면 팝업항목에 추가할 내용을 적고 추가 버

튼을 눌러 팝업항목을 추가합니다.

③ 콤보박스 아톰 설정

“결제조건” 항목의 입력란은 미리 설정된 데이터

들을 리스트 형태로 보여주고, 사용자가 선택해

서 데이터를 입력하는 콤보박스 아톰입니다.

“결제조건”의 콤보박스에서 [우클릭]-[스타일속

성]을 통해 콤보박스 설정에 들어갑니다.

자체정의를 선택하고 콤보항목1을 선택후 표시

데이터에 카드결제로 적고 변경버튼을 누릅니다. 이후 콤보항목2에는 현금결제, 콤보항목3에는 분할결제로 변경합니다.

④ 라디오버튼 아톰 설정

“거래유형”항목의 입력란은 사용자가 직접 타이

핑해서 입력하는 형식의 데이터가 아니라, 몇 개

의 버튼항목 중에서 하나의 값만 선택하는 형태

데이터인 라디오버튼 아톰입니다.

17


라디오버튼 내 항목을 각각 내수, 수출로 변경합

니다.

내수 라디오버튼에서 [우클릭]-[스타일속성]을 통해 라디오버튼 설정에 들어갑니다.

그룹설정이 체크설정이 되어있는 것을 확인하고 설정값을 “d”로 변경합니다.

수출 라디오버튼에서 동일한 방법으로 라디오버

튼 설정에 들어가 그룹설정이 체크 해제 되어있

는 것을 확인하고 설정값을 “e”로 변경합니다.

설정 값은 라디오 버튼 아톰을 사용자가 선택하

여 저장했을 때 실제로 DB에 저장되는 값입니다.

5) 5단계 : 테이블정보 생성하기


스(DB)를 설계하고 생성해 줍니다.

탭매출장 테이블에는 “등록번호”~”납품예정”,”결

제방식”~”비고” 항목들의 데이터 값이 저장되어

야 하며, 탭매출상세정보 테이블에는 “품목코

드”~”금액” 항목들의 데이터 값이 저장되어야 합니다.

2개의 테이블 탭매출장, 탭매출상세정보가 한

폼에서 동시에 만들어집니다. 따라서 테이블 이

름과 필드명을 정의하는 추가 작업이 필요합니

다.

스크롤 묶기 아톰에서 [우클릭]-[테이블명설정]을 통해 스크롤묶기(테이블명) 설정에 들어갑니다.

18


테이블명을 “프로그램상세”에서 “탭매출상세정

보”로 바꾸고 변경 체크설정합니다.

F5-F10를 통해 현재 폼의 DB테이블을 자동으

로 설계하고 생성합니다.

자세히를 클릭하면 좌측과 같이 ERD 설계도와 질의문을 확인할수 있습니다. [적용]버튼을 눌러 DB에 반영합니다.




상단 메뉴중 [파일]–[다른저장]을 선택후 “탭

매출장”으로 파일명칭을 입력하고 저장버튼

을 누릅니다.




19









니다.










납품장소의 팝업아톰은 더블클릭을통해 서울물

류센터 혹은 대전창고를 선택합니다. 거래유형

의 라디오 버튼 아톰은 내수를 선택하게되면 내

수를 뜻하는 알파벳인 “d”를, 수출을 선택하면

알파벳 “e”를 DB에 저장합니다.


20


4. 다중데이터 검색유형 템플릿 활용방법

다중데이터 검색유형 템플릿은 데이터 검색 및 의사결정 처리에서 가장 기본이

되는 유형입니다. 특별한 조건 없이 사용자가 검색버튼을 누르면 전체적으로

등록된 정보를 검색하여 검색창으로 데이터가 출력되도록 하는 단순 조회 프로

그램 입니다.

또한 상황에 따라서 데이터를 조회하기 전에 입력해야할 검색조건을 고정으로

지정하여 사용자가 필수적으로 입력하도록 할 수도 있습니다. 이렇게 되면 등

록된 데이터를 조건하에 해당하는 데이터만 검색하여 보여 주고자 할 경우에

사용하면 됩니다.

역시나 필요에 따라 검색 수행조건을 달리 구성 하셔도 됩니다. 이럴경우는 사

용자의 필요에 따라 자주 사용하는 항목을 기본조건으로 구성하여, 사용자가

선택적으로 조건을 주어 검색하도록 할 경우에 유용하게 쓰입니다.

다중데이터 검색유형 템플릿을 이용하여 등록한 제품을 조회하는 “제품조회” 앱

을 만들어 보겠습니다.


제품등록에서 입력해둔 데이터를 검색하는 기능

제품의 상세페이지가 나오는 기능

검색조건을 설정해 검색하는 기능


[파일]-[새로 만들기] 대화상자에서 다중데이터 검색 유형 템플릿을 선택하고 확인을 누릅니다.

어플리케이션 모델의 다중 데이터 검색 유형의 페이지가 생성됩니다.

21



프로그램 제목을 설정해줍니다..

프로그램 제목에서 클릭 이후 F2버튼을 눌러, 앱의 제목을 “제품조회”로 변경합니다.

3) 3단계 : 데이터 조회도구 설정하기

조회도구는 “검색창”과 “검색도구”로 구성되어 있습니다. DB에 저장되어있는 데이터를 검색창에서 보여주기 위한 설정을 해주겠습니다.

① 검색창 설정

[파일]-[서버접속]을 통해 DB에 접속합니다.

검색창 아톰에서 [우클릭]-[데이터속성]을 통해 검색창(데이터속성)설정에 들어갑니다.

DB정보 설정 : 컬럼헤더에 들어갈 필드명과 자

료형태 등을 설정합니다. 테이블명은 “제품등

록” 으로 설정합니다. 등록번호 필드명을 선택한 뒤 추가합니다. 이후 제품명, 공급자명, 가격, 판

매여부를 선택, 추가합니다.

표시형식 설정 : 검색창에 표시될 형식을 설정합

니다. 등록번호 필드를 추가할 때는 참조정보키

를 체크합니다. 항목제목을 변경해 검색창의 컬

럼헤더에 들어갈 이름을 필드명과 다르게 할 수 있습니다.

만약 변경이 필요하다면, 변경할 항목을 선택한

상태로 변경 사항을 설정하고 변경버튼을 눌러

변경합니다.

22


② 검색조건 설정하기

검색조건 아톰에서 [우클릭]-[데이터속성]을 통해 검색조건(데이터속성) 설정에 들어갑니다.

테이블명에서 “제품등록” 테이블을 선택하고 제

품명 필드와 가격 필드를 항목으로 추가합니다.

이를 통해 특정한 제품명을 검색 조건으로 설정

하거나 원하는 가격대의 제품을 검색할 수 있습

니다.

4) 4단계 : 기능버튼 설정하기

상세정보 버튼에서 [우클릭]-[스타일속성]을 통해 기능버튼(스타일속성) 설정에 들어갑니다.

폼연결유형에서 검색창을 선택합니다.

검색창의 데이터를 클릭후 상세정보 버튼을 누르

면 해당 데이터의 상세폼이 나오게 됩니다.

상세정보 버튼에서 [우클릭]-[모델연결]을 통해 기능버튼(모델연결) 설정에 들어갑니다.

찾아보기 버튼을 눌러 “제품등록.QPM”폼을 찾

아 연결해줍니다.

만약 실행모델명에 @path: 형태의 경로가 아니

면 운영환경에서 기본 실행 경로를 영업관리 폴

더로 설정해주시면 됩니다.





품조회”으로 파일명칭을 입력하고 저장버튼

을 누릅니다.




23






검색 버튼을 클릭하여 검색창에 나타난 데이

터를 확인합니다.

검색창에서 데이터를 선택한 후 상세정보 버튼을 클릭하여 상세정보 버튼과 연결된 화면을 확인합

니다.

테스트 과정에서 추가 또는 제거할 항목들이 발

견되면, 실행버튼을 다시 눌러 편집모드로 전환

하고, 앞서 수행했던 방법과 동일하게 변경할

항목은 그려넣거나 삭제합니다.


실행결과를 확인합니다.


5. 검색데이터 처리유형 템플릿 활용방법

검색데이터 처리유형 템플릿은 검색될 항목들이 헤더상에서 기본값으로 속성이

다중 줄바꿈으로 되어있습니다. 그리고 검색된 데이터 중에서 하나를 선택하여

상세정보를 본 후 의사 결정 및 처리를 할 수 있는 프로그램 형태입니다.

이 템플릿이 다중데이터 검색 보고서 유형 템플릿과 다른점은 한줄로만 나오던

항목들이 아래쪽의 좌우 스크롤을 조정할 필요 없이 아무리 검색항목이 많아도

한 화면에 다 조회 되어서 편리하게 데이터 분석 및 처리를 할 수 있으며, 이

렇게 조회된 데이터를 가지고 하나를 선택하여 상세정보를 볼 수 있게 해 주고

있습니다.

이 유형도 마찬가지로, 주로 사용된 아톰으로는 검색창과 검색조건, 기능버튼

(검색), 기능버튼(상세폼 보기)만으로 구성되어 있고, 다만 기능버튼(차트연결)

만 하나 추가 되어 있습니다.

24






자동 줄 바꿈으로 1개이상의 열로 검색창을 구성

하는 기능

제품과 가격을 통해 차트를 구성하는 기능


[파일]-[새로 만들기] 대화상자에서 검색데이터 처리 유형 템플릿을 선택하고 확인을 누릅니다.

어플리케이션 모델의 검색데이터 처리 유형의 페이지가 생성됩니다.

다중데이터 검색 유형 템플릿의 검색창과 비교하

면 스타일 속성에서 다중선택, 열구분선, 자동줄

바꿈이 체크되어 적용되어 있습니다.



프로그램 제목에서 클릭 이후 F2버튼을 눌러, 앱의 제목을 “제품조회검색”로 변경합니다.

25








료형태등을 설정합니다. 테이블명은 “제품등록”으로 설정합니다. 등록번호 필드명을 선택한 뒤 추가합니다. 이후 제품명, 공급자명, 가격, 판매

여부,제조년월을 선택, 추가합니다.







변경합니다.







니다.

26



① 상세폼보기 기능버튼 설정하기


기능버튼 설정에서 기능선택이 상세폼보기인지 확인합니다.


검색창에서 데이터를 클릭하고 상세정보 버튼을 누르면 데이터의 상세폼이 나오게 됩니다.







② 차트보기 기능버튼 설정하기

차트분석 버튼[우클릭]-[차트옵션]을 통해 기능버

튼(차트항목설정) 설정에 들어갑니다.

참조아톰명을 검색창으로 선택합니다.

항목제목에서 제품명, 계열설정에서 X축으로 선

택하고 추가버튼을 클릭합니다.

항목제목에서 가격, 계열설정에서 Y축, 차트종류

를 가로막대, 함수 실제값을 선택하고 추가버튼

을 클릭합니다.

차트설정시 Y축은 수치가 표시되는 항목으로 설정해야 차트 구현이 가능합니다.

27






품조회검색”으로 파일명칭을 입력하고 저장

버튼을 누릅니다.









터를 확인합니다. 자동 줄 바꿈 속성에 의해

칼럼헤더가 2개의 줄로 구성되는 것을 확인

가능합니다.


니다.

차트분석 버튼을 클릭하여 차트연결 기능을 확인

합니다. x축이 제품명, y축이 가격인 가로막대 그래프입니다.


28


6. 차트작성 보기유형 템플릿 활용방법

차트작성 보기유형 템플릿은 등록된 데이터를 차트로 고정하여 표현 하도록 할

수 있고, 검색창에 조회 항목을 기준으로 사용자가 차트로 연결하여 구성 하여

보여 줄 수도 있는 프로그램 형태 입니다.

등록된 데이터를 차트로 표현하여 비교 분석하고자 하거나, 등록된 데이터를

검색 하고 검색 항목 중 비교 분석 하고자 하는 항목을 사용자가 직접 지정 하

여 차트로 나타 내도록 하는 경우에 아주 유용 하게 쓰일수 있습니다.

한 화면에서 위에는 검색창, 아래는 차트가 복합되어 있는 형태로도 되어 있습

니다. 따라서 분석 하려는 데이터를 검색창과 차트로 동시에 보여 주고자 할

경우에 사용 합니다.





제품과 가격을 통해 차트를 구성하는 기능


[파일]-[새로 만들기] 대화상자에서 차트작성 및 보기 유형 템플릿을 선택하고 확인을 누릅니다.

어플리케이션 모델의 차트작성 및 보기 유형의 페이지가 생성됩니다.



프로그램 제목에서 클릭 이후 F2버튼을 눌러, 앱의 제목을 “제품조회검색차트”로 변경합니다.

29








료형태 등을 설정합니다. 테이블명은 “제품등

록” 으로 설정합니다. 등록번호 필드명을 선택한 뒤 추가합니다. 이후 제품명, 공급자명, 가격, 판

매여부을 선택, 추가합니다.







변경합니다.







니다.

30


③ 차트 설정하기

차트아톰에서 [우클릭]-[데이터속성]을 통해 차트

(데이터속성) 설정에 들어갑니다.

데이터원천을 검색데이터로 선택합니다.

항목제목에서 제품명, 계열설정에서 X축으로 선

택하고 추가버튼을 클릭합니다.

항목제목에서 가격, 계열설정에서 Y축, 차트종류

를 가로막대, 함수 실제값을 선택하고 추가버튼

을 클릭합니다.

이제 X축이 제품명, Y축이 가격인 막대그래프가 만들어집니다.




검색창의 정보를 상세정보 버튼을 클릭하여 볼 수 있게 됩니다.







31






품조회검색차트”로 파일명칭을 입력하고 저

장버튼을 누릅니다.









터를 확인합니다.


니다.

한 화면에 검색창과 차트를 동시에 보여줘 비교

분석하기 편한 화면을 구성할 수 있습니다.

32


7. 트리메뉴 작성유형 템플릿 활용방법

트리메뉴 작성유형 템플릿은 만들고자 하는 어플리케이션의 첫 화면, 즉 메인

화면으로 사용 하실 수 있습니다.

이 유형의 템플릿을 활용하여 사용하면, 메인 화면을 트리형태로 구조적으로

나타낼 수 있습니다.


영업관리라는 타이틀 메뉴

자식메뉴로로 제품조회검색차트, 매출장, 제품등

록 폼을 설정

자식메뉴를를 클릭했을 때 해당 폼으로 넘어가는 기능


[파일]-[새로 만들기] 대화상자에서 트리메뉴 작

성 유형 템플릿을 선택하고 확인을 누릅니다.

어플리케이션 모델의 트리 메뉴 작성 유형의 페

이지가 생성됩니다.

2) 2단계 : 최상단 메뉴 수정하기

트리구조의 새메뉴 노드를 선택합니다.

프로그램정보 그룹의 메뉴명 입력란에 “영업관

리”를 입력합니다.

33


3) 3단계 : 자식메뉴 메뉴 생성하기

좌측 실행메뉴-일반에서 자식으로 생성을 선택합

니다.

트리구조 영업관리의 하위노드인 새메뉴 노드를 선택합니다.

프로그램정보 그룹의 메뉴명 입력란에 “제품등

록”을 입력합니다.

4) 4단계 : 파일경로 설정하기

트리구조의 제품등록을 선택합니다.

실행문 그룹의 파일경로에 찾아보기를 이용하여 제품등록 모델인 “제품등록.QPM”을 선택하여 파일 경로를 지정합니다.

5) 5단계: 동일 레벨 메뉴 생성하기

트리구조의 제품등록을 선택한 후 좌측 실행메뉴

-일반의 동일레벨 생성을 선택합니다.

트리구조의 영업관리의 하위 노드인 새메뉴 노드

를 선택합니다.

프로그램 정보 그룹의 메뉴명 입력란에 “제품조

회검색차트”를 입력합니다.제품등록메뉴와 동일

한 방법으로 제품조회검색차트 모델인 “제품조

회검색차트.QPM”을 선택하여 파일경로를 지정

합니다.

같은 방법으로 매출장도 추가해줍니다.

34


6) 6단계 : 저장하기

XML 저장을 체크한 뒤 저장버튼을 누릅니다.

“영업관리메뉴”라는 이름으로 저장합니다.

저장한 폴더에 메뉴파일 “인사관리메뉴.QMU”와 메뉴파일 “인사관리메뉴.QMX”이 생성됩니

다.

7) 7단계 : 메뉴 사용하기

[파일]-[새로만들기]에서 빈폼을 생성합니다.

이벤트 설정도구에서 확장메뉴 아톰을 적당한 위치에 배치합니다.

확장메뉴 아톰에서 [우클릭]-[스타일 속성]을 통

해 확장메뉴(스타일속성) 설정에 들어갑니다.

찾아보기를 통해 저장한 폴더 내 “영업관리메

뉴.QMX”를 연결합니다.

8) 8단계 : 모의실행 및 보완작업 하기

[도구상자]-[실행모드전환]을 클릭하여 실행결과

를 확인합니다.

메뉴를 누르면 아래로 펼쳐지면서 제품등록, 매

출장, 제품조회검색차트 메뉴가 나오게 됩니다.

메뉴항목을 선택하면 링크된 화면이 열립니다.

35

app model 템플릿을 활용한 앱개발...

Documents