이번 시간에는 ...

1. 이번 시간에는... 지난 시간에는 WAP 컨텐츠 제작을 위한 마크업 언어인 WML 개발의 첫번째 시간으로, WML의 소개와 정의, WML 문서 구조, WML 사용 첫번째 예제 및 WML의 택스트 포맷 태그와 이미지 처리 태그에 대해 알아 보았습니다. 이번 시간에는 WML 개발 그 두번째 시간으로, 링크 및 태스크 지원 WML 태그들에 대해서 학습해 보도록 하겠습니다.

2. 학습 목표 16 회차 강의에서 다루게 되는 내용은 다음과 같습니다. WML 개발 - II 이번 장의 학습 목표 WML 페이지 이동 태그에 대해 알 수 있다. WML 태스크 수행 태그에 대해 알 수 있다. WML 이벤트 처리 태그에 대해 알 수 있다. WML 사용자 Input 처리 태그에 대해 알 수 있다.

3. <wml> <card> <p> 다른 페이지 이동 <anchor title="page_two"> <go href="http://127.0.0.1/page2.wml"/> 페이지 2 </anchor><br/> 다른 카드 이동 <anchor title="Next_Card"> <go href="#Next_Card"/> 다음 Card </anchor> </p> </card> <card id="card1"> <p> 다음 Card로 이동했음 <br/> </p> </card> </wml> 다른 페이지 이동 <페이지 2> 다른 카드 이동 <다음 Card> 사이트 이동 다른 페이지인 페이지 Number 2로 이동했음 카드간 이동 다음 카드로 이동 했음 같은 WML 문서 내에서 다른 Card로 이동 무선 네트워크 통신으로 다른 사이트로 이동 WML 페이지 이동 Tag • Navigation을 위한 WML 태그 • WML <ANCHOR> 태그 • <ANCHOR> 태그는 <GO> 태그와 함께 사용하여 다른 사이트로의 이동을 위한 하이퍼링크와 하나의 WML 문서내에서 각 WML Card 간 이동을 지원하는 Internal 링크로 사용

4. <wml> <card> <p> <a href="http://127.0.0.1/page_two.wml"/> 전화번호부 <img src="http://127.0.0.1/phone_img.bmp"/> </a> <br/> </p> </card> </wml> 사이트 이동 전화번호부 External 링크 다른 페이지인 페이지 2로 이동했음 다른 사이트에서 이미지 추출 : External 링크 다른 사이트로 이동 WML 페이지 이동 Tag • Navigation을 위한 WML 태그 • WML <A> 태그 • <A> 태그는 <ANCHOR> 와 <GO> 태그의 사용과 그 기능이 같으며, 다른 사이트로의 이동을 위한 하이퍼링크와 하나의 WML 문서내에서 각 WML Card 간 이동을 지원하는 Internal 링크로 사용 • <A> 태그는 사이트 및 WML Card간 이동시 변수를 사용하지 않을 경우 사용  사이트 또는 WML Card간 이동 시, 특정 값을 전달 할 때는 (변수를 전달할 경우) <ANCHOR> 태그 사용 • WML <IMG> 태그 • <IMG> 태그의 “src”는 현재 문서와 다른 문서를 연결하는 External 링크로 사용 가능하며, 다른 곳에 위치한 Image 파일을 현재 문서로 불로 올 때 사용

5. <wml> <card id="first_card"> <do type="accept" label="다음"> <go href="#next_card" /> </do> <p align="center"> 1번 카드 </p> </card> <card id="next_card"> <do type="prev" label="이전"> <prev/> </do> <p align="center"> 2번 카드</p> </card> </wml> 2번 카드 _____________ 이전 2번 카드 _____________ 이전 <DO>와 <GO> 사용 <DO>와 <PREV> 사용 WML Task 수행 Tag • WML 액션 태그 • 특정 Task 작업 수행을 위한 WML 태그 <DO>, <GO>, <PREV>, <POSTFIELD> 등 • WML <DO> 태그 • 사용자 인터페이스 (UI: User Interface)와 관련된 작업 처리  사용자 액션에 따른 작업 수행 • WAP용 휴대폰 단말기의 확인 및 메뉴 버튼을 누를 때, <DO> ~ </ DO> 부분에 설정한 작업 실행 • 작업 타입 : ACCEPT, OPTIONS, HELP, (PREV, DELETE, RESET) • 작업 내용: GO, (PREV, REFRESH, NOOP) 1번 카드 _____________ 다음 1번 카드 _____________ 다음

