~ 제 3 단계 ~
1. 상기 상기 제 2 단계의 예제에서 다음의 구성을 추가한다.
1-1. 제 3 단계의 프로젝트의 명칭을 RSSAplicationVersion으로 한다.
1-2. 이 예제에서 사용된 그림파일은 디자이너창의 미디어컬럼의 파일명칭을 클릭하여 컴퓨터에 다운로드할 수 있다.
또는, 압축파일(RSSApplicationVersion.zip)을 풀어서 폴더(assets)안에 있는 그림파일을 사용하여도 된다.
1-3. 디자이너창의 전체를 나타내는 스크린샷은 다음과 같다.
1-3-1. 상기 스크린 샷에서 “RSS 구하기”는 그림파일(getRSS.png)에 해당하고, 버튼(btnGetRSS)의 속성컬럼의 이미지(Image)난에서 해당 그림파일을 각각 선택하면 상기와 같이 나타난다.
1-3-2. “기사 선택”은 그림파일(selectArticle.png)에 해당하고, 리스트피커(SelectListpicker)의 속성컬럼의 이미지(Image)난에서 해당 그림파일을 각각 선택하며 상기와 같이 나타난다.
1-3-3. 대기표시모드를 위해 클록을 추가하고, 대신에 통보자(Notifier)는 삭제한다.
참고 사항: 상기 제 2 단계에서 설명한 바와 같이, 디자이너창에서 통보자를 삭제하기 전에 블록에디터창의 작업영역에서 통보자에 관한 블록을 먼저 삭제하는 것이 바람직하다.
1-3-4. RSS에 의한 결과정보를 얻기 위해서는 시간이 다소 걸린다. 따라서, 대기표시모드를 사용한다. 디자이너창의 대기모드표시를 확대한 스크린샷은 다음과 같고, 이에 대한 디자인 구성에 대해 설명한다.
상기 두 구성요소(RSS 구하기, 기사 선택)와 대기표시모드사이에 간격을 두기 위해 수직배열구성요소를 사용하고, 속성컬럼에서 폭(Width)을 “Fill parent”로 하고 높이(Height)를 3픽셀로 한다.
폭을 “Fill parent”로 설정하고 높이를 60 픽셀로 설정한 수평배열구성요소를 사용하여 캔버스(폭과 높이를 모두 50 픽셀로 설정함)와 라벨을 수평방향으로 배치한다.
폭을 20 픽셀로 설정하고 높이를 5 픽셀로 설정한 수평배열구성요소를 사용하여 화면 좌측의 변과 캔버스사이에 20픽셀의 간격을 둔다.
대기표시를 하기 위해, Wait로 정정하고 waiting.png를 그림으로 사용한 이미지스프라이트(Wait)를, 캔버스에 배치한다. 여기서, 이미지스프라이트(ImageSprite)에 대해 상세하게 설명하면, 구성요소컬럼에서 Wait로 정정하고 속성컬럼의 그림(picture)난에서 waiting.png를 선택한다.
상기 라벨의 텍스트난에 굵은 적색 글자로 “잠깐 기다리세요.”라고 기재하고, 대기표시와 라벨의 글씨가 밸런스가 잡히도록 높이를 50픽셀로 설정한 수직배열구성요소내에 글씨를 배치하고 또한 높이를 15 픽셀로 설정한 수직배열구성요소를 글씨위에 배치한다.
이와 같이 구성된 대기표시와 라벨의 글씨가 대시시간동안만 표시되도록, 높이를 70 픽셀로 설정하고 비지블(Visble)의 체크난에 체크표시를 하지 않은 수직배열구성요소내에 상기 배열전체를 위치시킨다.
1-4. 블록에디터창에서 대기표시모드에 관한 블록은 다음과 같이 조합한다.
1-4-1. 이미지스프라이트(Wait)를 회전시키기 위해 각도리스트(AngleList)를 다음의 스크린샷의 블록그룹과 같이 준비한다. 여기서, 각도리스트는 변수블록을 사용하여 각도리스트블록을 만든다.
참고 사항: 이 리스트를 자세히 살펴보면, -90, -180, -270, -360은 리스트에 포함되어 있지 않다. 처음에는 이들의 각도를 포함시켰지만, 이미지스프라이트의 회전이 진동을 하면서 회전하기 때문에 대기표시모드로 적합하지 않았다. 이 원인을 파악하기 위해 해당 타이머의 타임인터벌을 길게 하여 대기표시모드를 관찰한 바 상기 각도에서 순간적으로 이동하는 것을 발견하고, 상기 각도를 생략하면 대기표시모드가 진동하지 않고 원만하게 회전할 것으로 예상하고 재시도를 한바, 예상한 바와 같이 되었다.
1-4-2. 상기 각도를 식별하기 위해 대기인덱스(WaitingIndex)를 작성한다.
1-4-3. 대기표시모드를 구동하기 위해 RSS구하기 버튼에 다음의 블록을 추가한다.
스프라이트의 속도를 0으로 설정하는 블록조합{(set Wait.Speed to), (number 0)}과, 스프라이트를 화면에 표시하기 위해 수직배열구성요소를 육안으로 볼수 있도록 하는 블록조합{(set VerticalArrangement2.Visible to), (true)}과, 스프라이트를 회전가능 하게 하는 블록조합{(set Wait.Rotates to), (true)} 및 클록을 구동시키는 블록조합{(set Clock1.TimerEnabled to), (true}}을 RSS구하기 버튼에 추가한다.
1-4-4. 상기 RSS 구하기 버튼에 의해 구동되는 클록의 타이머에 대해 설명한다.
대기인덱스(WaitingIndex)가 각도리스트의 각도의 개수와 동일한 경우에는 대기인덱스를 0으로 초기화하여 대기표시모드를 반복한다. 또한, 타이머의 시간주기로 1 만큼씩 증가하는 대기인덱스에 대응하는 각도를 각도리스트에서 선택하고 스프라이트의 진행방향을 변경한다. 즉, 스프라이트를 회전시킨다.
1-4-5. 웹사이트의 데이터베이스로부터 RSS의 입력이 완료되면, 대기표시모드가 표시되는 화면에 해당하는 수직배열구성요소를 닫고 타이머의 동작도 정지한다.
즉, RSS데이터베이스의 갓밸류 블록(rssdb.GotValue)내의 하단부분에 블록조합{(set VerticalArrangement2 to), (false)}과 블록조합{(set Clock.TimerEnabled to), (false)}을 추가한다.
1-4-6. 앱을 시작할 때에 화면에 해당하는 수직배열구성요소를 닫힌 상태로 하는 스크린 초기화 블록은 다음의 스크린샷과 같다.
이상과 같이 블록을 작성함으로써, 대기표시모드를 성공할 수 있다.
참고사항 1: 지진에 관한 정보를 알려주는 미국지질조사소의 지진센터에 제공하는 RSS(http://earthquake.usgs.gov/eqcenter/catalogs/1day-M2.5.xml)를 텍스트박스난에 입력하고 RSS 구하기 버튼을 터치하면 다음의 스크린샷과 같이 대기모드가 잠시 나타난 다음 지진에 관한 정보를 알려준다.
참고사항 2: 상기 스크린샷에서 기사버튼을 터치하면 다음의 스크린샷에 나타난 바와 같이 스크린에 관한 정보리스트가 나타난다.
참고 사항 3: 상기 지진정보리스트에서 지진강도가 높은 “M 6.6, south of the Kermadec Islands를 터치하면 자세한 지진정보를 제공하는 해당 사이트로 런칭한다.
2. 지금까지의 설명한 블록을 종합한 3개의 스크린샷을 이하 나타낸다.
댓글 없음:
댓글 쓰기