WML 개발 - II - 산업기술대학교 원격교육연수원
Download
Report
Transcript WML 개발 - II - 산업기술대학교 원격교육연수원
차세대 모바일 디지털 컨텐츠
이번 시간에는...
16. WML 개발 - II
지난 시간에는 WAP 컨텐츠 제작을 위한 마크업 언어인 WML 개발의 첫번째 시간으로, WML의
소개와 정의, WML 문서 구조, WML 사용 첫번째 예제 및 WML의 택스트 포맷 태그와 이미지 처
리 태그에 대해 알아 보았습니다.
이번 시간에는 WML 개발 그 두번째 시간으로, 링크 및 태스크 지원 WML 태그들에 대해서 학
습해 보도록 하겠습니다.
한국산업기술대학교
온라인 기술교육 교재 개발
차세대 모바일 디지털 컨텐츠
학습 목표
16. WML 개발 - II
16 회차 강의에서 다루게 되는 내용은 다음과 같습니다.
WML 개발 - II
이번 장의 학습 목표
한국산업기술대학교
1)
WML 페이지 이동 태그에 대해 알 수 있다.
2)
WML 태스크 수행 태그에 대해 알 수 있다.
3)
WML 이벤트 처리 태그에 대해 알 수 있다.
4)
WML 사용자 Input 처리 태그에 대해 알 수 있다.
온라인 기술교육 교재 개발
차세대 모바일 디지털 컨텐츠
WML 페이지 이동 Tag
16. WML 개발 - II
Navigation을 위한 WML 태그
WML <ANCHOR> 태그
• <ANCHOR> 태그는 <GO> 태그와 함께 사용하여 다른 사이트로의 이동을 위한 하이퍼링크와 하나
의 WML 문서내에서 각 WML Card 간 이동을 지원하는 Internal 링크로 사용
<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
16. WML 개발 - II
Navigation을 위한 WML 태그
WML <A> 태그
• <A> 태그는 <ANCHOR> 와 <GO> 태그의 사용과 그 기능이 같으며, 다른 사이트로의 이동을 위한
하이퍼링크와 하나의 WML 문서내에서 각 WML Card 간 이동을 지원하는 Internal 링크로 사용
•
<A> 태그는 사이트 및 WML Card간 이동시 변수를 사용하지 않을 경우 사용 사이트 또는 WML
Card간 이동 시, 특정 값을 전달 할 때는 (변수를 전달할 경우) <ANCHOR> 태그 사용
WML <IMG> 태그
• <IMG> 태그의 “src” 는 현재 문서와 다른 문서를 연결하는 External 링크로 사용 가능하며, 다른 곳
에 위치한 Image 파일을 현재 문서로 불로 올 때 사용
<wml>
<card>
<p>
사이트 이동
<a href="http://127.0.0.1/page_two.wml"/>
전화번호부
External 링크
<img src="http://127.0.0.1/phone_img.bmp"/>
</a> <br/>
</p>
</card>
</wml>
전화번호부
다른 페이지인 페
이지 2로 이동했
음
다른 사이트로 이동
한국산업기술대학교
다른 사이트에
서 이미지 추출
: External 링크
온라인 기술교육 교재 개발
차세대 모바일 디지털 컨텐츠
WML Task 수행 Tag
16. WML 개발 - II
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)
<wml>
<card id="first_card">
<DO>와 <GO>
<do type="accept" label="다음">
사용
<go href="#next_card" />
</do>
<p align="center"> 1번 카드 </p>
</card>
<DO>와 <card id="next_card">
<do type="prev" label="이전">
<PREV>
<prev/>
사용
</do>
<p align="center"> 2번 카드</p>
</card>
</wml>
한국산업기술대학교
1번 카드
2번 카드
_____________
다음
_____________
이전
1번 카드
2번 카드
_____________
다음
_____________
이전
온라인 기술교육 교재 개발
차세대 모바일 디지털 컨텐츠
WML Task 수행 Tag
16. WML 개발 - II
WML 이동 태그
WML <GO> 태그
• WML <GO> 태그는 “href” 속성으로 WML 문서 또는 WML Card 로 이동할 주소 명시, “method” 속
성으로 이동 문서로 사용자 입력값 전달
• WML은 다수개 이상의 주소로 데이터 전송 가능 (HTML의 경우, 입력한 데이터는 하나의 URL로만 전
송 가능)
• WML <GO> 태그 데이터 전송 방법: GET & POST
• GET 방식 : 전송할 변수와 변수 값을 URL에 포함시켜 전송, Default 방식
GET 방식 <GO> 태그 사용 예
<wml>
<card id="Go_Get_Example">
<GO> GET <do type="accept">
<go href ="http://127.0.0.1/Get_This.wml
전송방식 사용
TelNo=$TelNO" />
</do>
<p>
전화번호:
<input name="TelNo" />
</p>
</card>
</wml>
전화번호
[011xxx0123]
HTTP 헤더 URL 필드에
사용자 입력 전화번호 값 Get_This.wml
을 포함하여 전송
당신이 입력한
전화번호는
011xxx0123 입니
다.
011xxx0123 전달
한국산업기술대학교
온라인 기술교육 교재 개발
차세대 모바일 디지털 컨텐츠
WML Task 수행 Tag
16. WML 개발 - II
WML 이동 태그
WML <POSTFIELD> 태그
• WML <POSTFIELD> 태그는 <GO> 태그와 함께 사용하여 <GO> 태그의 POST 방식으로 사용자 입
력값을 전달
• WML <GO> 태그의 POST 방식: 전송할 변수와 변수 값을 URL과 분리하여 전송
• 주로, 사용자 입력 값의 사이즈가 클 경우 POST 방식 사용
POST 방식 <GO> 태그와 <POSTFIELD> 사용 예
<wml>
<card id="Go_Post_Ex">
<do type="accept">
<go href ="http://127.0.0.1/Post_this.wml"
method="post">
<GO> 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]
HTTP 헤더의 URL 필드와
사용자 입력값 분리 전송 Post_This.wml
June이 입력한
100자 메모는 :
입력값이긴데이
터전송에는POST
••••
사용자 입력값 전달
온라인 기술교육 교재 개발
차세대 모바일 디지털 컨텐츠
WML Task 수행 Tag
16. WML 개발 - II
WML 액션 태그
WML <REFRESH> 태그
• WML <REFRESH> 태그는 <DO> 태그와 함께 사용하여 WML Card내 변수값 재 설정에 사용
• 주로, 사용자가 입력한 데이터를 “새로 고쳐” 다시 입력할 때 사용
<REFRESH> 사용 예
<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
메모 재입력
100자메모
[]
_______________
OK
Clear
사용자 입력값
전달
127.0.0.1
컨텐츠 서버
memo.mwl
온라인 기술교육 교재 개발
차세대 모바일 디지털 컨텐츠
WML 이벤트 Tag
16. WML 개발 - II
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 하는 기능을 수행한다고 가정
<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>
IPT 주식 정보
상한: xxx
하한: xxx
현재: xxx
_______________
OK
주식정보
Display
Card1
Call_Stock_Info_Get
3초마다
자동이동
Card2
Call_Stock_Info_Get
5초마다
자동이동
주식정보
컨텐츠 서버
</wml>
한국산업기술대학교
온라인 기술교육 교재 개발
차세대 모바일 디지털 컨텐츠
WML 이벤트 Tag
16. WML 개발 - II
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> 사용 예
First.wml
Second.wml이동
<wml>
<card id="first_card">
<PREV> 태그로
이전 페이지이동
<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>
두번째 페이지
Secod.wml
_______________
이전문서
사이트 홈
1… 메뉴 …
2… 메뉴 …
_______________
이전문서
hppt://127.0.0.1/home.wml
한국산업기술대학교
온라인 기술교육 교재 개발
차세대 모바일 디지털 컨텐츠
WML Input 처리 Tag
16. WML 개발 - II
User 선택값 처리 WML 태그
WML <SELECT> 태그
• WML <SELECT> 태그는 다수 리스트 중 하나 이상을 사용자가 선택할 수 있도록 함
<SELECT>와 <ONPICK> 이벤트 태그 사용 예
<wml>
<Select> 사용시,
컬러선택
<card id="select">
ivalue는 미리 선택할 리스트 아이템
<p>
Multiple=true일 경우, 다수개 아이템 선택 가능
1* red
2 blue
컬러선택 :
3*green
<select name="color" ivalue="1;3" multiple="true">
4> yellow
<option value="red">red</option>
OK
<option value="blue" onpick="#onpick1">blue</option>
<option value="green">green</option>
<ONPICK> 이벤트 발생
<option value="yellow">yellow</option>
onpick1 카드로 이동
</select>
</p>
선택한컬러 :
</card>
<card id="onpick1">
red, green, yellow
<p>
선택한컬러 : <br/>
$color
OK
</p>
</card>
</wml>
한국산업기술대학교
온라인 기술교육 교재 개발
차세대 모바일 디지털 컨텐츠
WML Input 처리 Tag
16. WML 개발 - II
User 입력값 처리 WML 태그
WML <INPUT> 태그
• WML <INPUT> 태그는 사용자로부터 숫자 및 문자 데이터 값을 입력 받는 기능
• <INPUT> 태그 속성
속성
설명
name
사용자 값을 입력 받을 변수 이름 설정
value
사용자 값 입력 받기 전, 기본 값 설정
format
사용자 입력 값의 Format 설정
emptyok
maxlength
TRUE 또는 FALSE 값 가지며, 사용자 입력 값이 없는
NULL 값 허용 여부 결정
입력 받을 수 있는 데이터 Size 설정
• <INPUT> 태그 Format 속성
속성
A (a)
N
한국산업기술대학교
설명
숫자를 제외한 모든 문자가 올 수 있으며, 소문자(대문
자)를 입력해도 대문자(소문자)로 받아들인다
숫자만을 받아 들인다
X (x)
모든 심볼, 숫자 및 모든 대문자(소문자)를 받아 들인다.
M (m)
모든 심볼, 숫자 및 모든 문자를 받아 들이고, 소문자(대
문자)를 입력해도 대문자(소문자)로 받아 들인다
온라인 기술교육 교재 개발
차세대 모바일 디지털 컨텐츠
WML Input 처리 Tag
16. WML 개발 - II
User 입력값 처리 WML 태그
WML <INPUT> 태그 예
• <INPUT> 태그의 format 속성 설정으로, “234-56-7890”과 같이 정해진 규격의 숫자 데이터 입력 예제
<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>
한국산업기술대학교
계좌번호입력:
287-33- _
____________
NUM
계좌번호입력:
format 속성에
의해 정해진
규격의 숫자만
입력 가능
287-33- 7629
____________
Enter
입력값:
287-33- 7629
____________
OK
온라인 기술교육 교재 개발
차세대 모바일 디지털 컨텐츠
요약 정리
16. WML 개발 - II
이번 시간에 소개했던 내용을 정리해 봅시다.
1)
WML 페이지 이동 태그에 대해 학습하였습니다.
2)
WML 태스크 수행 태그에 대해 학습하였습니다.
3)
WML 이벤트 처리 태그에 대해 학습하였습니다.
4)
WML 사용자 Input 처리 태그에 대해 학습하였습니다.
다음 시간에는 WML 스크립트 개발에 대하여 학습하시게 될 것입니다.
한국산업기술대학교
온라인 기술교육 교재 개발
차세대 모바일 디지털 컨텐츠
평가 하기
문제1
16. WML 개발 - II
페이지간 링크를 지원하는 태그에는 무었이 있는지 말해 보시오
정답은 다음과 같습니다.
<A>, <ANCHOR>, <GO> 태그
해설내용: WML에서 페이지간 이동 및 링크를 지원하는 태그에는 <A>, <ANCHOR>,
<GO> 태그가 있으며, <GO> 태그는 항상 <DO> 태그와 함께 사용되어, 특정 태스크
발생 시, 사이트 이동을 정의합니다.
문제2
<ONEVENT> 태그의 이벤트에는 무었이 있는지 말해 보시오
정답은 다음과 같습니다.
ONPICK, ONENTERFORWARD, ONENTERBACKWARD, ONTIMER 이벤트
해설내용: <ONEVENT> 태그는 <SELECT> 태그와 함께 사용하는 ONPICK 이벤트,
다른 페이지에서 현재 페이지로 재이동할 때 발생하는 ONENTERFORWARD, 이전
페이지로 돌아갈 때 발생하는 ONENTERBACKWARD, 시간 설정에 따른 이벤트
ONTIMER 이벤트가 있습니다.
한국산업기술대학교
온라인 기술교육 교재 개발
차세대 모바일 디지털 컨텐츠
평가 하기
문제3
16. WML 개발 - II
사용자 입력값 처리 태그는 무엇입니까?
정답은 다음과 같습니다.
<SELECT> 및 <INPUT> 태그
해설내용: <SELECT> 태그는 리스트 중의 사용자가 고른 한가지 값을 받아들이는 역
할을 수행하고, <INPUT> 태그는 사용자의 직접 입력값을 받아들이는 역할을 수행합
니다.
한국산업기술대학교
온라인 기술교육 교재 개발