6. 전화번호 [011xxx0123] <wml> <card id="Go_Get_Example"> <do type="accept"> <go href ="http://127.0.0.1/Get_This.wml TelNo=$TelNO" /> </do> <p> 전화번호: <input name="TelNo" /> </p> </card> </wml> 당신이 입력한 전화번호는 011xxx0123 입니다. <GO> GET 전송방식 사용 HTTP 헤더 URL 필드에 사용자 입력 전화번호 값을 포함하여 전송 Get_This.wml 011xxx0123 전달 WML Task 수행 Tag • WML 이동 태그 • WML <GO> 태그 • WML <GO> 태그는 “href”속성으로 WML 문서 또는 WML Card 로 이동할 주소 명시, “method”속성으로 이동 문서로 사용자 입력값 전달 • WML은 다수개 이상의 주소로 데이터 전송 가능 (HTML의 경우, 입력한 데이터는 하나의 URL로만 전송 가능) • WML <GO> 태그 데이터 전송 방법: GET & POST • GET 방식 : 전송할 변수와 변수 값을 URL에 포함시켜 전송, Default 방식 • GET 방식 <GO> 태그 사용 예

7. 이름 [June] 100자 메모 [입력값이긴데이터전송에는POST] <wml> <card id="Go_Post_Ex"> <do type="accept"> <go href ="http://127.0.0.1/Post_this.wml" method="post"> <postfield name="Buddy" value="$Buddy" /> <postfield name="Memo" value="$Memo" /> </go> </do> <p> 이름 : <input name=Buddy /> <br/> 100자 메모: <input name="Memo" /> <br/> </p> </card> </wml> June이 입력한 100자 메모는 : 입력값이긴데이터전송에는POST •••• <GO> POST 전송방식 사용 HTTP 헤더의 URL 필드와 사용자 입력값 분리 전송 사용자 입력값 전달 WML Task 수행 Tag • WML 이동 태그 • WML <POSTFIELD> 태그 • WML <POSTFIELD> 태그는 <GO> 태그와 함께 사용하여 <GO> 태그의 POST 방식으로 사용자 입력값을 전달 • WML <GO> 태그의 POST 방식: 전송할 변수와 변수 값을 URL과 분리하여 전송 • 주로, 사용자 입력 값의 사이즈가 클 경우 POST 방식 사용 • POST 방식 <GO> 태그와 <POSTFIELD> 사용 예 Post_This.wml

8. 100자메모 [사용자 입력 값을 다시 입력하는 예 제입니다.] _______________ OK Clear <wml> <card> <do type="accept"> <go href ="http://127.0.0.1/memo.wml" method="post"> <postfield name=“Memo" value="$Memo" /> </go> </do> <do type="options" label="Clear"> <refresh> <setvar name="Memo" value=""/> </refresh> </do> <p> 100자 메모: <input name="Memo" /> <br/> </p> </card> </wml> 100자메모 [ ] _______________ OK Clear 입력값 새로고침 사용자 입력값 전달 127.0.0.1 컨텐츠 서버 memo.mwl WML Task 수행 Tag • WML 액션 태그 • WML <REFRESH> 태그 • WML <REFRESH> 태그는 <DO> 태그와 함께 사용하여 WML Card내 변수값 재 설정에 사용 • 주로, 사용자가 입력한 데이터를 “새로 고쳐” 다시 입력할 때 사용 • <REFRESH> 사용 예 메모 재입력

9. <wml> <card id= "card1" ontimer="#card2"> <timer value=“30"/> Call_Stock_Info_Display(); <br/> </card> <card id="card2" ontimer="$card1"> <timer value="50"> Call_Stock_Info_Get(); <br/> </card> </wml> 3초마다 자동이동 IPT 주식 정보 상한: xxx 하한: xxx 현재: xxx _______________ OK Card2 Call_Stock_Info_Get 주식정보 Display 5초마다 자동이동 Card1 주식정보 컨텐츠 서버 Call_Stock_Info_Get WML 이벤트 Tag • WML 시간 Event 처리 태그 • WML <ONTIMER> 태그 • WML <ONTIMER> 태그는 특정 시간이 경과 시, 미리 설정한 작업 자동 수행 기능 • <ONTIMER> 태그의 시간 단위는 0.1초로, 값을 100으로 설정할 경우, 실제 시간은 10초 • <ONTIMER> 사용 예 • 다음 <ONTIMER> 태그 예제는 실시간 변하는 주식 데이터 값 처리를 위해 5 초마다 주식 정보 사이트로 이동하여 Display할 주식 값을 5초 간격으로 변경하는 예제 • 여기서 Call_Stock_Info_Get()은 주식 정보 사이트에 접속하여 새로운 주식 정보를 가져오는 기능을, Call_ Stock_Info_Display()는 주식 정보를 단말기 창에 Display 하는 기능을 수행한다고 가정

