앱인벤터 버튼 컴포넌트 예제

버튼 예제

목적

. 버튼의 다양한 속성의 값을 설정해보는 예제이다.

. 예제를 통해 버튼의 속성값을 직접 설정해보고

. 버튼의 블록들을 활용하여 기능을 이해하고 실습해본다.

. 예제를 통해 버튼의 기능을 활용할 수 있다.

 

 

 

화면은 모두 버튼 컴포넌트로 구성한다.

화면 제일 위에 있는 '버튼컴포넌트'는 아래 버튼을 클릭할 때마다 결과가 반영이 되는 버튼 컴포넌트이다. 예를 들어 '굵게' 버튼을 클릭하면 '버튼 컴포넌트' 텍스트를 '굵게' 된다.

버튼은 활성화, 굵게, 이탤릭, 글자크게, 글자작게, 높이크게, 높이작게, 너비크게, 너비작게, 버튼이미지 등의 버튼이 있다.

앱인벤터 버튼컴포넌트 예제 화면

 

. 버튼 활성화

활성화 버튼을 클릭하면 '버튼 컴포넌트'가 활성화되고, 한번 더 클릭하면 비활성화된다. 이런식으로 계속 클릭할 때마다 반전시킨다.

 

활성화-변수를 정의하고 초기값으로 참을 설정한다.

활성화값이 참이면 거짓으로 바꾸고, 거짓이면 참으로 바꾸어준다.

그리고 활성화값을 버튼컴포넌트 활성화 값에 활성화변수를 입력한다.

버튼컴포넌트 활성화 코딩블록

 

. 버튼 글꼴굵게

굵게 버튼을 클릭하면 '버튼 컴포넌트'의 텍스트가 굵게 설정되고, 다시 한번 더 클릭하면 일반으로 설정한다. 이런식으로 계속 클릭할 때마다 반전시킨다.

 

 

 

버튼컴포넌트 글꼴굵게 코딩블록

 

 

. 버튼 이텔릭

이텔릭 버튼을 클릭하면 '버튼 컴포넌트'의 텍스트가 이텔릭으로 설정되고, 다시 한번 더 클릭하면 일반으로 설정한다. 이런식으로 계속 클릭할 때마다 반전시킨다.

 

버튼컴포넌트 이탤릭 코딩블록

 

 

. 버튼 글자크기 크게/작게

글자크게/글자작게 버튼을 클릭하면 '버튼 컴포넌트'의 글자 크기를 크게하거나 작게 한다.

 

버튼컴포넌트 버튼클자크기 크게/작게 코딩블록

 

. 버튼 높이 크게/작게

버튼의 높이 크기를 크게/작게 설정한다. 높이크게 버튼을 클릭하면 높이가 1만큼씩 증가하고 높이작게 버튼을 클릭하면 1만큼씩 작게 감소한다.

 

버튼컴포넌트 버튼높이 코딩블록

 

. 버튼 너비 크게/작게

버튼의 너비 크기를 크게/작게 설정한다. 너비크게 버튼을 클릭하면 너비가 1만큼씩 증가하고 너비작게 버튼을 클릭하면 1만큼씩 작게 감소한다.

 

버튼컴포넌트 버튼너비 코딩블록

 

. 버튼 이미지

버튼의 이미지를 변경한다. 이미지 파일의 이름을 1.jpg, 2.jpg, 3.jpg로 올리고, 변수 '이미지'를 정의하여 파일 이름 1, 2, 3을 변경시키면서 파일을 변경시킨다. 이미지-변수가 3보다 크면 다시 1로 변경시켠서 1-2-3-1로 순환시킨다.

버튼컴포넌트 이미지전환 코딩블록

 

 

 

버튼의 모양과 텍스트 정렬은 코딩블록에서 제공하지 않으며, 속성값에서 설정을 해 주어야 한다. 약간의 제약이 있지만 코딩할 때 중요한 것은 아니므로 괜찮다.

 

지금까지 버튼 컴포넌트의 속성값을 코딩블록을 활용하여 설정하는 예제를 작성해보았다.

어려운 코드는 없지만, 실제로 해보면서 코딩 감각과 버튼 컴포넌트를 이해하고 적용하는 폭을 넓히는 것이 이번 예제의 목표이다. 지금까지 따라왔으면 여러분은 승자이며 다음 편에 꼭 만나요.

 

아래 파일을 버튼 컴포넌트 예제파일이다. 참고해서 테스트 해보면 좋을 것 같다요.

button_ex.aia

0.07MB

 

눈으로 보는 것과 직접 실행하며 하는 것은 완전히 달라요.

간단하지만 직접 해보면 이해하고 자신감이 생길거에요...

 

Just Do It!!!

Just Drag&Drop It!!!

 

 

감사합니다.