10. Second.wml이동 두번째 페이지 _______________ 이전문서 사이트 홈 1… 메뉴 … 2… 메뉴 … _______________ 이전문서 Secod.wml First.wml <wml> <card id="first_card"> <onevent type="onenterbackward"> <go href="http://127.0.0.1/home.wml"/> </onevent> <onevent type="accept"> <go href="http://127.0.0.1/second.wml"/> </onevent> <p align="center">현재페이지</p> </card> </wml> <PREV> 태그로 이전 페이지이동 자동이벤트 발생 사이트홈으로이동 hppt://127.0.0.1/home.wml WML 이벤트 Tag • WML 액션 Event 처리 태그 • WML <ONEVENT> 태그 • WML <ONEVENT> 태그는 type 속성으로 지정한 특정 액션 발생 시, 미리 설정한 작업 자동 수행 기능 • <ONEVENT> 발생 액션 (type 속성 값) • onpick : <SELECT> 태그 사용 시, 사용자가 리스트 중 특정 값을 선택할 때, Event 발생 • onenterforward : <GO> 태그를 사용해서 다른 URL로 이동 시, Event 발생 • onenterbackward : <PREV> 태그 사용해서 이전 URL로 돌아갈 때, Event 발생 • ontimer : <TIMER> 태그와 함께 <TIMER> 태그에서 지정한 시간 경과 시, Event 발생 • <ONEVENT> 사용 예

11. <wml> <card id="select"> <p> 컬러선택 : <select name="color" ivalue="1;3" multiple="true"> <option value="red">red</option> <option value="blue" onpick="#onpick1">blue</option> <option value="green">green</option> <option value="yellow">yellow</option> </select> </p> </card> <card id="onpick1"> <p> 선택한컬러 : <br/> $color </p> </card> </wml> 컬러선택 1* red 2 blue 3*green 4> yellow OK 선택한컬러 : red, green, yellow OK WML Input 처리 Tag • User 선택값 처리 WML 태그 • WML <SELECT> 태그 • WML <SELECT> 태그는 다수 리스트 중 하나 이상을 사용자가 선택할 수 있도록 함 • <SELECT>와 <ONPICK> 이벤트 태그 사용 예 <Select> 사용시, ivalue는 미리 선택할 리스트 아이템 Multiple=true일 경우, 다수개 아이템 선택 가능 <ONPICK> 이벤트 발생 onpick1 카드로 이동

12. WML Input 처리 Tag • User 입력값 처리 WML 태그 • WML <INPUT> 태그 • WML <INPUT> 태그는 사용자로부터 숫자 및 문자 데이터 값을 입력 받는 기능 • <INPUT> 태그 속성 • <INPUT> 태그 Format 속성

13. 계좌번호입력: 287-33- _ ____________ NUM <wml> <card id="input_card"> <do type="accept" level=“Enter"> <go href="print_card"/> </do> <p> 계좌번호입력: <input name="account" format="NNN\-NN\-NNNN"/> </p> </card> <card id="print_card"> <p> 입력값 : <br/> $account <br/> </p> </card> </wml> format 속성에 의해 정해진 규격의 숫자만 입력 가능 계좌번호입력: 287-33- 7629 ____________ Enter 입력값: 287-33- 7629 ____________ OK WML Input 처리 Tag • User 입력값 처리 WML 태그 • WML <INPUT> 태그 예 • <INPUT> 태그의 format 속성 설정으로, “234-56-7890”과 같이 정해진 규격의 숫자 데이터 입력 예제

14. 요약 정리 이번 시간에 소개했던 내용을 정리해 봅시다. WML 페이지 이동 태그에 대해 학습하였습니다. WML 태스크 수행 태그에 대해 학습하였습니다. WML 이벤트 처리 태그에 대해 학습하였습니다. WML 사용자 Input 처리 태그에 대해 학습하였습니다. 다음 시간에는 WML 스크립트 개발에 대하여 학습하시게 될 것입니다.

15. 평가 하기 문제1 페이지간 링크를 지원하는 태그에는 무었이 있는지 말해 보시오 정답은 다음과 같습니다. <A>, <ANCHOR>, <GO> 태그 해설내용: WML에서 페이지간 이동 및 링크를 지원하는 태그에는 <A>, <ANCHOR>, <GO> 태그가 있으며, <GO> 태그는 항상 <DO> 태그와 함께 사용되어, 특정 태스크 발생 시, 사이트 이동을 정의합니다. 문제2 <ONEVENT> 태그의 이벤트에는 무었이 있는지 말해 보시오 정답은 다음과 같습니다. ONPICK, ONENTERFORWARD, ONENTERBACKWARD, ONTIMER 이벤트 해설내용: <ONEVENT> 태그는 <SELECT> 태그와 함께 사용하는 ONPICK 이벤트, 다른 페이지에서 현재 페이지로 재이동할 때 발생하는 ONENTERFORWARD, 이전 페이지로 돌아갈 때 발생하는 ONENTERBACKWARD, 시간 설정에 따른 이벤트 ONTIMER 이벤트가 있습니다.

16. 평가 하기 사용자 입력값 처리 태그는 무엇입니까? 문제3 정답은 다음과 같습니다. <SELECT> 및 <INPUT> 태그 해설내용: <SELECT> 태그는 리스트 중의 사용자가 고른 한가지 값을 받아들이는 역할을 수행하고, <INPUT> 태그는 사용자의 직접 입력값을 받아들이는 역할을 수행합니다.